大前端进阶篇：大前端进阶最后一篇~模块化

关键字：export

我们先来认识一下什么是：export，

es6中js支持module，一个js文件代表一个模块，我们可以用export来导出

用require和import引入

export的特性

每一个模块内声明的变量都是局部变量

模块内部的变量或者函数可以通过export导出

一个模块可以导入别的模块

commonjs的模块化~

common.js中模块化是这样的

var sum =(a,b) => a+b
var sub =(a,b) => a-b
var mul =(a,b) => a*b
var di =(a,b) => a/b
module.exports={
    sum,
    sub,
    mul,
    di
}

引入使用是这样的

const m = require("./四则运算.js")
console.log(m.sub(2,2))
console.log(m.sum(2,2))
console.log(m.mul(2,2))
console.log(m.di(2,2))

es6的模块化

默认是不支持import引入的，我们在使用之前需要用babel把es6降级到es5才可以正常使用   码来！

export default{
    geylist(){
        // 真是业务中，用异步获取数据
        console.log("获取数据列表")
    },
    save(){
        // 真是业务中，用异步获取数据
        console.log("保存数据")
    }
}

引入使用

import user from './userApi'
user.geylist()
user.save()

开始提问啦久违的问答环节

commonjs和es6，require和import

语法差异，不过基本都是定义一个对象去接受导入的文件（十分类似java的导包）

运行方式：require/exports 是运行时动态加载，import/export 是静态编译

require是对值的拷贝，改了文件，引入不会发生改变

import是对值的应用，会随着文件更改而改变

小结

模块化让我们可以在js的开发中更加贴近我们熟悉的后端方式，可以用类似导包的方式来让我们的代码提高移植性和复用性，十分有效