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

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

5 голосов
/ 27 июля 2010

  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");  
                }  
            }  
        });  
    }  
}

    }

Ответы [ 4 ]

2 голосов
/ 28 июля 2010

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

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

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

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

1 голос
/ 28 июля 2010

Во-первых, присвоение 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.

0 голосов
/ 28 июля 2010

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

0 голосов
/ 28 июля 2010

Мои мысли:

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

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

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

...