浅析JS模块规范:AMD,CMD,CommonJS
from:https://www.jianshu.com/p/09ffac7a3b2c
随着JS模块化编程的发展,处理模块之间的依赖关系成为了维护的关键。

AMD,CMD,CommonJS是目前最常用的三种模块化书写规范。
CommonJS
CommonJS规范是诞生比较早的。NodeJS就采用了CommonJS。是这样加载模块:
var clock = require('clock');
clock.start();
这种写法适合服务端,因为在服务器读取模块都是在本地磁盘,加载速度很快。但是如果在客户端,加载模块的时候有可能出现“假死”状况。比如上面的例子中clock的调用必须等待clock.js请求成功,加载完毕。那么,能不能异步加载模块呢?
1、CommonJs规范的出发点:JS没有模块系统、标准库较少、缺乏包管理工具;为了让JS可以在任何地方运行,以达到Java、C#、PHP这些后台语言具备开发大型应用的能力;
2、在CommonJs规范中:
一个文件就是一个模块,拥有单独的作用域;
普通方式定义的变量、函数、对象都属于该模块内;
通过require来加载模块;
通过exports和modul.exports来暴露模块中的内容;
3、所有代码都运行在模块作用域,不会污染全局作用域;模块可以多次加载,但只会在第一次加载的时候运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果;模块的加载顺序,按照代码的出现顺序是同步加载的;
4、__dirname代表当前模块文件所在的文件夹路径,__filename代表当前模块文件所在的文件夹路径+文件名;
5、require(同步加载)基本功能:读取并执行一个JS文件,然后返回该模块的exports对象,如果没有发现指定模块会报错;
6、模块内的exports:为了方便,node为每个模块提供一个exports变量,其指向module.exports,相当于在模块头部加了这句话:var exports = module.exports,在对外输出时,可以给exports对象添加方法,PS:不能直接赋值(因为这样就切断了exports和module.exports的联系);
7、npm root -g:查看npm全局包安装位置,建议在nvm目录下新建npm\node_modules目录,然后设置npm的全局包安装位置:npm config set prefix "",然后将该路径添加到环境变量中;
8、npm init -y:初始化一个package.json文件,加上-y就会默认生成该文件,无需一步一步填写;npm docs 包名:查看包的文档;npm install:安装package.json中dependencies属性中所有依赖的包
9、由于npm的服务器是国外的,所以如果你没有和谐工具是下载不了的,这里推荐使用淘宝NPM镜像:http://npm.taobao.org/,与官方NPM的同步频率目前为10分钟一次;安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org,安装包:cnpm install 包名(其它命令基本一致);
10、如果你不想下载cnpm,npm还提供了一个镜像源管理工具:npm install -g nrm,通过:nrm ls,查看镜像源列表 ,通过:npm use 镜像源,来切换;
11、NPM的模块加载机制:
如果require的是绝对路径文件,查找不会去遍历每个node_modules目录,其速度最快
1).从module.paths数组中(由当前执行文件目录到磁盘根目录)取出第一个目录作为查找基准
2).直接从目录中查找该文件,如果存在则结束查找,如果不存在则进行下一条查找
3).尝试添加.js、.node、.json后缀之后查找,如果存在文件则结束查找,如果不存在则进行下一条查找
4).尝试将require的参数作为一个包来进行查找,读取目录下的package.json文件,取得Main参数指定的文件
5).尝试查找该文件,如果存在则结束查找,如果不存在则进行第3条查找
6).如果继续失败,则取出module.paths数组中的下一目录作为基准查找,循环第1-5个步骤
7).如果继续失败,循环第1-6个步骤,直到module.paths中的最后一个值
8).如果继续失败,则抛出异常
AMD
AMD,即 (Asynchronous Module Definition),这种规范是异步的加载模块,requireJs应用了这一规范。先定义所有依赖,然后在加载完成后的回调函数中执行:
require([module], callback);
用AMD写上一个模块:
require(['clock'],function(clock){
clock.start();
});
AMD虽然实现了异步加载,但是开始就把所有依赖写出来是不符合书写的逻辑顺序的,能不能像commonJS那样用的时候再require,而且还支持异步加载后再执行呢?
CMD
CMD (Common Module Definition), 是seajs推崇的规范,CMD则是依赖就近,用的时候再require。它写起来是这样的:
define(function(require, exports, module) {
var clock = require('clock');
clock.start();
});
AMD和CMD最大的区别是对依赖模块的执行时机处理不同,而不是加载的时机或者方式不同,二者皆为异步加载模块。
AMD依赖前置,js可以方便知道依赖模块是谁,立即加载;而CMD就近依赖,需要使用把模块变为字符串解析一遍才知道依赖了那些模块,这也是很多人诟病CMD的一点,牺牲性能来带来开发的便利性,实际上解析模块用的时间短到可以忽略。
以上就是三者的异同,如有疑问或建议,请参考以下文章或联系我,谢谢。
</br></br>
作者:乘着风
链接:https://www.jianshu.com/p/09ffac7a3b2c
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
浅析JS模块规范:AMD,CMD,CommonJS的更多相关文章
- js模块系统 - amd|cmd|commonjs|esm|umd
写过前端代码大概率听说过amd cmd umd commonjs esm这些名词, 想当初我第一次看到这些的时候, 人都麻了, 都是些啥啊. 后来我知道了, 这些都是js的模块规范. amd - 浏览 ...
- JS模块之AMD, CMD, CommonJS、UMD和ES6模块
CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...
- 兼容多种模块规范(AMD,CMD,Node)的代码
在JavaScript模块化开发中,为了让同一个模块可以运行在前后端,以及兼容多种模块规范(AMD,CMD,Node),类库开发者需要将类库代码包装在一个闭包内. AMD规范 AMD,即“异步模块定义 ...
- js模块化开发 AMD CMD Commonjs
在es6全面实行开来之前 js实现模块开发方案有: 1.AMD 异步模块开发定义 依赖前置,requireJs应用了这一规范 require([module], callback); 加载完后回调 ...
- JS模块规范:AMD,CMD,CommonJS
浅析JS模块规范 随着JS模块化编程的发展,处理模块之间的依赖关系成为了维护的关键. AMD,CMD,CommonJS是目前最常用的三种模块化书写规范. CommonJS CommonJS规范是诞生比 ...
- JavaSript模块规范 - AMD规范与CMD规范介绍(转)
JavaSript模块规范 - AMD规范与CMD规范介绍 JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者 ...
- JS模块规范 前端模块管理器
一:JS模块规范(为了将js文件像java类一样被import和使用而定义为模块, 组织js文件,实现良好的文件层次结构.调用结构) A:CommonJS就是为JS的表现来制定规范,因为js没有模块的 ...
- 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的文 ...
随机推荐
- phpStudy6——php导出可以设置样式的excel表格
前言: 一般的后台管理页面肯定少不了excel表格导出的功劳,尤其是那些电商平台的订单导入导出,用户列表的导入导出等,那么本文就介绍php是如何导出excel表格的. php导出excel方法有很多, ...
- [leetcode]125. Valid Palindrome判断回文串
Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...
- program by the way......
ostrich birds fruit apple constructor height weight method overload override base sub inherit extend ...
- 为什么二代测序的原始数据中会出现Read重复现象?
为什么二代测序的原始数据中会出现Read重复现象? 要搞清楚这个read重复(duplicate)的问题,我想我们需要从NGS数据的产出过程说起,具体来说如下: 基因组DNA提取: DNA随机打断,最 ...
- 那些你不知道的PS大片摄影
你以为这张照片是P出来的? 才不是! 人家是开个起重机吊着拍的! 而且没有任何保护措施! 这样的照片战斗民族的摄影师才敢这样拍…要是在天朝这么做估计都找不到模特… 这张照片出自乌兹别克斯坦的摄影师Ra ...
- jQuery 插件使用记录
Validate 表单验证 ver 1.6 浏览更多 默认情况下,当表单 submit 时,那些验证不通过的 field 旁边会出现错误消息提示,有时很方便,但有时看起来很不美观.可以关闭此消息提示. ...
- 2018.09.15 hdu3018Ant Trip(欧拉路)
传送门 显然答案等于各个连通分量的笔画数之和. 因此我们dfs每个连通分量计算对答案的贡献. 对于一个连通分量,如果本来就有欧拉回路那么只需要一笔. 否则需要寄点数/2那么多笔才能画完. 知道这个结论 ...
- RAC环境数据库重启实例
1.重启之前最好先看一下节点信息和运行状态 可以通过srvctl status database -d 数据库名 //查看节点信息 Crs_stat //查看节点状态 可以看到数据节点它由两个实例组成 ...
- 【转】Paxos算法2-算法过程
——转自:{老码农的专栏} 1.编号处理 根据P2c ,proposer在提案前会先咨询acceptor查看其批准的最大的编号和value,再决定提交哪个value.之前我们一直强调更高编号的prop ...
- gj9 迭代器和生成器
9.1 python的迭代协议 list内部实现了__iter__()协议(魔法函数),是可迭代对象,但还不是迭代器(迭代器需要实现__next__协议) 生成器实现了__iter__(),__nex ...