AMD、CMD、UMD 模块的写法

简介

最近几年,我们可以选择的Javascript组件的生态系统一直在稳步增长。虽然陡增的选择范围是极好的,但当组件混合匹配使用时就会出现很尴尬的局面。开发新手们会很快发现不是所有组件都能彼此“和平相处”。

为了解决这个问题,两种竞争关系的模块规范AMD和CommonJS问世了,它们允许开发者遵照一种约定的沙箱化和模块化的方式来写代码,这样就能避免“污染生态系统”。

AMD

随着RequireJS成为最流行的实现方式,异步模块规范(AMD)在前端界已经被广泛认同。

下面是只依赖jquery的模块foo的代码:

  1. // 文件名: foo.js
  2. define(['jquery'], function ($){
  3. // 方法
  4. function myFunc(){};
  5. // 暴露公共方法
  6. return myFunc;
  7. });
 
 

还有稍微复杂点的例子,下面的代码依赖了多个组件并且暴露多个方法:

  1. // 文件名: foo.js
  2. define(['jquery','underscore'],function($, _){
  3. // 方法
  4. function a(){};// 私有方法,因为没有被返回(见下面)
  5. function b(){};// 公共方法,因为被返回了
  6. function c(){};// 公共方法,因为被返回了
  7. // 暴露公共方法
  8. return{
  9. b: b,
  10. c: c
  11. }
  12. });
 

定义的第一个部分是一个依赖数组,第二个部分是回调函数,只有当依赖的组件可用时(像RequireJS这样的脚本加载器会负责这一部分,包括找到文件路径)回调函数才被执行。

注意,依赖组件和变量的顺序是一一对应的(例如,jquery->$, underscore->_)。

同时注意,我们可以用任意的变量名来表示依赖组件。假如我们把$改成$$,在函数体里面的所有对jQuery的引用都由$变成了$$。

还要注意,最重要的是你不能在回调函数外面引用变量$和_,因为它相对其它代码是独立的。这正是模块化的目的所在!

CommonJS

如果你用Node写过东西的话,你可能会熟悉CommonJS的风格(node使用的格式与之相差无几)。因为有Browserify,它也一直被前端界广泛认同。

就像前面的格式一样,下面是用CommonJS规范实现的foo模块的写法:

  1. // 文件名: foo.js
  2. // 依赖
  3. var $ = require('jquery');
  4. // 方法
  5. function myFunc(){};
  6. // 暴露公共方法(一个)
  7. module.exports = myFunc;
 

有更复杂的例子,下面的代码依赖了多个组件并且暴露多个方法:

  1. // 文件名: foo.js
  2. var $ = require('jquery');
  3. var _ = require('underscore');
  4. // methods
  5. function a(){};// 私有方法,因为它没在module.exports中 (见下面)
  6. function b(){};// 公共方法,因为它在module.exports中定义了
  7. function c(){};// 公共方法,因为它在module.exports中定义了
  8. // 暴露公共方法
  9. module.exports ={
  10. b: b,
  11. c: c
  12. };
 

UMD: 通用模块规范

既然CommonJs和AMD风格一样流行,似乎缺少一个统一的规范。所以人们产生了这样的需求,希望有支持两种风格的“通用”模式,于是通用模块规范(UMD)诞生了。

不得不承认,这个模式略难看,但是它兼容了AMD和CommonJS,同时还支持老式的“全局”变量规范:

  1. (function(root, factory){
  2. if(typeof define ==='function'&& define.amd){
  3. // AMD
  4. define(['jquery'], factory);
  5. }elseif(typeof exports ==='object'){
  6. // Node, CommonJS之类的
  7. module.exports = factory(require('jquery'));
  8. }else{
  9. // 浏览器全局变量(root 即 window)
  10. root.returnExports = factory(root.jQuery);
  11. }
  12. }(this,function($){
  13. // 方法
  14. function myFunc(){};
  15. // 暴露公共方法
  16. return myFunc;
  17. }));
 

