目的

  • 面对需求变更，方便需求更改
  • 减少代码修改的难度

    什么是好的可扩展

  1. 需求的变更，不需要重写
  2. 代码修改不会引起大规模变动
  3. 方便加入新模块

要求：低耦合

提高可扩展性的设计模式

更好的更改代码

适配器模式-目标是接口

  • 目的： 通过写一个适配器，用代替替换
  • 应用场景： 面临接口不通用的问题

  • 基本结构：

    1. // 需求： 想用lo个来代替console.log
    2. var log = (function(){
    3. return window.console.log
    4. })()

    装饰者模式-目标是方法作用

  • 目的：不重写方法的的时候扩展方法

  • 应用场景： 当一个方法需要扩展， 但是又不好去修改方法
  • 基本结构 ```javascript // 需求： 我们新建一个自己的方法， 在其内部调用b方法，并且再执行自己的方法。 //这样可以在不修改源对象的情况下，扩展行为

// 有一个他人写好的模块a内部的方法b模块为他人写好， 不能修改， 如何扩展b方法 var a = { b: function(){ } }; function myB(){ a.b(); // 要扩展的方法 }

  1. <a name="4ded5b14"></a>
  2. ## 解耦你的方法与调用
  3. <a name="L09PB"></a>
  4. ### 命令模式
  6.    - 目的：解耦实现和调用， 让双方互不干扰
  7.    - 应用场景：调用的命令充满不确定性
  8.    - 基本结构
  9. ```javascript
  10. var command = (function(){
  11.     var action = {};
  12.   return function excute(){}
  14. })

提高可扩展性(下)-模块层面

提高整体项目可扩展性的核心

  • 低耦合

  • 良好的组织沟通方式

    应对需求上的变更

    观察者模式(订阅、发布模式)-比如事件绑定

    • 目的： 减少对象间的耦合，来提高扩展性
    • 应用场景：当两个模块直接沟通会增加他们的耦合性时

    • 基本结构

      1. // 观察者模式
      2. // 定义一个中转观察者，两个模块之间不直接沟通，而是通过观察者，一般适用于不方便直接沟通，或者异步操作
      3. function observe(){
      4. this.message = {};
      5. }
      6. //注册监听的type
      7. observe.prototype.regist = function(type, fn){
      8. this.message[type] = fn;
      9. }
      10. // 触发注册的喊出
      11. observe.prototype.fire = function(type,){
      12. this.message[type]();
      13. }
      14. // 删除注册的回调
      15. observe.prototype.remove = function(type){
      16. this.message[type]();
      17. }

      职责链模式

    • 目的：为了避免请求发送者与多个请求处理者耦合在一起，形成一个链条

    • 应用场景：把操作分割成一系列模块，每个模块只处理自己的事情

    • 基本结构

      1. // 把要做的事情组织为一条有序的链条，通过这条链传递消息来完成功能，适用于不涉及到复杂异步的操作
      2. function mode1(){}
      3. function mode2(){}
      4. function mode3(){}
      5. _result=mode1(_result);
      6. _result=mode2(_result);
      7. _result=mode3(_result);

      访问者模式

    • 目的： 解耦数据结构与数据的操作

    • 应用场景：数据结构不希望与操作有关
      1. // 访问者模式
      2. // 通过定义一个访问者，代替直接访问对象，来减少两个对象之间的耦合
      3. var data = [];
      4. var handler = function(){};
      5. handler.prototype.get= function(){}
      6. var vistor = function(handler, data){
      7. handler.get(data);
      8. }