模块化开发（ES6）

模块化开发

前端代码复杂带来的问题

页面引入多个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。