前端模块加载规范

模块加载规范:CommonJS、AMD 和 CMD,而框架Node.js、RequireJS 和 Seajs 分别实现了上述规范。

没有这些模块加载规范时,加载模块是一种什么情况?
只能在HTML中通过<script>来引入js文件,同时无法区分函数来源于哪个js文件,而且要用过多全局变量。

使用模块加载后,这些问题都解决了。

CommonJS:

Node.js使用的规范,同步加载JS脚本。在服务端没问题,因为文件都在磁盘上。但因为浏览器的特性,需要异步加载js,否则会失去响应。所以该规范无法在浏览器直接使用。

浏览器不兼容CommonJS的根本原因,在于缺少四个Node.js环境的变量:module、exports、require、global

参考:浏览器加载 CommonJS 模块的原理与实现

AMD:

Angular.js、require.js使用的规范,异步加载JS。前置加载,就是在写主逻辑之前必须指定所有的依赖,并且等待所有的依赖被异步加载完后执行回调函数。依赖的模块同时被加载,没有顺序依赖。

AMD优点:AMD是前置依赖,依赖项最好是已知必须要依赖的,这样可以一次性将必须用到的JS脚本全部加载,后续可以直接使用,不需要再遍历整个函数体查找依赖,提高性能。

AMD缺点:开发者必须显式指明依赖,这会使开发成本变大,比如当代码达到几百上千行的时候,忽然发现需要增加一个依赖,不得不回到函数顶端将依赖添加到数组中。

require(['module1', 'module2'], function(m1, m2){

//主回调逻辑

m1.test();

m2.test();

})

CMD:

Sea.js使用的规范。就近加载。Sea.js遇到依赖后,只会去下载JS文件,等待所有的依赖下载完成后,再从头开始执行主逻辑。因此被依赖模块的执行顺序和书写顺序完全一致。

优点:开发便利,动态加载,可以把依赖写进代码任意一行。

缺点:如下示例代码,代码在运行时是不知道依赖的,需要遍历所有的require关键字,找到后面的依赖,具体做法就是将function toString后,用正则匹配出关键字后面的依赖。这是一种牺牲性能来换取开发便利的方法。

define(function(require, exports, module){

var foo= require('foo');//同步加载

foo.add(1, 2);

require.async('math', fucntion(math){//异步加载

math.add(1,2);

})

});

上面对AMD和CMD说的都是必须依赖(可称为强依赖)的情况,还有一些依赖,是在特定条件成立后才需要加载的(可称为弱依赖)。

if(status){a.doSomething()}

这种情况可以用异步回调方式实现:

AMD实现:if(status){

async(['a'], function(a){

a.doSomething();

})

}


CMD实现:if(status){

require.async('a', function(a){

 a.doSomething();

})

}

总结:

对于必须依赖(称为强依赖),如果性能优先,可采用AMD前置依赖模式。

如果开发成本优先,可采用CMD就近依赖模式。

对于弱依赖,只需要将弱依赖的部分改写到回调函数内即可。

ES6模块化:

在 ES6 中,我们使用 export 关键字来导出模块,使用 import 关键字引用模块。如果js解析器不识别ES6语法,需要将ES6语法转换成低版本语法。目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require。

参考:

ES6模块的import和export用法总结

Node中没搞明白require和import,你会被坑的很惨

写到这里,想起当前做的项目,有很多插件、配置JS脚本,是在HTML通过'<script>'脚本同步引入的,这种写法很懒省事,但会降低性能。看了'<script>'的用法,是可以异步引入的:

1.同步加载<script src="./a.js"></script>

同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。

js 之所以要同步执行,是因为 js 中可能有输出 document 内容、修改dom、重定向等行为,所以默认同步执行才是安全的。

2.带defer属性defer属性声明这个脚本中将不会有 document.write 或 dom 修改。浏览器将会并行下载 a.js 和其它有 defer 属性的script,而不会阻塞页面后续处理。注:所有的defer 脚本保证是按顺序依次执行的。

3.带async属性<script src="./a.js" async></script>

async属性是HTML5新增的。作用和defer类似,但是它将在下载后尽快执行,不能保证脚本会按顺序执行。它们将在onload 事件之前完成。

defer属性在IE 4.0中就实现了,超过13年了!Firefox 从 3.5 开始支持defer属性 。

Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer,这样IE 4之后的所有 IE 都支持异步加载。


感谢:

详解JavaScript模块化开发

Node中没搞明白require和import,你会被坑的很惨

ES6模块的import和export用法总结

浏览器加载 CommonJS 模块的原理与实现

JavaScript异步加载详解

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容