js module大战

JS本身是一个多才多艺的语言,一个可以用自己编译自己的自由度极高的语言。正因为这份自由,出现了天花乱坠的规范与框架们,其中最基础的一块便是Module。

来来来,baby们,做个小测试: CommonJS·AMD·CMD·UMD·ES6,这些模块规范,大家熟悉几个?

注意注意:本文乃笔者主观写出的欢快脱线认知,也许和真正的模块形成的历史有所区别。

一切的根源

JS是一个自由度极高的语言,即使没有模块的概念。也可以通过IIFE,new一个对象来实现类似与模块的概念。也可以实现可复用,作用域独立,易维护。这样散装的,无法维护各个模块之间依赖。在一个JS文件中,模块一多,也许就是修罗场。

Module的诞生

于是JS Module,一个令人又爱又恨的名词诞生了。JS本身设计上就没有模块的概念,之后为了让JS变成一个功能强大的语言,业界大佬们各显神通,定了一个名为CommonJS的规范,实现了一个名为模块的东西。可惜大多浏览器并不支持,只能用于nodejs,于是CommonJS开始分裂,变异了一个名为AMD规范的模块,可以用于浏览器端,而由于AMD与CommonJS规范相去甚远,于是AMD自立门户,并且推出了requireJS这个框架,用于实现并推广AMD规范。正因为AMD与CommonJS如此不同,且用于不同的环境,为了能够兼容两个平台,UMD应运而生,不过笔者认为仅仅是一个polyfill,以兼容两个平台。此时,CommonJS的拥护者认为,浏览端也可以实现CommonJS的规范,于是稍作改动,形成了CMD规范,并且推出了seajs这个框架。正在AMD与CMD打得火热的时候,ECMAScript6给JS本身定了一个模块加载的功能,ES6表示“你们也别争了,JS模块有原生的语法了”。

真正的规范

对于众多规范中,只有CommonJS和ES6 import/export是真正的规范,其余的是利用JS现有的支持的方法模拟出的环境,以实现各自的规范。

至于为什么说CommonJS和ES6 import/export是真正的规范呢?因为只有原生支持他们的语法,才能实现他们的规范。

对于CommonJS而言,运行环境中,必须有require和module.exports的支持,才能运行。这就是浏览器与CommonJS无缘的主要原因。

至于ES6,失去对import和export关键字的支持,便一切都是零。比如,nodejs就不支持import和export,明明nodejs支持其他的ES6语法,怎么就对import和export如此不友好,笔者认为nodejs是为了实现commonJS的规范,因此不能接受ES6的模块扰乱nodejs的模块规范。

所以说CommonJS和ES6的模块才是真正的规范。

关于CommonJS和ES6模块,笔者曾经写过一篇关于他们的文章,这里不多做赘述,移步至读懂CommonJS的模块加载。

有关浏览器实现CommonJS模块的原理

既然浏览器缺少CommonJS的两个关键字导致,模块不成立,那么就创建一个模块环境。使用define这个方法,将函数内部模拟成CommonJS的环境,提供require和module.export的方法。无论是seajs还是requirejs都是通过define模拟环境的办法,实现module的。

自立门户的AMD

笔者之前正在DIY台式机,挑选显卡的时候,在A卡和N卡之间犹豫了一下,之后果断选A卡,因为A卡便宜一点。这里的A卡指的是AMD,那么和此处JS的AMD有社么关系吗?没有任何关系!只是因为JS模块的AMD这个缩写和人家美国的AMD公司的名字一致而已,这只是一个美丽的巧合。

AMD的全称是Asynchronous Module Definition,中文名是异步模块定义,不同于CommonJS的按需加载,也就是require了之后才加栽,AMD是将所有的潜在需要用到的包都加载运行了,也就是传说中的高配,至于是否用得到就不再AMD的考虑范围之内了。requirejs就是AMD的代表:

来自AMD的暴击:

define("module1",function(require) {
 'use strict';
 console.log("cccc")
});
define("module2",function(require) {
 'use strict';
 console.log("aaaa")
 if(false){
  console.log(require("module1"))
 }
 console.log("bbbb")
});

require(["module2"])

