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

大前端进阶

新的一天，冲冲冲

关键字：export

我们先来认识一下什么是：export， es6中js支持module，一个js文件代表一个模块，我们可以用export来导出 用require和import引入

export的特性

1. 每一个模块内声明的变量都是局部变量
2. 模块内部的变量或者函数可以通过export导出
3. 一个模块可以导入别的模块

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

1. 语法差异，不过基本都是定义一个对象去接受导入的文件（十分类似java的导包）
2. 运行方式：require/exports 是运行时动态加载，import/export 是静态编译
   • require是对值的拷贝，改了文件，引入不会发生改变
   • import是对值的应用，会随着文件更改而改变

小结

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