JS設想形式——代辦形式

1. 引見

代辦形式是一個異常有意義的形式,當客戶不方便直接接見一個對象或不滿足要求時,供應一個替身對象來掌握對這請輸入代碼個對象的接見。

2. 定義

代辦形式是為一個對象供應一個代用品或佔位符,以便掌握對它的接見

3. 意義

削減一個對象負擔過量的職責,削減耦合。

4. 代辦形式引見

1. 庇護代辦

庇護代辦的作用就是過濾一些要求.在這個例子中很多人都送小紅花,然則小紅不是所有人的花都收,而是只收35歲以下的人的花,但每次都要去推斷顯得貧苦,就能夠交給代辦對象去推斷,相符前提的才把花送給小紅。

    var Flower=function(){}
    var xiaoming={
        age:23,
        sendFlower:function(target){
            var flower= new Flower()
            target.receiveFlower(flower,this.age)
        }
    }
    var xiaohua={
        age:60,
        sendFlower:function(target){
            var flower= new Flower()
            target.receiveFlower(flower,this.age)
        }
    }
    var proxy={
        receiveFlower(flower,age){
            if(age<=35){
                xiaohong.receiveFlower(flower)
            }
        }
    }
   var xiaohong={
       receiveFlower(flower){
           console.log('i receive a flower')
       }
   }
   xiaoming.sendFlower(proxy)
   xiaohua.sendFlower(proxy)

2. 假造代辦(重點)

假造代辦就是把一些開支很大的對象延晚到真正須要它的時刻才去建立。在這個例子中雖然設置了src屬性,然則會推晚到圖片加載完才設置src屬性。假造代辦還能夠運用於兼并http要求,處置懲罰惰性加載運用。

var myImage=(function(){
    var imgNode=document.createElement("img")
    document.body.appendChild(imgNode)
    return{
        setSrc:function(src){
            imgNode.src=src
        }
    }
})()
var proxy=(function(){
    var img=new Image
    img.onload=function(){
        console.log(myImage)
        myImage.setSrc(this.src)
    }
    return{
        setSrc:function(src){
            myImage.setSrc("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528824410335&di=babef45d6ef1591c6b373f62af81de3b&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3Dbf193fc3f8f2b211e47b8d4affb0490e%2Fe824b899a9014c08c1277115097b02087bf4f466.jpg")
            img.src=src
        }
    }
})()
proxy.setSrc("http://img18.3lian.com/d/file/201704/13/3e6a1f173606db1d9041ecb6e492adcb.gif")

3. 緩存代辦

緩存代辦是把一些開支打的運算效果先儲存起來,下次運算假如通報參數與之前一致則返回之前的運算效果,calculate函數只會挪用一次。

var calculate=function(){
    var count=1
    for(var i=0,len=arguments.length;i<len;i++){
        count*=arguments[i]
    }
    console.log("result is:",count)
    return count
}
var proxy=(function(){
    var cache={}
    return function(){
        let arg = Array.prototype.join.call(arguments,",")
        if(arg in cache){
            return cache[arg]
        }
        cache[arg]=calculate.apply(this,arguments)
    }
    
})()
proxy(1,2,3,4)
proxy(1,2,3,4)
緩存代辦除了能夠用於大開支盤算也可用於分頁,要求過的頁面存儲起來。

5. 代辦和接口一致性

在上面的例子中能夠看到代辦對象和現實對象都具有雷同的要領,這有利於後續假如不須要代辦了,直接把現實對象換上去就能夠了,不須要做過量的修正。

    原文作者:LJun
    原文地址: https://segmentfault.com/a/1190000015270052
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