汤姆大叔的深入理解JavaScript读后感三（设计模式篇）

今天要分享的内容是tom大叔的JavaScript系列的读书观后感3

挑选大叔里面，个人自己喜欢的设计模式实现

第二十五部分，设计模式之单例模式

在传统开发工程师眼里，单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。

function Universe() {
   

    // 缓存的实例
    var instance = this;

    // 其它内容
    this.start_time = 0;
    this.bang = "Big";

    // 重写构造函数
    Universe = function () {
   
        return instance;
    };
}

// 测试
var uni = new Universe();
var uni2 = new Universe();
uni.bang = "123";
console.log(uni === uni2); // true
console.log(uni2.bang); // 123

这个设计模式，简单明了，通过this进行缓存，剩下了去判断不存在的麻烦

第二十六部分，设计模式之构造函数模式

构造函数用于创建特定类型的对象——不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。

function Car(model, year, miles) {
   
    this.model = model;
    this.year = year;
    this.miles = miles;
}

/*
注意：这里我们使用了Object.prototype.方法名，而不是Object.prototype
主要是用来避免重写定义原型prototype对象
*/
Car.prototype.output= function () {
   
    return this.model + "走了" + this.miles + "公里";
};

var tom = new Car("大叔", 2009, 20000);
var dudu = new Car("Dudu", 2010, 5000);

console.log(tom.output());
console.log(dudu.output());

第二十七部分，设计模式之建造者模式

建造者模式可以将一个复杂对象的构建与其表示相分离，使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式，那么用户就需要指定需要建造的类型就可以得到它们，而具体建造的过程和细节就不需要知道了。

function getBeerById(id, callback) {
   
    // 使用ID来请求数据，然后返回数据.
    asyncRequest('GET', 'beer.uri?id=' + id, function (resp) {
   
        // callback调用 response
        callback(resp.responseText);
    });
}

var el = document.querySelector('#test');
el.addEventListener('click', getBeerByIdBridge, false);

function getBeerByIdBridge(e) {
   
    getBeerById(this.id, function (beer) {
   
        console.log('Requested Beer: ' + beer);
    });
}

建造者模式主要用于“分步骤构建一个复杂的对象”，在这其中“分步骤”是一个稳定的算法，而复杂对象的各个部分则经常变化，其优点是：建造者模式的“加工工艺”是暴露的，这样使得建造者模式更加灵活，并且建造者模式解耦了组装过程和创建具体部件，使得我们不用去关心每个部件是如何组装的。
也就是说，上面的函数中，getBeerById函数是稳定的，写了一个构建过程，而具体的构建细节由另外一个回调函数决定

其实，我觉得，这个部分，不属于java里面的建造者模式，更是一种模板模式，可能个人理解不同吧，反正大叔的意思，就是这种样子

第二十八部分，设计模式之工厂模式

什么时候使用工厂模式

以下几种情景下工厂模式特别有用：

对象的构建十分复杂
需要依赖具体环境创建不同实例
处理大量具有相同属性的小对象

var productManager = {};

productManager.createProductA = function () {
   
    console.log('ProductA');
}

productManager.createProductB = function () {
   
    console.log('ProductB');
}

productManager.factory = function (typeType) {
   
    return new productManager[typeType];
}

productManager.factory("createProductA");

一句话，就是根据不同的类型，调用不同的子类，进行实例化一个对象

第二十九部分，设计模式之装饰者模式

装饰者用于通过重载方法的形式添加新功能，该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的。

var tree = {};
tree.decorate = function () {
   
    console.log('Make sure the tree won\'t fall');
};

tree.getDecorator = function (deco) {
   
    tree[deco].prototype = this;
    return new tree[deco];
};

tree.RedBalls = function () {
   
    this.decorate = function () {
   
        this.RedBalls.prototype.decorate(); // 第7步：先执行原型（这时候是Angel了）的decorate方法
        console.log('Put on some red balls'); // 第8步 再输出 red
        // 将这2步作为RedBalls的decorate方法
    }
};

tree.BlueBalls = function () {
   
    this.decorate = function () {
   
        this.BlueBalls.prototype.decorate(); // 第1步：先执行原型的decorate方法，也就是tree.decorate()
        console.log('Add blue balls'); // 第2步 再输出blue
        // 将这2步作为BlueBalls的decorate方法
    }
};

tree.Angel = function () {
   
    this.decorate = function () {
   
        this.Angel.prototype.decorate(); // 第4步：先执行原型（这时候是BlueBalls了）的decorate方法
        console.log('An angel on the top'); // 第5步 再输出angel
        // 将这2步作为Angel的decorate方法
    }
};

tree = tree.getDecorator('BlueBalls'); // 第3步：将BlueBalls对象赋给tree，这时候父原型里的getDecorator依然可用
tree = tree.getDecorator('Angel'); // 第6步：将Angel对象赋给tree，这时候父原型的父原型里的getDecorator依然可用
tree = tree.getDecorator('RedBalls'); // 第9步：将RedBalls对象赋给tree

tree.decorate(); // 第10步：执行RedBalls对象的decorate方法

这段代码，主要是在于，
tree.getDecorator 这段函数设计精妙
他让tree接受一个新的函数，而每次都用这个新函数去替代之前的函数，并且同时让原型指向前一个，实现了一个
继承关系，比如A-》B-》C，最开始tree是A，然后，放入一个，就变成B，之后为C

第三十部分，设计模式之外观模式

外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式经常被认为开发者必备，它可以将一些复杂操作封装起来，并创建一个简单的接口用于调用。

外观模式经常被用于JavaScript类库里，通过它封装一些接口用于兼容多浏览器，外观模式可以让我们间接调用子系统，从而避免因直接访问子系统而产生不必要的错误。

外观模式的优势是易于使用，而且本身也比较轻量级。但也有缺点 外观模式被开发者连续使用时会产生一定的性能问题，因为在每次调用时都要检测功能的可用性。

var addMyEvent = function (el, ev, fn) {
    if (el.addEventListener) {
        el.addEventListener(ev, fn, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + ev, fn);
    } else {
        el['on' + ev] = fn;
    }
}; 
再来一个简单的例子，说白了就是用一个接口封装其它的接口：
var mobileEvent = {
    // ...
    stop: function (e) {
        e.preventDefault();
        e.stopPropagation();
    }
    // ...
};

第三十一部分，设计模式之代理模式

代理，顾名思义就是帮助别人做事

// 先声明美女对象
var girl = function (name) {
   
    this.name = name;
};

// 这是dudu
var dudu = function (girl) {
   
    this.girl = girl;
    this.sendGift = function (gift) {
   
        alert("Hi " + girl.name + ", dudu送你一个礼物：" + gift);
    }
};

// 大叔是代理
var proxyTom = function (girl) {
   
    this.girl = girl;
    this.sendGift = function (gift) {
   
        (new dudu(girl)).sendGift(gift); // 替dudu送花咯
    }
};

说的简单一点，就是代理新类，必须包括被代理的对象，也就是可以主动new

第三十二部分，设计模式之观察者模式

观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

jQuery版本

根据jQuery1.7版新增的on/off功能，我们也可以定义jQuery版的观察者：

(function ($) {
   

    var o = $({});

    $.subscribe = function