模块化
不使用模块化
1、util.js 封装了一个getFormatDate函数
2、a-util.js 封装了一个aGetFormateDate函数，这个函数使用了utils.js中的getFormatDate
3、a.js 使用了a-util.js中的aGetFormateDate
util.js
function getFormatDate(date, type){ if(type === 1) { return '2017-06-15' } if(type === 2) { return '2017年6月15日' } }
a-util.js
function aGetFormatDate(date) { return getFormatDate(date, 2); }
a.js
var dt = new Date(); console.log(aGetFormatDate(dt))
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="util.js"></script> <script src="a-util.js"></script> <script src="a.js"></script> </body> </html>
＊：
1、util.js，a-util.js，a.js三个js顺序不能放错，一放错就用不了
2、这些代码中的函数必须是全局变量，才能暴露给使用方，全局变量污染。很容易被冲掉，难找bug
3、a.js执导引用a-util.js。但是他不知道a-util.js还需要依赖于util.js
使用模块化-AMD
util.js的方法吐出传给我就好，不用暴露给全局
util.js
define(function() { var util = { getFormatDate: function(date, type){ if (type === 1) { return '2017-06-20' } if (type === 2) { return '2017年6月20日' } } } return util; });
a-util.js
// 依赖于util.js，返回util define(['./util.js'], function(util) { var aUtil = { aGetFormatDate: function(date) { return util.getFormatDate(date,2); } } return aUtil; });
a.js
define(['./a-util.js'], function(aUtil) { var a = { printDate: function(date) { console.log(aUtil.aGetFormatDate(date)) } } return a; });
main.js
require(['./a.js'], function(a){ var date = new Date(); a.printDate(date); })
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>AMD test</p> <script data-main='./main.js' src="https://cdn.bootcss.com/require.js/2.3.3/require.min.js"></script> </body> </html>
＊：
1、https://requirejs.org/
2、全局define函数
3、全局require函数。 只有define后，才能被require
4、依赖的js会自动，异步加载
5、直接引入a.js就行。其他的根据依赖关系自动引用
6、那两个函数，没必要做成全局变量，不会带来污染和覆盖
模块化－CommonJS
nodejs模块化规范，现在被大量前端使用
1、前端开发依赖的插件和库，都可以从npm中获取
2、构建工具的高度自动化，使得使用npm的成本非常低
3、commonjs不会异步加载js,不像amd那样，而是同步一次性加载出来，他不需要异步，因为他不需要从服务器拉取文件，他直接就是在服务器上运行
util.js
module.exports = { getFormatDate: function(date, type){ if (type === 1) { return '2017-06-15' } if (type === 2) { return '2017年6月15日' } } }
a-util.js
var util = require('./util.js'); module.exports = { aGetFormatDate: function(date){ return util.getFormatDate(date, 2); } }
AMD和CommonJS的使用场景
1、需要异步家在JS，使用AMD
2、使用了npm之后建议使用CommonJS
模块化－ES Module
1、语法：import export (注意有无default)
2、环境：babel编译es6语法，模块化可用webpack和rollup
总结：
一开始没有模块化，需要什么写什么，需要什么引用什么。当然是很不好，通过发展，有一套前端工程化的体系
1、AMD成为标准，require.js(也有cmd)
后来有一个require.js这么个东西，前端可以通过一些语法定义，通过define,require这些函数的语法定义，完成模块化的编写。所以require,AMD慢慢成为一个标准，什么是标准，就是他的出现一统江湖，用的人多了，就成为一个标准。比如就用define这个函数，就用require这个函数。define里面有什么参数，返回什么，定义好了之后就成为一个标准。
后来也有cmd。cmd的标准在社区里面用的基本没有了
2、前端打包工具，是的,nodejs模块化可以被使用
3、ES6出现，想统一现在所有模块化标准
4、nodejs积极支持，浏览器尚未统一
