前段时间在看一些前端模块化方面的知识,如今本身就来写一个符合amd/cmd 和commonjs标准的模块。在文中会穿插一些AMD/CMD,commonjs的基础知识,主要是为了让本身复习一下。了解的同窗们能够直接略过。前端
该模块是一个实现类数组转为数组功能的模块node
(function(arrayLike){ function arrayLikeObject2Array (arrayLike) { if (!Object.prototype.toString.call(arrayLike) === '[object Object]') { return } else { return Object.keys(arrayLike).map((key) => { return arrayLike[key] }) } } return arrayLikeObject2Array })(obj)
要改形成AMD/CMD模块,首先要了解这两种模块有哪些特色。AMD/CMD 都主要使用define来定义模块,区别在于AMD是依赖前置,而CMD则是依赖就近。什么意思呢?举一个例子,假设AMD和CMD都须要引用Jquery这个模块jquery
//amd define('module1',[Jquery],function(Jquery){ using Jquery do something }) //cmd define(function(require,exports,modules){ //do something var $ =require(Jquery) //using jquery do something })
如今咱们将原模块打形成AMD/CMD标准,以下数组
(function(root,factory){ if(typeof define === 'function'){ define([],factory) } })(this,function(){ function arrayLikeObject2Array(arrayLike){ if (!Object.prototype.toString.call(arrayLike) === '[object Object]') { return } else { return Object.keys(arrayLike).map((key) => { return arrayLike[key] }) } } return arrayLikeObject2Array })
这样,咱们的模块已经支持了AMD/CMD标准。服务器
commonjs模块是nodejs遵循的标准。它加载模块的方式是同步执行的。该规范通常用在服务器开发中。要把咱们的模块改形成具备commonjs规范的模块以下模块化
(function (root, factory) { if (typeof define === 'function' && define.amd) { define([], factory) } else if (typeof exports === 'object') { module.exports = factory() } else { root.returnExports = factory() //若是没有AMD/CMD和CommonJS就挂在全局对象下 } })(this, function () { function arrayLikeObject2Array (arrayLike) { if (!Object.prototype.toString.call(arrayLike) === '[object Object]') { return } else { return Object.keys(arrayLike).map((key) => { return arrayLike[key] }) } } return arrayLikeObject2Array })