javascript - 普遍接受的 JavaScript 代码组织最佳实践

Question

随着像 jQuery 这样的 JavaScript 框架使客户端 Web 应用程序更丰富、更实用，我开始注意到一个问题......

你到底是如何保持这种组织的？

将所有处理程序放在一个位置并为所有事件编写函数？
创建函数/类来包装您的所有功能？
写得像疯了似的，只是希望它能取得最好的效果？
放弃并获得新的职业？

我提到了 jQuery，但它实际上是任何一般的 JavaScript 代码。我发现随着一行行开始堆积起来，管理脚本文件或找到您要查找的内容变得越来越困难。很可能我发现的最大问题是有很多方法可以做同样的事情，很难知道哪一种是当前普遍接受的最佳实践。

对于让.js文件与应用程序的其余部分一样美观和整洁的最佳方式，是否有任何一般性建议？或者这只是IDE的问题？那里有更好的选择吗？

编辑

这个问题更多地是关于代码组织而不是文件组织。有一些非常好的合并文件或拆分内容的例子。

我的问题是：目前普遍接受的组织实际代码的最佳实践方式是什么？与页面元素交互并创建彼此不冲突的可重用代码的方式是什么，甚至是推荐的方式？

有些人列出了名称空间，这是一个好主意。还有哪些其他方法，更具体地说是处理页面上的元素并保持代码的组织和整洁？

score 184 · Accepted Answer

如果 javascript 内置命名空间会更好，但我发现像 Dustin Diaz在这里描述的那样组织东西对我有很大帮助。

var DED = (function() {

    var private_var;

    function private_method()
    {
        // do stuff here
    }

    return {
        method_1 : function()
            {
                // do stuff here
            },
        method_2 : function()
            {
                // do stuff here
            }
    };
})();

我将不同的“命名空间”，有时是单独的类放在单独的文件中。通常我从一个文件开始，当一个类或命名空间变得足够大以保证它时，我将它分离到它自己的文件中。使用工具来组合所有文件以进行生产也是一个绝妙的主意。

score 89 · Accepted Answer

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

通常，我将为每个应用程序创建一个“主”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 类将是一个恰好使用 jQuery 的标准 javascript 类。

// 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>');
  //...
};

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

score 39 · Accepted Answer

你可以将你的脚本分解成单独的文件进行开发，然后创建一个“发布”版本，你可以把它们塞在一起，然后在上面运行YUI Compressor或类似的东西。

score 27 · Accepted Answer

受早期帖子的启发，我制作了一份随WysiHat （changelog 提到的 RTE）分发的Rakefile和供应商目录的副本，并进行了一些修改，包括使用JSLint进行代码检查和使用YUI Compressor进行压缩。

这个想法是使用Sprockets（来自 WysiHat）将多个 JavaScript 合并到一个文件中，使用 JSLint 检查合并文件的语法，并在分发前使用 YUI Compressor 将其缩小。

先决条件

Java 运行时
红宝石和耙子宝石
您应该知道如何将 JAR 放入Classpath

现在做

下载Rhino并将 JAR ("js.jar") 放到你的类路径中
下载YUI Compressor并将 JAR (build/yuicompressor-xyz.jar) 放到你的类路径中
下载WysiHat并将“vendor”目录复制到 JavaScript 项目的根目录
下载JSLint for Rhino并将其放在“vendor”目录中

现在在 JavaScript 项目的根目录中创建一个名为“Rakefile”的文件，并在其中添加以下内容：

require 'rake'

ROOT            = File.expand_path(File.dirname(__FILE__))
OUTPUT_MERGED   = "final.js"
OUTPUT_MINIFIED = "final.min.js"

task :default => :check

desc "Merges the JavaScript sources."
task :merge do
  require File.join(ROOT, "vendor", "sprockets")

  environment  = Sprockets::Environment.new(".")
  preprocessor = Sprockets::Preprocessor.new(environment)

  %w(main.js).each do |filename|
    pathname = environment.find(filename)
    preprocessor.require(pathname.source_file)
  end

  output = preprocessor.output_file
  File.open(File.join(ROOT, OUTPUT_MERGED), 'w') { |f| f.write(output) }
