【02】AMD、CMD、UMD 模块的写法
AMD、CMD、UMD 模块的写法
简介
最近几年,我们可以选择的Javascript组件的生态系统一直在稳步增长。虽然陡增的选择范围是极好的,但当组件混合匹配使用时就会出现很尴尬的局面。开发新手们会很快发现不是所有组件都能彼此“和平相处”。
为了解决这个问题,两种竞争关系的模块规范AMD和CommonJS问世了,它们允许开发者遵照一种约定的沙箱化和模块化的方式来写代码,这样就能避免“污染生态系统”。
AMD
随着RequireJS成为最流行的实现方式,异步模块规范(AMD)在前端界已经被广泛认同。
下面是只依赖jquery的模块foo的代码:
// 文件名: foo.js
define(['jquery'], function ($){
// 方法
function myFunc(){};
// 暴露公共方法
return myFunc;
});
还有稍微复杂点的例子,下面的代码依赖了多个组件并且暴露多个方法:
// 文件名: foo.js
define(['jquery','underscore'],function($, _){
// 方法
function a(){};// 私有方法,因为没有被返回(见下面)
function b(){};// 公共方法,因为被返回了
function c(){};// 公共方法,因为被返回了
// 暴露公共方法
return{
b: b,
c: c
}
});
定义的第一个部分是一个依赖数组,第二个部分是回调函数,只有当依赖的组件可用时(像RequireJS这样的脚本加载器会负责这一部分,包括找到文件路径)回调函数才被执行。
注意,依赖组件和变量的顺序是一一对应的(例如,jquery->$, underscore->_)。
同时注意,我们可以用任意的变量名来表示依赖组件。假如我们把$改成$$,在函数体里面的所有对jQuery的引用都由$变成了$$。
还要注意,最重要的是你不能在回调函数外面引用变量$和_,因为它相对其它代码是独立的。这正是模块化的目的所在!
CommonJS
如果你用Node写过东西的话,你可能会熟悉CommonJS的风格(node使用的格式与之相差无几)。因为有Browserify,它也一直被前端界广泛认同。
就像前面的格式一样,下面是用CommonJS规范实现的foo模块的写法:
// 文件名: foo.js
// 依赖
var $ = require('jquery');
// 方法
function myFunc(){};
// 暴露公共方法(一个)
module.exports = myFunc;
有更复杂的例子,下面的代码依赖了多个组件并且暴露多个方法:
// 文件名: foo.js
var $ = require('jquery');
var _ = require('underscore');
// methods
function a(){};// 私有方法,因为它没在module.exports中 (见下面)
function b(){};// 公共方法,因为它在module.exports中定义了
function c(){};// 公共方法,因为它在module.exports中定义了
// 暴露公共方法
module.exports ={
b: b,
c: c
};
UMD: 通用模块规范
既然CommonJs和AMD风格一样流行,似乎缺少一个统一的规范。所以人们产生了这样的需求,希望有支持两种风格的“通用”模式,于是通用模块规范(UMD)诞生了。
不得不承认,这个模式略难看,但是它兼容了AMD和CommonJS,同时还支持老式的“全局”变量规范:
(function(root, factory){
if(typeof define ==='function'&& define.amd){
// AMD
define(['jquery'], factory);
}elseif(typeof exports ==='object'){
// Node, CommonJS之类的
module.exports = factory(require('jquery'));
}else{
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this,function($){
// 方法
function myFunc(){};
// 暴露公共方法
return myFunc;
}));
保持跟上面例子一样的模式,下面是更复杂的例子,它依赖了多个组件并且暴露多个方法:
(function(root, factory){
if(typeof define ==='function'&& define.amd){
// AMD
define(['jquery','underscore'], factory);
}elseif(typeof exports ==='object'){
// Node, CommonJS之类的
module.exports = factory(require('jquery'), require('underscore'));
}else{
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery, root._);
}
}(this,function($, _){
// 方法
function a(){};// 私有方法,因为它没被返回 (见下面)
function b(){};// 公共方法,因为被返回了
function c(){};// 公共方法,因为被返回了
// 暴露公共方法
return{
b: b,
c: c
}
}));
参考:
原文出处: David Calhoun 译文出处:奇舞团 - hxl
【02】AMD、CMD、UMD 模块的写法的更多相关文章
- Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别
目录 JS-模块化进程 原始的开发方式 CommonJS && node.js AMD && Require.js CMD && Sea.js UMD ...
- AMD、CMD、UMD 模块的写法
简介 最近几年,我们可以选择的Javascript组件的生态系统一直在稳步增长.虽然陡增的选择范围是极好的,但当组件混合匹配使用时就会出现很尴尬的局面.开发新手们会很快发现不是所有组件都能彼此“和平相 ...
- CommonJS/AMD/CMD/UMD
为什么会有这几种模式? 起源:Javascript模块化 模块化就是把复杂问题分解成不同模块,这样可维护性高,从而达到高复用,低耦合. 1.Commonjs CommonJS是服务器端模块的规范,No ...
- JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)
原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...
- 关于 CommonJS AMD CMD UMD 规范的差异总结
一.CommonJS 主要是用于服务器端的规范,比如目前的nodeJS. 根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函 ...
- 关于 CommonJS AMD CMD UMD 规范的差异总结(转)
根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var ...
- 关于 CommonJS AMD CMD UMD
1. CommonJS CommonJS 原来叫 ServerJS, 是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用requi ...
- CommonJS/AMD/CMD/UMD概念初探
1.CommonJS是一种规范,NodeJS是这种规范的实现. 1.1.CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作. 参考: http://www.commonjs.org ...
随机推荐
- Hdu 5352 MZL's City (多重匹配)
题目链接: Hdu 5352 MZL's City 题目描述: 有n各节点,m个操作.刚开始的时候节点都是相互独立的,一共有三种操作: 1:把所有和x在一个连通块内的未重建过的点全部重建. 2:建立一 ...
- 对dynamic和lambda的学习
var, object, dynamic的区别以及使用 dynamic(2) – ExpandoObject的使用 .NET中的Lambda表达式与匿名方法
- CentOS 6.5上安装GlassFish4.0 过程笔记
CentOS 6.5上安装GlassFish4.0 过程笔记 1.安装JDK, 注意操作系统的位数, 64 or 32: [root@linuxidc ~]# mkdir /usr/java [ro ...
- ActionEvent之TextField
这里我们讲这个TestField类 也就是我们的输入框,什么输入密码,用户名什么的. 一些方法: 这里说到TestField也会有事件发生,就是当你在文本框敲回车的时候. 看个例子: import j ...
- 给定一个整数 n,返回 n! 结果尾数中零的数量。
示例 1: 输入: 3 输出: 0 解释: 3! = 6, 尾数中没有零. 示例 2: 输入: 5 输出: 1 解释: 5! = 120, 尾数中有 1 个零. 代码部分 class Solution ...
- SharePoint Server 2013 Search Service stop
管理中心 - 系统设置 - 管理服务器上的服务:“搜索主机控制器服务” 停止即可,服务器管理 - 工具 - 服务 :sharepoint search host controller 服务会自动禁用.
- Java集合框架源码(四)——Vector
第1部分 Vector介绍 Vector简介 Vector 是矢量队列,它是JDK1.0版本添加的类.继承于AbstractList,实现了List, RandomAccess, Cloneable这 ...
- iOS Programming Controlling Animations 动画
iOS Programming Controlling Animations 动画 The word "animation" is derived from a Latin wor ...
- codevs 1082 线段树练习 3 --分块练习
时间限制: 3 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 给你N个数,有两种操作: 1:给区间[a,b]的所有数增加X 2:询问区间[ ...
- C/C++ 数组、字符串、string
1.定义数组时,数组中元素的个数不能是动态的,不能用变量表示(const变量可以),必须是已知的. 2.引用数组时只能引用数组中某个元素,不能引用整个数组. 3.定义二维数组时,若同时全部初始化,则可 ...