6-前端模块化
一、为什么需要模块化
1、JavaScript的原始功能
在网页开发的早期,js 制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码很少,直接将代码写在 <script> 标签中即可:
<script> document.getElementById('button').onclick = function(){ console.log('按钮发生了点击'); } </script>
随着 ajax 异步请求的出现,慢慢形成了前后端的分离,客户端需要完成的事情越来越多,代码量也是与日俱增,为了应对代码量的剧增,
我们通常会将代码组织在多个js文件中,进行维护,但是这种维护方式,依然不能避免一些灾难性的问题;
比如全局变量同名问题:
// a.js 文件中,小明定义了一个变量 flag , 值为 true
flag = true
// b.js 文件中,小红也定义了一个变量 flag , 值为 false
flag = false
// main.js 文件中,小明想通过 flag 进行一些判断,完成后续的事情
if (flag) {
console.log('小明是个画家'); // 结果可能会因为flag同名的问题,而出现逻辑错误
}
另外,这种代码的编写方式对 js 文件的依赖顺序几乎是强制性的,当 js 文件过多,比如有几十个的时候,弄清楚它们的顺序是一件比较麻烦的事情,
而且即使你弄清楚顺序了,也不能避免上面出现的这种尴尬问题的发生;
这时,我们可以使用匿名函数来解决方面的重名问题;
2、匿名函数的解决方案
在 a.js 文件中,我们使用匿名函数:
(function(){
flag = true
})()
使用匿名函数虽然解决了重名问题,但是如果我们希望在 main.js 文件中,用到 flag,应该如何处理呢?
显然,另外一个文件中不方便使用,因为 flag 是一个局部变量。
这时,我们可以将需要暴露到外面的变量,使用一个模块作为出口。
3、使用模块作为出口
// 使用模块作为出口
var ModuleA = (function(){
// 1. 定义一个对象
var obj = {}
// 2. 在对象内部添加变量和方法
obj.flag = true
obj.myFunc = function(info){
console.log(info);
}
// 3. 将对象返回
return obj
})()
以上代码在匿名函数内部,定义一个对象,给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可),
最后将这个对象返回,并且在外面使用了一个 MoudleA 接受。
接下来,在 main.js 中使用只需要使用属于自己模块的属性和方法即可:
// 使用模块
if(ModuleA.flag){
console.log('小明是个画家');
}
ModuleA.myFunc('小明是个画家')
console.log(ModuleA);
这就是模块最基础的封装,事实上模块的封装还有很多高级的话题,幸运的是,前端模块化开发已经有了很多既有的规范,以及对应的实现方案;
常见的模块化规范:
- CommonJS
- AMD
- CMD
- ES6 Modules
4、了解CommonJS
模块化有两个核心: 导入、导出
// CommonJS 导出
// 在a.js中:
module.exports = {
flag: true,
sum(a, b) {
return a + b
}
}
// CommonJS 导入
// 在main.js中:
let {flag,sum} = require('a.js')
5、ES6的export和import
(1)export基本使用
export指令用于导出变量,比如下面的代码:
// info.js
export let name = 'lyy'
export let age = '18'
export let height = '1.75'
上面的代码还有另外一种写法:
// info.js
let name = 'lyy'
let age = '18'
let height = '1.75'
export {name, age, height}
(2)导出函数或类
上面我们主要是输出变量,也可以输出函数或者输出类
上面的代码也可以写成这种形式:
(3)export default
某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名
这个时候就可以使用 export default
// info.js
export default function(){
conse.log('default function')
}
来到 main.js 中,这样使用就可以了:
import myFunc from './info.js'
myFunc()
这里的 myFunc 是自己命名的,可以根据需要命名它对应的名字
另外,需要注意:
export default 在同一个模块中,不允许同时存在多个
(4)import使用
我们使用 export 指令导出了模块对外提供的接口,就可以通过 import 命令来加载对应的这个模块了
首先,需要在HTML代码中引入两个 js 文件,并且类型需要设置为 module:
<script src="info.js" type="module"></script> <script src="main.js" type="module"></script>
import指令用于导入模块中的内容,比如main.js的代码:
import {name,age,height} from "./info.js"
如果我们希望某个模块中所有的信息都导入,一个个导入显然有些麻烦,则可以导入模块中所有的 export 变量,
但是通常情况下我们需要给起一个别名,方便后续的使用:
import * as info from "./info.js"
console.log(info.name,info.age,info.height)