前端模块化

一、对CommonJS&SeaJS&RequireJS的了解

AMD: define + require                           CMD: exports + require

Amd可以做到避免Common.js的 “临时读取并加载文件”，它是提前读取并加载。

而Cmd可以做到的是，“提前读取文件，但在需要再加载”，这样可以避免浏览器临时加载文件的假死，也可以避免提前加载引起的逻辑问题。

都是提前读取：模块的加载都是并行的, 没有区别, 区别在于执行模块的时机, 或者说是解析。

大家叫sea.js懒加载，也就是 “as lazy as possible”

栗子：来自于：https://www.douban.com/note/283566440/（侵删）

define(function(require, exports, module) {
    console.log('require module: main');

    var mod1 = require('./mod1');
    mod1.hello();
    var mod2 = require('./mod2');
    mod2.hello();

    return {
        hello: function() {
            console.log('hello main');
        }
    };
});

SeaJS的执行结果
    require module: main
    require module: mod1
    hello mod1
    require module: mod2
    hello mod2
    hello main
RequireJS的执行结果
    require module: mod1
    require module: mod2
    require module: main
    hello mod1
    hello mod2
    hello main

SeaJS只会在真正需要使用(依赖)模块时才执行该模块。
而RequireJS会先尽早地执行(依赖)模块, 相当于所有的require都被提前了。

二、

就个人来说现在也不怎么用SeaJS，一般都用webpack做处理

js语言本身并不支持模块化，如何实现浏览器中js模块化主流有两种方案：
1. requirejs/seajs: 是一种在线“编译”模块的方案，相当于在页面上加载一个CommonJS/AMD模块格式解释器。这样浏览器就认识了define, exports,module这些东西，也就实现了模块化。
2.browserify/webpack：是一个预编译模块打包的方案，相比于第一种方案，这个方案更加智能。由于是预编译的，不需要在浏览器中加载解释器。你在本地直接写JS，不管是AMD/CMD/ES6风格的模块化，它都能认识，并且编译成浏览器认识的JS。注意： browerify打包器本身只支持Commonjs模块，如果要打包AMD模块，则需要另外的plugin来实现AMD到CMD的转换！

ES6: export + import（由于ES6本身是原生语言支持实现的模块化，但是现代浏览器大多都还未支持，因此必须使用相应的transpiler工具转换成ES5的AMD,CMD模块，再借助于systemjs/requirejs等模块加载工具才能使用。其中ES6的transpiler（代码转换器）一般是用babel，他的作用是将ES6）