设计模式

单例模式

惰性单例模式封装

var getSingle = function (fn) {
    var result;
    return function () {
        return result || ( result = fn.apply(this, arguments) );
    }
}

策略模式

定义：定义一系列的算法，把他们一个个封装起来，并使他们可以相互替换。
除了算法外，策略模式还可以用来封装一系列的业务规则，例如：表单校验，业务规则可以对应表单校验的规则和错误的提示语。定义好规则策略后，需要校验的地方传入规则名和错误提示即可。

代理模式

定义：代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。

保护代理：可以增加条件做过滤，拒绝掉一部分的请求，控制不同权限的对象对目标对象的访问
虚拟代理：对耗时或者可合并的操作等，做延迟处理，在合适的时机触发。例如：加载图片、合并接口请求等。

合并请求的虚拟代理例子：

var synchromousFile = function ( id ) {
    console.log('开始同步文件，id为' + id);
};

var proxySynchronousFile = (function () {
    var cache = [], // 保存一段时间内需要同步的ID集合
    timer;

    return function( id ) {
        cache.push(id);
        if ( timer ) {
            return;
        }

        timer = setTimeout(function() {
            synchromousFile( cache.join(',')); // 2秒后向本体发送需要同步的ID集合
            clearTimeout( timer );
            timer = null;
            cache.length = 0; //清空ID集合
        }, 2000)
    }
})();

发布-订阅模式

定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。
优点：一为时间上的解耦，二为对象之间的解耦。
缺点：过多的使用会使得模块之间的联系被隐藏到了背后。

以下为全局的发布-订阅对象：

var Event = (function () {

    var clientList = {},
        listen,
        trigger,
        remove;
    
    listen = function (key, fn) {
        if (!clientList[ key ]) {
            clientList[ key ] = [];
        }
        clientList[ key ].push( fn );
    };

    trigger = function () {
        var key = Array.prototype.shift.call( arguments ),
            fns = clientList[ key ];
            if ( !fns || fns.length === 0) {
                return false;
            }
            for ( var i = 0, fn; fn = fns[ i++ ]; ) {
                fn.apply( this, arguments);
            }
    }

    remove = function ( key, fn ) {
        var fns = clientList[ key ];
        if ( !fns ) {
            return false;
        }
        if ( !fn ) {
            fns && ( fns.length = 0);
        } else {
            for ( var l = fns.length - 1; l >= 0; l--) {
                var _fn = fns[ l ];
                if ( _fn === fn ) {
                    fns.splice( l, 1);
                }
            }
        }
    };

    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }
})();

命令模式

定义：指的是一个执行某些特定事情的指令。
最常用的场景：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。
命令模式支持撤销、排队、宏命令等。

使用闭包的命令模式：

var setCommand = function ( button, func ) {
    button.onclick = function () {
        func();
    }
};

var MenuBar = {
    refresh: function () {
        console.log( '刷新' );
    }
};

var RefreshMenuBarCommand = function ( receiver ) {
    return function () {
        receiver.refresh();
    }
};

var refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar );

setCommand( button1, refreshMenuBarCommand);

组合模式

组合模式将对象组合成树形结构，以表示“部分-整体”的层次结构。除了用来表示树形结构之外，组合模式的另一个好处是通过对象的多态性表现，使得用户对单个对象和组合对象的使用具有一致性，下面分别说明。

• 表示树形结构。通过回顾上面的例子，我们很容易找到组合模式的一个优点：提供了一种遍历树形结构的方案，通过调用组合对象的execute方法，程序会递归调用组合对象下面的叶对象的execute方法，所以我们的万能遥控器只需要一次操作，便能依次完成关 门、打开电脑、登录QQ这几件事情。组合模式可以非常方便地描述对象部分-整体层次结构。
• 利用对象多态性统一对待组合对象和单个对象。利用对象的多态性表现，可以使客户端忽略组合对象和单个对象的不同。在组合模式中，客户将统一地使用组合结构中的所有对象，而不需要关心它究竟是组合对象还是单个对象。

