JavaScript 模块化 – 云加博客

随着网站逐渐变成”互联网应用程序“，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等……开发者不得不使用软件工程的方法，管理网页的业务逻辑。
Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。
目前模块化加载可以有两个选择：
1.seajs:CMD规范
2.requirejs：AMD规范

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
类似的还有 CommonJS Modules/2.0 规范，是 BravoJS 在推广过程中对模块定义的规范化产出。
还有不少⋯⋯这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。
目前这些规范的实现都能达成浏览器端模块化开发的目的。
区别：
1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。

// CMD
define(function(require, exports, module) {
var a = require(‘./a’)
a.doSomething()
// 此处略去 100 行
var b = require(‘./b’) // 依赖可以就近书写
b.doSomething()
// …
})// AMD 默认推荐的是
define([‘./a’, ‘./b’], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
…
})
虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，但 RequireJS 的作者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。

下面给出AMD和CMD的具体代码：

AMD：

使用require.js的第一步，是先去官方网站下载最新版本。

下载后，假定把它放在js子目录下面，就可以加载了。

<script data-main="js/main.js" src="js/require.js"></script>

注意：这里需要使用data-main来引入初始化文件。

main：

require.config({
    //By default load any module IDs from scripts/app
    baseUrl: 'js',
    //except, if the module ID starts with "lib"
    paths: {
        jquery: 'jquery',
        changep:"changep"
    },
    // load backbone as a shim
    shim: {
        'mytip': {
            //The underscore script dependency should be loaded before loading backbone.js
            deps: ['jquery'],
            // use the global 'Backbone' as the module name.
            exports: 'mytip'
        }
    }
});
define(["require","jquery","mytip","changep"],function(r,j,m,c){
    c.hello();
});

这里说一下：
require.config用来配置一些参数，它将影响到requirejs库的一些行为。
require.config的参数是一个JS对象，常用的配置有baseUrl，paths等。
baseUrl：配置路径
paths：复杂的路径为了方便引用。可以在这里进行转换
shim：如果有依赖关系，可以在这里建立，方便引用

changep.js文件：
define(["jquery"],function($){
    return{
        hello:function(){
            $("p").html("嘿嘿");
        }
    }
});

在上面的js代码中。return了一个函数，这样可以在main中通过注入的对象来进行调用。

mytip.js文件：
define(["jquery"],function($){
    $("div").html("嘿嘿");
});

在上面的js代码中，直接进行执行，因为在main中，已经注入了当前文件。

下面来看一下CMD代码：
首先我们必须说一下。5分钟入手我没做到。。。（官方如是说）
引入文件:

<script src="js/sea.js"></script>

配置config文件：
seajs.config({
    base: "./js/",
    alias:{
        "jquery":"jquery-3.0.0.min.js"
    }
});
// 加载入口模块
seajs.use("main");
在这里我们并不难看到，base配置基本路径，alias配置负责映射
而seajs.use("main");入口模块
注意：依赖就近

main.js文件：
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
    var index = require.async("index",function(index_callback){
        //console.log(index_callback.sayOld());
        //console.log(index_callback.heihie());
    });
});
async：这里代表异步方式，同步则是不需要加，当然也不会存在回调

index.js文件：
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
    var $ = require("jquery");
    $ = jQuery;
    var obj = {};
    //exports.say = function(){
    //    console.log(sayOld());
    //};
    obj.sayOld =function (){
        return $("div").html("嘿嘿");
    };
    obj.heihie = function (){
        return "嘿嘿";
    };
    obj.sayOld();
    module.exports = obj;
});
这里需要介绍两个细节：
exports：如果需要导出一个函数则使用这个
module：如果需要导出多个函数使用这个。
在这里。我不得不吐槽一下seajs，我在之前的项目中使用了一次，遇到了各种问题，当然，可能是我对sea.js使用还不到位。
以上则是我总结的关于模块化，有问题欢迎留言。
以上参考：阮一峰博客，玉伯博客

发表回复 取消回复

发表回复取消回复