此时打印cccc,aaaa,bbbb,由此可见AMD是将所有的模块,在模块执行之前,就全部加载完毕了,所以AMD还有一种写法是将所有的依赖模块写头部。

define("module1",function(require) {
 'use strict';
 console.log("cccc")
});
define("module2",[module1],function(module1) {
 'use strict';
 console.log("aaaa")
 if(false){
  console.log(require("module1"))
 }
 console.log("bbbb")
});

浏览一下requirejs的源码:

requirejs有两种获取依赖的方法,一种是配置,一种是利用正则匹配出所有的require的内容,然后加入依赖。当调用当前模块的时候,就先检查依赖的模块是否运行了。

cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,

已经定义完成的模块,会被缓存在一个对象之中,以模块的名字为唯一健值,之后若再次调用此缓存的模块,则无需再次执行。

执行之后缓存结果

defined[id] = exports;

二次执行,先检查是否已存在,若存在怎不重复执行。

function callGetModule(args) {
 //Skip modules already defined.
 if (!hasProp(defined, args[0])) {
  getModule(makeModuleMap(args[0], null, true)).init(args[1], args[2]);
 }
}

若是远程依赖,则创建一个script,加载远程资源,并将script加入头部。

req.createNode = function (config, moduleName, url) {
 var node = config.xhtml ?
   document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
   document.createElement('script');
 node.type = config.scriptType || 'text/javascript';
 node.charset = 'utf-8';
 node.async = true;
 return node;
};

那么UMD是个什么样的存在

第一次接触到UMD,是在webpack的打包之中,想要生成一个library,有好多个选项,CommonJS,amd,umd。当时一下子有点懵,UMD是什么?在不知情的情况下,又出现了一个模块规范,这让笔者的头很大啊。

来自webpack的凝视:

output: {
 path: path.join(__dirname),
 filename: 'index.js',
 libraryTarget: "umd",//此处是希望打包的插件类型
 library: "Swiper",
}

看一眼打包后的效果:

!function(root,callback){
"object"==typeof exports&&"object"==typeof module?//判断是不是nodejs环境
 module.exports=callback(require("react"),require("prop-types"))
 :
 "function"==typeof define&&define.amd?//判断是不是requirejs的AMD环境
  define("Swiper",["react","prop-types"],callback)
  :"object"==typeof exports?//相当于连接到module.exports.Swiper
   exports.Swiper=callback(require("react"),require("prop-types"))
   :
   root.Swiper=callback(root.React,root.PropTypes)//全局变量
}(window,callback)

这样一个polyfill,瞬间就兼容了CommonJS,AMD和全局的一个模块。这就是UMD,比起规范,不如说它是一个兼容,polyfill,支持多个模块规范。

where is CMD?

眼尖的小伙伴应该发现了,CMD不知去向,webpack的打包中也没有CMD模块的一个选项。CMD其实就是按照CommonJS规范,然后进行改造,从而使之支持浏览器端的一种规范。

主要说说他和AMD的主要区别吧:

require关键字引入内容的执行顺序。AMD是一个依赖提前加载的概念,而CMD是同步执行,遇到require之后再执行当前的一个模块。

define("c",function(require, exports, module) {
 console.log("bbb")
});
define("b",function(require, exports, module) {
 console.log("aaa")
 require("c")
 console.log("ccc")
});
seajs.use("b")

这样打印的就是 aaa,bbb,ccc。按照代码出现的顺序执行。

当然这个是同步代码的区别,至于异步代码,CMD和AMD都是通过script,append到head加载,存入模块对象之中,然后根据id调用。不过CMD有一点不同,加了一个小小的优化:

if (!data.debug) {
 head.removeChild(node)
}

当代码加载完毕之后,并且缓存在模块之中之后,便在head之中删除了这个script。

后记

借用鲁迅的一句话“世上本没有路,走的人多了也就成了路”。JS MODUDLE的规范也是如此,用的人多了也就是默认的解决方案了。

JS MODULE大战就写到这边吧,大家都不晓得这些模块的规范能够存活多久,但是概念都很好。所以好好学习概念,以后就算有新的规范出来了,和老规范一对比,找出不同点,加以分析,便能够轻松上手!

参考地址

不能忘记帮助笔者认知模块的文章们,谢谢大佬们:

