我的老板仍然在谈论他们编写模块化代码(C语言)的时代，并抱怨现在的代码是多么糟糕!据说程序员可以在任何框架中编写程序集。总有一种策略可以克服代码组织。最基本的问题是那些把java脚本当作玩具的人，从来没有尝试去学习它。

在我的例子中，我在UI主题或应用程序屏幕的基础上编写js文件，使用适当的init_screen()。使用适当的id命名约定，我确保在根元素级别上没有名称空间冲突。在不引人注目的window.load()中，我根据顶级id将内容绑定起来。

我严格使用java脚本闭包和模式来隐藏所有私有方法。这样做之后，再也没有遇到属性/函数定义/变量定义冲突的问题。然而，当与团队一起工作时，通常很难执行同样的严格性。

在我的上一个项目- viajeros.com -我使用了几种技术的组合。我不知道如何组织一个网页应用程序——Viajeros是一个面向旅行者的社交网站，它有明确定义的部分，所以很容易将每个部分的代码分开。

我根据站点部分使用名称空间模拟和延迟加载模块。在每个页面加载我声明一个“vjr”对象，并总是加载一组常用函数到它(vjr.base.js)。然后每个HTML页面用简单的语句决定哪些模块需要:

vjr.Required = ["vjr.gallery", "vjr.comments", "vjr.favorites"];

Vjr.base.js从服务器获取并执行每一个gzip文件。

vjr.include(vjr.Required);
vjr.include = function(moduleList) {
  if (!moduleList) return false;
  for (var i = 0; i < moduleList.length; i++) {
    if (moduleList[i]) {
      $.ajax({
        type: "GET", url: vjr.module2fileName(moduleList[i]), dataType: "script"
      });
    }
  }
};

每个“模块”都有这样的结构:

vjr.comments = {}

vjr.comments.submitComment = function() { // do stuff }
vjr.comments.validateComment = function() { // do stuff }

// Handlers
vjr.comments.setUpUI = function() {
    // Assign handlers to screen elements
}

vjr.comments.init = function () {
  // initialize stuff
    vjr.comments.setUpUI();
}

$(document).ready(vjr.comments.init);

鉴于我有限的Javascript知识，我知道一定有更好的方法来管理这个，但到目前为止，它为我们工作得很好。

您可以将脚本分解为单独的文件进行开发，然后创建一个“发布”版本，在这个版本中，您可以将它们全部塞在一起，并在上面运行YUI Compressor或类似的程序。

按需加载所需的代码。谷歌对他们的Google .loader做了类似的事情

我尽量避免在HTML中包含任何javascript。所有代码都封装在类中，每个类都在自己的文件中。对于开发，我有单独的<script>标记来包含每个js文件，但是它们被合并到一个更大的包中用于生产，以减少HTTP请求的开销。

通常，我会为每个应用程序创建一个“main”js文件。所以，如果我正在编写一个“调查”应用程序，我将有一个名为“survey.js”的js文件。这将包含进入jQuery代码的入口点。我在实例化期间创建jQuery引用，然后将它们作为参数传递到我的对象中。这意味着javascript类是“纯粹的”，不包含任何对CSS id或类名的引用。

// file: survey.js
$(document).ready(function() {
  var jS = $('#surveycontainer');
  var jB = $('#dimscreencontainer');
  var d = new DimScreen({container: jB});
  var s = new Survey({container: jS, DimScreen: d});
  s.show();
});

我还发现命名约定对于可读性很重要。例如:我在所有jQuery实例前加'j'。

在上面的例子中，有一个类叫做DimScreen。(假设这会使屏幕变暗并弹出一个警告框。)它需要一个div元素，它可以放大以覆盖屏幕，然后添加一个警告框，因此我传入一个jQuery对象。jQuery有一个插件概念，但它似乎有局限性(例如，实例不是持久的，不能访问)，没有真正的好处。因此，DimScreen类将是一个标准的javascript类，只是恰好使用jQuery。

// file: dimscreen.js
function DimScreen(opts) { 
   this.jB = opts.container;
   // ...
}; // need the semi-colon for minimizing!


DimScreen.prototype.draw = function(msg) {
  var me = this;
  me.jB.addClass('fullscreen').append('<div>'+msg+'</div>');
  //...
};

我已经使用这种方法构建了一些相当复杂的应用程序。

几天前，37Signals的人发布了一个RTE控件。他们制作了一个库，使用一种预处理器命令捆绑javascript文件。

我一直在用它来分离我的JS文件，然后在最后合并为一个。这样我就可以分离关注点，并且最终只有一个文件通过管道(gzip的)。

在模板中，检查是否处于开发模式，并包含单独的文件，如果处于生产模式，则包括最后一个文件(您必须自己“构建”)。