文件和目录结构

在开始构建你的系统之前首先要确定如何组织你的文件和目录。而文件和目录的结构取决于项目类型。

最佳实践

抛开项目类型不说，总有一些适合于 JavaScript 文件和目录结构公用的最佳实践。

一个文件只包含一个对象

• 概念：特指每个 JavaScript 文件应该只包含一个 JavaScript 对象的代码。
• 优点：
  1. 代码更易维护。
  2. 降低了多个开发者同时修改同一文件的风险。
  3. 文件数量增加，版本管理工具进行文件合并时冲突的可能性越小（文件越少，单个文件的内容越多，版本管理工具进行文件合并时冲突的可能性越大）。
• 初衷：让不同的人维护各自不同的文件，即完全避免多人维护一个文件的可能。

相关文件用目录分组

• 概念：将多个相关联的对象放在同一个目录下。
• 优点：有助于开发者更容易定位功能（所在的代码片段）。

保持第三方代码的独立

• 概念：任何不是你写的，或者不是由你维护的代码都应当独立于项目工程（source control）之外。
• 推荐：不引入第三方 JavaScript 类库，直接从 CDN 加载它们。或者把这些文件单独放置在项目工程中的一个目录里。

确定创建位置

1. 创建后的 JavaScript 文件应该放置在一个完全独立的目录里，而且不应该提交到项目工程中。
2. 网站应当是可配置的，使用编译后的目录而非源码目录。
3. 不要把编译后的内容提交到源码工程里，这一点非常重要。因为编译后的内容都是成型的“工件”，在最终被部署上线之前，可能会被很多人多次编译创建。部署过程应当通过编译产生可最终发布的成品，是可以直接部署上线的。

保持测试代码的完整性

• 概念：JavaScript 测试代码也应该一并提交到项目工程中的一个显眼位置。这可以让开发人员很容易注意到遗漏测试的情况。

【说明】：如果你当前工作的 JavaScript 文件是一个大型网站或者 Web 应用的一部分而不是一个独立的 JavaScript 项目，文件和目录的结构会有些许不同。整个目录结构基本上由服务端使用的框架所决定。即使整个项目结构随着项目的不同千变万化，但始终会有一个单独的目录专门用来放置前端代码。

基本结构

JavaScript 目录下边放置如下三个主要目录是当下一种很流行的做法。

• build：用来放置最终构建后的文件，理想情况下这个目录不应该提交。
• src：用来放置所有的源文件，包括用来进行文件分组的子目录。
• test 或者 tests：用来放置所有的测试文件。通常包含一些同源代码目录一一对应的子目录或文件。

【说明】：开发环境和构建过程很大程度上决定着你会选择什么形式的结构。好的结构可以缩短构建的时间并且不会让开发人员在新建文件的时候纠结于放在哪里。

案例展示

• CSSLint：

csslint
    .git
    build
    demos
    lib
    npm
    release
    src
        cli
        core
        formatters
        rules
        worker
    tests
        core
        css
        formatters
        rules

【说明】：build 目录从不提价，release 目录始终包含最新的稳定发行版本。src 目录下有一些按功能划分的子目录。tests 目录的结构同 src 目录的结构一一对应，所以 src/core/CSSLint.js 的测试代码即为 test/core/CSSLint.js。

• jQuery

jquery
    build
    speed
    src
        ajax
        sizzle
        ajax.js
        attributes.js
        callbacks.js
        core.js
        css.js
        data.js
        deferred.js
        dimensions.js
        effects.js
        event.js
        exports.js
        intro.js
        manipulation.js
        offset.js
        outro.js
        queue.js
        sizzle-jquery.js
        support.js
        tracersing.js
    test
        data
        qunit
        unit
            ajax.js
            attributes.js
            callbacks.js
            core.js
            css.js
            data.js
            deferred.js
            dimensions.js
            effects.js
            event.js
            exports.js
            manipulation.js
            offset.js
            queue.js
            selector.js
            support.js
            tracersing.js

【说明】：jQuery 也采用了这种结构形式。唯一不同的就是 jQuery 把所有的源文件都直接放在了 src 目录下，而没有每个都建立子目录。子目录保留用来存放核心特性的资源文件和扩展。test 目录存放着跟源文件名字相同的测试代码。比如 src/ajax.js 的测试代码即为 test/ajax.js。

• Dojo

dojo
    _base
    _firebug
    cldr
    data
    date
    dnd
    fx
    io
    nls
    resources
    rpc
    selector
    store
    tests
        _base
        cache
        data
        date
        dnd
        html
        io
        nls
        resources
        store
        uacss
        window
    aspect.js
    back.js
    ...
    cache.js
    dojo.js
    date.js

【说明】：Dojo 采用了同 jQuery 类似的结构心事。其中一个很大的不同是 Dojo 根目录下没有 src。而是顶层目录直接包含了所有的源文件和用来放置核心特性资源文件和扩展的子目录。tests 目录跟顶级目录的结构一一对应，所以 tests/date.js 即 date.js 的测试代码。

• YUI

yui3
    build
    sandbox
    src
        anim
        app
        arraysort
            js
                arraysort.js
            meta
            tests
                arraysort.html
            build.properties
            build.xml
            HISTORY.md
            README.md
        async-queue

【说明】：修改了原有的结构，src 目录下的每个子目录都代表一个单独的 YUI 模块，而且每个模块都至少有以下 4 个子目录。

• docs：文档目录。
• js：JavaScript 源文件目录。
• 用以存放模块元信息（metadata）。
• tests：用以存放模块的测试代码。

【注意】：YUI 中的测试文件可能是 HTML 文件或者 JavaScript 文件，因此准确地说 tests 目录中包含的内容因模块而异。一般而言，至少有一个文件的名称同源文件一致。所以 tests/arraysort.html 或者 tests/arraysort.js 就是 js/arraysort.js 的测试代码。