end

desc "Check the JavaScript source with JSLint."
task :check => [:merge] do
  jslint_path = File.join(ROOT, "vendor", "jslint.js")

  sh 'java', 'org.mozilla.javascript.tools.shell.Main',
    jslint_path, OUTPUT_MERGED
end

desc "Minifies the JavaScript source."
task :minify => [:merge] do
  sh 'java', 'com.yahoo.platform.yui.compressor.Bootstrap', '-v',
    OUTPUT_MERGED, '-o', OUTPUT_MINIFIED
end

如果您正确完成了所有操作，您应该能够在控制台中使用以下命令：

rake merge-- 将不同的 JavaScript 文件合并为一个
rake check-- 检查代码的语法（这是默认任务，因此您只需键入rake）
rake minify-- 准备你的 JS 代码的缩小版

关于源合并

require使用 Sprockets，您可以包含（或）其他 JavaScript 文件的 JavaScript 预处理器。使用以下语法从初始文件（名为“main.js”，但您可以在 Rakefile 中更改）中包含其他脚本：

(function() {
//= require "subdir/jsfile.js"
//= require "anotherfile.js"

    // some code that depends on included files
    // note that all included files can be in the same private scope
})();

接着...

查看 WysiHat 提供的 Rakefile 来设置自动化单元测试。好东西：）

现在来回答

这并不能很好地回答原始问题。我知道并且对此感到抱歉，但我已将其发布在这里，因为我希望它可能对其他人有用，以组织他们的混乱。

我解决这个问题的方法是尽可能多地进行面向对象的建模，并将实现分离到不同的文件中。那么处理程序应该尽可能短。单例的例子List也很好。

和命名空间......好吧，它们可以被更深层次的对象结构所模仿。

if (typeof org === 'undefined') {
    var org = {};
}

if (!org.hasOwnProperty('example')) {
    org.example = {};
}

org.example.AnotherObject = function () {
    // constructor body
};

我不是模仿的忠实拥护者，但是如果您有许多想要移出全局范围的对象，这会很有帮助。

score 18 · Accepted Answer

代码组织需要采用约定和文档标准：
1. 物理文件的命名空间代码；

Exc = {};

2. 在这些命名空间 javascript 中分组类；
3.设置原型或相关函数或类来表示现实世界的对象；

Exc = {};
Exc.ui = {};
Exc.ui.maskedInput = function (mask) {
    this.mask = mask;
    ...
};
Exc.ui.domTips = function (dom, tips) {
    this.dom = gift;
    this.tips = tips;
    ...
};

4. 设置约定以改进代码。例如，将其所有内部函数或方法分组到其对象类型的类属性中。

Exc.ui.domTips = function (dom, tips) {
    this.dom = gift;
    this.tips = tips;
    this.internal = {
        widthEstimates: function (tips) {
            ...
        }
        formatTips: function () {
            ...
        }
    };
    ...
};

5. 制作命名空间、类、方法和变量的文档。必要时还要讨论一些代码（一些FIs和Fors，它们通常实现代码的重要逻辑）。

/**
  * Namespace <i> Example </i> created to group other namespaces of the "Example".  
  */
Exc = {};
/**
  * Namespace <i> ui </i> created with the aim of grouping namespaces user interface.
  */
Exc.ui = {};

/**
  * Class <i> maskdInput </i> used to add an input HTML formatting capabilities and validation of data and information.
  * @ Param {String} mask - mask validation of input data.
  */
Exc.ui.maskedInput = function (mask) {
    this.mask = mask;
    ...
};

/**
  * Class <i> domTips </i> used to add an HTML element the ability to present tips and information about its function or rule input etc..
  * @ Param {String} id - id of the HTML element.
  * @ Param {String} tips - tips on the element that will appear when the mouse is over the element whose identifier is id <i> </i>.
  */
  Exc.ui.domTips = function (id, tips) {
    this.domID = id;
    this.tips = tips;
    ...
};

