前端设计模式（二）

前言
上期我们学了工厂模式，单例模式，观察者模式，发布订阅模式，策略模式。
让我们继续学习吧。

代理模式 Proxy Pattern

代理模式是为一个对象提供一个代用品，以便控制对它的访问。
人话：购买者与卖房者中间的那个中介。
前端实现： 当调用一个方法Fn时，中间加入代理方法Proxy。先调用Proxy方法，Proxy内部再决定如何调用Fn方法。
举个例子：在房产销售中，有买房，卖方。如果买房一只去Call卖方。那卖方就将被烦死，所以需要中介的介入。

var Buyer = function (name){
    this.name = name
}
Buyer.prototype.pay = function (money){
    zhongjie.ask(money)
}

var zhongjie = {
    ask(money){
        if(money<100){
            console.log("Sorry,钱不够不卖")
        }else{
            Seller.sell()
        }
    }
}

var Seller = {
    sell:function(){
        console.log("Ok，成交了");
    }
}

var buyer1 = new Buyer("买家一");
buyer1.pay(50);
//log: Sorry,钱不够不卖

var buyer2 = new Buyer("买家二");
buyer1.pay(100);
//log: Ok，成交了

说明
像这种只有达成一定条件再去call真实方法的代理就叫做保护代理。
那这类代理在真实项目中可以做什么呢？
举个例子。
网站js错误收集
需求：当网页有任何Javascript错误时候就上传到服务器日志。

var uploadError = function (errorOrArray){
    //ajax上传
    //ajax(errorOrArray)
}

window.onerror = function (e){
    uploadError(e);
}

是不是完成了？
嗯。
那么问题来了。
每一个error都要上传吗？我们凑满十个error再上传吧。减少请求，加入代理吧。

var uploadError = function (errorOrArray){
    //ajax上传
    //ajax(errorOrArray)
}

var uploadQueue = [];
var proxyUploadError = function (error){
    uploadQueue.push(error);

    if(uploadQueue.length >=10){
        uploadError(uploadQueue);
        uploadQueue = [];
    }
}

window.onerror = function (e){
    proxyUploadError(e);
}

是不是完成了？
嗯。
那么问题来了。
如果同时有大量error产生。比如某项目的scroll事件产生了几十万个error（true story）
凑满十个还是不够看呀。
我们换个策略吧。加入节流，并且忽略相同的报错。

var uploadError = function (errorOrArray){
    //ajax上传
    //ajax(errorOrArray)
    console.log("上传成功")
}


var proxyUploadError = (function (error){
    var errorQuene = [],
    _uploadError = _.throttle(function (){
        uploadError(errorQuene);
        errorQuene = [];
    }, 10000);//最多十秒上传一次

    return function (error){
        if(error重复){
            return;
        };
        errorQuene.push(error);
        _uploadError();
    }
})

window.onerror = function (e){
    proxyUploadError(e);
}

思考
Ok,一个简单的错误收集上传功能就完成了
那同学可能会问，为什么不把逻辑直接写入uploadError而要proxyUploadError呢？
1.职能单一，这样才可以很好的复用
2.在有些场景下。可以有多个Proxy存在，至于用哪个还是具体看情况。

其实这个收集器还缺个逻辑，想的出来吗？

职责链模式 Chain of Responsibility Pattern

职责链模式为请求创建了一个接收者对象的链。这种模式给予请求的类型，对请求的发送者和接收者进行解耦。这种类型的设计模式属于行为型模式。
在这种模式中，通常每个接收者都包含对另一个接收者的引用。如果一个对象不能处理该请求，那么它会把相同的请求传给下一个接收者，依此类推。
人话：击鼓传花，最后一个人执行。
前端实现：不断回调函数直到最终终止
举个例子：审批链就是一种很好的实现

class Action {
    constructor(name) {
        this.name = name;
        this.nextAction = null;
    }
    setNextAction(action) {
        this.nextAction = action;
    }
    handle() {
        console.log(`${this.name} 测试通过`);
        if (this.nextAction != null) {
            this.nextAction.handle();
        }
    }
}

let a1 = new Action('DEV');
let a2 = new Action('TEST');
let a3 = new Action('UAT');
a1.setNextAction(a2);
a2.setNextAction(a3);
a1.handle();

