JavaScript模块化入门:理解模块

一、什么是模块化


类似书本,作家会把他的书分成章节和段落;程序猿也会把他的代码分成模块。

就像书籍的一章,模块仅仅是一坨代码。

二、为何要使用模块


模块化可以使你代码低耦合,功能模块直接不相互影响。好处如下

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

2.命名空间:在JacaScript中,最高级别的函数外定义的变量都是全局变量。因为如此,当一些无关的代码碰巧使用到同名变量到时候,我们就会遇到"命名空间"污染问题。

3.可复用性:工作中,我们 会经常复制自己之前写过的代码到新项目中。复制粘贴虽然方便,但是可以重复利用到模块更佳。

三、如何引入模块


模块模式

模块模式一般用来模拟类的概念,这样我们就能把公有和私有方法还有变量存储在一个对象中。这样我们就能在公开调用API的同时,仍然在一个闭包范围内封装私有变量和方法。

例一:匿名闭包函数


JavaScript模块化入门:理解模块_第1张图片

通过这种构造,匿名函数有啦自己的作用域或者‘闭包’,这允许我们从全局(父局)命名空间隐藏变量

这种方法的好处是,你可以在函数内部使用局部变量,而不会意外覆盖同名全局变量,但仍然能够访问到全局变量。如下图所示:


JavaScript模块化入门:理解模块_第2张图片

注意:一定要用括号把匿名函数包起来,以关键词function开头的语句总是会被解析成函数声明(js中不允许没有命名的函数声明),加上括号后,内部的代码会被识别为函数表达式。这个也叫立即执行函数。

例二:全局引入

另一种比较受欢迎的方法是一些诸如jQuery的库使用的全局引入。和刚才的匿名闭包函数很相似,只是传入全局变量的方法不同


JavaScript模块化入门:理解模块_第3张图片

这个例子中 globalVariable是唯一的全局变量。这种方法的好处是可以预先声明好全局变量,让你的代码更加清晰可读。

例3:对象接口

如图,这是种创建模块的方法是使用独立的对象接口:


JavaScript模块化入门:理解模块_第4张图片

例四:模块模式 Revealing module pattern

这和之前的实现方法非常接近,除了它会确保,在所有的变量和方法暴露之前都会保持私有:


JavaScript模块化入门:理解模块_第5张图片

你可能感兴趣的:(JavaScript模块化入门:理解模块)