// 创建一个宏命令
var MacroCommand = function(){
    return {
        // 宏命令的子命令列表
        commandsList: [],
        // 添加命令到子命令列表
        add: function( command ){
            this.commandsList.push( command );
        },
        // 依次执行子命令列表里面的命令
        execute: function(){
            for ( var i = 0, command; command = this.commandsList[ i++ ]; ){
                command.execute();
            }
        }
    }
};

<!--打开空调命令-->
var openAcCommand = {
    execute: function(){
        console.log( '打开空调' );
    }
};

<!--打开电视和音响-->
var openTvCommand = {
    execute: function(){
        console.log( '打开电视' );
    }
};
var openSoundCommand = {
    execute: function(){
        console.log( '打开音响' );
    }
};
//创建一个宏命令
var macroCommand1 = MacroCommand();
//把打开电视装进这个宏命令里
macroCommand1.add(openTvCommand)
//把打开音响装进这个宏命令里
macroCommand1.add(openSoundCommand)

<!--关门、打开电脑和打登录QQ的命令-->
var closeDoorCommand = {
    execute: function(){
        console.log( '关门' );
    }
};
var openPcCommand = {
    execute: function(){
        console.log( '开电脑' );
    }
};
var openQQCommand = {
    execute: function(){
        console.log( '登录QQ' );
    }
};
//创建一个宏命令
var macroCommand2 = MacroCommand();
//把关门命令装进这个宏命令里
macroCommand2.add( closeDoorCommand );
//把开电脑命令装进这个宏命令里
macroCommand2.add( openPcCommand );
//把登录QQ命令装进这个宏命令里
macroCommand2.add( openQQCommand );

<!--把各宏命令装进一个超级命令中去-->
var macroCommand = MacroCommand();
macroCommand.add( openAcCommand );
macroCommand.add( macroCommand1 );
macroCommand.add( macroCommand2 );

享元模式

享元模式的核心是运用共享技术来有效支持大量细粒度的对象，如果系统中因为创建了大量类似的对象而导致内存占用过高，享元模式就非常有用。

享元模式要求对象的属性划分为内部状态和外部状态，如何划分：

• 内部状态存储于对象内部
• 内部状态可以被一些对象共享
• 内部状态独立于具体的场景，通常不会变化
• 外部状态取决于具体的场景，并根据场景而变化，外部状态不能被共享。

示例：文件上传

var Upload = function(uploadType) {
  this.uploadType = uploadType;
}
​
/* 删除文件（内部状态） */
Upload.prototype.delFile = function(id) {
  uploadManger.setExternalState(id, this);  // 把当前id对应的外部状态都组装到共享对象中
  // 大于3000k提示
  if(this.fileSize < 3000) {
    return this.dom.parentNode.removeChild(this.dom);
  }
  if(window.confirm("确定要删除文件吗？" + this.fileName)) {
    return this.dom.parentNode.removeChild(this.dom);
  }
}

/** 工厂对象实例化 
 *  如果某种内部状态的共享对象已经被创建过，那么直接返回这个对象
 *  否则，创建一个新的对象
 */
var UploadFactory = (function() {
    var createdFlyWeightObjs = {};
    return {
        create: function(uploadType) {
            if(createdFlyWeightObjs[ uploadType ]) {
                return createdFlyWeightObjs[ uploadType ]
            }
            return createdFlyWeightObjs[ uploadType ] = new Upload( uploadType );
        }
    }
})();