//DEV 测试通过
//TEST 测试通过
//UAT 测试通过

说明
类似职责链模式的实现还有dom/组件中的父子节点事件不断的回调。

装饰器模式 Decorator Pattern

装饰器模式允许向一个现有的对象动态添加新的功能，同时又不改变其结构。继承来给对象增加功能来说，装饰器模式相比生成子类更为灵活优雅。
白话：想要什么直接拿来用就好了。
先让我们看看是如何实现的。

function Car() {
    console.log("我是一辆普通车");
}

Car.prototype = {
    drive: function () {
        console.log('我能跑60码');
    },
}

//创建装饰器
var Decorator = function (car) {
    this.car = car;
}
// 装饰者要实现这些相同的方法
Decorator.prototype = {
    drive: function () {
        this.car.toString();
    },
}

var Porsche = function (car){
    Decorator.call(this, car);
    console.log("升级成保时捷");
}
Porsche.prototype = new Decorator();
Porsche.prototype.drive = function (){
    console.log('我能跑200码');
}

var Turbo = function (car){
    Decorator.call(this, car);
    console.log("装上涡轮增鸭");
}
Turbo.prototype = new Decorator();
Turbo.prototype.drive = function (){
    console.log('我能跑500码');
}

var car = new Car();//我是一辆普通车
car.drive();//我能跑60码
var porsche = new Porsche(car);//升级成保时捷
porsche.drive();//我能跑200码
var turboCar = new Turbo(porsche);//装上涡轮增鸭
turboCar.drive();//我能跑500码

在es7之后只需

@Porsche
@Turbo
class Car{
    drive(){}
}

说明
当然现在不必大费周折再这么写，但装饰器思想还是一样的。

外观模式 Facade Pattern

外观模式为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层借口，这个接口使得这一子系统更加容易使用。
白话：一个方法实现多个功能/适配单一功能。
前端实现：在一个方法里面利用多个判断进行操作。

function Sizzle( selector, context, results, seed ){
    var m, i, elem, nid, match, groups, newSelector,
        newContext = context && context.ownerDocument,
        //上下文默认为document，节点类型默认为9
        nodeType = context ? context.nodeType : 9;
    results = results || [];

    // 对选择器值为非字符串、为假、节点类型不符合要求时的返回值进行处理
    if ( typeof selector !== "string" || !selector ||
        nodeType !== 1 && nodeType !== 9 && nodeType !== 11 ) {

        return results;
    }

    // 操作HTML文档
    if ( !seed ) {

        if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) {
            setDocument( context );
        }
        context = context || document;

        if ( documentIsHTML ) {

            if ( nodeType !== 11 && (match = rquickExpr.exec( selector )) ) {

                // ID 选择器
                if ( (m = match[1]) ) {

                    // 文档内容
                    if ( nodeType === 9 ) {
                        if ( (elem = context.getElementById( m )) ) {

                            if ( elem.id === m ) {
                                results.push( elem );
                                return results;
                            }
                        } else {
                            return results;
                        }

                    // 元素内容 
                    } else {

                        if ( newContext && (elem = newContext.getElementById( m )) &&
                            contains( context, elem ) &&
                            elem.id === m ) {

                            results.push( elem );
                            return results;
                        }
                    }

                // 类型选择器
                } else if ( match[2] ) {
                    push.apply( results, context.getElementsByTagName( selector ) );
                    return results;

                // Class 选择器
                } else if ( (m = match[3]) && support.getElementsByClassName &&
                    context.getElementsByClassName ) {

                    push.apply( results, context.getElementsByClassName( m ) );
                    return results;
                }
            }

            ...
        }
    }

    // 返回 调用select()方法后的值
    return select( selector.replace( rtrim, "$1" ), context, results, seed );
}

说明
可以看下jQuery的 Sizzle选择器
通过一层层的判断将3个功能合为一。
getElementById
getElementsByTagName
getElementsByClassName

当然这种做法早已过时，但jQuery在当年还是很辉煌的。

总结

设计模式总共有23种，适合前端的基本上就这几种。
灵活运用起来，让我们的代码看起来更优雅。