Javascript的中央管理

Question

如何在更大的网站上管理Javascript内容？我特别努力处理各种$（document）.ready（），并且需要处理所有这些id（$（'＃id'））字符串。我想将所需的$（document）.ready（）与使用它们的每个“模块”组合起来，但是这会导致可见的速度下降，因为我没有在每个页面的底部都放上javascript。

什么是一个很好的方式来管理一个相当大的网站的Javascript有效，并保持易于维护？

Answer 1

我不知道你的环境是什么样的。但我想把剧本分成不同的部分。所有针对特定页面或函数的代码都应该放在JavaScript文件中。

接下来是很好的命名约定和标准。

最后但最重要的是，记录一切。当页面发生变化时，您应该能够查看您的文档可能会影响的脚本。以同样的方式，文档应该能够告诉你什么脚本在什么页面上做什么。

我知道这不是对您的问题的直接回答，但从长远来看，这将使维护更加容易。特别是如果你有很多人在同一个项目上工作。

当涉及到可维护的代码时，命名约定又是非常重要的。无论是在HTML和JavaScript部分。另外，javascript变量和函数应该尽可能地反映html代码。例如，如果你有一个表单id =“banana”，不要命名变量持有它“苹果”。

Answer 2

这是我在这个时候发生的事情，我希望你能帮上忙。负责每个模块的有序调用方法，并且在一个事件中被调用。 什么水平的情况下，你需要在另一个之前

// Call the initial organizer of each modules 
var modules = (function(){ 

    var level_0 = new Array(); 
    var level_1 = new Array(); 
    var level_2 = new Array(); 

    return { 
     add: function(method, level){ 
      var returned = true; 
      try{ 
       switch(level){ 
        case 0: 
         level_0.push(method); 
         break; 
        case 1: 
         level_1.push(method); 
         break; 
        case 2: 
         level_2.push(method); 
         break; 
       }; 
      }catch(ex){returned=false;} 
      return returned; 
     }, 
     callAll: function(){ 
      var returned = true; 
      var returned_0 = true; 
      var returned_1 = true; 
      var returned_2 = true; 
      try{ 
       returned_0 = this.call(0); 
       returned_1 = this.call(1); 
       returned_2 = this.call(2); 
      }catch(ex){returned=false;} 
      return ((returned && returned_0 && returned_1 && returned_2) || false); 
     }, 
     call: function(level){ 
      var returned = true; 
      var level_call = null; 
      try{ 
       switch(level){ 
        case 0: 
         level_call = level_0; 
         break; 
        case 1: 
         level_call = level_1; 
         break; 
        case 2: 
         level_call = level_2; 
         break; 
       }; 

       if (level_call!=null) 
        for(xcall in level_call) 
         level_call[xcall].call(); 

      }catch(ex){returned=false;} 
      return returned; 
     } 
    }; 
})(); 

//in each file JS with ini method in module 
modules.add(function(){alert("method file/module A in level 1 a");}, 1); 
modules.add(function(){alert("method file/module B in level 1 b");}, 1); 
modules.add(function(){alert("method file/module C in level 0 a");}, 0); 
modules.add(function(){alert("method file/module D in level 0 b");}, 0); 
modules.add(function(){alert("method file/module E in level 2 a");}, 2); 
modules.add(function(){alert("method file/module F in level 2 b");}, 2); 
modules.add(function(){alert("method file/module G in level 2 c");}, 2); 
modules.add(function(){alert("method file/module H in level 0 c");}, 0); 


// single call to the event ready 
$(function(){ 
    //call all 
    modules.callAll(); 

    // OR 

    //call in other order 
    modules.call(0); 
    modules.call(2); 
    modules.call(1); 
}); 

Answer 3

看像Dojo和ExtJS的图书馆如何管理这个的想法调用任何模块。他们使用像require（）这样的函数来动态获取他们依赖的脚本，并确保这些公共库不会被加载两次。他们定义事件来处理负载依赖性，例如，你可以在某些地方重构大量的.ready（）语句，而不是重要的库初始化，然后发出一个或多个事件来指示某些事情已准备好，其他库用作它们的初始化提示。

一旦多个编码人员针对相同的代码库编码，我喜欢做的一件事就是使用HTML/DOM作为相互契约，并通过选择器与代码绑定，而不是允许内联事件。

例如，如果您编写的日历控件的img标签上显示日历的onclick，则会让其他两个库非常难以出现并关闭“日历控制即将弹出“事件。另一方面，如果库查找CSS className为“calendarPick”的项目并将事件附加到它们上，那么您将保留打开其他库的权限，以便与您共享的相同DOM执行相同的操作，但很少或根本没有协调编码器（编写需要编码器协调的代码往往会减慢编码速度并增加破坏的可能性）。

如果同一个Calendar库提供了一些事件来关闭它，可以帮助其他编码人员完成他们的工作，因为如果事件已经存在，他们可能会将其写入干净;如果不是，他们更可能破解它，并使代码库在这个过程中变得更加灵活。

如果您提供单例方法（例如Calendar.getCalendars（）），则可以帮助您更轻松地完成工作，因为它可以防止人们编写自己的这些方法版本，将实现锁定到特定的一组类名，DOM顺序，甚至更脆弱的情况，这样每个人的版本都可以继续工作。

Answer 4

如果你正在寻找一个写好和干净的JS的好资源，你可能想看看道格拉斯克罗克福德的书JavaScript: The Good Parts，因为它包含许多有用的资源，包括如何良好构造代码的提示。

当我编写具有大量JS的应用程序时，通常会创建一个对象（以免混淆全局名称空间），然后将其分为包含各种应用程序数据和行为位的子对象。一个小例子：

var PandaApp = {}; 
PandaApp.setup = {}; 
PandaApp.setup.init = function init() { 
    // do something neat 
}; 
PandaApp.utils = {}; 
PandaApp.utils.showMessage = function showMessage(msg) { 
    // do some jQuery goodness or something 
}; 

这样，我有我的所有它的数据，一切的只有一个全局对象是整齐的命名空间中的在我选择的方式。