CommonJS和ES6的导入导出

JavaScript的模块的导入导出

模块化的好处：

1、避免命名冲突（减少命名空间污染）

2、更好的分离，按需加载

3、更高复用性

4、高可维护性

模块化规范

CommonJS

每一个JS文件都可以当做一个模块。

在服务器端：模块的加载是同步加载的，即我们需要等待加载模块的时间。

在浏览器端：浏览器是不认识CommonJS语法的，所以我们需要提前编译打包为浏览器认识的语法。

基本语法：

暴露模块：有两种方式：

module.exports=value;

exports.xxx=value;

暴露的模块本质到底是什么？（exports对象）

引入模块：require(xxx)

第三方模块：xxx为模块名

自定义模块：xxx为模块文件路径

代码展示：

module01.js

//暴露模块用 module.exports=value 暴露一个对象
module.exports={
    msg:'info',
    name:'wahaha',
    foo(){
        console.log(this.msg);
    }
};

module02.js

//暴露一个函数 module.exports=function(){}
module.exports=function () {
    console.log('module2')
};

module03.js

//exports.xxx=value
exports.foo=function () {
    console.log('foo()module3')
};
exports.boo=function () {
    console.log('boo()module3')
};
exports.arr=[1,2,33,33,45,34];

app.js

//引入的第三方模块一般放在自定义模块的上面
let uniq=require('uniq');
//将其他的模块汇集到主模块
let module1=require('./modules/module1');
let module2=require('./modules/module2');
let module3=require('./modules/module3');
//使用各个模块之前，先弄清楚该模块导出的究竟是什么
module1.foo();
module2();
module3.boo();
console.log(module3.arr);
console.log(uniq(module3.arr));

注意：

module.exports的形式其实就是对exports对象的一个重写，会覆盖掉原理的exports对象。

exports.xxx的形式就是早给exports进行添加新的属性和方法。

以上CommonJS的两种导出方式，最终导出的都是exports对象。

ES6的模块（很火）

依赖模块需要编译打包处理。（ES6==》ES5）

导出模块：export

导入模块：import

浏览器端的实现：

使用Babel将ES6编译为ES5代码；

使用Browserify编译打包js.

ES6模块的导出分为常规导出（分别导出和统一导出）和默认导出。

对于这两种不同的导入方式，我们分别应该要采取不同的导入语法。

module01.js

//暴露模块 分别暴露
export function fun() {
    console.log('fun()+module1')
}

export function boo() {
    console.log('boo()+module1')
}

export let arr=[1,2,3,4];

module02.js

//统一暴露
function fun2() {
    console.log('fun1()+module2')
}

function boo2() {
    console.log('boo2()+module2')
}

let arr2=[2,4,5,7];

export {fun2,boo2,arr2}

module03.js

//默认暴露  可以暴露 任意数据类型 ，暴露什么数据接收到的就是什么数据
//export default value
// export default ()=>{
//     console.log('我是默认暴露的箭头函数')
// }
//这个时候暴露出去的就是一个函数，我们可以进行直接调用
//默认暴露，就是我暴露什么，导入的时候就可以接收什么
//在一个文件中，默认暴露只能暴露一次
export default {
    msg:'默认暴露',
    fun(){
        console.log(this.msg);
    }
}

main.js

//ES6引入第三方库
import $ from 'jquery'
//引入其他的模块
//语法： import xxx from '路径'

//对于ES6的export的分别暴露和统一暴露，这两种暴露方式也叫做常规暴露，我们需要使用解构赋值的方式进行导入
//你想要什么需要点名道姓的跟我要才行，这里必须使用结构赋值对常规导出进行导入
import {fun,boo,arr} from './module1'
import {fun2,boo2,arr2} from './module2'
//这个是对默认导出的导入，导入的就是导出的数据类型
import module3 from './module3'
fun();
boo();
console.log(arr);
fun2();
boo2();
console.log(arr2);

console.log(module3);
module3.fun();