Предложения по организации кода JavaScript / Проверка кода

Question

1. Я работаю на большом сайте, который имеет много кастомов (js для конкретной страницы). Существует один файл main.js и page-specific.js. Есть ли лучший подход, который может использовать следующий шаблон?

2. Как я могу перефакторизовать несколько методов, которые используют ajax?

3. В настоящее время я присваиваю все встроенные события onclick, такие как onclick = "MYSITE.message.send ... - есть ли лучший способ создания нескольких $ (" кнопка # ") ) .click (function () {}); похоже на дополнительную работу ...

   var MYSITE = MYSITE ? MYSITE: {};
   var MYSITE {  
   bookmark: {
       add: function(contentId, userId) {  
           var data = {  
               contentId: contentId,  
               userId: userId  
           };  
           $.ajax({  
               url: "/rest/bookmarks/",  
               type: "post",  
               data: data,  
               complete: function(response) {  
                   if (response.error) {  
                       alert(response.error);  
                   } else {  
                       alert("success");  
                   }  
               }  
           });  
       }  
   },  
   message: {  
       /* <a onclick="MYSITE.message.send('1234', '1234');" href="javascript:void(0);">BOOKMARK</a> */  
       send: function(contentId, userId) {  
           var data = {  
               contentId: contentId,  
               userId: userId  
           };  
           $.ajax({  
               url: "/rest/bookmarks/",  
               type: "post",  
               data: data,  
               complete: function(response) {  
                   if (response.error) {  
                       alert(response.error);  
                   } else {  
                       alert("success");  
                   }  
               }  
           });  
       }  
   }  
   

   }

Answer 1

Вы можете использовать метод делегата jquery если у вас есть элемент div с тегами

<div id="bookmarks">
<a href="#">BOOKMARK</a>
</div>

$("div#bookmarks").delegate("a", "click", function(){
    MYSITE.message.send('1234', '1234');
});

и вы можете динамически получать «contentId» и «userId».

Answer 2

Во-первых, присвоение onclick="" напрямую является плохой практикой.Использование метода jQuery click() не так уж много работы, но даже если бы оно было, оно чище и гораздо более рекомендуется.Он хранит вашу HTML-разметку отдельно от вашей функциональности JS и облегчает дальнейшие изменения.Это самое первое, что вы должны сделать рефакторингом.

Что я делаю с моим JS, так это создаю один JS-файл основной библиотеки со всеми моими функциями классов / ядра.Затем я использую встроенные теги <script> на определенных страницах для вызова метода, который перехватывает ссылки на функции.

В глобальном файле app.js у меня будет функция:

function initLinksOnPageX() {
  $('#button').click(function() { MYSITE.message.send('1234', '1234'); });
  /* ... setup any other events ... */
}

В теле страницы:

<script type="text/javascript">
  $(initLinksOnPageX);
</script>

Опять же, это избавляет вашу разметку от любого кода JS, поэтому обновления, связанные с JS, происходят в одном файле (или меньше).При такой настройке вам не нужно строго требовать JS-файлы для конкретной страницы, хотя с организационной точки зрения это может иметь смысл - я не знаю точно, насколько велик ваш JS.

Answer 3

Я бы хотел обернуть свою пользовательскую функциональность в плагин jquery.

Answer 4

Мои мысли:

1. Это зависит от многих факторов, но если код конкретной страницы "большой", то, вероятно, лучше держать его отдельно.Если, однако, это всего лишь несколько строк, а мы не говорим о тысячах страниц, то объединить все это в main.js может не быть большой проблемой.

2. Неочень хорошо знаком с ajax, поэтому я перейду к комментариям о том, как «рефакторинг».

3. Если вы можете зацикливать свое назначение событий onclick, то НЕ делать их встроенными будет спасу вас много работы.