javascript设计模式

设计模式是一套反复使用的、思想成熟、经过分类和无数实战总结出来的。使用设计模式是为了让代码可重用、可扩展、可解藕、更容易让人理解并且有保证代码的可靠性。设计模式能够真正工程化,设计模式是软件工程的基石脉络,如同大厦的结构一样。只有夯实基础结构,才能盖好健壮的大楼。 也是我们迈向高级开发人员必经的一步。

一、设计原则

1. 开闭原则

对扩展开发,对修改关闭。

2. 里氏替换原则

子类继承父类,但单独调用完全可以运行。

3. 依赖倒转原则

引用一个对象,如果这个对象有低层类型,直接引用低层。

4. 接口隔离原则

每一个接口应该是一种角色。

5. 合成/聚合复用原则

新的对象应使用一些己有的对象,使之成为新对象的一部分。

6. 迪米特原则

一个对象在对其他对象尽可能少的了解。

二、 设计模式

1. 原型模式

概念:和javascript的prototype不同 prototype是指原型实例(new)指向创建对象的种类,并且通过拷贝这些原型创建新的对象。如克隆

作用: 原型对象本身就是有效的利用了每个构造器创建的对象

注意事项: 注意深拷贝和浅拷贝,以免出现引用问题。

代码实战和总结:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//声明一个对象
  var myObj = {
    str:'myStr',
    num:1,
    myArr:[1,2,3],
    myObj:{
      innerObj:{
        test:25
      },
      innerStr:'innerStr'
    }
  }

//拷贝对象的方法(浅拷贝)会影响原型
  function clone (obj){
    var ret = {};
      for(var k in obj){
        ret[k]= obj[k];
      }
      return ret;
  }

  //深拷贝  使用Object.create
  function result(){}
  result.prototype = Object.create(myObj);
  var _result = new result();

  //执行
  var result = clone(myObj);
  result.myObj.innerStr = 'outStr';
  console.log(result);

Object.create(prototype,optionalDescriptorObjects)

2. 策略模式

概念: 策略模式定义了算法家族,分别封装起来,让它们之间可以相互替换,此模式让算法的变化不会影响到使用算法的客户。(目标一致,顺序不同,例如:田忌赛马)

作用: 所有的这些算法都是做相同的事情,只是实现不同。 以相同的方法调用所有的方法,减少了各种算法在和使用算法类之间的耦合。 单独定义了算法类,也方便单元测试。

注意事项: 不仅可以封装算法,也可以封装几乎任何类型的规则,是要在分析过程中需要在不同时间应用不同的规则, 可以考虑使用策略模式

代码实战和总结

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
  //普通的验证
  var $input = $('input').val();
  var val = {
    isEmpty:function(argument){
      // code
    }
    isTel:function(argument){
      // code
    }
  }
  var ise = val.isEmpty($input);
  var isTel = val.isTel($input)
  if(ise && isTel){
    alert('ok');
  }

// 挂载到$fn.val上   典型的策略模式验证
  $input({
    isEmpty:false,
    isTel:True
    })

3. 组合模式

概念:

作用:

注意事项:

代码实战和总结:

4. 外观模式

概念:

作用:

注意事项:

代码实战和总结

5. 迭代器模式

概念:

作用:

注意事项:

代码实战和总结

6. 命令模式

概念:

作用:

注意事项:

代码实战和总结

7. 代理模式

概念:

作用:

注意事项:

代码实战和总结

8. 适配器模式

概念:

作用:

注意事项:

代码实战和总结

9. 责任链模式

概念:

作用:

注意事项:

代码实战和总结

10. 工厂模式

概念:

作用:

注意事项:

代码实战和总结

11. 单例模式

概念:

作用:

注意事项:

代码实战和总结

12. 观察者模式

概念:

作用:

注意事项:

代码实战和总结

13. 中介者模式

概念:

作用:

注意事项:

代码实战和总结

14. 装饰者模式

概念:

作用:

注意事项:

代码实战和总结

15. 建造者模式

概念:

作用:

注意事项:

代码实战和总结

16. 构造函数模式

概念:

作用:

注意事项:

代码实战和总结

署名 - 非商业性使用 - 禁止演绎 4.0