这些只是一些提示，但这对组织代码有很大帮助。记住你必须有纪律才能成功！

score 13 · Accepted Answer

遵循良好的 OO 设计原则和设计模式有助于使您的代码易于维护和理解。但我最近发现的最好的事情之一是信号和插槽，也就是发布/订阅。查看http://markdotmeyer.blogspot.com/2008/09/jquery-publish-subscribe.html 以获得简单的 jQuery 实现。

这个想法在其他语言中很好地用于 GUI 开发。当代码中某处发生重大事件时，您会发布一个全局合成事件，其他对象中的其他方法可能会订阅该事件。这可以很好地分离物体。

我认为 Dojo（和 Prototype？）有这种技术的内置版本。

另请参阅什么是信号和插槽？

score 12 · Accepted Answer

在我之前的工作中，我能够成功地将Javascript 模块模式应用于 Ext JS 应用程序。它提供了一种创建封装良好的代码的简单方法。

score 11 · Accepted Answer

Dojo 从一开始就有模块系统。事实上，它被认为是 Dojo 的基石，是把它粘在一起的粘合剂：

使用模块 Dojo 可以实现以下目标：

Dojo 代码和自定义代码的命名空间 ( dojo.declare()) — 不污染全局空间，与其他库和用户的非 Dojo 感知代码共存。
按名称 ( ) 同步或异步加载模块dojo.require()。
通过分析模块依赖关系来自定义构建，以创建单个文件或一组相互依赖的文件（所谓的层），以仅包含您的 Web 应用程序所需的内容。自定义构建也可以包括 Dojo 模块和客户提供的模块。
基于 CDN 的对 Dojo 和用户代码的透明访问。AOL 和 Google 都以这种方式使用 Dojo，但一些客户也为他们的自定义 Web 应用程序这样做。

score 9 · Accepted Answer

查看JavasciptMVC。

你可以：

将您的代码拆分为模型、视图和控制器层。
将所有代码压缩到一个生产文件中
自动生成代码
创建和运行单元测试
还有更多...

最重要的是，它使用 jQuery，因此您也可以利用其他 jQuery 插件。

score 9 · Accepted Answer

我的老板还谈到他们写模块化代码（C语言）的时候，并抱怨现在的代码多么糟糕！据说程序员可以在任何框架中编写汇编。总有一种策略可以克服代码组织。基本问题在于那些将 java 脚本视为玩具并且从不尝试学习它的人。

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

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

score 9 · Accepted Answer

我很惊讶没有人提到 MVC 框架。我一直在使用Backbone.js来模块化和解耦我的代码，它非常宝贵。

那里有很多这样的框架，其中大多数也非常小。我个人的看法是，如果您要编写的不仅仅是几行 jQuery 来实现华丽的 UI 内容，或者想要一个丰富的 Ajax 应用程序，那么 MVC 框架将使您的生活更轻松。

score 8 · Accepted Answer

“像疯了似的写，只是希望效果最好？”，我见过这样的项目，它仅由 2 个开发人员开发和维护，一个包含大量 javascript 代码的巨大应用程序。最重要的是，您可以想到的每个可能的 jquery 函数都有不同的快捷方式。我建议他们将代码组织为插件，因为这是类、模块、命名空间......和整个宇宙的 jquery 等价物。但事情变得更糟了，现在他们开始编写插件来替换项目中使用的 3 行代码的每一种组合。就我个人而言，我认为 jQuery 是魔鬼，它不应该用在有大量 javascript 的项目中，因为它鼓励你变得懒惰，不要考虑以任何方式组织代码。我宁愿阅读 100 行 javascript，也不愿阅读 40 个链接的 jQuery 函数的一行（我我不是在开玩笑）。与流行的看法相反，将 javascript 代码组织成与命名空间和类等效的内容非常容易。这就是 YUI 和 Dojo 所做的。如果你愿意，你可以很容易地自己动手。我发现 YUI 的方法更好更高效。但是，如果您想编写任何有用的东西，您通常需要一个支持片段的好编辑器来补偿 YUI 命名约定。

