JS中的模块规范(CommonJS,AMD,CMD)
JS中的模块规范(CommonJS,AMD,CMD)
如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已。
现在就看看吧,这些规范到底是啥东西,干嘛的。
一、CommonJS
CommonJS就是为JS的表现来制定规范,因为js没有模块的功能所以CommonJS应运而生,它希望js可以在任何地方运行,不只是浏览器中。
CommonJS能有一定的影响力,我觉得绝对离不开Node的人气,不过喔,Node,CommonJS,浏览器甚至是W3C之间有什么关系呢,我找到了个贴切的图:
|---------------浏览器----- ------------------| |--------------------------CommonJS----------------------------------|
| BOM | | DOM | | ECMAScript | | FS | | TCP | | Stream | | Buffer | |........|
|-------W3C-----------| |---------------------------------------Node--------------------------------------------------|
CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。
比如说我们就可以这样用了:

1 //sum.js
2 exports.sum = function(){...做加操作..};
3
4 //calculate.js
5 var math = require('sum');
6 exports.add = function(n){
7 return math.sum(val,n);
8 };

虽说Node遵循CommonJS的规范,但是相比也是做了一些取舍,填了一些新东西的。
不过,说了CommonJS也说了Node,那么我觉得也得先了解下NPM了。NPM作为Node的包管理器,不是为了帮助Node解决依赖包的安装问题嘛,那它肯定也要遵循CommonJS规范啦,它遵循包规范(还是理论)的。
CommonJS WIKI讲了它的历史,还介绍了modules和packages等。
二、AMD
CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,为什么这么说呢?
这需要分析一下浏览器端的js和服务器端js都主要做了哪些事,有什么不同了:
---------------------------------------服务器端JS | 浏览器端JS-------------------------------------------
相同的代码需要多次执行 | 代码需要从一个服务器端分发到多个客户端执行
CPU和内存资源是瓶颈 | 带宽是瓶颈
加载时从磁盘中加载 | 加载时需要通过网络加载
---------------------------------------------------------------------------------------------------------------
于是乎,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范。
AMD就只有一个接口:define(id?,dependencies?,factory);
它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,像这样:
1 define(['dep1','dep2'],function(dep1,dep2){...});
要是没什么依赖,就定义简单的模块,下面这样就可以啦:
1 define(function(){
2 var exports = {};
3 exports.method = function(){...};
4 return exports;
5 });
咦,这里有define,把东西包装起来啦,那Node实现中怎么没看到有define关键字呢,它也要把东西包装起来呀,其实吧,只是Node隐式包装了而已.....
RequireJS就是实现了AMD规范的呢。
这有AMD的WIKI中文版,讲了很多蛮详细的东西,用到的时候可以查看:AMD的WIKI中文版
三、CMD
大名远扬的玉伯写了seajs,就是遵循他提出的CMD规范,与AMD蛮相近的,不过用起来感觉更加方便些,最重要的是中文版,应有尽有:seajs官方doc
1 define(function(require,exports,module){...});
用过seajs吧,这个不陌生吧,对吧。
前面说AMD,说RequireJS实现了AMD,CMD看起来与AMD好像呀,那RequireJS与SeaJS像不像呢?
虽然CMD与AMD蛮像的,但区别还是挺明显的,官方非官方都有阐述和理解,我觉得吧,说的都挺好:
JS中的模块规范(CommonJS,AMD,CMD)的更多相关文章
- 浅析JS中的模块规范(CommonJS,AMD,CMD)////////////////////////zzzzzz
浅析JS中的模块规范(CommonJS,AMD,CMD) 如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. ...
- 浅析JS中的模块规范(CommonJS,AMD,CMD)
如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧,这些规范到底是啥东西,干嘛的. 一.CommonJS ...
- 理解JS中的模块规范(CommonJS,AMD,CMD)
随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...
- 浅析JS中的模块规范AMD和CMD
一.AMD AMD就只有一个接口:define(id?,dependencies?,factory); 它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,像这样: d ...
- Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- 插件兼容CommonJS, AMD, CMD 和 原生 JS
模块标准 CommonJS CommonJS 有三个全局变量 module.exports 和 require.但是由于 AMD 也有 require 这个全局变量,故不使用这个变量来进行检测. 如果 ...
- Javascript模块规范(CommonJS规范&&AMD规范)
Javascript模块化编程(AMD&CommonJS) 前端模块化开发的价值:https://github.com/seajs/seajs/issues/547 模块的写法 查看 AMD规 ...
- [转] 插件兼容CommonJS, AMD, CMD 和 原生 JS
模块标准 CommonJS CommonJS 有三个全局变量 module.exports 和 require.但是由于 AMD 也有 require 这个全局变量,故不使用这个变量来进行检测. 如果 ...
- JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别
目录 JS-模块化进程 原始的开发方式 CommonJS && node.js AMD && Require.js CMD && Sea.js UMD ...
随机推荐
- 一张漫画说尽IT开发过程
- 2014年TI杯大学生电子设计竞赛地区赛使用仪器及器件、设备
2014年TI杯大学生电子设计竞赛地区赛使用仪器及器件.设备 a) 3A/30V双路稳压电源(可并联): b) 60MHz示波器: c) 三位半数字万用 ...
- Cocos2d-x3.0 DrawNode吸取
DrawNode正如它的绘图形状的节点,相互作用可以使将来更加灵活. DrawNode* DrawLayer::shape() { auto shape = DrawNode::create(); s ...
- IT只忍者龟Photoshop简单人像的头发抠图过程
一.导入素材,加入蒙版 1.导入美女图片 2.导入背景图片 如今须要将美女抠出来放在这个背景上,怎么办?一定会有人想到用通道,抽出.(备注:在ps6以后版本号,抽出已经没有这个选项了). 3.将美女图 ...
- (大数据工程师学习路径)第一步 Linux 基础入门----用户及文件权限管理
用户及文件权限管理 实验介绍 1.Linux 中创建.删除用户,及用户组等操作. 2.Linux 中的文件权限设置. 一.Linux 用户管理 Linux 是一个可以实现多用户登陆的操作系统,比如“李 ...
- jsp跳转后台代码页的简易方式~
jsp跳转到代码隐藏页.有几种方法,例如,: action方式: jquery方式,码如下面: function regCust(){ $('#containerFRM').form( ...
- Javascript中的深拷贝和浅拷贝
var obj = { a:1, arr: [1,2] }; var obj1 = obj; //浅复制 var obj2 = deepCopy(obj); //深复制 javascript中创建对象 ...
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- asp.net学习之 数据绑定控件--表格绑定控件
原文:asp.net学习之 数据绑定控件--表格绑定控件 数据绑定 Web 服务器控件是指可绑定到数据源控件,以实现在 Web 应用程序中轻松显示和修改数据的控件.数据绑定 Web 服务器控件 ...
- Open the Lock
Problem Description Now an emergent task for you is to open a password lock. The password is consist ...