模块化编程

一、基本介绍

• 传统非模块化编程开发有如下的缺点：（1）命名冲突（2）文件依赖
• JavaScript代码越来庞大，JavaScript引入模块化编程，开发者只需要实现核心业务逻辑，其他都可以加载别人已经写好的模块
• JavaScript使用“模块”（module）的概念来实现模块化编程，解决非模块化编程问题
• 模块化也是es6的新特性

二、CommonJS模块编程（ES5的写法）

1.介绍

• 每个js文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、类等，都是私有的，对其它js文件不可见
• CommonJS使用module.exports={}/exports={}导出模块，使用let/const 名称 = require(“xxx.js”)导入模块

2.代码

CommonJs.js模块

const name = "韩顺平";
const PI = 3.14;

let sum = (a, b) => {
    return parseInt(a) + parseInt(b);
}

let sub = (a, b) => {
    return parseInt(a) - parseInt(b);
}

let monster = {
    name:"孙悟空",
    age:3000,
    skill:"七十二变，不死金身，火眼金睛"
}

// 方式1
// 解读
// 1.module.exports={}可以将这个理解为一个对象
// 2.如果module.exports={}中的属性与要导出的对象，属性，方法等
//   名字相同可以忽略，直接写名字即可
// 3.可以全部导出，也可以部分导出
// module.exports={
//     name:name,
//     PI:PI,
//     monster:monster
// }
// module.exports={
//     name,
//     PI,
//     monster
// }
// 方式2
exports={
    name,
    PI,
    monster
}




require.js



// 解读
// 1. 可以将es5_require理解成一个对象，跟使用对象一样使用里面的方法，属性，对象等
// 2. 未导出的方法，属性，对象等，是使用不了的
const es5_require = require("./commonjs");


console.log(es5_require.PI);
console.log(es5_require.monster.name);
console.log(es5_require.monster.skill);

三、ES6模块化编程

1.介绍

• ES6使用（1）export{名称/对象/函数/属性} （2）export 定义 = （3）export default {} 导出模块
• 使用 import {} from “xxx.js” （1,2） / import 名称 form “xxx.js” 导入模块

2. 批量导出形式

const name = "韩顺平";
const PI = 3.14;

let sum = (a, b) => {
    return parseInt(a) + parseInt(b);
}

let sub = (a, b) => {
    return parseInt(a) - parseInt(b);
}

let monster = {
    name:"孙悟空",
    age:3000,
    skill:"七十二变，不死金身，火眼金睛"
}

//使用批量导出
// 1.也可以理解为一个对象
// 2.可以全部导出，也可以部分导出
export {
    name,
    PI,
    sum,
    monster


}


//解读
// 1.我们可以使用{}来接收导出的数据
// 2.我们可以全部接收，也可以选择的接收
// 3.注意：我们导入的数据名称要和导出的名称一样，否则取不出来

import {PI,monster,name,sum} from "./commonJS"

console.log(sum(10,20))
console.log(PI)

3.单条导出形式

const name = "韩顺平";
const PI = 3.14;
// 记住导入的时候要和导出时定义的名称相同，否则取不出来
export let sum = (a, b) => {
    return parseInt(a) + parseInt(b);
}

let sub = (a, b) => {
    return parseInt(a) - parseInt(b);
}

let monster = {
    name:"孙悟空",
    age:3000,
    skill:"七十二变，不死金身，火眼金睛"
}


//解读
// 1.我们可以使用{}来接收导出的数据
// 2.注意：我们导入的数据名称要和导出的名称一样，否则取不出来
// 3.可以理解为对象解构
import {sum} from "./commonJS2"
console.log(sum(10,20))

4.默认导出形式

// 默认导出形式
// 注意
// 1.可以理解为一个对象
// 2.大多数的定义方式和在对象中定义的要求和限制一样
// 3.可以导出方法，属性，对象等
export default {
    name: "韩顺平",
    PI: 3.14,
    sum(a, b) {
        return parseInt(a) + parseInt(b);
    },

    sub(a, b) {
        return parseInt(a) - parseInt(b);
    },
    monster:{
        name: "孙悟空",
        age: 3000,
        skill: "七十二变，不死金身，火眼金睛"
    }
}



//解读
// 1.我们可以使用{}来接收导出的数据
// 2.我们可以自己定义名称，防止重名
// 3.可将导入的的模块看成一个对象来进行使用

import common from "./commonJS3"

console.log(common.sub(10,20))
console.log(common.PI)

4.注意事项和使用细节

• ES6的模块无法在Node.js中执行，需要用Babel转码成ES5后再执行
• export不仅可以导出对象，一切JS变量都可以导出。比如：基本数据类型变量、函数、数组、对象
• 没有导出的不能使用
• es6导出方式较多，不同的导出方式导入方式也有一定影响
• es6导出方式虽然很多，但是其本质都是一样的。