龙空技术网

Javascript模块化编程:模块简单的写法

安排小程序网站 856

前言:

而今大家对“js什么是模块”大概比较注重,朋友们都需要了解一些“js什么是模块”的相关内容。那么小编同时在网上汇集了一些关于“js什么是模块””的相关文章,希望大家能喜欢,同学们快快来了解一下吧!

1)我们来看看什么是模块化?

模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口、模块间具有透明性。javascript中的模块在一些C、PHP、java中比较常见:

c中使用include 包含.h文件;php中使用require_once包含.php文件

java使用import导入包

此中都有模块化的思想。

2)模块化的优缺点:

a>优点:

可维护性

1.灵活架构,焦点分离

2.方便模块间组合、分解

3.方便单个模块功能调试、升级

4.多人协作互不干扰

可测试性

1.可分单元测试

b>缺点:

性能损耗

1.系统分层,调用链会很长

2.模块间通信,模块间发送消息会很耗性能

......

虽然优缺点很明显,但毕竟从协助和高效角度来讲,还是值的学习的;下面就直接进入正题吧,讲一下如何写简单的js模块。(ps:本人是菜鸟,只能写简单的)

第一种当然是最最简单的写法,可能学习前端的都会在无形中写过的---那就是函数方法:即

模块就是实现特定功能的一组方法。

只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。

原始写法

上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。

这种做法的缺点很明显:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

第二种难度稍微升级,需要面向对象的操作了;主要目的是为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。

上面的函数m1()和m2(),都封装在module1对象里。使用的时候,就是调用这个对象的属性。

但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值。

第三种:立即执行函数法;使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE),可以达到不暴露私有成员的目的。

使用上面的写法,外部代码无法读取内部的_count变量。

module1就是Javascript模块的基本写法。

接下来的方法都是正对module1的优化和加工的写法;

a):放大模式。

如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"(augmentation)。

上面的代码为module1模块添加了一个新方法m3(),然后返回新的module1模块。

b):宽放大模式(Loose augmentation)。

在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"。

与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象。

上面的模式就是一些简单的写法,期待与各位同学一起学习进步;再者感谢阮一峰老师的《Javascript模块化编程(一):模块的写法》文章,让我受益匪浅。最后再盗一张阮一峰老师的图片!

标签: #js什么是模块