啥是模块化?
一个js文件可以引入其他的js文件,能使用引入的js文件的中的变量、数据,这种特性就称为模块化。
使用模块化开发可以很好的解决变量、函数名冲突问题,也能灵活的解决文件依赖问题。
模块化的发展
- 以前
es5不支持模块化,让前端人员很为难。为了让支持模块化,我们一般会借用第三方库来实现:
-
- sea.js. www.zhangxinxu.com/sp/seajs/
- require.js. requirejs.org/
- 现在
-
- es6原生语法也支持模块化(并不表示浏览器也直接支持模块化 --- 需要单独设置一下)
- Nodejs内部也支持模块化(与es6的模块化有些不同之处),具体的语法在后面来介绍。
常见的模块化规范有
- CommonJS 规范(nodejs 默认支持的)
- ES6 模块化规范
- CMD 和 AMD 模块化规范(不再推荐使用)
Node.js 中的 CommonJS 的模块化规范
CommonJS 规范
CommonJS 规范中主要规定了以下 3 项内容:
- 导入其它模块时,统一使用 require() 函数。
- 每个 .js 文件,都是一个独立的模块,模块内的成员都是私有的。
- 在每个 JS 模块中,使用 module.exports 向外共享成员。
注意
- module.exports 是固定写法,一般放在文件的最末尾,也只用一次。
- module.exports表示当前模块要暴露给其它模块的功能。
-
- 它可以导出对象,数组,函数等等类型。为了方便组织代码,导出对象的情况比较多。
- 不必要导出所有函数,对象,数组等。那些没有导出的部分就相当于这个模块的内部变量了。在下图中变量1,函数1,数组就是模块内部的数据,在外部无法别访问到。
自定义模块
背景
我们对代码的封装是以模块(一个独立的.js文件)为单位进行的。一般的做法是实现好某一个功能之后,封装成一个模块,然后在其它文件中使用这个模块。
类比于js自定义函数,自定义模块的使用场景是:
- 代码需要在项目重用
- 代码需要提供给他人使用
- 代码虽然不需要重用,但封装成模块有利于优化代码结构,方便后期维护与扩展
步骤
一共有两步:
- 定义模块。就是创建一个js文件, 对外导出我们希望导出的内容。
- 使用模块。在需要使用的地方去导入模块文件。