如何编写和保持清洁，容易理解的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功能的最佳方法，因为它的程序更简单，功能可以随时调用，具体取决于用户交互，因此完全不同。

感谢 杰克

Answer 1

尝试使用JavaScript框架中的一个，像Backbone.js的，AngularJS来组织模型 - 视图 - 控制器路码。

Answer 2

旁注：使用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

我会做两件事一般：

• 寻找共同的功能，可重构为依据约定的插件和尝试重用这些。
• 给每一个主要观点是自己的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对象的变量，有相同的对象，如无1点进行重复选择$("#filter")，$(this)等

如果您使用的是类选择器，则最好使用前缀标记名称。 $("div.slidingForm")而不是$(".slidingForm")。尽管您可能没有注意到简单页面上的任何差异，但在您正在进行大量选择的更复杂页面上，最好允许浏览器使用本机getElementsByTagName方法提取一部分元素以匹配类选择器，而不必遍历整个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文件很容易找到和更新，因为它们由应用程序的功能区域分隔开来（例如介绍，设置，阶段1，主要，结束，设置 - 对于游戏）。

我还使用了一组动态函数组，当它有意义时 - 例如，我使用全局函数$(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 
    }; 
});