这是我参与「第五届青训营 」笔记创作活动的第 9 天
什么是模块化
什么是模块化、模块化开发呢?
事实上模块化开发最终的目的是将程序划分成一个个小的结构,在这个结构中编写属于自己的逻辑代码,有自己的作用域,定义变量名词时不会影响到其他的结构,这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用,也可以通过某种方式,导入另外结构中的变量、函数、对象等。按照这种结构划分开发程序的过程,就是模块化开发的过程。
无论你多么喜欢JavaScript,以及它现在发展的有多好,它都有很多的缺陷:
- var定义的变量作用域问题
- JavaScript的面向对象并不能像常规面向对象语言一样使用class
- JavaScript没有模块化的问题
- 早期的JavaScript没有模块化,存在很多的问题
模块化的历史
在网页开发的早期,Brendan Eich开发JavaScript仅仅作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。
这个时候我们只需要将JavaScript代码写到
ajax的出现,前后端开发分离,意味着后端返回数据后,我们需要通过JavaScript进行前端页面的渲染,SPA的出现,前端页面变得更加复杂:包括前端路由、状态管理等等一系列复杂的需求需要通过JavaScript来实现,包括Node的实现,JavaScript编写复杂的后端程序,没有模块化是致命的硬伤,所以,模块化已经是JavaScript一个非常迫切的需求。
但是JavaScript本身,直到ES6(2015)才推出了自己的模块化方案,在此之前,为了让JavaScript支持模块化,涌现出了很多不同的模块化规范:AMD、CMD、CommonJS等。
没有模块化带来的问题
早期没有模块化带来了很多的问题:比如命名冲突的问题。当然,可以通过立即函数调用表达式(IIFE) 解决上面的问题:
IIFE (Immediately Invoked Function Expression)
但是,这又带来了新的问题:
第一,必须记得每一个模块中返回对象的命名,才能在其他模块使用过程中正确的使用
第二,代码写起来混乱不堪,每个文件中的代码都需要包裹在一个匿名函数中来编写
第三,在没有合适的规范情况下,每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况
所以,我们会发现,虽然实现了模块化,但是我们的实现过于简单,并且是没有规范的。
我们需要制定一定的规范来约束每个人都按照这个规范去编写模块化的代码,这个规范中应该包括核心功能:模块本身可以导出暴露的属性,模块又可以导入自己需要的属性,JavaScript社区为了解决上面的问题,涌现出一系列好用的规范,接下来我们就学习具有代表性的一些规范。
CommonJS规范和Node关系
我们需要知道CommonJS是一个规范,最初提出来是在浏览器以外的地方使用,并且当时被命名为ServerJS,后来为了体现它的广泛性,修改为CommonJS,平时我们也会简称为CJS。
Node是CommonJS在服务器端一个具有代表性的实现,Browserify是CommonJS在浏览器中的一种实现,webpack打包工具具备对CommonJS的支持和转换。所以,Node中对CommonJS进行了支持和实现,让我们在开发node的过程中可以方便的进行模块化开发。 在Node中每一个js文件都是一个单独的模块,这个模块中包括CommonJS规范的核心变量:exports、module.exports、require。我们可以使用这些变量来方便的进行模块化开发,模块化的核心是导出和导入,Node中对其进行了实现:
- exports和module.exports可以负责对模块中的内容进行导出
- require函数可以帮助我们导入其他模块(自定义模块、系统模块、第三方库模块)中的内容
模块化案例
模块的加载过程
结论一:模块在被第一次引入时,模块中的js代码会被运行一次
结论二:模块被多次引入时,会缓存,最终只加载(运行)一次
为什么只会加载运行一次呢?
这是因为每个模块对象module都有一个属性:loaded。 为false表示还没有加载,为true表示已经加载,结论三:如果有循环引入,那么加载顺序是什么?
如果出现下图模块的引用关系,那么加载顺序是什么呢?
这个形成了一种数据结构:图结构,图结构在遍历的过程中,有深度优先搜索(DFS, depth first search)和广度优先搜索(BFS, breadth first search),Node采用的是深度优先算法:main -> aaa -> ccc -> ddd -> eee ->bbb