score 7 · Accepted Answer

我为每一件我真的不需要在屏幕上实例化多次的东西创建单例，为其他所有东西创建一个类。所有这些都放在同一个文件的同一个命名空间中。一切都用 UML 状态图进行注释和设计。javascript 代码没有 html，因此没有内联 javascript，我倾向于使用 jquery 来最大限度地减少跨浏览器问题。

score 6 · Accepted Answer

在我的上一个项目-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 知识，我知道必须有更好的方法来管理它，但直到现在它对我们来说效果很好。

score 6 · Accepted Answer

以 Jquery 为中心的 NameSpace 方式组织您的代码可能如下所示......并且也不会与 Prototype、Ext 等其他 Javascript API 发生冲突。

<script src="jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

var AcmeJQ = jQuery.noConflict(true);
var Acme = {fn: function(){}};

(function($){

    Acme.sayHi = function()
    {
        console.log('Hello');
    };

    Acme.sayBye = function()
    {
        console.log('Good Bye');
    };
})(AcmeJQ);

// Usage
//          Acme.sayHi();
// or
// <a href="#" onclick="Acme.sayHi();">Say Hello</a>


</script>

希望这可以帮助。

score 6 · Accepted Answer

OO + MVC 的良好原则对于管理复杂的 javascript 应用程序肯定有很长的路要走。

基本上，我将我的应用程序和 javascript 组织为以下熟悉的设计（从我的桌面编程时代一直存在到 Web 2.0）

JS OO 和 MVC

图片上的数值说明：

代表我的应用程序视图的小部件。这应该是可扩展的并且整齐地分离出来，从而产生 MVC 试图实现的良好分离，而不是将我的小部件变成意大利面条代码（相当于在 Web 应用程序中将一大块 Javascript 直接放入 HTML 中）。每个小部件通过侦听其他小部件生成的事件来通过其他小部件进行通信，从而减少小部件之间可能导致无法管理的代码的强耦合（还记得在脚本标签中到处添加指向全局函数的 onclick 的日子吗？呃......）
对象模型表示我想在小部件中填充并来回传递给服务器的数据。通过将数据封装到其模型中，应用程序成为数据格式不可知论者。例如：虽然在 Javascript 中这些对象模型自然大部分被序列化和反序列化为 JSON，但如果服务器以某种方式使用 XML 进行通信，我需要更改的只是更改序列化/反序列化层，而不一定需要更改所有小部件类.
管理业务逻辑和与服务器通信的控制器类 + 偶尔缓存层。该层控制与服务器的通信协议，并将必要的数据放入对象模型中
类被整齐地包装在它们相应的命名空间中。我相信我们都知道 Javascript 中的全局命名空间有多糟糕。

过去，我会将文件分离成自己的 js，并使用常见的做法在 Javascript 中创建 OO 原则。我很快发现的问题是编写 JS OO 有多种方法，不一定所有团队成员都有相同的方法。随着团队变得越来越大（在我的情况下超过 15 人），这变得复杂，因为面向对象的 Javascript 没有标准方法。同时我不想编写自己的框架并重复一些我确信比我解决的更聪明的人的工作。

