js 设计模式学习（单例 工厂 订阅 策略）

把好的例子总结（抄）了下

单例

下面这个例子就是只生成一个Mask，用到了闭包

参考http://blog.jobbole.com/29454/

var singleton = function( fn ){
    var result;
    return function(){
        return result || ( result = fn .apply( this, arguments ) );//fn.apply相当于直接调用函数，只是将函数内的this（上下文）改变了
    }
}

var createMask = singleton( function(){

return document.body.appendChild( document.createElement('div') );

 })

/*Basic Singleton*/
var Singleton = {

    attribute:true,

    method1:function(){},

　　 method2:function(){}
};

还有上面这种，是最简单的，只提供了一个接口，原来写组件的时候经常用到对不对

简单工厂

参考：http://blog.csdn.net/sinat_29843547/article/details/51131071

//basketball base class  
var Baseketball = function(){  
  this.intro = 'baseketball is hotting at unitedstates';  
}  
Baseketball.prototype = {  
  getMember : function(){\  
    console.log('each team needs five players');  
  },  
  getBallSize : function(){  
    console.log('basketball is big');  
  }  
}  
//football base class   
var Football = function(){  
  this.intro = 'football is popular at all of the world';  
}  
Football = function(){  
  getMember = function(){  

  },  
  getBallSize = function(){  

  }  
}  
//sport factory  
var SportsFactory = function(name){  
  switch(name){  
    case 'NBA':  
      return new Baseketball();  
    case 'wordCup':  
      return new Football();  
  }  
}  

//when you want football   
var football = SportsFactory('wordCup');  
console.log(football);  
console.log(football.intro);  
football.getMember();  

复杂工厂模式（抽象工厂模式）

参考：https://segmentfault.com/a/1190000005139706

var DP = require("./DesignPattern.js");

function CPUFactory() {
  DP.Interface(this, ['createCPU']);
}

function IntelCPU() {
  this.__proto__ = new CPUFactory();
  this.createCPU = function () {
    console.log('Intel CPU');
  };
}

function AMDCPU() {
  this.__proto__ = new CPUFactory();
  this.createCPU = function () {
    console.log('AMD CPU');
  };
}

function Provider() {
  DP.Interface(this, ['createCPUFactory']);
}
function InterCPUFactory() {
  this.__proto__ = new Provider();
  this.createCPUFactory = function () {
    return new IntelCPU();
  };
}

function AMDCPUFactory() {
  this.__proto__ = new Provider();
  this.createCPUFactory = function () {
    return new AMDCPU();
  };
}

var cpufactory = new InterCPUFactory();
var IntelCpu = cpufactory.createCPUFactory();
IntelCpu.createCPU();

cpufactory = new AMDCPUFactory();
var AmdCpu = cpufactory.createCPUFactory();
AmdCpu.createCPU();

喜欢这个例子，然后看这个例子的时候，发现这个博主写的都很好 先纪录下

https://segmentfault.com/blog/zchq88

观察者模式（发布－订阅）

参考：https://www.cnblogs.com/xianyulaodi/p/5827821.html

就好像做公众号的，(顺便推荐下我的公众号：花园在前方 讲多囊的，直男不用看)，一旦发布出去，那么关注的人都可以收到，代码很好理解，我自己也敲了一遍，有点印象

var pubsub = {};   // 定义发布者

(function (q) {

    var list = [],  //回调函数存放的数组，也就是记录有多少人订阅了我们东西
        subUid = -1;

    // 发布消息,遍历订阅者
    q.publish = function (type, content) {
        // type 为文章类型，content为文章内容
        
        // 如果没有人订阅，直接返回
        if (!list[type]) {

            return false;
        }

        setTimeout(function () {
            var subscribers = list[type],
                len = subscribers ? subscribers.length : 0;

            while (len--) {
                // 将内容注入到订阅者那里
                subscribers[len].func(type, content);
            }
        }, 0);

        return true;

    };
    //订阅方法，由订阅者来执行
    q.subscribe = function (type, func) {
        // 如果之前没有订阅过
        if (!list[type]) {
            list[type] = [];
        }

        // token相当于订阅者的id，这样的话如果退订，我们就可以针对它来知道是谁退订了。
        var token = (++subUid).toString();
        // 每订阅一个，就把它存入到我们的数组中去
        list[type].push({
            token: token,
            func: func
        });
        return token;
    };
    //退订方法
    q.unsubscribe = function (token) {
        for (var m in list) {
            if (list[m]) {
                for (var i = 0, j = list[m].length; i < j; i++) {
                    if (list[m][i].token === token) {
                        list[m].splice(i, 1);
                        return token;
                    }
                }
            }
        }
        return false;
    };

} (pubsub));

//将订阅赋值给一个变量，以便退订
var girlA = pubsub.subscribe('js类的文章', function (type, content) {
    console.log('girlA订阅的'+type + ": 内容内容为：" + content);
});
var girlB = pubsub.subscribe('js类的文章', function (type, content) {
    console.log('girlB订阅的'+type + ": 内容内容为：" + content);
});
var girlC = pubsub.subscribe('js类的文章', function (type, content) {
    console.log('girlC订阅的'+type + ": 内容内容为：" + content);
});

//发布通知
pubsub.publish('js类的文章', '关于js的内容');  
// 输出：
// girlC订阅的js类的文章: 内容内容为：关于js的内容
// test3.html:78 girlB订阅的js类的文章: 内容内容为：关于js的内容
// test3.html:75 girlA订阅的js类的文章: 内容内容为：关于js的内容


//girlA退订了关于js类的文章 
setTimeout(function () {
    pubsub.unsubscribe(girlA);
}, 0);

//再发布一次，验证一下是否还能够输出信息
pubsub.publish('js类的文章', "关于js的第二篇文章");
// 输出：
// girlB订阅的js类的文章: 内容内容为：关于js的第二篇文章
// girlC订阅的js类的文章: 内容内容为：关于js的第二篇文章

策略模式

算是自己真正用过的模式了，就是一看到大量if 或者switch这种分支，可以考虑用这个模式

参考：https://www.cnblogs.com/xianyulaodi/p/5827821.html

// 对于vip客户
function vipPrice() {
    this.discount = 0.5;
}
 
vipPrice.prototype.getPrice = function(price) {
　　return price * this.discount;
}
// 对于老客户
function oldPrice() {
    this.discount = 0.3;
}
 
oldPrice.prototype.getPrice = function(price) {
    return price * this.discount;
}
// 对于普通客户
function Price() {
    this.discount = 1;
}
 
Price.prototype.getPrice = function(price) {
    return price ;
}

// 上下文，对于客户端的使用
function Context() {
    this.name = '';
    this.strategy = null;
    this.price = 0;
}
 
Context.prototype.set = function(name, strategy, price) {
    this.name = name;
    this.strategy = strategy;
    this.price = price;
}
Context.prototype.getResult = function() {
    console.log(this.name + ' 的结账价为: ' + this.strategy.getPrice(this.price));
}

var context = new Context();
var vip = new vipPrice();
context.set ('vip客户', vip, 200);
context.getResult();   // vip客户 的结账价为: 100

var old = new oldPrice();
context.set ('老客户', old, 200);
context.getResult();  // 老客户 的结账价为: 60

var Price = new Price();
context.set ('普通客户', Price, 200);
context.getResult();  // 普通客户 的结账价为: 200