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

这一切都很干净，但我最近会做的一些建议我会推荐：

(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")。虽然您可能没有注意到简单页面上的任何差异，但是在您进行大量选择的更复杂页面上，最好允许浏览器使用本机getElementsByTagName方法提取元素的子集以匹配类选择器打开，而不必遍历整个DOM。

Answer 2

我不知道你的意思是什么。但是，我认为传递 FunctionDeclaration 作为参数总是一个好主意。这样做有两个好处：

由于JavaScript声明已悬挂， FunctionDeclaration 可以放在脚本末尾，可以作为参数引用。
命名Function总是更容易调试，因为堆栈跟踪将显示引发错误的确切函数。

它会在这些方面编写更多代码：

(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 3

尝试使用其中一个Javascript框架，如Backbone.js，AngularJS，以模型 - 视图 - 控制器方式组织代码。

Answer 4

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

我会做两件事：

寻找可以重构为基于约定的插件的常用功能，并尝试重用这些功能。
给每个主要视图它自己的js文件，并在视图加载时加载它以保持清洁

Answer 6

我倾向于避免绑定，而是直接将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文件很容易找到和更新，因为它们被应用程序的功能区域分隔开（例如intro，setup，stage1，主，结尾，设置 - 游戏）。

我还使用动态函数组的数组 - 例如，我使用全局$(window).resize()函数，它遍历一个数组，调用可能需要的页面定义的大小调整函数。当页面转换到下一个页面时，我只是删除了数组中的那个元素（虽然它不会让任何东西留下来，只需要几个额外的计算周期来忽略）。

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

如何写和保持干净，易于理解Javascript＆amp; jQuery的

7 个答案: