模块化(知识点)

1.模块化

(1)什么是模块化?

把代码整理成一个一个小的功能,便于你增加或减少和修改的功能,同时又不会影响整个系统;

(2)为什么要使用模块化?

模块化可以使你的代码低耦合,功能模块直接不互相影响;

好处:
可维护性: 每个模块都是独立的,良好的设计模块尽量与外部的代码撇清关系,以便于独立对其进行改进和维护;

命名空间: 在js中,最高级别的函数外定义的变量都是全局函数,
会跟一些无关的代码使用到的变量同名,就会遇到命名空间污染的问题;
在我们开发的额过程中要极力的避免;
可复用性: 在现实中我们经常复制以前的代码到自己的新项目中,
这个时候可以使用模块化;

(3)如何引入模块?

@1:匿名的闭包函数 : (function () { }()) 在函数的作用域中下面的变量是私有的
一定要用括号 把匿名的函数包起来,以关键词function 开头的语句
总是被解析成函数的声明(js不允许没有命名的函数声明),加上括号后,
内部的代码就会被识别为函数的表达式,也叫立即执行的函数;

@2:全局引入 : juqery的库使用的全局引入,和匿名闭包函数相似,
传入的全局变量方法不同;

@3:对象接口 : 使用独立的对象接口

一个变量去接收函数的调用,在函数里面的变量都是私有的,
return返回接口调用的方法,把数据写在函数里面,return 返回出来;
函数外面可以通过定义的变量直接调用接口的方法

@4: 揭示模块模式

和匿名闭包函数 全局函数 非常相似,除了他会确保在所有的变量和方法暴露之前都会保持私有

一个变量去接收函数的调用,在函数里面的变量都是私有的,
用一个变量接收函数,把数据写在函数里面,return 返回出来;
在最后面通过return 返回对象出去(对象就是刚才定义的变量名);
函数外面可以通过定义的变量直接调用接口的方法

上面的方案都有一个共同点: 使用单个全局变量把所有的代码
包含在一个函数内,由此创建私有的命名空间和闭包的作用域;

2.依赖模块的两种解决方案 : ConmonJS 和 AMD
ConmonJS

CommonJS扩展了js声明模块的API
CommonJS模块可以很方便将某个对象导出,
让他们能够被其他模块通过require语句引入;

通过CommonJS,每个js文件独立存储模块的内容(像闭包一样),
在这种作用域中,我们通过module.exports 语句来导出对象为模块,
再通过require 语句来引入;

这种的实现比模块模式有两点的好处:

(1):避免全局命名空间的污染
(2):明确代码之间的依赖关系

CommonJS以服武器优先的方式来同步载入模块

AMD

实现异步加载模块

使用define方法,第一个参数是依赖的模块,这些模块都会在
后台无阻塞加载,第二个参数作为加载完毕的回调函数

回调函数将会使用载入的模块作为参数

AMD是优先浏览器的一种异步载入模块的解决方案;除了异步加载外,
AND的另一个优点是你可以在模块里使用对象 , 函数 , 构造函数 ,
字符串 , JSON 或者别的数据类型,而CommonJS只支持对象;

UMD: 通用模块定义规范

UMD创造一种同时使用两种规范的方法,并且也支持全局变量定义,
所以UMD的模块可以同时在服务端和客户端使用;

原生js模块化

ES6的模块功能吸取了CommonJS 和 AMD 的优点,拥有简洁的语法并支持异步加载;

js文件:

变量的操作放在函数里面,用module.exports = { } 导出

在需要的文件引入 :

var 变量 = require(‘../ lib/counter’) 文件地址,之后就可以通过接收的变量调用;

通过import语句,可以引入实时只读的模块,这样就可以实现我们把模块
分隔在不同的文件里,需要的时候又可以合并在一起而且不影响他的功能;