JavaScript——模块化的历史进程梳理
随着前端js代码复杂度的提高,js模块化是必然趋势,不仅好维护,同时依赖很明确,不会全局污染,今天整理一下模块化的几个规范吧~
首先梳理一下模块化的发展情况~
无模块化-->CommonJS规范-->AMD规范-->CMD规范-->ES6模块化
1. 无模块化
script标签引入js文件,相互罗列,但是被依赖的放在前面,否则使用就会报错。如下:
<script src="jquery.js"></script><script src="jquery_scroller.js"></script><script src="main.js"></script><script src="other1.js"></script><script src="other2.js"></script><script src="other3.js"></script>复制代码
即简单的将所有的js文件统统放在一起。但是这些文件的顺序还不能出错,比如jquery需要先引入,才能引入jquery插件,才能在其他的文件中使用jquery。缺点很明显:
- 污染全局作用域
- 维护成本高
- 依赖关系不明显
2. CommonJS规范
该规范最初是用在服务器端的node的,它有四个重要的环境变量为模块化的实现提供支持:module
、exports
、require
、global
。实际使用时,用module.exports
定义当前模块对外输出的接口(不推荐直接用exports
),用require
加载模块(同步)。
// a-commonJs.js (导出)
var a = 5;var add = function(param){//在这里写上需要向外暴露的函数、变量 return a + param}module.exports.a = a;module.exports.add = add===========================
// b-commonJs.js引用自定义模块,参数包含路径,可省略.js(导入)
var addFn = require('./a-commonJs')console.log(addFn.add(3)) //8console.log(addFn.a) //5复制代码
一点说明:
exports 是对 module.exports 的引用。比如我们可以认为在一个模块的顶部有这句代码: exports = module.exports所以,我们不能直接给exports赋值,比如number、function等。 复制代码
注意:因为module.exports本身就是一个对象,所以,我们在导出时可以使用
module.exports = {foo: 'bar'} //true
module.exports.foo = 'bar' //true
。
但是, exports 是 module.exports 的一个引用,或者理解为exports是一个指针,exports指向module.exports,这样,我们就只能使用 exports.foo = 'bar'
的方式,而不能使用
exports = {foo: 'bar'} //error 这种方式是错误的,相当于重新定义了exports
一点优点:解决了依赖、全局变量污染的问题
一点缺点: CommonJS用同步的方式加载模块。在服务端,模块文件都存在本地磁盘,读取非常快,所以这样做不会有问题。但是在浏览器端,限于网络原因,CommonJS不适合浏览器端模块加载,更合理的方案是使用异步加载,比如下边AMD规范。
3. AMD规范
承接上文,AMD规范则是非同步加载模块,允许指定回调函数,AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。。
AMD标准中,定义了下面三个API:
require([module], callback)
define(id, [depends], callback)
require.config()
即通过define来定义一个模块,然后使用require来加载一个模块, 使用require.config()指定引用路径。
先到require.js官网下载最新版本,然后引入到页面,如下:
<script data-main="./alert" src="./require.js"></script>
data-main属性不能省略。
以上分别是定义模块,引用模块,运行在浏览器弹出提示信息。
引用模块的时候,我们将模块名放在[]
中作为reqiure()
的第一参数;如果我们定义的模块本身也依赖其他模块,那就需要将它们放在[]
中作为define()
的第一参数。
在使用require.js的时候,我们必须要提前加载所有的依赖,然后才可以使用,而不是需要使用时再加载。
一点优点:适合在浏览器环境中异步加载模块、并行加载多个模块
一点缺点:不能按需加载、开发成本大
4. CMD
AMD 推崇依赖前置、提前执行,CMD推崇依赖就近、延迟执行。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
很明显,CMD是按需加载,就近原则。
5. ES6模块化
在ES6中,我们可以使用 import 关键字引入模块,通过 exprot 关键字导出模块,功能较之于前几个方案更为强大,也是我们所推崇的,但是由于ES6目前无法在浏览器中执行,所以,我们只能通过babel将不被支持的import编译为当前受到广泛支持的 require。
es6在导出的时候有一个默认导出,export default
,使用它导出后,在import的时候,不需要加上{},模块名字可以随意起。该名字实际上就是个对象,包含导出模块里面的函数或者变量。
但是一个模块只能有一个export default
。
6. CommonJs和ES6区别
以下引用阮一峰老师的内容:
(1) CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
- CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
- ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令
import
,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。换句话说,ES6 的import
有点像 Unix 系统的“符号连接”,原始值变了,import
加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。
(2) CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
运行时加载: CommonJS 模块就是对象;即在输入时是先加载整个模块,生成一个对象,然后再从这个对象上面读取方法,这种加载称为“运行时加载”。
编译时加载: ES6 模块不是对象,而是通过
export
命令显式指定输出的代码,import
时采用静态命令的形式。即在import
时可以指定加载某个输出值,而不是加载整个模块,这种加载称为“编译时加载”。
CommonJS 加载的是一个对象(即module.exports
属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
一点说明:本文只是自己的一点笔记,方便自己记忆和理解。\(^o^)/~
作者:sunxiaoying123
链接:https://juejin.im/post/5b4420e7f265da0f4b7a7b27
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
JavaScript——模块化的历史进程梳理相关推荐
- 无法找到模块“mint-ui”的声明文件_[搬运] JavaScript 模块化:CommonJS vs AMD vs ES6...
本文主体部分 翻译+搬运 自外网著名技术博客网站 medium.com 的一篇点赞数 2.7k 的文章 (文章链接在结尾处) 什么是 JavaScript 模块 JavaScript 模块指的是一段可 ...
- JavaScript模块化开发的演进历程
写在前面的话 js模块化历程记录了js模块化思想的诞生与变迁 历史不是过去,历史正在上演,一切终究都会成为历史 拥抱变化,面向未来 延伸阅读 - JavaScript诞生(这也解释了JS为何一开始没有 ...
- javaScript模块化解析
JavaScript模块化解析 什么是模块化? 到底什么是模块化.模块化开发呢? 事实上模块化开发最终的目的是将程序划分成一个个小的结构: 这个结构中编写属于自己的逻辑代码,有自己的作用域,不会影响到 ...
- JavaScript模块化-CommonJS规范
文章目录 认识模块化开发 什么是模块化 模块化的历史 没有模块化带来的问题 CommonJS规范 CJS规范在Node的实现 模块化简单案例 exports和require本质 module.expo ...
- JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules
随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一 ...
- javascript模块化、模块加载器初探
最常见网站的javascript架构可能是这样的: 一个底层框架文件,如jQuery 一个网站业务框架文件,包含整站公用业务模块类(如弹框.ajax封装等) 多个业务文件,包含每个具体页面有关系的业务 ...
- (转)Javascript模块化编程(一):模块的写法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
- Javascript模块化编程(一):模块的写法
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
- Javascript模块化编程:AMD规范
一.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写 ...
最新文章
- 13、JsonResponse响应介绍
- J. Cheminform. | 基于化学基因组学中深度和浅层学习预测药物特异性
- 图解易经:一部终于可以读懂的易经 祖行 扫描版 陕西师范大学出版社
- 传输层端口号的范围是多少?被分为哪两部分_Cu2ZnSnS4纳米晶做空穴传输层经配体改性将低温可喷涂碳电极基钙钛矿太阳能电池的性能提高到17.71...
- 仓鼠体重年龄对照表_一文带你走进仓鼠世界:仓鼠种类之叙利亚仓鼠(上)
- android dip转px
- 《拯救人类》:很有可能改变人类历史进程的书
- ActionBarActivity设置全屏无标题
- http请求 url 竖线_http.createServer创建http服务
- 华为鸿蒙系统是指芯片吗_华为首部鸿蒙手机P50——不再使用麒麟芯片,拍照系统再升级...
- 把lighttpd配置为系统服务
- 俄罗斯方块英文JAVA版下载_俄罗斯方块java源代码完美版
- 平面设计需要学什么软件?平面设计软件有哪些?
- 神经元如何将视觉世界映射到人脑?
- Epsilon-Greedy算法
- 金融类APP上架经验分享
- 手串 如何挑选手串 什么是小叶紫檀?小叶紫檀怎么保养 小叶紫檀怎么盘法
- 少儿计算机兴趣小组活动记录,小学美术兴趣小组活动记录
- 【Linux】冯诺依曼体系结构和操作系统概念
- 橙色wamp的可能解决方法
热门文章
- python随机生成一个地区地址_利用Python生成随机的IP地址
- 2019重庆对口高职计算机类分数排名,重庆2019高职分类考试分数线公布
- dbf文件怎么创建_DBC文件到底是个啥
- linux vim 终端 行首 行尾_不会vi/vim,看这一篇足矣
- 两边双虚线是什么意思_锯齿车道、倒三角标志什么意思?以下5种交通标线你认识几个?...
- python怎么爬取知乎回答并制作词云_爬虫|爬取微博动态
- 零基础学Python可以学会吗?
- java高级程序员如何写好简历,一份优秀的程序员简历是什么样的?
- 手机视频监控系统小结
- 原创:2016.4.25-2016.5.1 C# informal essay and tittle_tattle