js模块化规范AMD、CMD、CommonJS...
1. AMD
1.1 什么是AMD?
- AMD 英文名 Asynchronous Module Definition ,中文名 异步模块定义 。这是一个浏览器模块化开发的规范。
- 由于浏览器环境执行环境的限制,加载js文件相对于服务器端执行环境比较慢,所以采用模块加载的方式,即解释加载依赖的文件时,浏览器不会停止页面渲染或因为加载文件太大而失去响应。
- AMD不是javascript标准支持的,使用AMD规范进行页面开发需要用到对应的库函数,也就是RequireJS,实际上AMD是RequireJS在推广过程中对模块化定义的规范化的产出。
1.2 为什么要用RequireJS
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
- 多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
- 实现文件异步加载,避免页面失去响应
- 在页面底部加载requirejs.js 文件<script src="/js/require.js"></script>
- 加载require.js 后,再加载自定义主文件main.js 按如下写法放在步骤1的后面 <script src="js/require.js" data-main="js/main"></script> 。 data-main 属性指定网页主模块文件路径,main.js 简写为main
- main.js 中模块定义:
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。一个实际的例子:假定主模块依赖jquery、underscore和backbone这三个模块,main.js就可以这样写:
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。
1.2.2 require.config()
require.config({
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
1.3 AMD 规范写法
模块的定义,必须采用define()函数定义。如果一个模块不依赖其他模块,可以直接定义在define()函数中。
加载非规范的模块,对于不按define()规范定义的模块,通过require,.config()定义后再导入
require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
2. CMD
2.1 概述
2.2 AMD&CMD异同:
- 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.
- CMD 推崇依赖就近,AMD 推崇依赖前置。看代码:
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})
3.CommonJS
3.1 概述
//math.js
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
//increment.js
var add = require('math').add;
exports.increment = function(val) {
return add(val, 1);
}; //index.js
var increment = require('increment').increment;
var a = increment(1); //
3.2 CommonJS规范
- 一个js文件就是一个模块
- 输出模块变量最好的办法是export
- 加载模块是require()方法,返回模块的exports对象
4. UMD与ES6 Module
// lib/math.js
export function sum(x, y) { return x + y; }
export var pi = 3.141593; //app.js
import * as math from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi));
// other App.js
import {sum, pi} from "lib/math";
console.log("2π = " + sum(pi, pi));
//其他功能包括:export default and export *:
// lib/mathplusplus.js
export * from "lib/math"; export var e = 2.71828182846;
export default function(x) { return Math.exp(x); }
// app.js
import exp, {pi, e} from "lib/mathplusplus";
console.log("e^π = " + exp(pi));
以上内容只是只为个人学习总结,部分摘自网络,如有侵权,联系即删。
js模块化规范AMD、CMD、CommonJS...的更多相关文章
- js模块化开发 AMD CMD Commonjs
在es6全面实行开来之前 js实现模块开发方案有: 1.AMD 异步模块开发定义 依赖前置,requireJs应用了这一规范 require([module], callback); 加载完后回调 ...
- js模块系统 - amd|cmd|commonjs|esm|umd
写过前端代码大概率听说过amd cmd umd commonjs esm这些名词, 想当初我第一次看到这些的时候, 人都麻了, 都是些啥啊. 后来我知道了, 这些都是js的模块规范. amd - 浏览 ...
- JS模块之AMD, CMD, CommonJS、UMD和ES6模块
CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...
- 深度扫盲JavaScript的模块化(AMD , CMD , CommonJs 和 ES6)
原文地址 https://blog.csdn.net/haochangdi123/article/details/80408874 一.commonJS 1.内存情况 对于基本数据类型,属于复制.即会 ...
- js模块化规范—AMD规范
AMD规范说明 AMD全称是:Asynchronous Module Definition(异步模块定义),github地址 是专门用于浏览器端, 模块的加载是异步的 AMD规范基本语法 定义暴露模块 ...
- JS模块化规范AMD之RequireJS
1.基本操作 加载 JavaScript 文件(入口文件) RequireJS以一个相对于baseUrl的地址来加载所有的代码 <script data-main="scripts/m ...
- js 模块化规范
模块规范 CommonJS module.exports, exports 导出模块 require 加载模块, CommonJS 同步,服务端.实践者: nodejs ES6 export, exp ...
- 再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6
Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. Javascript社区做了很多努力,在现有的运行环境中,实现” ...
- 兼容多种模块规范(AMD,CMD,Node)的代码
在JavaScript模块化开发中,为了让同一个模块可以运行在前后端,以及兼容多种模块规范(AMD,CMD,Node),类库开发者需要将类库代码包装在一个闭包内. AMD规范 AMD,即“异步模块定义 ...
随机推荐
- Nokitjs 系列-01 - HelloWorld
一.前言 本篇文章需要读者有一点 Node.js 基础的了解,并且已经安装了 Node.js (node.npm),但并不需要有 Nokit 的知识,本文将简单介绍 Nokitjs 的安装使用,并编写 ...
- 三分钟教你学Git(十八) - 重写历史
git filter-branch 同意你使用一个单一命令来大范围地更改历史.所以这个命令要慎用. 1假如你想对全部的commits删除一个文件. git filter-branch --tree-f ...
- ExtJS初学笔记---Ext.Msg.alert无效果
最近开始学ExtJS,书上的第一个例子是: 1 2 3 Ext.onReady(function(){ Ext.Msg.alert('Hello.', 'Hello'); }); 这个是Ext ...
- Delphi 资源文件( .res)
一. 现在的Windows应用程序几乎都使用图标.图片.光标.声音等,我们称它们为资源(Resource).最简单的使用资源的办法是把这些资源的源文件打入软件包,以方便程序需要的时候调用.资源是 ...
- ArcGIS Server10.1之服务新特性(WMTS1.0.0) 【转】
http://blog.csdn.net/esrichinacd/article/details/7825587 ArcGIS Server10.1正式支持OGC的WMTS1.0.0版本标准,那么如何 ...
- 入门教程: JS认证和WebAPI
转自:http://www.jianshu.com/p/fde63052a3a5 本教程会介绍如何在前端JS程序中集成IdentityServer.因为所有的处理都在前端,我们会使用一个JS库oidc ...
- C# Json 序列化和反序列化 工具类 Newtonsoft.Json.dll
引用: Newtonsoft.Json.dll // 引用: using Newtonsoft.Json; using Newtonsoft.Json.Converters; // 定义 实体测试类 ...
- Java反转单链表
class Node { private int data; private Node nextNode; public Node(int data) { this.data = data; } pu ...
- 开发 nodejs REST 个人感想
本来想拿 nodejs 做个 ip 查询小应用的,做的时候想着把基础弄好再做应用,没想到做着做着就变成 spring 了 可能太多数人觉得不知道怎么用,以后我会写详细点使用教程 个人感觉自己做出来的东 ...
- Activex打包于发布完整版---微软证书制作
众所周知,Activex组件没有进行有效的签名,在IE上无法安装的,除非你让用户手工开启“接收任何未签名的ActiveX”,这个很明显不现实.而组件签名需要证书,证书从哪里来,你可以选择付1000到3 ...