Javascript 模块化

1.模块化

• 由来：随着网站功能的提示，编写的Javascript代码也越来越庞大，越来越复杂，开发者需要将不同功能的代码进行封装，需要时再引入并调用，这样做一来代码结构清晰，二来可以加快开发速度
• 详细的Javascript模块化编程请参阅：阮一峰 - Javascript模块化编程（二）

2.模块化的类型

• CommonJS规范：nodejs环境实现的就是CommonJS规范，js文件运行在当前规范中时，那么它就可以读取到3个参数，分别是：

参数	参数类型	说明
require	function	引入其他模块
module	object	定义当前模块
exports	object	定义当前模块

• AMD规范：AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。require.js实现的就是AMD规范，js文件运行在当前规范中时，那么它就可以读取到2个参数，分别是：

参数	参数类型	说明
require	function	引入其他模块
define	function	定义当前模块
define.amd?	true	-

• ES6规范：ES6的模块化运行时需要打包编译，他的源码不会出现生产环境中，因此无需考虑此种情形

3.如何兼容多个语法规范

• 判断运行环境

//1.先判断当前环境是否支持CommonJS规范(node.js)
if(typeof exports == 'object' && typeof module !== 'undefined'){
    console.log('CommonJS规范')
}else if(typeof define == 'function' && define.amd){//2.再判断是否支持AMD规范(require.js)
    console.log('AMD规范')
}else{
    console.log('ES6或者script标签引入')
}

• 封装思路：模块化有两种情形，常见的是定义一个函数或者对象，然后将目标字段挂载到当前环境中，以便在当前环境中调用（比如Vue.js和jquery），第二种是插件安装，无需挂载数据，而是执行一段安装代码,例如Vue.use()

//闭包  传入当前环境的this
(function (global, factory) {
    //1.先判断当前环境是否支持CommonJS规范(node.js)
    if (typeof exports == 'object' && typeof module !== 'undefined') {
        console.log('CommonJS规范')
        module.exports = factory()
    } else if (typeof define == 'function' && define.amd) {//2.再判断是否支持AMD规范(require.js)
        console.log('AMD规范')
        define(factory)
    } else {
        console.log('script标签引入')
        //接收该对象
        this.plugin = factory()
    }
}(this,function(){
    var plugin = {}
    return plugin;
}))

4.ES6模块化

• 导出：一个模块里面可以定义很多个数据供其他模块引入，这些数据可以分为2种：默认数据和非默认数据，默认数据使用export default语句，只能导出一个，非默认数据使用export语句，可以导出多个

//先定义一些数据
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
function sayHello(){
    console.log('hello')
}

//2.默认导出的数据
export default sayHello
//3.导出的数其他数据
export { firstName, lastName, year }
//4.依次导出  3和4只能选其一
//export firstName
//export lastName
//export year

• 导入：默认导出的数据使用一个变量名进行接收(变量名不限定)，非默认数据定义一个{}对象进行接收，通过结构赋值的形式进行接收(字段名必须一致)

//接收export导出的数据 ｛｝内的名称必须和export定义的一致
import {firstName, lastName, year} from './utils/test.js'
//接收export default定义的数据 接收名称随意
import hello from './utils/test.js'

• 非默认数据导出重命名：使用as关键字重命名，语法：原名称 as 新的名称，as关键字可以用在模块定义时，也可以用在模块引入时

//模块定义时 重命名
export { firstName as f_name, lastName, year }

//模块引入时 重命名
import {firstName as f_name} from './utils/test.js'

• 与CommonJS的区别：CommonJS的加载称为“运行时加载”，即：把整个模块全部导入，然后使用ES6的解构赋值选择性的保存需要的部分（没有用的部分被浪费），ES6的模块导入时为了避免资源浪费，在代码编译阶段，就把需要的字段抽离出来，这就是"编译时加载"
• 其他：ES6的导入导出浏览器不支持，需要编译才能运行，可以在uniapp项目中进行代码测试