js常用设计模式

以你之姓@ 2022-01-29 00:35 92阅读 0赞

1.模块模式:

在立即执行函数表达式中定义的变量和方法在外界是访问不到的,只能通过其向外部提供的接口,"有限制"地访问.通过函数作用域解决了属性和方法的封装问题.

2.构造函数模式

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </td> 
 <td> <code>function</code>&nbsp;<code>Person(name,age){ </code> <code>&nbsp;&nbsp;</code><code>this</code><code>.name = name;</code> <code>&nbsp;&nbsp;</code><code>this</code><code>.age = age;</code> <code>}</code> <code>Person.prototype = { </code> <code>&nbsp;&nbsp;</code><code>constructor: Person;</code> <code>&nbsp;&nbsp;</code><code>printName:&nbsp;</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>this</code><code>.name);</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>printAge:&nbsp;</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>this</code><code>.age);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>var</code>&nbsp;<code>person =&nbsp;</code><code>new</code>&nbsp;<code>Person(</code><code>'xin'</code><code>, 22);</code> <code>person.printName();&nbsp;</code><code>// xin</code> <code>person.printAge();&nbsp;</code><code>// 22</code> </td> 
 </tr> 
 </tbody> 
</table>

3.混合模式

4.工厂模式

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>function</code>&nbsp;<code>Person(name, age){ </code> <code>&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>person =&nbsp;</code><code>new</code>&nbsp;<code>Object();</code> <code>&nbsp;&nbsp;</code><code>person.name = name;</code> <code>&nbsp;&nbsp;</code><code>person.age = age;</code> <code>&nbsp;&nbsp;</code><code>person.printName =&nbsp;</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>this</code><code>.name);</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>person.printAge =&nbsp;</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>this</code><code>.age);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>person;</code> <code>}</code> &nbsp; <code>var</code>&nbsp;<code>person = Person(</code><code>'xin'</code><code>,22);</code> </td> 
 </tr> 
 </tbody> 
</table>

