前端模块化

一、CommonJS模块规范

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

1.1 es5模块化栗子

（1）先创建module文件夹

（2）创建01.js存放方法，并把方法设置为可调用的（通过exports设置）

//创建js方法
const sum=function(a,b){
    return parseInt(a)+parseInt(b)
}
const subtract=function(a,b){
    return parseInt(a)-parseInt(b)
}
//2、设置哪些方法可以被调用
module.exports={
    sum,
    subtract
}

（2）创建02.js调用01.js 的方法

//调用01.js里面的方法
//1、先引入01.js文件
const m=require('./01.js')

//2、调用
console.log(m.sum(1,2))
console.log(m.subtract(10,3))

（3）最后可以在终端通过命令执行

node 02.js

1.2 es6模块化

注意：如果使用es6写法实现模块化操作，在node.js环境中不能直接运行的，需要使用babel把es6代码转换es5代码，才可以在node.js进行运行。（这个回答可以在面试的时候提及）

1.2.1 es6定义方法1

//定义方法
export function getList(){
    console.log('getList...')
}

export function save(){
    console.log('save...')
}

1.2.2 es6调用方法1

//大括号里面是引用的方法名字
import {getList,save} from './01.js'
//调用方法
getList()
save()

1.2.3 es6定义方法2

//定义方法2
export default{
    getList(){
        console.log('getList...')
    },
    save(){
        console.log('save...')
    }
}

1.2.4 es6调用方法2

//大括号里面是引用的方法名字
import m from './01.js'
//调用方法
m.getList()
m.save()