jQuery 作为 Javascript 框架非常好，我喜欢它，但是随着项目变得越来越大，我显然需要为我的 web 应用程序提供额外的结构，特别是为了促进标准化 OO 实践。对于我自己，经过几次实验，我发现 YUI3 Base and Widget ( http://yuilibrary.com/yui/docs/widget/和http://yuilibrary.com/yui/docs/base/index.html ) 基础设施提供正是我需要的。我使用它们的几个原因。

它提供命名空间支持。真正需要 OO 和整洁的代码组织
它支持类和对象的概念
它提供了一种将实例变量添加到类的标准化方法
它巧妙地支持类扩展
它提供了构造函数和析构函数
它提供渲染和事件绑定
它具有基本的小部件框架
现在，每个小部件都能够使用基于标准事件的模型相互通信
最重要的是，它为所有工程师提供了 Javascript 开发的 OO 标准

与许多观点相反，我不一定非要在 jQuery 和 YUI3 之间进行选择。这两者可以和平共处。虽然 YUI3 为我的复杂 Web 应用程序提供了必要的 OO 模板，但 jQuery 仍然为我的团队提供了易于使用的 JS 抽象，我们都喜欢和熟悉。

使用 YUI3，我设法创建 MVC 模式，方法是将 Base 扩展为 Model 的类、将 Widget 扩展为 View 的类以及当然你有控制器类进行必要的逻辑和服务器端调用。

小部件可以使用基于事件的模型相互通信，并根据预定义的接口监听事件并执行必要的任务。简单来说，将 OO + MVC 结构放到 JS 中，对我来说是一种享受。

只是免责声明，我不为雅虎工作！并且只是一个试图解决原始问题提出的相同问题的架构师。我认为如果有人找到等效的 OO 框架，这也可以。原则上，这个问题也适用于其他技术。感谢所有提出 OO 原则 + MVC 的人，让我们的编程日子更易于管理。

score 5 · Accepted Answer

我使用Dojo 的包管理（dojo.require和dojo.provide）和类系统（dojo.declare它也允许简单的多重继承）将我的所有类/小部件模块化到单独的文件中。这不仅可以使您的代码井井有条，而且还可以让您延迟/及时加载类/小部件。

score 3 · Accepted Answer

3

使用继承模式来组织大型 jQuery 应用程序。

于 2011-03-27T22:04:42.120 回答

score 3 · Accepted Answer

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

从那以后我一直在使用它来分离我的 JS 文件，然后最后将它们合并为一个。这样我就可以分离关注点，最后，只有一个文件通过管道（gzipped，不少于）。

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

score 3 · Accepted Answer

创建假类，并确保可以将任何可以放入有意义的单独函数中的东西都这样做。还要确保大量评论，不要编写意大利面条式代码，而是将其全部放在部分中。例如，一些描述我的理想的废话代码。显然，在现实生活中，我还编写了许多基本上包含其功能的库。

$(function(){
    //Preload header images
    $('a.rollover').preload();

    //Create new datagrid
    var dGrid = datagrid.init({width: 5, url: 'datalist.txt', style: 'aero'});
});

var datagrid = {
    init: function(w, url, style){
        //Rendering code goes here for style / width
        //code etc

        //Fetch data in
        $.get(url, {}, function(data){
            data = data.split('\n');
            for(var i=0; i < data.length; i++){
                //fetching data
            }
        })
    },
    refresh: function(deep){
        //more functions etc.
    }
};

score 2 · Accepted Answer

对于 JavaScript 组织一直在使用以下

所有 javascript 的文件夹
页面级 javascript 获取其自己的与页面名称相同的文件。ProductDetail.aspx 将是 ProductDetail.js
在库文件的 javascript 文件夹中，我有一个 lib 文件夹
将相关的库函数放在您要在整个应用程序中使用的 lib 文件夹中。
Ajax 是我移动到 javascript 文件夹之外并获得它自己的文件夹的唯一 javascript。然后我添加两个子文件夹客户端和服务器
客户端文件夹获取所有 .js 文件，而服务器文件夹获取所有服务器端文件。

score 2 · Accepted Answer

我认为这可能与 DDD（领域驱动设计）有关。我正在开发的应用程序虽然缺少正式的 API，但确实通过服务器端代码（类/文件名等）给出了这样的提示。有了这个，我创建了一个顶级对象作为整个问题域的容器；然后，我在需要的地方添加了命名空间：

var App;
(function()
{
    App = new Domain( 'test' );

    function Domain( id )
    {
        this.id = id;
        this.echo = function echo( s )
        {
            alert( s );
        }
        return this;
    }
})();

// separate file
(function(Domain)
{
    Domain.Console = new Console();

    function Console()
    {
        this.Log = function Log( s )
        {
            console.log( s );
        }
        return this;
    }
})(App);

// implementation
App.Console.Log('foo');

score 2 · Accepted Answer

您可以使用jquery mx（在 javascriptMVC 中使用），它是一组允许您使用模型、视图和控制器的脚本。我在一个项目中使用过它，并帮助我创建了结构化的 javascript，由于压缩，脚本大小最小。这是一个控制器示例：

$.Controller.extend('Todos',{
  ".todo mouseover" : function( el, ev ) {
   el.css("backgroundColor","red")
  },
  ".todo mouseout" : function( el, ev ) {
   el.css("backgroundColor","")
  },
  ".create click" : function() {
   this.find("ol").append("<li class='todo'>New Todo</li>"); 
  }
})

new Todos($('#todos'));

如果您对视图和模型部分不感兴趣，也可以只使用 jquerymx 的控制器端。

score 2 · Accepted Answer

我正在使用这个小东西。它为 JS 和 HTML 模板提供了“包含”指令。它完全消除了混乱。

https://github.com/gaperton/include.js/

$.include({
    html: "my_template.html" // include template from file...
})
.define( function( _ ){ // define module...
    _.exports = function widget( $this, a_data, a_events ){ // exporting function...
        _.html.renderTo( $this, a_data ); // which expands template inside of $this.

        $this.find( "#ok").click( a_events.on_click ); // throw event up to the caller...
        $this.find( "#refresh").click( function(){
            widget( $this, a_data, a_events ); // ...and update ourself. Yep, in that easy way.
        });
    }
});

score 1 · Accepted Answer

你的问题是去年年底困扰我的一个问题。不同之处 - 将代码交给从未听说过私有和公共方法的新开发人员。我必须构建一些简单的东西。

最终结果是一个小型（大约 1KB）框架，可以将对象文字转换为 jQuery。语法在视觉上更容易扫描，如果你的 js 变得非常大，你可以编写可重用的查询来查找使用的选择器、加载的文件、依赖的函数等。

在这里发布一个小框架是不切实际的，所以我写了一篇带有示例的博客文章（我的第一篇。那是一次冒险！）。欢迎您来看看。

对于这里有几分钟检查的任何其他人，我将非常感谢您的反馈！

推荐使用 FireFox，因为它支持对象查询示例的 toSource()。

干杯!

亚当

score 0 · Accepted Answer

0

延迟加载您需要的代码。谷歌用他们的google.loader做这样的事情

于 2008-12-22T22:43:57.913 回答

score 0 · Accepted Answer

我使用受 Ben Nolan 行为启发的自定义脚本（遗憾的是，我再也找不到指向此的当前链接）来存储我的大部分事件处理程序。例如，这些事件处理程序由元素 className 或 Id 触发。例子：

Behaviour.register({ 
    'a.delete-post': function(element) {
        element.observe('click', function(event) { ... });
    },

    'a.anotherlink': function(element) {
        element.observe('click', function(event) { ... });
    }

});

我喜欢即时包含我的大部分 Javascript 库，除了那些包含全局行为的库。为此，我使用Zend Framework 的 headScript() 占位符助手，但您也可以使用 javascript使用Ajile 动态加载其他脚本。

score 0 · Accepted Answer

你没有提到你的服务器端语言是什么。或者，更准确地说，您在服务器端使用的框架（如果有的话）。

输入法，我在服务器端组织东西，然后把它们全部放到网页上。该框架的任务不仅是组织每个页面必须加载的 JS，而且还组织与生成的标记一起使用的 JS 片段。您通常不希望多次发出此类片段 - 这就是为什么将它们抽象到该代码框架中以处理该问题的原因。:-)

对于必须发出自己的 JS 的结束页面，我通常会发现生成的标记中存在逻辑结构。这种本地化的 JS 通常可以在这种结构的开始和/或结束处组装。

请注意，这些都不能免除您编写高效 JavaScript 的责任！:-)

javascript - 普遍接受的 JavaScript 代码组织最佳实践

28 回答 28

Related

Reference