编程思想的提升—提高代码可扩展性

编程思想的提升—提高代码可扩展性

 

代码的可扩展性：本质上就是使用不同的设计模式优化代码。程序的可扩展性和产品功能的可扩展性。

提高可扩展性的目的：面对需求变更，方便快速更改代码；减少代码修改过程的难度。

哪些设计模式可以保证代码的可扩展性

更改方法：装饰者模式和适配器模式

装饰者模式

如果一个旧方法已经写好，需要增加一个新的功能，但是我们不方便更改旧方法(其他地方可能使用旧方法)或者不能更改(第三方库提供的方法)，所以采用装饰者模式。

简单的说，就是把原来的方法包装一下，增加新的功能。

装饰者模式关注的是内部的功能

function a() {
  console.log('Hello');
}
function sayHelllo (name) {
  a();
  console.log(name);
}

// 给ajax加上一个默认的动画效果
var ajax = $.ajax;
$.ajax = function() {
  ajax.call(this);
  loading();
}
// 此时已经用自己写的代码覆盖了原生第三方库的ajax方法

// 下面给点击事件增加一个效果
dom.onclick = function() {
  console.log(1);
}
var oldFn = dom.onclick;
dom.onclick = function() {
  oldFn();
  loading();
}
oldFn = null;

适配器模式

类似于生活中的安卓接口转换成苹果接口。

一个模块需要的方法和另一个模块提供的接口不一致。关注的是两个模块间的接口。

原来有一个A类，有一个B类，现在想要让A类具有B类的方法，但是不要更改A类内部代码。所以可以写一个适配器 Adapter类，继承自A类，并且增加了B类的方法。这样新的适配器就能满足我们的需求，同时不更改原来类。

这个适合于两个不同的类(可能是第三方的类)，然后统一成一个适配器类，可以同时调用这两个类的API。如果两个模块内部完全不同，那么不适合这个设计模式。

例如我们有一个安卓充电器，有一个苹果设备需要充电。我们不能改变充电器和苹果设备，所以我们需要增加一个转接器，把安卓的接口转换成苹果的接口

例如有一个dog class，想要让狗有其他的方法，但是不能更改原始狗这个类，所以我们需要一个适配器(转接线)。

function dog() {
}

dog.ptototype.sayHello = function() {
    console.log('hi');
}

function dogAdapter(dogObject) {
  this.dogObject = dogObject;
}
dogAdapter.prototype = new bird();

代码上，就是设计一个新的类，这个类继承自一个类，同时有另一个类的方法(方法混入模式)。

eg2: 如果项目中使用两个框架，Jquery 和 A 框架，我们需要操作DOM和CSS，但是不同的框架的操作方法不同，所以我们需要改造一下API。

function myA() {
    A.call(this);
}
myA.prototype = A.prototype;
myA.prototype.css = function() {
    A.c.call(this, arguments);
}
myA.prototype.on = function() {
    A.o.call(this, arguments);
}

window.$ = myA;

---

数据适配器：后端传过来的数据可能不满足前端的格式和要求，然后使用默认数据过滤处理一下。

function a(ob) {
    // default parameters
    var adapter = {
        a: 1,
        b: 2
    };
    for (let i in adapter) {
        adapter[i] = ob[i] || adapter[i];
    }
    // 这里可以使用ES6的函数默认参数代替
}

---

更改需求：职责链模式+观察者模式

 

订阅发布模式

低耦合：两个独立的模块之间进行通信，一个模块订阅某个事件(对应的某个函数)，另一个模块触发(发布)这个事件，就会触发前一个模块中的某个函数。这样避免了两个模块之间直接调用的耦合性。

var Observer = {
    _message: {};
    regist: function() {
        // 订阅
    },
    fire: function(type) {
        // 触发
        var len = this._message[type].length;
        for (var i = 0; i < len; i++) {
            this._message[type][i].call(this);
        }
    },
    remove: function(type) {
        // 移除
        var i = this._message[type].length - 1;
        for (;i >= 0; i--) {
            // this._message[type][i] 
      this._messgae[type][i] === fn && this._message[type].splice(i, 1);
        }
    }
}

