RequireJS实现了AMD的API.

CommonJS是使用exports对象来定义模块的一种方法,它定义了模块的内容。简单地实现一个CommonJS的定义就像下面这样:

// someModule.js

exports.doSomething = function() { return "foo"; };

//otherModule.js

var someModule = require('someModule'); // in the vein of node

exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };

基本上CommonJS明确了你需要有一个require函数来获取依赖,exports变量来输出模块的内容和一些用来获取依赖的模块标识符。CommonJS有多种实现,比如Node.js.

因为CommonJS设计的时候没有考虑浏览器,所以它不适合浏览器环境(我其实对这个不明确,但是这种说法到处都有,比如RequireJS官网)。所以我们得做一些工作来实现异步加载。

相反,RequireJS实现了AMD,它被设计用来适应浏览器环境。表面上看来,AMD开始是CommonJS输出格式的副产品,而且最终进化出了自己的API。在AMD中出现的新东西是define函数,它允许模块在加载依赖之前声明它的依赖。例如定义可能就像下面这样:

define('module/id/string', ['module', 'dependency', 'array'],

function(module, factory function) {

return ModuleContents;

});

因此CommonJS和AMD是JavaScript模块定义API的不同的实现,但是他们有相同的根源。AMD更适合浏览器,因为它支持异步加载模块依赖。RequireJS是AMD的一个实现,而且尽量保留了CommonJS的精神(主要是模块标识符上)。更让人混乱的是,RequireJS在实现AMD的同时,还提供了一个CommonJS包裹,这样CommonJS模块可以几乎直接被RequireJS引入。

define(function(require, exports, module) {

var someModule = require('someModule'); // in the vein of node

exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };

});

CommonJS,AMD,RequireJS的区别的更多相关文章

  1. commonjs amd cmd的区别

    一篇博客告诉你三者的区别:http://zccst.iteye.com/blog/2215317 告诉你三者同requirejs seajs的区别:http://blog.chinaunix.net/ ...

  2. CommonJS,AMD,RequireJS的差别

    RequireJS实现了AMD的API. CommonJS是使用exports对象来定义模块的一种方法,它定义了模块的内容.简单地实现一个CommonJS的定义就像以下这样: // someModul ...

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

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

  4. CommonJS, AMD, CMD是什么及区别--简单易懂有实例

    CommonJS, AMD, CMD都是JS模块化的规范. CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现. AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模 ...

  5. JavaScript模块化编程 - CommonJS, AMD 和 RequireJS之间的关系

    这几天在学习CommonJS的时候突然在StackOverflow上搜索到一个非常好的一个帖子,是关于CommonJS, AMD和RequireJS之间的关系的问答贴.我感觉写的非常好,鉴于没有找到相 ...

  6. Commonjs,AMD,CMD和UMD的差异

    CommonJS 一种服务器端模块化的规范,Nodejs实现了这种规范,所以就说Nodejs支持CommonJS. CommonJS分为三部分: require 模块加载 exports 模块导出 m ...

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

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

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

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

  9. JavaScript模块化编程之AMD - requireJS基础使用

    JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...

随机推荐

  1. 尝试在条件“$(_DeviceSdkVersion) >= 21”中对计算结果为“”而不是数字的“$(_DeviceSdkVersion)

    晚上搞xamarin ,运行xamarin项目好好的,不知道怎么回事,一次运行xamarin android项目的时候,部署失败,以前也是遇到这样的错误. 尝试在条件"$(_DeviceSd ...

  2. HBase0.98使用ReplicationAdmin管理集群同步

    公司datalink平台负责从各种数据源读取数据并同步到其他的同步或者异构数据源,最近增加的HBase的reader利用到了Hbase的Replication特性. 正常情况下,我们配置HBase的R ...

  3. js回到顶部------转载

    [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...

  4. 1、opencv-2.4.7.2的安装和vs2010的配置

    参考大牛们的资料,动手操作了一遍,不算太复杂,和vs2008不同,有几点需要注意,cv2.4.7.2版本没有vc9,所以无法在2008上使用(呵呵,我瞎猜的) 1.下载安装 下载http://sour ...

  5. Linux(CentOS6.5_X86.64)编译libjpeg出现“checking host system type... Invalid configuration `x86_64-unknown-linux-gnu': machine `x86_64-unknown' not recognized”的解决

    本文地址http://comexchan.cnblogs.com/,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢!   今天在编译libjpeg 的时候,遇到下面的报错: checki ...

  6. Webpack 2 视频教程 010 - 配置 ESLint 实现代码规范自动测试 (下)

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  7. 【原创】java NIO selector 学习笔记 一

    能力有限,仅仅是自己看源码的一些笔记. 主要介绍 可选通道 和 选择器 选择键(SelectableChannel  和 Selector SelectionKey) 选择器(Selector) 选择 ...

  8. 使用图片地图减少HTTP请求数量

    前言 最近在看<高性能网站建设>,记录一下所学. 现在很多网站都是图片形式的导航,点击图片跳转到对应的链接.如果导航项目很多的话,图片的数量就会很多,每需要加载一张图片就会多一个HTTP请 ...

  9. JQ trigger函数无法触发a标签的两种解决方法

    起因:点击icon图标后要触发a标签的链接转跳动作,但是用 JQ 的 $('#a').trigger('click') 居然不起作用,遂百度之,总结两种方法如下: (原因:JQ 的 trigger() ...

  10. Vuex- Action的 { commit }

    Vuex 中 使用 Action 处理异步请求时,常规写法如下: getMenuAction:(context) =>{ context.commit('SET_MENU_LIST',['承保2 ...