浅析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來源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
转载于:https://www.cnblogs.com/hyshareex/p/9223073.html
浅析JS模块规范:AMD,CMD,CommonJS相关推荐
- 前端模块规范AMD/UMD/CommonJs
.babelrc文件中的:module设置为false,为什么会要设置成false? 解释:使ES6模块语法转换到另一个模块类型(默认启用"commonjs"). 设置为假则不变换 ...
- 兼容多种模块规范(AMD,CMD,Node)的代码
前言 昨天,公司同事问了我如下一个问题: 说他在看一个插件时,看到了源码结构如截图所示,他知道(function(){})()是一种立即执行函数,但是在截图中,最后的那个圆括号里又写了一个函数func ...
- js UMD规范——AMD和CommonJS的糅合(一)
文章目录 文章参考 问题描述 问题分析 模块化的规范 依赖引入的形式 服务器端规范(nodejs)-- CommonJS `require()` 语句 为什么浏览器不能使用同步加载,服务端可以? Co ...
- AMD, CMD, CommonJS和UMD
AMD, CMD, CommonJS和UMD 今天由于项目中引入的echarts的文件太大,requirejs经常加载超时,不得不分开来加载echarts的各个图表.但是使用echarts自带的在线构 ...
- AMD/CMD/CommonJs到底是什么?它们有什么区别?
这篇文章总结的很好. 知道JS有模块化开发的说法,也偶尔听过requireJs,AMD,CMD等等名字,甚至使用node的时候,还用过require之类的方法,但是对这些一直没有一个明确的认识和概念. ...
- JavaSript模块规范 - AMD规范与CMD规范介绍[转]
原文地址:http://blog.chinaunix.net/uid-26672038-id-4112229.html JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什 ...
- 让你的插件兼容AMD, CMD ,CommonJS和 原生 JS
模块标准 // 支持AMD,CMD以及原生js的引用if (typeof module !== 'undefined' && typeof exports === 'object' & ...
- Javascript模块规范(CommonJS规范AMD规范)
Javascript模块化编程(AMD&CommonJS) 前端模块化开发的价值:https://github.com/seajs/seajs/issues/547 模块的写法 查看 AMD规 ...
- 基于前端Js模块化规范的粗浅应用
前言 之前做项目时,由于刚起步,所以很多同事在Js的规范上写的很凌乱.又刚好自己在慕课网上接触了Js模块化的概念,顿时觉得怎么会有这么规范的写法.所以特别写篇博客,记录下. Js架构如下 整个JS架构 ...
最新文章
- 第十五届全国大学生智能汽车竞赛各分赛区国赛获奖信息
- iOS Airplay Screen Mirroring 同屏技术详解
- fc-ae-1553_什么是AE-L,AF-L和*按钮,它们的作用是什么?
- VB 游戏外挂操作类
- 不可错过的MSDN TV —— IronPython: Python on the .NET Framework (中)
- Beyond Compare 怎么新增与卸载文件格式
- [蓝桥杯]试题 基础练习 芯片测试
- 新手干货:Vue - 常用指令
- (附源码)ssm天天超市购物网站 毕业设计 022101
- dbutilsjar包下载_commons dbutils 下载-commons dbutils.jar下载 v1.6官方版--pc6下载站
- 【数学】海 盗 埋 宝 pt.2
- 股息收益率谁最高-资讯中心-金融界
- redis 统计数量_使用redis实现在线人数统计
- mount -a 的作用
- php和python对比-PHP与Python对比 如何选择?
- Eudemon1000E-G55使用
- get新方法:一个歌曲分享链接提取歌曲文件
- 抗渗等级p6是什么意思_混凝土p6是什么意思
- Fama-French 多因子模型
- 二维正态分布图python代码_Python数据可视化正态分布简单分析及实现代码
热门文章
- Eclipse汉化插件
- JDK collections - 使用
- IBM Cognos8 处理父子维度浅析
- python计算两个数的最大公约数和最小公倍数
- python做的大型游戏_Python有做大型游戏的潜力吗?
- excel打印预览在哪里_别再浪费A4纸了,Excel按下这个键,一张纸可以打印全部表格内容...
- oracle 中某张表备份,张表系统流程(java程序备份及恢复SQL2000中数据库中的某张表)...
- python程序设计教程胡建华_Python程序设计教程
- DeFi借贷协议Liquity宣布主网将于4月5日上线
- SAP License:员工离职分析