模块化开发
前端代码复杂带来的问题
页面引入多个js文件,命名之间可能互相冲突。造成bug。
前端模块化雏形和commonJS
解决方式一:闭包,匿名函数
aaa.js
(function () {
// 小明
var name = '小明'
var age = 22
function sum(num1,num2) {
return num1+num2
}
var flag = true
if (flag) {
console.log(sum(10,20));
}
})()
bbb.js
;(function () {
var name = '小红'
var flag = false
console.log(name)
})()
ccc.js
if (flag) {
console.log('小明是天才,哈哈哈')
}
但是呢,代码的复用性变低了。前面aaa.js
和bbb.js
中定义过的flag,ccc.js
中无法使用。
使用到模块化
aaa.js修改如下,moduleA
var moduleA = (function () {
//导出的对象
var obj = {}
// 小明
var name = '小明'
var age = 22
function sum(num1,num2) {
return num1+num2
}
var flag = true
if (flag) {
console.log(sum(10,20));
}
obj.flag = flag
obj.sum = sum;
return obj
})()
ccc.js中即可使用moduleA
;(function () {
// 1.想使用flag
if (moduleA.flag) {
console.log('小明是天才,哈哈哈')
}
// 2.使用sum函数
console.log(moduleA.sum(40,50));
})()
此时的moduleA相当于全局变量。
上述即是模块化,如今,我们已经不需要定义自己的模块了。因为有很多人写了模块化的规范,我们只需要遵从规范,即可让别人为我们定义模块化。
- 常见的模块化规范:
- CommonJS、AMD、CMD,也有ES6的Modules
CommonJS的导出
module.exports = {
flag: true,
test(a,b) {
return a + b
},
demo(a,b) {
return a * b
}
}
module.exports底层由node.js解析
var {flag,sum} = require('./aaa.js')
相当于下面这种,是解构解析
var aaa = require('./aaa.js')
var flag = aaa.flag;
var sum = aaa.sum;
ES6模块的导入与导出
ES6的模块化实现
<script src="aaa.js" type="module"></script>
module相当于给文件加了一个房间,此时其他文件便无法直接访问aaa.js
文件的内容了。(必须使用type=“module”,此时浏览器会给我们做支撑)
export {
flag,sum
}
ccc.js
import {flag,sum} from './aaa.js'
导入、导出的几种方法
// 1.导出方式一
export {
flag,sum
}
// 2.导出方式而
export var num1 = 1000;
export var height = 1.88;
// 3.导出函数/类
export function mul(num1,num2) {
return num1 + num2
}
export class Person {
run() {
console.log('running')
}
}
ccc.js
// 1.导入的{}中定义的变量
import {flag,sum} from "./aaa.js";
if(flag) {
console.log('小明是天才,哈哈哈');
console.log(sum(20,30));
}
// 2.直接导入export定义的变量
import {num1,height} from "./aaa.js";
console.log(num1);
console.log(height);
// 3.导入export的function
import {mul} from "./aaa.js";
console.log(mul(30,50));
ES6导出类(和导出函数归为一种)
export class Person {
}
// 3.导入export的function/class
import {mul,Person} from "./aaa.js";
console.log(mul(30,50));
const p = new Person();
export default 在某些情况下,我们并不希望给这个功能命名,而是希望让导入者可以自己命名。
export default address
import addr from "./aaa.js";
console.log(addr);
(注:export default 在一个模块中,不允许存在多个)
当要引入的东西非常多的时候(而且还能避免和本文件的变量重复冲突)
// 5.统一全部导入(使用as起个别名)
// import {flag,num,num1,height,Person,mul,sum} from "./aaa.js";
import * as aaa from './aaa.js'
console.log(aaa.flag);
附:使用vscode开发,安装live server插件,然后右键点击Open With Live Server,运行html。