jQuery代码组织（也提示）

我已经开始使用jQuery ..我正在努力了解如何组织代码以及如何正确使用它。目前我使用的代码类似于：jQuery代码组织（也提示）

$(document).ready(function(){ 
    alert('all of the jquery goodness here'); 
    $('#div1').click(function(){ 
    /* some manipulation stuff here */ 
    }) 
})

在dom加载之后是否有更好的方式来处理大量点击处理程序？

还有一些链接，我可以得到有关jQuery中代码布局的信息？我一直在四处寻找源代码，但不能找到什么有用的东西..

谢谢你们

[编辑]

另一种快速的问题，而我记得 - 它是不好的做法，使用类似的东西：

function clickedevent(){ 
    $('').toggle or other random jquery function 
}

来源

2011-11-12 mary_berry

你是什么意思的“我可以布置代码”？ –

比什么好？那是你想要附加它们的时候。

您可以将点击处理程序函数本身移动到命名函数中，而不是内联它。

有时您可以重构并使用函数发生器来创建点击处理函数并减少代码的重复。

来源

2011-11-12 22:53:40

所以我应该把.click（）处理函数放在$（document）.ready（）函数之外？ –

@broomgb完全取决于;你可以像在Niels的回答中那样。或者将它们作为DOM ready功能内的函数。保持它们不覆盖其他功能是最重要的部分。 –

我如何做到这一点是这样的：

// Short notation for document ready 
$(function(){ 
    // Bind the button to the method 
    $(".button").click(methods.handlers.clickhandler1); 
}); 

var methods = { 
    handlers : { 
     clickhandler1 : function(){ 
      alert("Y"); 
     } 
    }, 
    method1 : function(){ 

    } 
    // ETC 
};

我把它整理成某种结构JSON对象和不要做。点击（函数（）{}）下一个下一个之后，因为那时你找不到你实际上对准备文件有什么约束，更多概述。

如果你wan't了解更多关于jQuery的结构，使自己的插件，请阅读以下网址http://docs.jquery.com/Plugins/Authoring

来源

2011-11-12 22:55:13 Niels

一个非常简单的方法：

$(document).ready(function() { 
    assignSomeClicks(); 
    assignSomeOtherClicks(); 
}); 

function assignSomeClicks() { 
    $('#div1').click(function(){ 
     ... 
    }); 
} 

function assignSomeOtherClicks() { 
    ... 
}

当然，纯粹主义者会流泪的

，并Java的人会死的看到这一点。

但是，当您开始想要组织您的JS代码时，基本上有2个选项。这一个让风格保持简单和一致，或者采取全面的对象方法。

这些天，我使用“模块”（插件）与“init”函数处理处理程序。在antoher JS

$(document).ready(function() { 
    fileExplorer.init(); 
    fileViewer.init(); 
    taskAssignation.init(); 
});

文件

var fileExplorer = new function() { 
    // local stuff 
    var thing; 
    function buggify() {...}; 
    // public stuff 
    this.init = function() { 
     $('.fileExplorer').click(function() {...}); 
    } 
}

注意，它需要一定的标准和假设，如类名和这样。我很喜欢“新功能”的语法，因为它是最简单的，在我看来，这是一种新的功能，有私人和公共的东西

如果你做jquery插件，很容易，你可以绑定你的东西在插件本身。

然后你可以开始使用（function（）{}）（），但是我不完全理解闭包的概念，但还没有足够舒适的使用它们。

来源

2011-11-13 00:06:59 roselan

查看Module Pattern来编写更多面向对象的JavaScript。在这个话题上，优秀的阅读是Douglas Crawford's 'Javascript: The Good Parts'。这里是模块模式与jQuery的一个例子：“回报”下

一切公共（也可以通过其他对象的称呼）和高于一切：

window.MyCoolModule= (function(){ 
    var doCoolStuff = function(){ 
     alert("badumpumbishh") 
    } 
    var otherCoolStuff = function(){ 
     alert("someone..moved their..mouse.. all over me"); 
    } 

    var superSecretPrivateFunction = function(){ 
     // come at me bro 
    } 

    return{ 
     somePublicFunction: function(){ 
      //hello, i can be called by other people 
     }, 

     init: function(){ 
      $("#div1") 
        .bind("click", doCoolStuff) 
        .bind("mouseover", otherCoolStuff) 

      $("#div2") 
       .bind("click", superSecretPrivateFunction) 
     } 
    } 
}()) 

$(function(){ 
    MyCoolModule.init() 
})

一些要注意的事项这是私人（不能在该物体外部访问）

我疙瘩我都绑定到一个代码块“.bind（‘点击’， doCoolStuff）”，所以一眼就可以看到所有的您的模块正在侦听的DOM元素。
我给事件处理程序的描述性名称，而不是将它们定义在线 '.bind（ “点击”，函数（）{}'。
用户“绑定（ “点击”，...） '而不是'.click'，尽管他们做的是也是如此，这是因为jQuery也有一个'unbind'方法这很有用，而且我喜欢镜像相互命名但是更重要的原因是你可以命名空间函数，也就是你可以做'bind（“click.customNamespace，...）'。这样做的理由是，你以后可以做'.trigger（”click.customNamespace“），它会仅触发那些名称空间事件而不是所有的单击事件。
你可以在init里面做$ .ready检查而不是在外面 - 问题的编码风格。

来源

2011-11-13 00:30:52 Naren

jQuery代码组织（也提示）

回答

相关问题