RequireJS初探

什么是RequireJS?

/* ---
RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 它非常适合在浏览器中使用，但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
IE 6+ .......... 兼容 ✔
Firefox 2+ ..... 兼容 ✔
Safari 3.2+ .... 兼容 ✔
Chrome 3+ ...... 兼容 ✔
Opera 10+ ...... 兼容 ✔
开始使用或者看看 API。
--- */

http://www.requirejs.cn/home.html

https://github.com/jrburke/requirejs

一句话，它是为了JS模块化而生，是代码逻辑封装的手段，目的是为了减少代码复杂度，提高代码可维护性，满足设计上要求的高内聚+低耦合。

为浏览器环境而生，提高js加载速度。

为什么要有RequireJS?

http://www.requirejs.cn/docs/why.html

遇到的问题

Web sites are turning into Web apps
Code complexity grows as the site gets bigger
Assembly gets harder
Developer wants discrete JS files/modules
Deployment wants optimized code in just one or a few HTTP calls

---- 翻译 ----

1、 web站点转变为 web应用

2、代码复杂度随着站点的变大而增长

3、组装（页面代码）更加困难

4、开发者需要分离js文件和模块

5、部署活动需要优化过的代码存储在一个文件中，或者少些HTTP请求。

解决方案：

Front-end developers need a solution with:

Some sort of #include/import/require
ability to load nested dependencies
ease of use for developer but then backed by an optimization tool that helps deployment

---- 翻译 ----

前端开发者需要一个满足如下条件的解决方案：

1、一些类似 include import require 等经典模块方法

2、有能力加载嵌套依赖

3、对于开发者易用，同时也可以被（用于部署的）优化工具支持。

---- 模块化进化史 -----

原始

-在一个页面还很简单的时候，一个同事添加了一个js函数 function xx

后由于新增需求，另外一个同事处于另外目的，添加了一个相同名称的函数 function xx，内容实现不一样，这样就悲剧了，第一个同事实现的函数被冲掉了，因为它们都定义在全局环境中。

IIFE == imediately invoked function expression 立刻执行函数表达式

组织规范要求，每个人开发的相关内容做为一个模块，必须放在一个IIFE的函数体中，

(fuction(){

funciton XX(){}

})();

这样两个同事开发代码都不会相互影响对方，但是这样定义的函数，不能再全局环境的其他代码中调用，因为在IIFE中的函数只在其函数体中生效，可以作为window一个属性开放出去，

但是其仍然有个缺点，就是两个模块之间的依赖无法体现，如果后面一个同事的开发模块，依赖前一个同事的，这样后面同事写的代码必须在前一个同事代码之后，否则就会调用失败。

module时代

随着web页面内容越来越大，前端代码越来越复杂，且有复杂的代码依赖关系。就需要今天的主题事物出场。

AMD vs CommonJS

模块化标准包括 commonjs和requirejs， requireJS满足AMD标准，为啥采用AMD？

因为主要是此标准为异步加载设计，故适合浏览器远程加载若干模块的js文件。

而commonjs标准，加载文件为同步模式，一个一个执行，适合加载本地文件， nodejs实现满足此标准。

两个标准的详细描述见：

http://www.commonjs.org/

http://www.requirejs.org/docs/whyamd.html

怎么使用RequireJS?

http://requirejs.org/docs/api.html

定义模块，新建一个文件，按照api规范定义模块实现，模块返回为对象：

//Inside file my/shirt.js:
define({
    color: "black",
    size: "unisize"
});

如果还有些定制逻辑，则有可以使用函数，作为模块实现作用域：

//my/shirt.js now does setup work
//before returning its module definition.
define(function () {
    //Do setup work here

    return {
        color: "black",
        size: "unisize"
    }
});

如果模块对其他模块有依赖：

//my/shirt.js now has some dependencies, a cart and inventory
//module in the same directory as shirt.js
define(["./cart", "./inventory"], function(cart, inventory) {
        //return an object to define the "my/shirt" module.
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

模块也可以返回函数：

//A module definition inside foo/title.js. It uses
//my/cart and my/inventory modules from before,
//but since foo/title.js is in a different directory than
//the "my" modules, it uses the "my" in the module dependency
//name to find them. The "my" part of the name can be mapped
//to any directory, but by default, it is assumed to be a
//sibling to the "foo" directory.
define(["my/cart", "my/inventory"],
    function(cart, inventory) {
        //return a function to define "foo/title".
        //It gets or sets the window title.
        return function(title) {
            return title ? (window.title = title) :
                   inventory.storeName + ' ' + cart.name;
        }
    }
);

还可以自定义模块名称

    //Explicitly defines the "foo/title" module:
    define("foo/title",
        ["my/cart", "my/inventory"],
        function(cart, inventory) {
            //Define foo/title object in here.
       }
    );

DEMO

定义了两个模块，和一个app，依赖两个模块，调用并执行：

https://github.com/fanqingsong/code-snippet/tree/master/web

one.js

//Inside one.js:
define(function() {
        return function(title) {
            return console.log('one module called');
        }
    }
);

two.js

//Inside two.js:
define(function() {
        return function(title) {
            return console.log('two module called');
        }
    }
);

app.js

requirejs.config({
    //By default load any module IDs from ./
    baseUrl: './',
});

// Start the main app logic.
requirejs(['one', 'two'],
function   (one, two) {
    one();
    two();
});

demo.html

<html>
<head>
        
        <script data-main="./app.js" src="./require.js"></script>
        <style>

        </style>
</head>
<body>
        <h1>hello world!</h1>
</body>
</html>

打印：