保持跟上面例子一样的模式,下面是更复杂的例子,它依赖了多个组件并且暴露多个方法:

  1. (function(root, factory){
  2. if(typeof define ==='function'&& define.amd){
  3. // AMD
  4. define(['jquery','underscore'], factory);
  5. }elseif(typeof exports ==='object'){
  6. // Node, CommonJS之类的
  7. module.exports = factory(require('jquery'), require('underscore'));
  8. }else{
  9. // 浏览器全局变量(root 即 window)
  10. root.returnExports = factory(root.jQuery, root._);
  11. }
  12. }(this,function($, _){
  13. // 方法
  14. function a(){};// 私有方法,因为它没被返回 (见下面)
  15. function b(){};// 公共方法,因为被返回了
  16. function c(){};// 公共方法,因为被返回了
  17. // 暴露公共方法
  18. return{
  19. b: b,
  20. c: c
  21. }
  22. }));
 

参考:

原文出处: David Calhoun   译文出处:奇舞团 - hxl

【02】AMD、CMD、UMD 模块的写法的更多相关文章

  1. Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...

  2. JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别

    目录 JS-模块化进程 原始的开发方式 CommonJS && node.js AMD && Require.js CMD && Sea.js UMD ...

  3. AMD、CMD、UMD 模块的写法

    简介 最近几年,我们可以选择的Javascript组件的生态系统一直在稳步增长.虽然陡增的选择范围是极好的,但当组件混合匹配使用时就会出现很尴尬的局面.开发新手们会很快发现不是所有组件都能彼此“和平相 ...

  4. CommonJS/AMD/CMD/UMD

    为什么会有这几种模式? 起源:Javascript模块化 模块化就是把复杂问题分解成不同模块,这样可维护性高,从而达到高复用,低耦合. 1.Commonjs CommonJS是服务器端模块的规范,No ...

  5. JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)

    原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...

  6. 关于 CommonJS AMD CMD UMD 规范的差异总结

    一.CommonJS 主要是用于服务器端的规范,比如目前的nodeJS. 根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函 ...

  7. 关于 CommonJS AMD CMD UMD 规范的差异总结(转)

    根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var ...

  8. 关于 CommonJS AMD CMD UMD

    1. CommonJS CommonJS 原来叫 ServerJS, 是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用requi ...

  9. CommonJS/AMD/CMD/UMD概念初探

    1.CommonJS是一种规范,NodeJS是这种规范的实现. 1.1.CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作. 参考: http://www.commonjs.org ...

随机推荐

  1. 数据结构之splay树

    https://www.bilibili.com/video/av19879546 https://blog.csdn.net/u014634338/article/details/42465089 ...

  2. Nuget 自定义配置(官网)

    <?xml version="1.0" encoding="utf-8"?> <configuration> <config> ...

  3. 216 Combination Sum III 组合总和 III

    找出所有可能的 k 个数,使其相加之和为 n,只允许使用数字1-9,并且每一种组合中的数字是唯一的.示例 1:输入: k = 3, n = 7输出:[[1,2,4]]示例 2:输入: k = 3, n ...

  4. 策略模式--Java篇

    策略模式(Strategy):它定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化,不会影响到使用算法的客户. 下面将以商场打折为例子,说明策略模式.商场收银如何促销,用打折还是 ...

  5. Mysql函数、语句

    一:日期函数: 日期函数: SELECT CURDATE(); # 2018-07-07 SELECT CURTIME(); # 11:28:24 SELECT NOW(); # 2018-07-07 ...

  6. nodejs idea 创建项目 (一)

    1.在工作空间创建module file->new module next next 项目的目录结构: bin:跟业务无关的公共部分 node_modules :默认的模块 public:公共模 ...

  7. iOS---小经验分享

    1.字符串在block中得赋值 定义一个全局变量,<字符串>当这个字符串用copy修饰的时候,然后再在block中赋值,当在block块之外访问时,不能得到字符创的值.此时字符串应该设置为 ...

  8. select 1浅析

    今天看到项目代码里有这条语句,不懂select 1 from XXXXXXX里的1是何意,查了一番才知道: 1.select 1 from mytable;与select anycol(目的表集合中的 ...

  9. (转)淘淘商城系列——SSM框架整合之逆向工程

    http://blog.csdn.net/yerenyuan_pku/article/details/72758590 我们知道在开发中有些工作是非常耗时但是又没有什么技术含量的,比如创建mapper ...

  10. bootparam - 介绍Linux核心的启动参数

    描叙 Linux 核心在启动的时候可以接受指定的"命令行参数"或"启动参数".在通常情况下,由于核心有可能无法识别某些硬件,或可能将某些硬件识别为不正确的配置, ...