Javascript设计模式与开发实践 on Xinyu's Blog

迭代器模式

Fri, 11 Nov 2016 00:00:00 +0800

要解决的问题

迭代器要解决的问题很简单很单纯，就是进行遍历操作。

实现原理

基本所有语言都实现了迭代器，javascript也不例外，如Array.prototype.forEach，for..of..，for..in..，for 迭代器的种类分两种，内部迭代器，外部迭代器。

内部迭代器

内部迭代器的迭代过程对外部是不可控的，内部自己实现迭代过程.比如forEach, jQuery中的$.each

外部迭代器

外部迭代器就相对灵活，可以控制迭代过程，需要显式调用迭代操作.外部迭代器较内部迭代器来说更方便扩展。

代理模式

Thu, 10 Nov 2016 00:00:00 +0800

解决哪一类问题

从字面意思上理解，代理模式解决对一个对象的直接访问，这种直接访问可能是"不方便"的，所谓"不方便"可能是直接访问成本比较大(在前端领域通常是要获取后台数据或者执行复杂的计算)，或者需要对原始对象进行一些修饰或处理。

实现原理

实现一个代理对象，这个代理对象和原对象对外暴露相同的接口，用户直接操作代理对象，对于说对用户是透明的，用户并不知道有代理存在。

虚拟代理

把一些昂贵的操作放在代理对象中进行，现在体会的还不是很深刻，具体例子没想好，以后补充。

缓存代理

把昂贵操作产生的数据缓存在代理对象中，避免了重复操作

策略模式

Wed, 09 Nov 2016 00:00:00 +0800

要解决的问题

当解决一个问题有多种方法时，选择使用哪种方法时就少不了要用大量的if语句进行判断，如果将这些方法的实现和判断语句放在一起实现就会产生问题，比如增加一种的新的方法时，就不得不再去写一条if语句，这不符合开闭原则，也不方便复用，因此策略模式主要解决的是算法的实现和算法的使用的过度耦合问题。

实现原理

将每个算法的实现封装起来，并可以相互替换(因为它们有共同的目的)，通过统一的上下文调用，一方面解决了耦合问题，另一方面增强了代码的复用能力

实践中的应用

表单的验证

表单验证涉及到多个判断语句，一般我们会这样实现

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


 var form = document.getElementById('myform')
 form.onsubmit = function() {
 if (form.username.value === '') {
 alert('请输入用户名')
 return false
 }
 if (form.password.value === '') {
 alert('请输入密码')
 return false
 }

 if (form.password.value.length < 8) {
 alert('密码不小于8位')
 return false
 }
 }

单例模式

Tue, 08 Nov 2016 00:00:00 +0800

解决的问题

保证实例只有一个，避免多个实现，从全局来看，这个实例的状态是唯一的。

实现原理

设置一个变量来记录实例，通过检测该变量是否为空来决定是否创建实例

非透明单例

所谓非透明就是用户在使用前必须知道这是一个单例类，不使用new来获取实例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


 var Single = function() {}
 Single.instance = null
 Single.getInstance = function() {
 if (this.instance) {
 return this.instance
 }
 return this.instance = new Single()
 }

 var a = Single.getInstance()
 var b = Single.getInstance()

 a === b //true