模块化及模块化规范

什么是模块化：

将一个项目拆分为若干块，每块之间以一定的形式进行通信，而每块内部的内容都是独立的

前端没有模块化会造成什么问题：
耦合性高，不利于代码维护
污染全局的命名空间，造成代码冲突

模块化的优点：
减少命名冲突
功能独立，可以按需加载
大大提高了代码的可维护性和复用性

模块化规范中常用的两种：

commonJS：

引入方式require
导出方式module.exports

每个模块内部， module变量代表当前模块。这个变量是一个对象，它的 exports 属性（即 module.exports ）是对外的接口。加载某个模块，其实是加载该模块的 module.exports 属性。

模块化例子：

此时通过module.exports暴露了a,b变量及函数test，不在module.exports下的就属于私有的数据，外部无法访问到。

// test/test1.js文件
let a = 1;
let b = 2;
 
let test = () => {
    console.log('test');
}
 
module.exports = {
    a,
    b,
    test
}

 test2文件内导入：

// test2/test2.js
var { a, b,test } = require('./test/test1.js')

ES6:

导入方式：import
导出方式：export
默认导出：export default

//test/test1.js
let a = 1;
let b = 2;
let test=()=>{
    console.log("test")
}
export {
    a,
    b,
    test
}

// test2/test2.js
import { a, b,test } from './test/test1.js'

export default命令：

一个文件内只能使用一次

在import命令接收test1中的数据时，必须使用大括号来接收，而且括号内的数据要和test1中保持一致（a,b,test），需要重新命名时，要是用as关键字，如import{ a as another} from './test/test1.js'

但如果test1文件中使用export default来暴露，则import时可以使用任意名字，也不需要使用大括号来接收

补充：

require和import的区别

commonjs的用法本质上是将要导出的对象赋值给module这个的对象的export属性，在其他文件中通过require这个方法访问该属性

es6中导出的对象必须与模块中的值一一对应，换一种说法就是导出的对象与整个模块进行解构赋值。

模块加载时间：

require：运行时加载  ——  require 是赋值过程，且是运行时才执行

import：编译时加载（效率更高）—— import 是解构过程，且是编译时执行，import 命令会提升到整个模块的头部

对性能的影响：

require：性能相对于import稍低，因为 require 是在运行时才引入模块，并且还赋值给某个变量

import ：只需要依据 import 中的接口在编译时引入指定模块，所以性能稍高。

模块本质：

require：模块就是对象，输入时必须查找对象属性

import：模块不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入

模式：

CommonJs模块默认采用非严格模式

ES6 的模块自动采用严格模式