requirejs:requirejs的官网对于AMD产生历史的解释。
前端模块化开发那点历史 :seajs的大佬对模块这一块的看法,梳理了笔者对于AMD的困惑
overflow上对于AMD和requirejs的一个解释

以上所述是小编给大家介绍的js module详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 详解Sea.js中Module.exports和exports的区别

    一.官方解释 因为SeaJs和Nodejs都是基于CommonJS,所以直接看的Node的官方文档解释 Module.exports The module.exports object is created by the Module system. Sometimes this is not acceptable; many want their module to be an instance of some class. To do this, assign the desired exp

  • 详解AngularJS中module模块的导入导出

    AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC.双向数据绑定.指令和语义化标签.模块化工具.依赖注入.HTML模板,以及对常用工具的封装,例如$http.$cookies.$location等. 关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码. 在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的module中,然后把各个module汇总到该领域的一个文件中,再由主mo

  • JavaScript的Module模式编程深入分析

    基础知识 首先我们要大概了解一下Module模式(2007年由YUI的EricMiraglia在博客中提出),如果你已熟悉 Module 模式,可以跳过本部分,直接阅读"高级模式". 匿名函数闭包 匿名函数闭包是JavaScript最棒的特征,没有之一,是它让一切都成为了可能.现在我们来创建一个匿名函数然后立即执行.函数中所有的代码都是在一个闭包中执行的,闭包决定了在整个执行过程中这些代码的私有性和状态. 复制代码 代码如下: (function () { // ... all var

  • 深入浅析AngularJS中的module(模块)

    什么是AngularJS的模块 我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等-都是属于一个模块! 大多数的应用程序都是有一个自己的函数入口方法Main ,用它来进行初始化,以及加载装配各个模块,然后这些模块的组合,构成了你的应用程序,对吧? 但是,but, AngularJS应用程序却不是这样的哦,它没有main 方法,没有函数入口.

  • AngularJS Module方法详解

    AngularJS是什么? AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强. 何为HTML标签增强?其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签.自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive).后面会详细介绍.那么,什么又是动态web应用呢?

  • seajs1.3.0源码解析之module依赖有序加载

    这里是seajs loader的核心部分,有些IE兼容的部分还不是很明白,主要是理解各个模块如何依赖有序加载,以及CMD规范. 代码有点长,需要耐心看: 复制代码 代码如下: /** * The core of loader */ ;(function(seajs, util, config) { // 模块缓存 var cachedModules = {} // 接口修改缓存 var cachedModifiers = {} // 编译队列 var compileStack = [] // 模

  • node.js报错:Cannot find module 'ejs'的解决办法

    发现问题 最近同事问了一个问题,他在用node.js的时候,发现node.js报错了,错误显示: Error: Cannot find module 'ejs' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (module.js:353:17) at require (internal/module.js:12

  • node.js的exports、module.exports与ES6的export、export default深入详解

    前言 最近难得有空,决定开始重新规范的学习一下node编程.但是引入模块我看到用 require的方式,再联想到咱们的ES6各种export .export default. 阿西吧,头都大了.... 头大完了,那我们坐下先理理他们的使用范围. require: node 和 es6 都支持的引入 export / import : 只有es6 支持的导出引入 module.exports / exports: 只有 node 支持的导出 这一刻起,我觉得是时候要把它们之间的关系都给捋清楚了,不

  • nodejs中exports与module.exports的区别详细介绍

    你肯定非常熟悉nodejs模块中的exports对象,你可以用它创建你的模块.例如:(假设这是rocker.js文件) 复制代码 代码如下: exports.name = function() { console.log('My name is Lemmy Kilmister'); }; 在另一个文件中你这样引用 复制代码 代码如下: var rocker = require('./rocker.js'); rocker.name(); // 'My name is Lemmy Kilmiste

  • node.js中module.exports与exports用法上的区别

    Node.js 引入了模块(Module)概念,一个模块可以通过module.exports 或 exports 将函数.变量等导出,以使其它 JavaScript 脚本通过require() 函数引入并使用. module.exports 初始值为一个空对象 {},所以 exports 初始值也是 {},exports 是指向的 module.exports 的引用,在模块内部大概是这样: exports = module.exports = {}; 举个栗子,在node.js中创建模块非常简

随机推荐