js模块化

什么是模块化？

js模块化就是使用一定的规则，将一个复杂的程序划分成多个块（文件），使得每个文件的功能尽量的独立，降低了块之间的耦合度，使用的时候将该块引入，不需要的时候不引入，大大提高了程序员开发的效率。

为什么要使用模块化？

• 提高模块之间的解耦性，也就是降低模块之间的耦合度
• 更加容易部署，因为每个模块的功能都相对独立
• 降低复杂度

模块化的好处？

• 避免命名冲突
• 高复用性
• 高维护度
• 更好的分离，按需加载

模块化的规范

CommonJS

• 说明
  • 在服务器是同步加载模块的,服务器端其实是基于nodejs的
  • 在浏览器需要提前编译打包,一般使用的是***browserify***进行编译打包，将浏览器不认识的语句转换为可以在浏览器运行的语句，比如require()
• 暴露
  【暴露的本质其实是exports对象】
  • module.exports = value
  • exports.xx = value
• 引用
  • require(xxx)

AMD异步模块定义

依赖requirejs库，专门针对浏览器的规范。在使用时需要使用src去引入require.js库，还需要使用data-mine=“main.js”去引入主模块js文件。

<script data-main="./main.js" src="./libs/require.js"></script>

• 使用define()去定义暴露模块
  • 定义无依赖的模块
  • 定义有依赖的模块

//无依赖
define(function(){
	return 模块
})

//有依赖
define(['module1','module2'],function(m1,m2){
	return 模块
})

• 引用模块

require(['module1','module2'],function(m1,m2){})

CMD通用模块定义

目前使用的较少。
也是专门针对浏览器的，在浏览器端运行时依赖Sea.js库，模块的加载是异步的，模块在使用时再加载执行。

• 定义暴露模块
  • 无依赖模块
  • 有依赖模块

//无依赖
define(function(require,exports,module){
	module.exports = value
	exports.xxx = value
})

//有依赖
define(function(require,exports,module){
	const module = require('路径') //同步引入依赖
	require.async('路径',function(){ //异步引入依赖
		...
	})
})

• 引用模块

define(function(require){
	...
})

ES6

需要使用到的工具

1. 需要将es6转换为es5：babel-preset-es2015
2. 需要将babel命令封装到命令行接口：babel-cli
3. 需要将require语法转化为浏览器认识的语法：browserify
4. 在.babelrc文件中配置babel

{
    "presets": ["es2015"]
}

有三种暴露方式

1. 分别暴露

export function fun1(){
    console.log('module1中的fun1');
}
export function fun2(){
    console.log('module1中的fun2');
}
export const arr = [1,2,3]

在主模块中引入分别暴露和统一暴露的数据值需要使用解构赋值接收

import {fun1,fun2,arr} from './module1'
import {fun3,fun4} from './module2'

2. 统一暴露

function fun3(){
    console.log('module2中的fun3');
}
function fun4() {
    console.log('module2中的fun4');
}
export {fun3,fun4}

3. 默认暴露

//默认暴露时只能暴露一次，所以经常有多个数据需要使用默认暴露时，可以写在一个对象的内部进行export default默认暴露
const func = ()=>{
    console.log('我是默认暴露的函数');
}
export default {
    name:'module3',
    arr1:[1,11,111],
    func:func
}

默认暴露在主模块中使用时，直接接收使用即可。

import module3 from './module3'  //默认暴露不需要解构赋值
module3()