初学javascript设计模式(四)门面模式

/*
门面模式
*/
/* 
简单易懂的门面模式 
*/
/* 普通写法 */
var a = $("#a")
a.attr("data-val", "1");
a.attr("data-top", "2");
var b = $("#b")
b.attr("data-val", "1");
b.attr("data-top", "2");
var c = $("#c")
c.attr("data-val", "1");
c.attr("data-top", "2");
/* 有的人会说直接连写会比较好 */
$("#a,#b,#c").attr({ "data-val": "1", "data-top": "2" });
/* 这样写可以,但是这样写在数量多的情况下比分开写慢上不少 */

/* 
利用门面,这个例子可能不太恰当,因为jquery已经很好的利用了这个模式 
这个例子只是为了体现门面模式这种封装思想,请不要求解与这个例子
*/
var Fun = function(objArr, attrKey, attrVal) {
    var i = objArr.length;
    while (i--) {
        $(objArr[i]).attr(attrKey, attrVal);
    }
}
/*第一句话*/
Fun(["#a", "#b", "#c"], "data-val", 1);
/*第二句话*/
Fun(["#a", "#b", "#c"], "data-top", 2);

var FacadeFun = function(objArr, attrObj) {
    for (var i in attrObj) {
        Fun(objArr, attrObj[i]);
    }
}
FacadeFun(["#a", "#b", "#c"], { "data-val": "1", "data-top": "2" });
/* 
门面模式书中讲的比较少,也不知道我理解的对不对;
如上面的例子,需要同时设置2个属性,普通封装结果就是如上第一句话,跟着是第二句话那种形式;
而使用了门面模式设计一个方法后,只要使用一句话
所有的调用逻辑都封装在门面函数内部,我们只是通过门面函数间接调用了jq的attr,上面已经说了 其实jq已经很好对attr这个函数进行封装,这边仅仅是个例子
门面模式设计的门面函数更像一个封装了逻辑的接口函数
使用门面模式切勿小题大做,不要把很多不相关的逻辑都封装到门面里面,在使用门面模式的时候请多思考，职责单一原则
*/