/* 管理器封装外部状态 */
var uploadManger = (function() {
  var uploadDatabase = {};
​
  return {
    add: function(id, uploadType, fileName, fileSize) {
      var flyWeightObj = UploadFactory.create(uploadType);
      var dom = document.createElement('div');
      dom.innerHTML = "<span>文件名称：" + fileName + "，文件大小：" + fileSize +"</span>"
              + "<button class='delFile'>删除</button>";
​
      dom.querySelector(".delFile").onclick = function() {
        flyWeightObj.delFile(id);
      };
      document.body.appendChild(dom);
​
      uploadDatabase[id] = {
        fileName: fileName,
        fileSize: fileSize,
        dom: dom
      };
​
      return flyWeightObj;
    },
    setExternalState: function(id, flyWeightObj) {
      var uploadData = uploadDatabase[id];
      for(var i in uploadData) {
        flyWeightObj[i] = uploadData[i];
      }
    }
  };
})();

/*触发上传动作*/
var id = 0;
window.startUpload = function(uploadType, files) {
  for(var i=0,file; file = files[i++];) {
    var uploadObj = uploadManger.add(++id, uploadType, file.fileName, file.fileSize);
  }
};
​
/* 测试 */
startUpload("plugin", [
  {
    fileName: '1.txt',
    fileSize: 1000
  },{
    fileName: '2.txt',
    fileSize: 3000
  },{
    fileName: '3.txt',
    fileSize: 5000
  }
]);
startUpload("flash", [
  {
    fileName: '4.txt',
    fileSize: 1000
  },{
    fileName: '5.txt',
    fileSize: 3000
  },{
    fileName: '6.txt',
    fileSize: 5000
  }
]);

职责链模式

使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。

例子：异步职责链的实现

// Chain.prototype.setNextSuccessor 指定在链中的下一个节点
// Chain.prototype.passRequest 传递请求给某个节点
var Chain = function ( fn ) {
    this.fn = fn;
    this.successor = null;
}
Chain.prototype.setNextSuccessor = function ( successor ) {
    return this.successor = successor;
}

// 对于ret的判断可以用于同步的职责链模式
Chain.prototype.passRequest = function () {
    var ret = this.fn.apply( this, arguments);
    if ( ret === 'nextSuccessor' ) {
        return this.successor && this.successor.passRequest.apply( this.successor, arguments );
    }
    return ret;
}

// 异步时ret的return值没有，此时无法接收，因此采用next回调的方式
Chain.prototype.next = function () {
    return this.nextSuccessor && this.successor.passRequest.apply( this.successor, arguments );
}

var fn1 = new Chain(function(){
    console.log( 1 );
    return 'nextSuccessor';
});
var fn2 = new Chain(function(){
    console.log( 2 );
    var self = this;
    setTimeout(function(){
        self.next();
    }, 1000 );
});
var fn3 = new Chain(function(){
    console.log( 3 );
});
fn1.setNextSuccessor( fn2 ).setNextSuccessor( fn3 );
fn1.passRequest();

用AOP实现职责链

Function.prototype.after = function( fn ){
    var self = this;
    return function(){
        var ret = self.apply( this, arguments );
        if ( ret === 'nextSuccessor' ){
            return fn.apply( this, arguments );
        }
        return ret;
    }
};

// 此处的order500yuan、order200yuan、orderNormal为订单处理的函数，此处未列出
var order = order500yuan.after( order200yuan ).after( orderNormal );
order( 1, true, 500 ); // 输出：500元定金预购，得到100优惠券
order( 2, true, 500 ); // 输出：200元定金预购，得到50优惠券
order( 1, false, 500 ); // 输出：普通购买，无优惠券

中介者模式

中介者模式的作用就是解除对象与对象之间的紧耦合关系。增加一个中介者对象后，所有的相关对象都通过中介者对象来通信，而不是互相引用，所以当一个对象发生改变时，只需要通知中介者对象即可。中介者使各对象之间耦合松散，而且可以独立地改变它们之间的交互。

例子：游戏中使用中介者控制游戏状态

玩家对象的生成：

function Player (name, teamColor) {
    this.name = name;
    this.teamColor = teamColor;
    this.state = 'alive';
};

Player.prototype.win = function () {
    console.log(`${this.name} won!`);
};