5.单例模式

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>var</code>&nbsp;<code>Singleton = (</code><code>function</code>&nbsp;<code>(){ </code> <code>&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>instance;</code> <code>&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>init(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>getInstance:&nbsp;</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(!instance){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>instace = init();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>instance;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>})();</code> </td> 
 </tr> 
 </tbody> 
</table>

6.发布-订阅模式:

发布-订阅模式又叫做观察者模式,定义了对象之间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖与它的对象都将得到通知.

发布-订阅模式广泛应用于异步编程之中,是一种替代回调函数的方案.多个事件处理函数可以订阅同一个事件,当该事件发生后,与其相对应的多个事件处理函数都会运行  
取代对象之间硬编码的通知机制,一个对象不用再显示的调用另外一个对象的某个接口,降低模块之间的耦合程度,虽然不清楚彼此的细节,但是不影响他们之间相互通信  
应用

DOM事件  
DOM事件是一种典型的发布-订阅模式,对一个dom节点的一个事件进行监听,当操作dom节点时,触发相应的事件,响应函数执行.事件函数对dom节点完全未知,不用去理会是什么事件,如何触发,执行就好.

自定义事件  
指定发布者  
"发布-订阅"这种关系用一个对象表示,键表示事件名,值是一个由事件处理程序组成的数组,相当于订阅者的花名册  
发布消息后,遍历缓存列表,依次执行订阅者的回调函数

<table> 
 <tbody> 
 <tr> 
 <td> 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 32 33 34 35 36 37 </td> 
 <td> <code>var</code>&nbsp;<code>EventCenter = (</code><code>function</code><code>(){&nbsp;</code> <code>&nbsp;&nbsp;</code><code>// 将所有的"发布-订阅"关系放到events中</code> <code>&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>events = {};</code> &nbsp; <code>&nbsp;&nbsp;</code><code>/**</code> <code>&nbsp;&nbsp;&nbsp;</code><code>* 给事件绑定事件处理程序</code> <code>&nbsp;&nbsp;&nbsp;</code><code>* evt:事件名</code> <code>&nbsp;&nbsp;&nbsp;</code><code>* handler:事件处理程序</code> <code>&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>on(evt, handler){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>events[evt] = events[evt]||[];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>events[evt].push({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>handler:hander</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>/**</code> <code>&nbsp;&nbsp;&nbsp;</code><code>* 发布消息(触发事件),并执行相应的事件处理程序</code> <code>&nbsp;&nbsp;&nbsp;</code><code>* evt:事件名</code> <code>&nbsp;&nbsp;&nbsp;</code><code>* args:给事件处理程序传递的参数</code> <code>&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>fire(evt,args){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(!events[evt]){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 遍历事件处理程序列表,执行其中每一个事件处理程序</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(</code><code>var</code>&nbsp;<code>i=0;i&lt;events[evt].length;i++){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>events[evt][i].handler(args);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>// 使用模块模式的方式,向外界提供绑定事件处理程序和触发事件的接口</code> <code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>on: on,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fire: fire</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>})();</code> </td> 
 </tr> 
 </tbody> 
</table>

实际应用

<table> 
 <tbody> 
 <tr> 
 <td> 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 32 33 34 35 36 37 38 39 </td> 
 <td> <code>var</code>&nbsp;<code>Event = (</code><code>function</code><code>(){&nbsp;</code> <code>&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>events = {};</code> &nbsp; <code>&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>on(evt, handler){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>events[evt] = events[evt]||[];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>events[evt].push({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>handler:handler</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>fire(evt,args){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(!events[evt]){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(</code><code>var</code>&nbsp;<code>i=0;i&lt;events[evt].length;i++){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>events[evt][i].handler(args);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>off(evt){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>delete</code>&nbsp;<code>events[evt];</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>on: on,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fire: fire,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>off: off</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>})();</code> <code>Event.on(</code><code>'change'</code><code>,&nbsp;</code><code>function</code><code>(val){ </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>'change...&nbsp; now val is '</code>&nbsp;<code>+ val);&nbsp;</code> <code>});</code> <code>Event.on(</code><code>'click'</code><code>,&nbsp;</code><code>function</code><code>(val){ </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>'click.... now val is '</code><code>+ val);</code> <code>})</code> <code>Event.fire(</code><code>'change'</code><code>,&nbsp;</code><code>'xin'</code><code>);</code> <code>Event.fire(</code><code>'click'</code><code>,&nbsp;</code><code>'xin'</code><code>);</code> <code>Event.off(</code><code>'change'</code><code>);</code> <code>&nbsp;</code> </td> 
 </tr> 
 </tbody> 
</table>

7.单体模式

1.  // 单体模式又称模块模式：用一个命名空间包含自己的所有代码的全局对象
2.  // 简单单体模式
3.  var timer = \{
4.  seconds: 0,
5.  start: function () \{
6.  setInterval(() => \{
7.  this.seconds++
8.  \}, 1000);
9.  \},
10. doFunc() \{
11. console.log('单体模式')
12. \}
13. \}
14. setTimeout(() => \{
15. timer.doFunc()
16. \}, 3000);
17.  
18. // 单体模式表现形式2
19. var person = function personInfo(params) \{
20. this.name = 'name';
21. this.getName = function () \{
22. // doSomeThing
23. \}
24. this.method = function () \{
25. // doSomeThing
26. \}
27. \}
28.  
29. // 单体模式+闭包表现形式
30. // 模块模式
31. var DJtest = \{\}
32. DJtest.common = function () \{
33. // doSomeThing
34. \}
35. DJtest.init = function () \{
36. // doSomeThing
37. \}
38. DJtest.func = function () \{
39. var val = 1
40. function add1(str) \{
41. return parseInt(str) + val++
42. \}
43. console.log(add1(1)) // 2
44. return \{
45. sumAdd: function (str) \{
46. return add1(str)
47. \}
48. \}
49. \}()
50. console.log(DJtest.func.sumAdd(1)) // 3
51. console.log(DJtest.func.sumAdd(1)) // 4
52. console.log(DJtest.func.sumAdd(1)) // 5

8.策略模式

1.  // 策略模式的定义是：定义一系列的算法/业务规则，把它们一个个封装起来，并且使它们可以相互替换。
2.   
3.  // demo：根据级别计算奖金
4.  var calculateBouns = function(salary,level) \{
5.  if(level === 'A') \{
6.  return salary \* 4;
7.  \}
8.  if(level === 'B') \{
9.  return salary \* 3;
10. \}
11. if(level === 'C') \{
12. return salary \* 2;
13. \}
14. \};
15.  
16. console.log(calculateBouns(4000,'A')); // 16000
17. console.log(calculateBouns(2500,'B')); // 7500
18.  
19. /\*\*
20. \* describe：
21. \* 1，函数包含了很多if-else语句;
22. \* 2，函数缺乏弹性，扩展需要添加新的if,else;
23. \* 3，复用差
24. \* \*/
25.  
26. // 策略模式改造
27. var obj = \{
28. "A": function (salary) \{
29. return salary \* 4;
30. \},
31. "B": function (salary) \{
32. return salary \* 3;
33. \},
34. "C": function (salary) \{
35. return salary \* 2;
36. \}
37. \};
38. var calculateBouns = function (level, salary) \{
39. return obj\[level\](salary);
40. \};
41. console.log(calculateBouns('A',10000)); // 40000
42.  
43. // 优点：1. 策略模式利用组合，委托等技术和思想，有效的避免很多if条件语句。
44. // 2. 策略模式提供了开放-封闭原则，使代码更容易理解和扩展。
45. // 3. 策略模式中的代码可以复用。
46. // tips：开放-封闭原则：对于扩展是开放的(Open for extension)，对于更改是封闭的(Closed for modification)