一、对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)