Player.prototype.lose = function () {
    console.log(`${this.name} lost!`);
};
// 玩家死亡
Player.prototype.die = function () {
    this.state = 'dead';
    // 给中介者发送消息，玩家死亡
    playerDirector.ReceiveMessage( 'playDead', this );
}

// 移除玩家
Player.prototype.remove = function () {
    // 给中介者发送消息，玩家移除
    playerDirector.ReceiveMessage( 'removePlayer', this );
}

// 玩家换队
Player.prototype.remove = function ( color ) {
    // 给中介者发送消息，玩家换队
    playerDirector.ReceiveMessage( 'changeTeam', this, color );
}

// 生成玩家的工厂函数
var palyerFactory = function ( name, teamColor ) {
    var newPlayer = new Player( name, teamColor );

    // 给中介者发动消息，新增玩家
    playerDirecotor.ReceiveMessage( 'addPlayer', newPlayer );
    return newPlayer;
}

中介者playerDirector的实现：

• 利用发布—订阅模式。将playerDirector实现为订阅者，各player作为发布者，一旦player的状态发生改变，便推送消息给playerDirector，playerDirector处理消息后将反馈发送给其他player。
• 在playerDirector中开放一些接收消息的接口，各player可以直接调用该接口来给playerDirector发送消息，player只需传递一个参数给playerDirector，这个参数的目的是使playerDirector可以识别发送者。同样，playerDirector接收到消息之后会将处理结果反馈给其他player。

以下采取开发接口的方式：

var playerDirector = ( function () {
    var players = {}, // 保存所有玩家
        operations = {}; // 中介者可以执行的操作

    // 新增一个玩家
    operations.addPlayer = function ( player ) {
        var teamColor = player.teanmColor;
        players[ teamColor ] = players[ teamColor ] || [];
        players[ teamColor ].push( player );
    }

    // 移除一个玩家
    operations.removePlayer = function ( player ) {
        var teamColor = player.teamColor,
            teamPlayers = players[ teamColor ] || []
        for ( var i = teamPlayers.length - 1; i >= 0; i-- ){   // 遍历删除
            if ( teamPlayers[ i ] === player ){
                teamPlayers.splice( i, 1 );
            }
        }
    }

    // 玩家换队
    operations.changeTeam = function ( player, newTeamColor ) {
        operations.removePlayer( player );
        player.teamColor = newTeamColor;
        operations.addPlayer( player );
    }

    // 玩家死亡
    operations.playerDead = function( player ){     // 玩家死亡
        var teamColor = player.teamColor,
            teamPlayers = players[ teamColor ];   // 玩家所在队伍

        var all_dead = true;

        for ( var i = 0, player; player = teamPlayers[ i++ ]; ){
            if ( player.state !== 'dead' ){
                all_dead = false;
                break;
            }
        }

        if ( all_dead === true ){   // 全部死亡

            for ( var i = 0, player; player = teamPlayers[ i++ ]; ){
                player.lose();   // 本队所有玩家lose
            }

            for ( var color in players ){
                if ( color !== teamColor ){
                    var teamPlayers = players[ color ];   // 其他队伍的玩家
                    for ( var i = 0, player; player = teamPlayers[ i++ ]; ){
                        player.win();   // 其他队伍所有玩家win
                    }
                }
            }
        }
    };

    // 开发接口
    var ReceiveMessage = function () {
        // 第一个参数为消息的类型
        var message = Array.prototype.shift.call( arguments );
        operations[ message ].apply( this, arguments );
    }

    return {
        ReceiveMessage: ReceiveMessage
    }
})();

装饰者模式

装饰者模式能够在不改变对象自身的基础上，在程序运行期间给对象动态的添加职责。

一个简单的例子：

var a = function(){
    alert (1);
}

var _a = a;

a = function(){
    _a();
    alert (2);
}

a();

用AOP装饰函数

