1. 程式人生 > >js的36個設計模式:技巧型模式

js的36個設計模式:技巧型模式

1.鏈模式

通過return this,讓函式物件可以鏈式呼叫。

function fn(){
    this.a = function(){
        console.log("a");
        return this;
    };
    this.b = function(){
        cosnole.log("b");
        return this;
    }
}
fn.a().b();

2.委託模式

1.解決DOM後繫結事件


<div id="dom"></div>

//對後新增到dom裡的元素的繫結事件,可以委託給父元素dom物件處理
var dom = document.getElementById("dom");
dom.onclick = function(){
    var e = e || window.event,
        tar = e.target || e. srcElement;
    if(tar.nodeName.toLowerCase() === "p"){
        tar.innerHtml = "後繫結事件修改了內容";
    }
}

var p = document.createElement("p");
p.innerHtml = "後新增";
dom.appendChild(p);

2.資料分發

//需要傳送多個數據請求時。。
$.get("./da.php?q=1",function(res){
    ...
})
$.get("./da.php?q=2",function(res){
    ...
})
$.get("./da.php?q=3",function(res){
    ...
})

...

//用委託模式,把3次請求委託給另一個物件傳送 (es6語法)
var da = {
    banner(res){

    },
    mes(res){

    },
    aside(res){

    }
}
$.get("./da.php"
,function(res){ for(var i in res){ da[i] && da[i](res[i]) } })

資料訪問物件模式

就是封裝一個前端DAO類,來操作localStorage本地儲存

節流模式