《高级前端3.1》JavaScript模块化——AMD,CMD,Seajs,RequireJS

2009年，Nodejs 诞生！这个服务器端的 JavaScript 采用模块化的写法很快征服了浏览器端的 JSer 。牛人们纷纷仿效，各种写模块的规范也是层出不穷。CommonJS 想统一前后端的写法，AMD 则认为自己是适合浏览器端的。国内的 CMD 非常成熟。

核心内容：
1.模块化的概念解读； 2.Seajs 的应用； 3.RequireJS 的应用；

 LABjs、RequireJS、SeaJS 哪个最好用？为什么？ https://www.zhihu.com/question/20342350

 

模块化的概念解读

本课时介绍模块化的概念以及AMD规范和CMD规范。

模块化起源于node.js

RequireJS，AMD规范；

SeaJs，CMD规范；（淘宝大牛写的，在RequireJS之后出的）

 

Seajs 入门

seajs三种载入的方式：seajs.use，require和require.async

http://blog.csdn.net/lfsf802/article/details/26758567

官网入门教程

http://seajs.org/docs/#quick-start 

 

seajsDemo代码：

index.html

<script type="text/javascript" src="js/sea.js"></script>
<script type="text/javascript">
// seajs 的简单配置
seajs.config({
    base: "./js/",
    alias: {
        "jquery": "jquery.js"
    }
})

// 加载入口模块
seajs.use("main");
</script>

main.js

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

    require('jquery');
    console.log(1111);
    //同步
    // var index = require('index');
    // console.log(index.doSomething());
    //异步async
    var index = require.async('index', function(index_callback){
        console.log(index_callback);
    });
});

index.js

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

    // 通过 exports 对外提供接口
    // exports.doSomething = function(){
     //    console.log('my ok');
     // }

    var a = {};
    
    a.doSomething = function(){
        console.log('my ok');
    }
    a.doSomething2 = function(){
        console.log('my ok2');
    }

    // 或者通过 module.exports 提供整个接口
    module.exports = a;

});

 

 

RequireJS 入门

快速理解RequireJs：

http://www.tuicool.com/articles/jam2Anv

定义模块：

http://www.requirejs.cn/docs/api.html#define

 

requirejsDemo代码：

index.html

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

main.js

define(['require'], function (require) {
    require(['index', 'test'], function(index, test){
        console.log(index.init());
        console.log(test());
    })
});

index.js

define(function () {
    var index = {};
    index = {
        init: function(){
            console.log('index init');
        }
    }
    return index;
});

test.js

define(function () {
    var init = function(){
        console.log('test init');
    }
    return init;
});