模块化

1理解：
什么是模块/模块化？
将一个复杂的程序依据一定的规范封装成几个块，并组合在一起
块的内部数据/实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信
为什么要模块化？
降低复杂度
提高解耦性
部署方便
模块化的好处:
避免命名冲突
更好的分离，按需加载
更高复用性
更好维护
页面引入加载script
问题：
请求过多
依赖模糊
难以维护
2模块进化史
全局function模式 //污染全局
namespace模式 //不安全
IIFE模式
IIFE模式增强
load script
3

模块化规范

1.CommonJS
规范：
说明：
http://wiki.commonjs.org/wiki/Modules/1.1
每个文件都可当作一个模块
在服务器端：模块的加载是运行时同步加载的
在浏览器端：模块需要提前编译打包处理
基本语法：
暴露模块：
module.exports = value
exports.xxx = value
问题：暴露的模块到底是什么？
exports对象 （其实，module.exports原本就是一个空的对象。）
引入模块
require(xxx) //第三方模块：xxx为包名；自定义模块：xxx为模块文件路径
实现：
服务器端实现： node.js
http://nodejs.cn/
浏览器端实现： Browserify

			node.js模块化教程
						1.下载安装node.js
						2.创建目录结构
						 /-Modules  
						  /-modelu1.js
						  /-modelu2.js
						  /-modelu3.js
						 /-app.js
						 /-package.json
						   {
							   "name": "commonjs_node",
							   "version": "1.0.0"
						   }
						3.下载第三方模块
						 npm install uniq 
						4.模块化编码
						 module1.js
						   module.exports = {}
						 module2.js
						   module.exports = function(){}
						 module3.js
						   exports.foo = function(){}
						 app.js 
							 //引入第三方库uniq
							 let uniq = require("uniq")
							 //将其他模块汇集到主模块
							 let module1 = require('./modules/module1')
							 let module2 = require('./modules/module2')
							 let module3 = require('./modules/module3')
							 
							 module1.foo() //module1
							 module2()//module2
							 module3.foo()//module3
							 
							 let result = uniq(module3.arr)
							 console.log(result)    //[11,2,3,4,5]
						5.运行
						   node app.js
						   
						
						
			Browserify模块化使用教程
						/-js
						 /-dist  //打包生成文件的目录
						 /-src //源码所在目录
						   /-module1.js
						   /-module2.js
						   /-module3.js
						   /-app.js  //应用主源文件
						/-index.html
						/-package.json
						{
							name:"browserify-test"
							
						}
						2.下载browserify
						全局： npm install browserify -g
						局部：npm install browserify --save-dev   //--save运行依赖的包 -dev开发依赖的包
						3.定义模块代码
						
						4.打包处理js
						 browserify js/src/app.js -o js/dist/bundle.js
						5.页面使用引入
						<script src="js/dist/bundle.js" type="text/javascript" charset="utf-8"></script>
						6.运行index.html到浏览器  

2.AMD
规范：
说明：
Asynchronous Module Definition (异步模块定义)
http://github.com/amdjs/amdjs-api/wiki/AMD
专门用于浏览器端，模块的加载是异步的
基本语法：
定义暴露模块
//定义没有依赖的模块
define(function(){return 模块})
//定义有依赖的模块
define([‘module1’, ‘module2’],function(m1,m2){ return 模块 })
引用使用模块
require([‘module1’, ‘module2’],function(m1,m2){ 使用m1/2})
实现（浏览器端）
Require.js
http://www.requirejs.cn/

Require.js使用教程
	1.下载require.js 并引入
	官网 http://www.requirejs.org
	https://github.com/requirejs/requirejs
	将require.js导入项目js/libs/require.js
	2.创建项目结构
	/-js
	 /-lib
	  /-require.js
	 /-modules
	  /-alerter.js
	  /-dataService.js
	 /-main.js
	/-index.html
	3.定义require.js的模块代码
	dataService.js:
	//定义没有依赖的模块
	define(function(){
		let name= "dataService"
		function getName(){
			return name
		}
		
		//暴露模块
		return  {getName}
	})
	alerter.js:
	//定义有依赖的模块
	define(['dataService'],function(dataService){
		let msg = "alerter.js"
		function showMsg(){
			console.log(msg,dataService.getName())
		}
		$('body').css('background','deeppink')
		//暴露模块
		return {showMsg}
	})
	
	main.js:
	(function(){
		requirejs.config({
			//baseUrl: 'js/lib',  //基本的路径
			paths:{  //配置路径
				dataService: './modules/dataService',
				alerter: './modules/alerter'
				jquery:'./libs/jquery-3.4.1'
			}
		})
		requirejs(['alerter'], function(alerter){
			alerter.showMsg()
		})
	})()
	
	4.页面引入
	<script  src="js/libs/require.js" data-main="js/main.js" ></script>

3CMD
已经卖给国外
规范：
说明：
https://github.com/seajs/seajs/issues/242
专门用于浏览器端，模块的加载是异步的
模块在使用时才会加载执行
基本语法：
定义暴露模块：
//定义没有依赖的模块
define(function(require, exports, module){
exports.xxx = value
module.exports = value
)
//定义有依赖的模块
define(function(require, exports, module){
//引入依赖模块（同步）
var module2 = require(’./module’)
//引入依赖模块（异步）
require.async(’./module3’,function(m3){
})
//暴露模块
exports.xxx = value
)
引入使用模块
define(function(require){
var m1=require(’./module1’)
m1.show()
})
实现：
sea.js
http://www.zhangxinxu.com/sp/seajs
4ES6
规范：
说明：
http://es6runayifeng.com/#docs/module
依赖模块需要编译打包处理
语法：
导出模块：export
引入模块：import
实现（浏览器端）：
使用babel将es6编译为es5代码
使用browserify编译打包js

ES6 Bable-Browserify使用教程
1.定义package.json文件
2.安装babel-cli, babel-preset-es2015, 和browserify //cli :command line interface命令行接口
npm install babel-cli browserify -g //全局安装babel
npm install babel-preset-es2015 --save-dev //当前项目安装
preset 预设（将es6转换成es5的所有插件打包）
3.定义.babelrc文件 (rc //run control //运行时控制文件)
{
“presets”:[“es2015”]
}
4.编码
js/src/module1.js：
//暴露模块 分别暴露
export function foo(){
console.log(“foo() module1”)
}

					export function bar(){
						console.log("bar() module1")
					}
					
					export let arr = [1,4,"bc"]
					
					js/src/module2.js：
					//统一暴露
					function fun(){
						console.log("fun() module2")
					}
					
					function fun2(){
						console.log("fun2() module2")
					}
					export {fun,fun2}
					
					 js/src/module3.js：
					 export default{
						msg:"默认暴露",
						foo(){
							console.log(this.msg)
						}
					}
					 main.js:
					//引入其他的模块
					//语法 import xxx form '路径'
					import {foo, bar} from './module1'  //必须用对象结构赋值的形式
					import {fun, fun2} from './module2'
					import module3 from './module3'
					foo()
					bar()
					fun()
					fun2()
					module3.foo()
				
				
				5.编译
				   使用babel将es6编译为es5代码（但包含CommonJS语法）：babel js/src -d js/lib
				   使用browserify 编译js ：browserify js/lib/main.js -o js/lib/bundle.js
				6.页面使用引入
				<script src="js/dist/bundle.js" type="text/javascript" charset="utf-8"></script>