在写闭包的过程中，发现js的规范很多，有时不知道该如何选择，经过一段时间的学习，我把这些规范都了解了一遍，以便在搭建前端框架的时候能够运用自如。
1.AMD规范
特点： ① 异步加载（延迟加载）
② 管理各个模块之间的依赖，便于编写和维护
运行环境： 浏览器环境
应用： requireJS使用的就是AMD规范
语法：
define('模块名称',['依赖项1','依赖项2'],function(依赖项1, 依赖项2){
return {} 或者 return function(){} //可以返回一个对象或者是一个函数
}); //模块名称可以省略,如果没有依赖可以不写
//moduleA.js
define(function(){
return {
sayHello: function(str){
console.log(str);
}
}
});
//Test.js
define('Test',[‘moduleA’],function(moduleA){
var Test = function(name){
this.name = name;
};
moduleA.sayHello('HelloWorld'); //当加载Test.js时，控制台输出HelloWorld
return Test;
});
2.CMD规范
特点： CMD是在AMD基础上改进的一种规范，和AMD不同点在于对依赖模块的执行时机处理不同CMD是就近依赖，而AMD是前置依赖。
运行环境：浏览器环境
应用：seajs是参照UMD规范实现的，requireJS的最新的几个版本也是部分参照了UMD规范的实现
语法：
define(function(require,exports,module){
var obj={};
module.exports = obj; //以变量和值的形式导出
//正确语法
//exports.sayHello = function(){} //exports以对象的形式导出
//错误语法
/*exports{
sayHello: function(){}
}*/
});
3.UMD规范
特点：兼容AMD和commonJS规范的同时，还兼容全局引用的方式
运行环境： 服务器环境或浏览器环境
应用： Jquery源码，闭包的代码块
语法：
(function (root, factory) {
"use strict";
if (typeof define === 'function' && define.amd) {
// AMD
define(['./js/Layer','./js/Test'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS之类的
module.exports = factory(require('./js/Layer'), require('./js/Test'));
} else {
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.Layer, root.Test);
}
}(this, function (Layer, Test) {
var DX = {};
function inheritPrototype(SuperType, SubType){
var prototype = Object.create(SuperType.prototype);
prototype.constructor = SubType;
SubType.prototype = prototype;
}
DX.Layer = function(options){
Layer.call(this, options);
};
inheritPrototype(Layer, DX.Layer);
//DX.Layer.prototype = Layer.prototype;
//Layer.prototype.constructor = DX.Layer;
//inhirtPrototype(Test, DX.Test);
return DX; //暴露一个对象，也可以暴露一个方法，先定义一个函数，直接return 函数名
}));
4.commonJS
特点：
1、模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
2、模块加载会阻塞接下来代码的执行，需要等到模块加载完成才能继续执行——同步加载。
环境：服务器环境
应用：nodejs的模块规范是参照commonJS实现的。
语法：
1、导入：require('路径')
2、导出：module.exports和exports
如node环境下写一个js模块
module.exports={
a: 'str',
b: function(){}
}
注意：module.exports和exports的的区别是exports只是对module.exports的一个引用，相当于Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行var exports = module.exports;这样的命令。
5.ES6 module
1.按需加载（编译时加载）
2、import和export命令只能在模块的顶层，不能在代码块之中（如：if语句中）,import()语句可以在代码块中实现异步动态按需动态加载
环境：浏览器或服务器环境（以后可能支持）
应用：ES6的最新语法支持规范
语法：
1、导入：import {模块名A，模块名B...} from '模块路径'
2、导出：export和export default
3、import('模块路径').then()方法
注意：export只支持对象形式导出，不支持值的导出，export default命令用于指定模块的默认输出，只支持值导出，但是只能指定一个，本质上它就是输出一个叫做default的变量或方法。
网友评论