如何组织所有的jQuery脚本

Question

我正在使用数十个 jQuery 插件和我的自己编写的 jQuery 脚本，在每一个脚本中我都有如下代码：

$(document).ready(function() 
{ .... }

如何将所有脚本组织到一个集中的位置，并且不需要在脚本中多次使用$(document).ready(function()。

有何想法？

更新

one.js

$(document).ready(function() {   
$("#aspnetForm").validate({
rules: 
{
<%=txtVisitName.UniqueID %>: 
 {
      maxlength:1, 
       required: true
  },
 deleted lines......

two.js

$(document).ready(function() {
$("#btnSubmit").click(function(event) { 
    if ($("#aspnetForm").valid())
        SaveVisitBasicPage();
     deleted lines......

three.js

$(document).ready(function() {
function initMenu() {
    $('#menu ul').hide();
    $('#menu li a').click(
     deleted lines......

four.js

$(document).ready(function() {

$("#ctl00_cphMaster_txtPurpose").NobleCount('#count01',
{ 
    max_chars: 25,
    on_negative: 'go_red',
    on_positive: 'go_green',
    block_negative: true                     
    deleted lines......

我应该如何组织以上的.js文件呢？你可以看到上面有多个$(document).ready(function()。

- Nick Kahn

Answer 1

将所有功能打包成一个对象，通过将其附加到 window 上，在文件之间进行链式传递。然后传递一个匿名函数，在文档准备就绪时启动所有基于 DOM 的事件。

例如：

文件1：

var MyObj = {
     init: function(){
     // do stuff
     },
     otherStuff: function(){
     // do other stuff
     }
}

window.MyObj = MyObj

文件2

var MyObj = window.MyObj;

MyObj.moreStuff = function(){
     //do more stuff
}

$(document).ready(function(){
     MyObj.init();
     MyObj.moreStuff();
})

每个页面加载只应该有一个document.ready()执行。否则你就做错了。

希望这能帮到你。

- wookiehangover

---

我已经更新了我的问题，如何组织文件？我对你的示例代码不太清楚。感谢任何帮助。 - Nick Kahn

Answer 2

你考虑过使用Require.js依赖管理框架吗？

- Chuck Conway

Answer 3

不确定这是否有帮助，但这是我如何组织我的jQuery脚本的方法。我们的应用程序有80K行JavaScript代码，所以组织结构很重要，这种方法对我们来说效果不错。

自执行函数模式：Self Executing Function pattern

- steve_c

---

我应该指出，您应该在那个问题中向下滚动，查看我发布的答案。 - steve_c