Modular specifications

模块化规范

模块化概述

Modularization refers to dividing a complex program,按照一定的规则（规范）Split into several chunks（文件）,并组合在一起.块的内部数据/实现是私有的,只是向外部暴露一些接口（方法）与外部其他模块通信.

简单来说,is a complex program,按照功能（or other rules）划分成不同的模块.Implement the function of the current module in each module,Implemented procedural externals are not concerned,You only need to expose the interface that implements the function to the outside world.

为什么要模块化

1. 降低程序复杂度
2. 降低程序耦合度
3. 便于部署（Can be imported by module,Unused modules can not be imported or deployed）

模块化优点

1. 避免命名冲突（减少命名空间污染）
2. 更好的分离,按需加载
3. 更高的复用性
4. 高可维护性

模块化面临的问题

1. 请求多
2. 依赖模糊
3. 难以维护

模块化演变

1. 全局function模式

   //module1.js
   let msg='hello'
   function f1(){
   	console.log('module1.f1',msg)
   }
   //index.js
   <script src="./module1.js"></script>
   

2. namespace命名空间模式

   let module2={
   	msg:'hello',
   	f1(){
           console.log('module2.f1',this.msg)
   	}
   }
   

3. IIFE模式

   (function (window) {
       let msg = 'hello'
   
       function f1() {
           console.log('module3', msg);
       }
       window.module3 = {
           f1,
           msg
       }
   })(window)
   

模块化规范

1、CommonJS

说明

• Every file can be treated as a module
• 在服务端 The loading of modules is run-time synchronous loading
• 在浏览器端 模块需要提前编译打包处理

基本语法

1. 暴露模块

   方法一：module.exports = value
   方法二：exports.xxx = value
   Essentially exposedexports对象
   

2. 引入模块

   require('...')
   第三方模块：xxx为模块名
   自定义模块：xxx为模块文件路径
   

使用

// module1.js
let msg = 'module1'
module.exports = {
    msg,
    f1() {
        console.log('module1 print', this.msg);//It will be lost when it is deconstructed and called directlythis
    }
}
// module2.js
module.exports=function f2(){
    console.log('module2 print');
}
// module3.js
exports.foo=function(){
    console.log('module3-foo print');
}
exports.bar=function(){
    console.log('module3-bar print');
}

// app.js
let module1 = require('./modules/module1')
let f2 = require('./modules/module2')
let {
    foo:f3, //重命名
    bar
} = require('./modules/module3')

console.log('=======01=========');
console.log('01-module1 require:', module1.msg);
module1.f1();

console.log('=======02=========');
f2();

console.log('=======03=========');
f3();
bar();

2、AMD

说明

• 专门用于浏览器端,模块的加载是异步的
• 依赖于require.js,需要安装依赖,It can be used after configuration

基本语法

1. 暴露模块

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

2. 引入模块

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

使用

// dataService.js 定义没有依赖的模块
define(function(){
	let name = 'dataService.js';
	function getName(){
		return name
	}
	// 暴露模块
	return {getName};
})
// alerter.js 定义有依赖的模块
define(['dataService'], function(dataService){
	let msg = 'alerter.js;
	function showMsg(){
		console.log(msg, dataService.getName());
	}
	return {showMsg};
})
// main.js	Import the module and configure the path
(function (){
	// 配置
	requirejs.config({
		// baseUrl: 'js/lib', //基本路径
		paths: { // 配置路径,默认会添加js文件后缀,Don't add it yourself
			dataService: './modules/dataService',
			alerter: './modules/alerter'
		}
	})
	
	requirejs(['alerter'], function(alerter){
		alerter.showMsg();
	})
})()

3、CMD

说明

• 专门用于浏览器端,模块的加载是异步的
• 模块使用时才会加载执行
• 依赖Sea.js

基本语法

1. 暴露模块

   // 定义没有依赖的模块
   define(function(require,exports,module){
   	exports.xxx=value
   	module.exports=value
   })
   // 定义有依赖的模块
   define(function(require,exports,module){
   	// 引入依赖模块（同步）
   	var module2=require('./module2')
   	// 引入依赖模块（异步）
   	require.async('./module3',function(m3){
   	
   	})
   	// 暴露模块
   	exports.xxx=value
   })
   

2. 引入模块

   define(function(require){
   	var m1 = require('./module1')
   	var m4 = require('./module4')
   	m1.show()
   	m4.show()
   })
   

4、ES6

说明

• 依赖模块需要编译打包处理

基本语法

1. 暴露模块

   // 分别暴露
   export function foo(){
   	console.log('foo')
   }
   export function bar(){
   	console.log('bar')
   }
   export let arr = [1,2,3]
   // 统一暴露
   function fun(){
   	console.log('fun')
   }
   function fun2(){
   	console.log('fun2')
   }
   let arr = [1,2,3]
   export {fun, fun2, arr}
   // 默认暴露 Any type of data can be exposed,暴露什么数据,接收到的就是什么数据
   export default () => {
   	console.log('default')
   }
   或
   export default [1,2,3]
   或
   let arr = [1,2,3]
   export default {
   	foo(){
   		console.log('foo')
   	},
   	arr
   }
   

2. 引入模块

   import xxx from '...'
   

使用

// module1.js
export function f1(){
	console.log('f1')
}
// module2.js
export let a = 1
// module3.js
let arr = [1,2,3]
function f3(){
	console.log('f3')
}
export {arr, f3}
// module4.js
export default function f4(){
	console.log('f4')
}
// index.js
import {f1} from './js/module1'
import {a} from './js/module2'
import {arr, f3} from './js/module3'
import f4 from './js/module4'