AMD vs. CommonJS?
js开发者对js模块加载的尝试和创新从来都没有停止过,尤其是当nodejs的出现后,模块化加载的必要性更加凸显。本文不讨论如何在nodejs环境来模块化加载(创造者已经利用commonJS机制解决),只讨论在浏览器环境下如何来模块加载的思路,并提出一些我的看法。
浏览器环境与nodejs的环境的最大差异是,对于nodejs的环境,大多数情况下被依赖的模块文件本身就在本地(它们都在服务器上),同步取过来就能用;而对于浏览器的环境,被依赖的模块文件通常还在远程服务器上,并未加载到本地,也就是说必须是先加载(并解析)后执行的机制。
既然已经有了commonJS,在这之上将异步回调的逻辑加入进去,可是异步先加载什么呢?于是就有了依赖的概念。一段时间的发展后,有了AMD、和CMD的解决方案,代表作品是requirejs和seajs,有兴趣的读者可以去了解一下,这里就不展开介绍了。
有必要简单提一下两者的主要区别,CMD推崇依赖就近,可以把依赖写进你的代码中的任意一行,例:
|
1
2
3
4
5
6
|
define(function(require, exports, module) { var a = require('./a') a.doSomething() var b = require('./b') b.doSomething()}) |
代码在运行时,首先是不知道依赖的,需要遍历所有的require关键字,找出后面的依赖。具体做法是将function toString后,用正则匹配出require关键字后面的依赖。显然,这是一种牺牲性能来换取更多开发便利的方法。
而AMD是依赖前置的,换句话说,在解析和执行当前模块之前,模块作者必须指明当前模块所依赖的模块,表现在require函数的调用结构上为:
|
1
2
3
4
|
define(['./a','./b'],function(a,b){ a.doSomething() b.doSomething()}) |
代码在一旦运行到此处,能立即知晓依赖。而无需遍历整个函数体找到它的依赖,因此性能有所提升,缺点就是开发者必须显式得指明依赖——这会使得开发工作量变大,比如:当你写到函数体内部几百上千行的时候,忽然发现需要增加一个依赖,你不得不回到函数顶端来将这个依赖添加进数组。
细心的读者可能发现,到目前位置我讨论的AMD和CMD的思想的关于依赖的部分,都只讨论的“硬依赖”,也就是执行前肯定需要的依赖,但是这不是全部的情况。有的时候情况是这样的:
|
1
2
3
4
|
// 函数体内:if(status){ a.doSomething()} |
在这个函数体内,可能依赖a,也可能不依赖a,我把这种可能的依赖成为“软依赖”。对于软依赖当然可以直接当硬依赖处理,但是这样不经济,因为依赖是不一定的,有可能加载了此处的依赖而实际上没有用上。
对于软依赖的处理,我推荐依赖前置+回调函数的实现形式。上面的例子简单表述如下:
|
1
2
3
4
5
6
|
// 函数体内:if(status){ async(['a'],function(a){ a.doSomething() })} |
至此可以对由commonJS衍生出来的方案做出总结了。在浏览器端来设计模块加载机制,需要考虑依赖的问题。
我们先把依赖分为两种,“强依赖” —— 肯定需要 和“弱依赖” —— 可能需要。
对于强依赖,如果要性能优先,则考虑参照依赖前置的思想设计你的模块加载器,我个人也更推崇这个方案一些;如果考虑开发成本优先,则考虑按照依赖就近的思想设计你的模块加载器。
对于弱依赖,只需要将弱依赖的部分改写到回调函数内即可。
如果现在我要实现一个模块加载器,我会将强依赖前置,弱依赖采用异步回调函数的形式,其它的方法我认为都只是语法糖而已,仅此就够了。
AMD vs. CommonJS?的更多相关文章
- AMD/CMD/CommonJs到底是什么?它们有什么区别?
知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs. 知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏 ...
- [译]前端JS面试题汇总 Part 1(事件委托/this关键字/原型链/AMD与CommonJS/自执行函数)
原文:https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questio ...
- JS模块之AMD, CMD, CommonJS、UMD和ES6模块
CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...
- AMD,CMD.CommonJs和UMD还有es6的模块化对比
CommonJS CommonJS是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行, ...
- FW: AMD, CMD, CommonJS和UMD
javascript 我是豆腐不是渣 4月5日发布 推荐 2 推荐 收藏 32 收藏,486 浏览 今天由于项目中引入的echarts的文件太大,requirejs经常加载超时,不得不分开来加载ech ...
- AMD, CMD, CommonJS和UMD
我的Github(https://github.com/tonyzheng1990/tonyzheng1990.github.io/issues),欢迎star 今天由于项目中引入的echarts的文 ...
- js模块系统 - amd|cmd|commonjs|esm|umd
写过前端代码大概率听说过amd cmd umd commonjs esm这些名词, 想当初我第一次看到这些的时候, 人都麻了, 都是些啥啊. 后来我知道了, 这些都是js的模块规范. amd - 浏览 ...
- [转载]AMD 的 CommonJS wrapping
https://www.imququ.com/post/amd-simplified-commonjs-wrapping.html 它是什么? 为了复用已有的 CommonJS 模块,AMD 规定了 ...
- 【转】AMD 的 CommonJS wrapping
其实本文的标题应该是「为什么我不推荐使用 AMD 的 Simplified CommonJS wrapping」,但太长了不好看,为了美观我只能砍掉一截. 它是什么? 为了复用已有的 CommonJS ...
随机推荐
- ip地址、域名、DNS、URL的区别与联系
IP:每个连接到Internet上的主机都会分配一个IP地址,此ip是该计算机在互联网上的逻辑地址的唯一标识,计算机之间的访问就是通过IP地址来进行的.写法:十进制的形式,用“.”分开,叫做“点分十进 ...
- Python day01 课堂笔记
今天是第一天学习Python课程,主要从计算机基础,Python的历史,环境 ,变量,常量,注释,用户交互,基础数据类型 ,简单的if条件语句和while循环语句这几个来学习,重点的掌握内容是pyth ...
- AVL树(二叉平衡树)详解与实现
AVL树概念 前面学习二叉查找树和二叉树的各种遍历,但是其查找效率不稳定(斜树),而二叉平衡树的用途更多.查找相比稳定很多.(欢迎关注数据结构专栏) AVL树是带有平衡条件的二叉查找树.这个平衡条件必 ...
- CSS布局:元素水平居中
CSS布局之元素水平居中 本文将依次介绍在不同条件下实现水平居中多种方法 一.使用 text-align: center : 适用于块级元素内部的行内元素水平居中(也适用于图片的水平居中) 此方法对i ...
- 9043Markdown常用用法
1.标题 1.1 方法一:==和--标记 =和-标记语法格式如下: 我是标题一 == 我是标题二 -- 组成: 1标题文字:我是标题一 2回车换行 3标记:== (为一级标题)--(为二级标题) 效果 ...
- jquery实现表格导入到Excel(加图片)
话不多说直接上代码 第一步:导入jquery的插件https://github.com/rainabba/jquery-table2excel HTML部分: 第二步:添加一个按钮 <but ...
- 《Java 8 in Action》Chapter 9:默认方法
传统上,Java程序的接口是将相关方法按照约定组合到一起的方式.实现接口的类必须为接口中定义的每个方法提供一个实现,或者从父类中继承它的实现. 但是,一旦类库的设计者需要更新接口,向其中加入新的方法, ...
- Win10中用yolov3训练自己的数据集全过程(VS、CUDA、CUDNN、OpenCV配置,训练和测试)
在Windows系统的Linux系统中用yolo训练自己的数据集的配置差异很大,今天总结在win10中配置yolo并进行训练和测试的全过程. 提纲: 1.下载适用于Windows的darknet 2. ...
- babel-loader与babel-core的版本对应关系
babel-loader 8.x对应babel-core 7.xbabel-loader 7.x对应babel-core 6.x如何解决1. 卸载旧的babel-corenpm un babel-co ...
- 【故障公告】阿里云 RDS 数据库服务器 CPU 100% 造成全站故障
非常非常抱歉,今晚 19:34 ~ 21:16 园子所使用的阿里云 RDS 数据库服务器突然出现 CPU 100% 问题,造成全站无法正常访问,由此您带来了很大的麻烦,请您谅解. 故障经过是这样的.1 ...