Observer.regist('mode1sendMode2', function() {
  //
});

Observer.regist('method1');
Observer.fire('method1');
// 这样可以减少两个模块的耦合。在A模块中订阅函数(回调函数)，在B模块中触发事件，然后在A中触发回调函数。

// 转盘demo
var domArr = [];
var father = document.getElementById('div1');

function init() {
  var dom = document.createElement('div');
  dom.setAttribute('class', 'div2');
  father.appendChild(dom);
  domArr.push(dom);
}
for (var i = 0; i < 10; i++) {
  init();
}
function run() {
  var nowStop = 0;
  var finiaNum = Math.floor(Math.random * 10);
  var stopNum = 40 + finalNum;
  var timer = setInterval(() => {
    var domstop = nowStop % 10;
    if (domstop == 0) {
      domArr[9].setAttribute('clsss', 'div2');
    } else {
      domArr[domstop - 1].setAttribute('class', 'div2');
    }
    domArr[domstop].setAttribute('class', 'div2 divon');
    if (nowStop > stopNum) {
      clearInterval(timer);
    }
    nowStop++;
  }, 100);
}

设计模式：观察者模式和职责链模式：

观察者模式

观察者模式适合于：当多个地方会触发一个事件，不同的模块比较多，界面交互比较复杂，那么使用观察者模块统一处理事件。

例如界面打开一个对话框，然后可能不同组件不同位置都会打开，那么这时使用观察者模式，在顶层组件中注册事件，在下层不同的组件中触发事件，就维护比较简单。

其他的代码性能指标：健壮性、可复用性、可读性；

// 下面是修改后的可扩展的代码
var time = 100;
var timer = null;
var domArr = [];
var father = document.getElementById('div1');
var nowStop = 0;
var finalNum = Math.floor(Math.random() * 10);
var stopNum = 40 + finalNum;

function init() {
  function _init() {
    var dom = docuemnt.createElement('div');
    dom.setAttribute('class', 'div2');
    father.appendChild(dom);
    domArr.push(dom);
  }
  for (let i = 0; i < 10; i++) {
    _init();
  }
  runner();
}

init();

function runner(dom) {
  function runMode() {
    if (domstop == 0) {
      domArr[9].setAttribute('class', 'div2');
    } else {
      domArr[domstop - 1].setAttribute('class', 'div2');
    }
    domArr[domstop].setAttribute('class', 'div2 div-on');
  }
  function runControll(command) {
    if (command === 'run') {
      // 设定一个定时器之前，要清除定时器
      clearInterval(timer);
      timer = setInterval(() => {
        var domstop = nowStop % 10;
        if (domstop == 0 && nowStop != 0) {
          Observer.fire('runOver');
        }
        runMode(domstop);
        if (nowStop > stopNum) {
          clearInterval(timer);
        }
      }, time);
    } else if (command == 'stop') {
      clearInterval(timer);
    } else if (command == 'keep') {
      clearInterval(timer);
      var keepCounter = 0;
      timer = setInterval(() => {
        var domstop = keepCounter % 10;
        runmode(domstop);
        keepCounter++;
      });
    }
  }
  runcontroll(command);
}

观察者模式适合于复杂组件的解耦：每个组件制作自己的事情，无论增加功能还是修改功能。

职责链模式

职责链模式：把模块组织成一个链条(消息或者状态依次在链条上传递)

案例二：统一处理发送请求(可以处理一下现在统一发送请求的报错处理)

请求发送-请求前默认处理-自定义处理前处理-自定义处理-自定义处理后的操作

 

function sendMsg() {
}

function beforeSend(fn) {
}

function beforeHandle() {
}

function afterHandle() {
}