2 模块化编程思想、模块化规范

1、模块化 ->聚焦点： 各模块之间“高内聚,低耦合”，其通过“暴露接口”或模块调用来产生联系

(1).其将复杂系统分解为多个模块，方便编码；

(2).优点：降低代码复杂性，耦合度，部署方便，提高开发效率，同时也可避免命名冲突，防止变量空间污染，后续维护更加方便； -> 底层剖析其和"设计原则/模式"不谋而合；

(3).模块化实现 -> 封装函数、命名空间、立即执行函数(自执行函数)、模式增强；                     

[自执行函数暴露接口：1.形成闭包return xxx; 2.将变量/函数“挂载”到window对象，jQuery源码便是此方式] [模式增强：变量作为实参传入，作用域链查找更快，jQuery源码将window,undefined传入，以及日常开发中(function($){ })(jQuery)]

 - - - >>>js最初应用场景简单，所以js内部并没有封装模块化的方法(之前提到的模块化实现并非js底层封装)，随着前端的发展，很多后端的概念往前端迁移，前端js可以干很多事情，ES6便出现了处理模块化的方法；[补充：例如java这种后台语言，聚焦点便是处理后台逻辑，所以内部本身就封装了处理模块化的方法]

2、模块化规范 ->模块化实现需遵循规范

(1).CommonJS ->服务器端、同步加载；

[1].其是服务器端模块化规范(最初用于服务器端的node环境)，其规定每个js文件都是一个模块，采用同步加载的方式加载不同模块，由于模块文件都存放于服务器端的硬盘上，因此其读取加载时间快；CommomJs不能用于浏览器，因为浏览器中缺少module,exports,require,global四个环境变量，若浏览器端使用，需要使用工具转换；

[2].服务器端使用： node app.js;//app.js为入口文件

[3].浏览器端使用：browserify工具(转换为可识别的js文件) ->官网：http://browserify.org/

使用流程：npm install browserify -g; -> 安装完成后 ->执行browserify  app.js  -o  bundle.js;//入口文件app.js转换为bundle.js[-o:output输出] ->页面引入即可：

- - - >>>其采取module.exports/exports.foo暴露模块；require();导入模块 -> 省略后缀名.js

(2).AMD规范 ->浏览器端、异步加载、依赖前置(提前加载所有依赖模块)、基于require.js;

require.js官网: https://requirejs.org/

- - - > 其采用define(模块名，['依赖模块名']，回调函数);//定义模块；require(依赖模块，回调函数);//导入模块

index.html

app.js中由于jQuery中有关于AMD规范，所以引入的模块必须"jquery"小写

index.js

demo.js

(3).CMD规范 ->浏览器端、异步加载、按需加载(就近加载)，基于Sea.js(其是SeaJS在推广过程中对模块定义的规范化产出)

Sea.js参考网址：https://www.zhangxinxu.com/sp/seajs/

 - - - >>>其采用define(function(require,exports,module){ });//定义模块，形参顺序不能调换，聚焦点便是参数；require();//引入模块；exports导出模块；->其可理解为结合了CommonJS与AMD规范；

index.html

main.js(入口文件)

m4.js

补充：依赖前置与按需加载的区别 ->AMD执行到require(['index','jquery']) -> 其会立即加载index和jquery模块，这种方式称为提前加载依赖；CMD执行到index.showMsg();会加载index模块，执行到下面$().css();其再加载jquery模块，称为“按需加载”；

(4).ES6模块化 -> export/export default; import {xx} from xx;

[1].其功能较前面三种方式更加完善，强大，也是开发人员所推崇的，但目前ES6无法在浏览器中执行，可通过babel工具来将不被支持的import编译转换为当前受到广泛支持的require；

[2].export可导出多个，export default只能导出一个， 而且其import {} from xx; {}可省略；

- - > 此处import导入与@import url();引入样式，以及less中的@import '.css/.less'有本质的区别；

(5).实际还有一种模块化规范 -> umd;