前端模块化详解

模块化：js天生不支持模块化，简单来说就是不能在一个js文件中引入另一个js文件。但由于js文件越来越来越大，很不方便，一些大神自己编写js底层文件让其支持模块化。
模块化规范：AMD CMD CommonJS ES6

前端模块化详解

模块化开发的意义和发展

javascript本身是弱化命名空间概念的，只有全局作用域和函数私有作用域（es6中新增模块作用域），而模块化开发，从某种意义上来说，是强化了命名空间的概念！

• 有利于代码分离，解耦以及复用
• 团队并行开发
• 避免命名冲突
• 互相应用，按需加载
  …

模块化的发展史

• 单例设计模式
• AMD
• CMD
• UMD
• CommonJS
• ES6 Module

单例设计模式

<script>
	// 高级单例模式：创建一个命名空间（模块名）接收返回的相关信息，实现把信息（方法..）暴露给别的模块使用
	let module = (function(){
		let name = '哈哈'
		function query(){
			console.log('这是一个方法')
		}
		funciton fn(){
			console.log('fn')
		}
		
		window.query=query  // 挂载在window对象上，给别的模块使用，但是挂载的比较多后也可能出现问题
		// 优化后做法
		return {
			query：query
		}

     })() // 写在函数里为了避免变量污染

	let module2 = (function(){

		module1.query()
		funciton fn(){
			console.log('fn2')
		}

     })()

</script>

AMD模块化思想-require.js

main.js

module A.js

/* 定义模块
*AMD思想中，模块的定义基于 define 完成
*  define([name]?(？号的意思是可写可不写),[dependence]?,factory)
* name: 模块的名字
* dependence:依赖，定义的模块依赖那些模块
* factory: 当前定义的模块
*/

define（function(){
	// 任意数求和
	function sum（...args）{
		let len=args.length;
		if(len==10) return 0
		if(len===1) return args[0]
		return args.reduce((total,item)=>{
			return total + item
		})
	}

	// 把指定的方法暴露到外面
	return {
		sum
	}

}）

module B.js

定义模块时引入依赖模块
/* AMD思想需要在定义模块前，把依赖的模块事先导入进来*/

define（['ja/lib/moduleA'],function(moduleA){
	// =》 moduleA存储的就是你‘ja/lib/moduleA’ 这个模块导出的内容
	function average（...args）{
		
	 	return (moduleA.sum(...args) / args.length).toFixed(2)
	}

	// 把指定的方法暴露到外面
	return {
		average
	}

}）

main.js 入口文件

使用模块
require.config({
baseUrl:'js/lib'
})  // 全局配置

 /*AMD中导入某一个模块基于 require
 *require（[dependence],[callback])
  */
 require(['moduleA','moduleB'],funciton(moduleA,moduleB){
		let result = moduleA.sum（123,145） + moduleB.average(7,8,9)

	console.log(result)
})

UMD 通用模块规范

是由社区想出来的一种整合了CommonJS和AMD两个模块定义规范的方法

• 例：
  (function (global, factory) {
  if (typeof exports === ‘object’ && typeof module !== undefined) { //检查CommonJS是否可用
  module.exports = factory(require(‘jquery’));
  } else if (typeof define === ‘function’ && define.amd) { //检查AMD是否可用
  define(‘toggler’, [‘jquery’, factory])
  } else { //两种都不能用，把模块添加到JavaScript的全局命名空间中。
  global.toggler = factory(global, factory);
  }
  })(this, function ($) {
  function init() {
  }
  return {
  init: init
  }
  });
• 例：
  

CMD

CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。在 Sea.js 中，所有 JavaScript 模块都遵循 CMD模块定义规范。

• CMD规范基本语法

	//定义没有依赖的模块
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
})

• 引入使用模块

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

CommonJS

CommonJS相对于AMD来讲不需要前置依赖什么时候用到什么时候导入，而且在Node环境下的CommonJS规范，会把每一次导入模块做缓存（后期在导入，会把上次导入拷贝的结果复制一份）。
在服务器端，模块的加载是运行时同步加载的；在浏览器端，模块需要提前编译打包处理。(借助Browserify)
在一个js文件中给global对象添加属性方法，global相当于window,每个文件都有。其他模块引入require（。。。。.js）后可以直接调用其他模块属性方法（但是另有一个模块也给global挂载相同属性方法会覆盖

ES6 Module