理解AMD ,CMD,CommonJS规范
发布日期:2021-06-28 15:11:38 浏览次数:2 分类:技术文章

本文共 4090 字,大约阅读时间需要 13 分钟。

这是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激。

本篇默认读者大概知道require,seajs的用法(AMD,CMD用法),所以没有加入使用语法。

 

 

1、为何而生:

 这三个规范都是为javascript模块化加载而生的,都是在用到或者预计要用到某些模块时候加载该模块,使得大量的系统巨大的庞杂的代码得以很好的组织和管理。模块化使得我们在使用和管理代码的时候不那么混乱,而且也方便了多人的合作。

 

2、那些规范们:

      (1)、CommonJS 是一个有志于构建 JavaScript 生态圈的组织。整个社区致力于提高 JavaScript 程序的可移植性和可交换性,无论是在服务端还是浏览器端。

     a groupwith a goal of building up the JavaScript ecosystem for web servers, desktopand command line apps and in the browser.

    一个有目标的构建JavaScript生态系统Web服务器组,在浏览器和命令行应用程序和桌面。(他自己wiki上这么说的)

           这个组织呢制定了一些规范 (可以去他们网站看看 )包括CommonJS Modules/1.0 规范,我们平时所说的commonjs规范,说的就是这个了。

          “TheCommonJS API will fill that gap by defining APIs that handle many commonapplication needs, ultimately providing a standard library as rich as those ofPython, Ruby and Java. ”--(出自 

    所以说Commonjs是一个更偏向于服务器端的规范。Node.js采用了这个规范。 根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读 取一个文件并执行,最后返回文件内部的exports对象。

       他又说了,可以用在下面这些场景  ,所以他更明显的偏向服务器端。当然你也可以把它用在浏览器里边(他们自己说可以)。

·       Server-side JavaScript applications

·       Command line tools

·       Desktop GUI-based applications

·       Hybrid applications (Titanium, Adobe AIR)

  

  (2)、AMD规范

    Commonjs解决了模块化的问题,并且可以用在浏览器中,但是Commonjs是同步加载模块,当要用到该模块了,现加载现用,这种同步机制到了浏览器里边就有问题了,加载速度啊啥的(览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。

    鉴于浏览器的特殊情况,又出现了一个规范,这个规范呢可以实现异步加载依赖模块,并且会提前加载那就是AMD规范。AMD可以作为CommonJS模块一个中转的版本只要CommonJS没有被用来同步的require调用。使用同步require调用的CommonJS代码可以被转换为使用回调风格的AMD模块加载器(https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88) (它说的)。

    

    下面是一个使用了简单CommonJS转换的模块定义(它是amd规范的一种用法):

     define(function (require, exports, module) {

       var a = require('a'),

           b = require('b');

 

       exports.action = function () {};

     });

    所以说AMD和Commonjs是兼容的,只要稍稍调换一下调用方法就实现了同步加载(我很怀疑amd也是在commonjs基础上加了个壳,然后并没有找到其他的神马说明和支持的文字,找到了一定加到这)。

    看一下AMD规范你会发现,AMD基本都是提前说明依赖模块,然后预加载这些模块,实际上这就要求你提前想好这些依赖,提前写好,不然写代码过程中要回到开头继续添加依赖。

 

  (3)、CMD

    不知道是不是针对这个问题,淘宝的玉伯大牛搞了个seajs出来,并声称这个规范是遵循CMD规范的,然后给出了这个规范的一个连接(打开会发现draft字样)。关于这个规范呢玉伯在知乎是这么说的

      ”AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

      CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

      类似的还有 CommonJSModules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出。
      还有不少⋯⋯

      “

     所以这个规范实际上是为了Seajs的推广然后搞出来的。那么看看SeaJS是怎么回事儿吧,基本就是知道这个规范了。

    同样Seajs也是预加载依赖js跟AMD的规范在预加载这一点上是相同的,明显不同的地方是调用,和声明依赖的地方。AMD和CMD都是用difine和require,但是CMD标准倾向于在使用过程中提出依赖,就是不管代码写到哪突然发现需要依赖另一个模块,那就在当前代码用require引入就可以了,规范会帮你搞定预加载,你随便写就可以了。但是AMD标准让你必须提前在头部依赖参数部分写好(没有写好? 倒回去写好咯)。这就是最明显的区别。

 

3、共生共处

  由于CommonJS是服务器端的规范,更另外两个标准实际不冲突。

  AMD在国外用的更多,当然国内也是不少的,jQuery1,7版本开始使用,Dojo在1.6版本开始用,这已经能够证明它足够牛x了。

  CMD当然也有很多人在用,但是基本都集中在国内,Seajs官网就展示了一大堆牛逼的公司在用(包括爱奇艺,腾讯微博,支付宝,淘宝等一大堆,去这看看),估计小的不出名的也不计其数了,毕竟很多公司招聘都要求会seajs嘛。

      所以三个规范目前都挺好(其实也主要是因为js么有自己的模块加载机制,es6出来之后不知道会怎样)。

  当我们写一个文件需要兼容不同的加载规范的时候怎么办呢,看看下面的代码。

  

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

(function (root, factory) {

 

    if (typeof define === 'function' && define.amd) {

 

        // AMD

 

        define(['jquery', 'underscore'], factory);

 

    } else if (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

 

    }

 

}));   

这个代码可以兼容各种加载规范了。

  

4、AMD和CMD的区别

     下面这几点是玉伯在知乎上说的。

 

  1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy aspossible.

  2. CMD 推崇依赖就近,AMD 推崇依赖前置

 

  3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹

 

  4. 还有一些细节差异,具体看这个规范的定义就好,就不多说了。

     ( 好吧~第四点是不多说了。。。。。。。。。)

 

5、AMD和CMD的一些相同

  都有difine和require,而且调用方式实际都可以添加依赖参数,也就是说都可以用提供依赖参数的方式来实现预加载依赖模块(但是不推荐因为  注意:带 id 和 deps 参数的 define 用法不属于 CMD 规范,而属于  规范。---来自:https://github.com/seajs/seajs/issues/242)。

     AMD也可以在factory中使用require来现加载用到的模块,但是这个模块就不会预先加载,属于用到才加载的同步加载了。

    var a = require('a'); //加载模块a

转载地址:https://blog.csdn.net/xcymorningsun/article/details/52709608 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Arcgis Javascript那些事儿(一)--Arcgis server发布feature access服务
下一篇:搞清字库表、编码字符集、字符编码

发表评论

最新留言

关注你微信了!
[***.104.42.241]2024年04月12日 02时11分12秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

安卓开发实战!零基础如何成为高级Android开发,架构师必备技能 2019-04-29
安卓开发实训心得!整理出这份8万字Android性能优化实战解析,持续更新中 2019-04-29
安卓app开发框架!写给即将正在找工作的Android攻城狮,成功入职阿里 2019-04-29
安卓app开发环境搭建!Android最强保活黑科技的最强技术实现,完整PDF 2019-04-29
安卓app软件开发教程!免费Android高级工程师学习资源,值得收藏! 2019-04-29
安卓chrome插件开发!Android架构师教你如何突破瓶颈,跳槽薪资翻倍 2019-04-29
安卓rom开发教程!跟Android初学者分享几点经验,写给正在求职的安卓开发 2019-04-29
原理解析!2021年教你增加拿到BAT等大厂offer几率,offer拿到手软 2019-04-29
原生安卓开发!驱动核心源码详解和Binder超系统学习资源,实战篇 2019-04-29
大牛手把手带你!2021年Android进阶者的新篇章,完整PDF 2019-04-29
太牛了!Android程序员最大的悲哀是什么?面试真题解析 2019-04-29
作为字节跳动面试官,BAT这种大厂履历意味着什么?赶快收藏备战金九银十! 2019-04-29
大牛深入讲解!Android面试中常问的MMAP到底是啥东东?再不刷题就晚了! 2019-04-29
太赞了!你会的还只有初级安卓工程师的技术吗?3面直接拿到offer 2019-04-29
腾讯Android开发面试记录,安卓系列学习进阶视频 2019-04-29
阿里P8架构师的Android大厂面试题总结,醍醐灌顶! 2019-04-29
阿里、腾讯大厂Android面试必问知识点系统梳理,满满干货指导 2019-04-29
阿里大神最佳总结Flutter进阶学习笔记,内容太过真实 2019-04-29
阿里巴巴内部Jetpack宝典意外流出!送大厂面经一份! 2019-04-29
阿里正式启动2021届春季校招!字节跳动Android面试凉凉经,实战解析 2019-04-29