前言
今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间,重学ES6+,前面我们介绍了异步代码处理方案,今天介绍模块化的历史
什么是模块化
- 到底什么是模块化、模块化开发呢?
- 事实上模块化开发最终的目的是将程序划分成
一个个小的结构
; - 这个结构中编写属于
自己的逻辑代码
,有自己的作用域
,不会影响到其他的结构; - 这个结构可以将自己希望暴露的
变量、函数、对象
等导出给其结构使用; - 也可以通过某种方式,导入另外结构中的
变量、函数、对象
等;
- 上面说提到的
结构
,就是模块
;按照这种结构划分开发程序的过程,就是模块化开发
的过程; - 无论你多么喜欢JavaScript,以及它现在发展的有多好,它都有很多的缺陷:
- 比如var定义的变量作用域问题;
- 比如JavaScript的面向对象并不能像常规面向对象语言一样使用class;
- 比如JavaScript没有模块化的问题;
- Brendan Eich本人也多次承认过JavaScript设计之初的缺陷,但是随着JavaScript的发展以及标准化,存在的缺陷问题基 本都得到了完善。
- 无论是web、移动端、小程序端、服务器端、桌面应用都被广泛的使用;
模块化的历史
- 在网页开发的早期,Brendan Eich开发JavaScript仅仅作为一种
脚本语言
,做一些简单的表单验证或动画实现等,那个时候代码还是很少的:
- 这个时候我们只需要讲JavaScript代码写到
<script>
标签中即可; - 并没有必要放到多个文件中来编写;甚至流行:通常来说JavaScript 程序的
长度只有一行
。
- 但是随着前端和JavaScript的快速发展,JavaScript代码变得越来越复杂了:
- ajax的出现,
前后端开发分离
,意味着后端返回数据后,我们需要通过JavaScript
进行前端页面的渲染
; - SPA的出现,前端页面变得更加复杂:
包括前端路由、状态管理
等等一系列复杂的需求需要通过JavaScript来实现; *包括Node的实现,JavaScript编写复杂的后端程序
,没有模块化是致命的硬伤;
- 所以,模块化已经是JavaScript一个非常迫切的需求:
- 但是JavaScript本身,直到
ES6(2015)
才推出了自己的模块化方案; - 在此之前,为了让JavaScript支持模块化,涌现出了很多不同的模块化规范:
AMD、CMD、CommonJS
等;
- 之后的内容,我将详细介绍JavaScript的模块化,尤其是CommonJS和ES6的模块化。
没有模块化带来的问题
- 早期没有模块化带来了很多的问题:比如命名冲突的问题
- 当然,我们有办法可以解决上面的问题:立即函数调用表达式(IIFE)
- IIFE (Immediately Invoked Function Expression)
- 但是,我们其实带来了新的问题:
- 第一,我必须记
每一个模块中返回对象的命名
,才能在其他模块使用过程中正确的使用; - 第二,代码写起来
混乱不堪
,每个文件中的代码都需要包裹在一个匿名函数中来编写
; - 第三,在
没有合适的规范
情况下,每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况;
- 所以,我们会发现,虽然实现了模块化,但是我们的实现过于简单,并且是没有规范的。
- 我们需要制定一定的规范来约束每个人都
按照这个规范去编写模块化的代码
; - 这个规范中应该包括核心功能:
模块本身可以导出暴露的属性,模块又可以导入自己需要的属性
; - JavaScript社区为了解决上面的问题,涌现出
一系列好用的规范
,接下来我们就学习具有代表性的一些规范。
代码演示
// a.js var moduleA = (function() { var name = "why" var age = 18 var isFlag = true return { name: name, isFlag: isFlag } })() // b.js (function() { if (moduleA.isFlag) { console.log("我的名字是" + moduleA.name) } })()