Function.prototype.before = function ( beforeFn ) {
    var _self = this; // 保存原函数的引用
    return function () { // 返回包含了原函数和新函数的“代理”函数
        beforeFn.apply( this, arguments ); // 执行新函数，保证this不被劫持

        return _self.apply( this, arguments ); // 执行原函数并返回原函数的结果，保证this不被劫持
    }
    
}
Function.prototype.after = function( afterfn ){
    var _self = this;
    return function(){
        var ret = _self.apply( this, arguments );
        afterfn.apply( this, arguments );
        return ret;
    }
}

// 使用
window.onload = function(){
    alert (1);
}

window.onload = ( window.onload || function(){} ).after(function(){
    alert (2);
}).after(function(){
    alert (3);
}).after(function(){
    alert (4);
});

装饰者模式和代理模式

代理模式和装饰者模式最重要的区别在于它们的意图和设计目的。代理模式的目的是，当直接访问本体不方便或者不符合需要时，为这个本体提供一个替代者。本体定义了关键功能，而代理提供或拒绝对它的访问，或者在访问本体之前做一些额外的事情。装饰者模式的作用就是为对象动态加入行为。换句话说，代理模式强调一种关系（Proxy与它的实体之间的关系），这种关系可以静态的表达，也就是说，这种关系在一开始就可以被确定。而装饰者模式用于一开始不能确定对象的全部功能时。代理模式通常只有一层代理-本体的引用，而装饰者模式经常会形成一条长长的装饰链。

状态模式

定义：允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。
我们以逗号分割，把这句话分为两部分来看。第一部分的意思是将状态封装成独立的类，并将请求委托给当前的状态对象，当对象的内部状态改变时，会带来不同的行为变化。
第二部分是从客户的角度来看，我们使用的对象，在不同的状态下具有截然不同的行为，这个对象看起来是从不同的类中实例化而来的，实际上这是使用了委托的效果。

状态模式的通用结构

var Light = function(){
    // 实例化每一个状态对象
    this.offLightState = new OffLightState( this );    // 持有状态对象的引用
    this.weakLightState = new WeakLightState( this );
    this.strongLightState = new StrongLightState( this );
    this.superStrongLightState = new SuperStrongLightState( this );
    this.button = null;
};
Light.prototype.init = function () {
    var button = document.createElement( 'button' ),
        self = this;
    this.button = document.body.appendChild( button );
    this.button.innerHTML = '开关';
    this.currState = this.offLightState; // 设置默认状态

    this.button.onclick = function () {
        self.currState.buttonWasPressed();
    }
}

// 列举一个状态对象，关灯状态对象
var OfflightState = function( light ) {
    this.light = light;
}

OfflightState.prototypr.buttonWasPressed = function () {
    console.log('弱光');
    this.light.setState( this.light.weakLightState );
}

状态机：使用闭包实现将客户的操作委托给状态对象，此委托需要处理this的劫持

var delegate = function ( client, delegation ) {
    return {
        buttonWasPressed: function () {
            return delegation.buttonWasPressed.apply( client, arguments);
        }
    }
};

var FSM = {
    off: {
        buttonWasPressed: function(){
            console.log( '关灯' );
            this.button.innerHTML = '下一次按我是开灯';
            this.currState = this.onState;
        }
    },
    on: {
        buttonWasPressed: function(){
            console.log( '开灯' );
            this.button.innerHTML = '下一次按我是关灯';
            this.currState = this.offState;
        }
    }
};

var Light = function () {
    this.offState = delegation( this, FSM.off );
    this.onState = delegation( this, FSM.on );
    this.currState = this.offState;
    this.button = null;
}

Light.prototype.init = function () {
    var button = document.createElement( 'button' );
    button.innerHTML = '已关灯';
    this.button = document.body.appendChild( button );
    this.button.onclick = function () {
        self.currState.buttonWasPressed();
    }
}

var light = new Light();
light.init();

适配器模式

适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后，原本由于接口不兼容而不能工作的两个软件实体可以一起工作。
实际项目中封装组件时，经常遇到组件定义的接口和后台返回的数据无法完全对应上，这时一个apater函数转化数据是比较方便的选择。