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;

你可能感兴趣的:(2 模块化编程思想、模块化规范)