Как писать и поддерживать в чистоте, легко понять Javascript & JQuery

Question

Кто-нибудь есть предложение о прибирать следующий код:

/* Example code only to demonstrate the type of code my app contains and 
will contain more of */ 

$("#filter").click(function() 
{ 
    if($(this).attr("value") != "" && $(this).attr("value").length > charLimit) 
     filterable($(this).attr("value")) 
}); 

$("#filter").keyup(function() 
{ 
    if($(this).attr("value") == "" || $(this).attr("value").length <= charLimit) 
    { 
     $('.alphablock').show(300); 
     $('.filterable a').removeClass("selected"); 
    } 
}); 

$('.slidingForm fieldset').hide(); 

$('.slidingForm fieldset:first').find(':input:first').focus(); 

/* Snip More Code */ 

В основном я в конечном итоге с большим количеством кода для каждого из моих элементов, это это просто море, это работает, но это будет только больше и труднее поддерживать и развивать.

Я хорошо знаю PHP, и обычно я прибегаю к классам, чтобы сохранить код в поддерживаемых блоках. Но я не уверен в лучшем подходе к jQuery и общей функциональности javascript, которая используется совершенно по-другому, поскольку она менее процедурная, и функции могут быть вызваны в любой момент в зависимости от взаимодействия пользователя.

Благодаря Jake

Answer 1

Попробуйте использовать один из фреймворков, как Backbone.js, AngularJS организовать код в пути Model-View-Controller.

Answer 2

Sidenote: использовать http://documentcloud.github.com/backbone/

Мое мнение:

$filter = $("#filter") 
$filter.click(function(){ 
    var value = $(this).attr("value"); 
    if(value != "" && value.length > charLimit){ 
    filterable(value) 
    } 
}); 

$filter.keyup(function(){ 
    var value = $(this).attr("value"); 
    if(value == "" || value.length <= charLimit){ 
     $('.alphablock').show(300); 
     $('.filterable a').removeClass("selected"); 
    } 
}); 

$('.slidingForm fieldset').hide(); 
$('.slidingForm fieldset:first').find(':input:first').focus(); 

Answer 3

Я хотел бы сделать 2 вещи в общем:

• Посмотрите на общую функциональность, которая может быть переработана в конвенции на основе плагинов и попытайтесь их повторно использовать.
• Раздайте основной вид его собственный JS файл и просто загрузить, что, когда вид нагрузки, чтобы держать вещи в чистоте

Answer 4

Это все довольно чисто, но есть некоторые вещи, которые я делал в последнее время, что я бы рекомендовать:

(function($) 
{  
    "use strict"; 

    // Variables declared here are scoped to this function, won't polute 
    // the globals. 

    $(function() 
    { 
     // Do your work here. 
    }); 

})(jQuery); 

Приложение к вашему скрипту внутри самой функции позволяет объявлять переменные, которые не будут созданы глобально. Если определено, чтобы сделать что-то глобальное, присвоить его window объекту:

window.something = {}; 

Я бы также рассмотреть вопрос о выделении свои объекты JQuery переменной, нет смысла делать повторные выборы одних и тех же объектов, например $("#filter"), $(this) и т. Д.

Последнее, что бы предпочло префикс имени тега, если вы используете селектор классов, например. $("div.slidingForm") вместо $(".slidingForm"). Хотя вы можете не заметить разницы на простых страницах, на более сложных страницах, где вы делаете много вариантов, лучше разрешить браузеру вытаскивать подмножество элементов, используя собственный метод , чтобы он соответствовал селектору классов, вместо того, чтобы пересечь всю DOM.

Answer 5

Я стараюсь избегать связывания, вместо того, чтобы помещать onClick в элемент напрямую, если нет необходимости в динамической привязке. Мои файлы HTML обычно представляют собой просто пустую структуру, например.

<div id="content"> 
    <div id="sidebar" /> 

Такая вещь. Я заполняю их динамически с помощью jQuery.Мои файлы js организованы в функциональные области, такие как страницы или классы объектов, и все они имеют соответствующие файлы css. Я в конечном итоге с файловыми структурами, такими как:

js/basicstuff.js 
js/someclass/class1.js 
css/basicstuff.css 
css/someclass/class1.css 

Прототип js файлов и их переопределение разделяют пространство имен, тоже. Я написал некоторые довольно большие приложения таким образом, но отдельные файлы js и css легко найти и обновить, так как они отделены функциональными областями приложения (например, интро, настройка, stage1, main, end, settings - для игра).

Я также использую массив динамических групп функций, когда это имеет смысл - например, я использую глобальную функцию $(window).resize(), которая выполняет итерацию через массив, вызывая функцию изменения размера страницы, которая может потребоваться. Когда страница переходит к следующей, я просто удаляю этот элемент в массиве (хотя это не помешает чем-либо оставить его, просто требуется несколько дополнительных циклов вычисления, чтобы игнорировать).

Answer 6

Я не знаю, что вы подразумеваете под опекой. Тем не менее, я считаю, что в качестве аргументов всегда стоит передать FunctionDeclaration. Это имеет два преимущества:

1. Поскольку декларации JavaScript поднимаются, то FunctionDeclaration может быть помещен в конце сценария и его можно ссылаться в качестве аргумента.
2. Именованные Function s всегда легче отлаживать, потому что трассировка стека отображает точную функцию, которая забрасывает ошибку.

Он написал бы ваш код более вдоль этих линий:

(function() { 
    /* Example code only to demonstrate the type of code my app contains and 
    will contain more of */ 

    var filter = $("#filter"); 
    filter.click(filterClick); 
    filter.keyup(filterKeyup); 
    $('.slidingForm fieldset').hide(); 
    $('.slidingForm fieldset:first').find(':input:first').focus(); 

    /* Snip More Code */ 

    function filterClick() { 
     if ($(this).attr("value") !== "" && $(this).attr("value").length > charLimit) { 
      filterable($(this).attr("value")); 
     } 
    } 

    function filterKeyup() { 
     if ($(this).attr("value") === "" || $(this).attr("value").length <= charLimit) { 
      $('.alphablock').show(300); 
      $('.filterable a').removeClass("selected"); 
     } 
    } 
})(); 

Answer 7

Вы можете поместить все в «пространстве имен» объект, а затем вызывать методы (свойства, которые являются функциями) для инициализации обработчиков событий. Это держит вещи очень хорошо организованными.

$(document).ready(function() { 
    filter.initialize('filter'); 
}); 

var filter = (function() { 
    var initialize = function (filterID) { 
     var that = $('#' + filterID); 

     that.click(function() { 
      var value = that.val(); 

      if (value != '' && value.length > charLimit) { 
       filterable(value); 
      } 
     }); 

     that.keyup(function() { 
      var value = that.val(); 

      if (value == '' || value.length <= charLimit) { 
       $('.alphablock').show(300); 
       $('.filterable a').removeClass("selected"); 
      } 
     }); 

     $('.slidingForm fieldset').hide(); 
     $('.slidingForm fieldset:first').find(':input:first').focus(); 
    }; 

    return { 
     initialize: initialize 
    }; 
});