小柒

www.xiaoqi.cn

0%

代理模式

发表于 分类于

虚拟代理

虚拟代理会把一些开销很大的对象，延迟到真正需要它的时候再执行

虚拟代理实现图片预加载

代理负责预加载图片，预加载操作完成后将请求重新交给本体MyImage，降低耦合度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let myImage=(function(){
    let ImageNode = document.createElement('img')
    document.body.appendChild(ImageNode)
    return function(src){
        ImageNode.src = src
    }
})()
let proxyImage = (function(){
    let img = new Image
    img.onload=function(){
        myImage(this.src)
    }
    return function(){
        myImage('file://C:/Users/sevenaeng/Desktop/loading.jpg')
        img.src=src
    }
})()
proxyImage('http://imgcache.qq.com/music/a.jpg')

虚拟代理合并https请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//虚拟代理合并http请求
let synchronusFile = function(id){
    console.log('开始同步文件,id为:'+id)
}
let proxySynchronousFile=(function(){
    let cache = [],timer;
    return function(){
        cache.push(id)
        if(timer){
            return;
        }
        timer=setTimeout(function(){
            synchronusFile(cache.join(','))//两秒内向本体发送需要同步的ID集合
            clearTimeout(timer)
            timer=null
            cache.length=0//清空ID集合
        },2000)
    }
})()
let checkbox = document.getElementsByTagName('input')
for(let i=0;c;c=checkbox[i++]){
    c.onclick=function(){
        if(this.checked === true){
            proxySynchronousFile(this.id)
        }
    }
}

缓存代理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//缓存代理计算乘积
let mult =function(){
    let a = 1
    for(let i=0;i<arguments.length;i++){
        a= a*arguments[i]
    }
    return a
}
//缓存代理工厂
let createProxyFactory=function(fn){
    let cache={}
    return function(){
        let args = Array.prototype.join.call(arguments,',')
        if(args in cache){
            return cache[args]
        }
        return cache[args]=fn.apply(this,arguments)
    }
}
let proxyMult = createProxyFactory(mult)

代理的意义：

实现单一职责原则，指的是一个类，应该仅有一个引起它变化的原因，如果一个对象承担了多个职责，这个对象将会变得巨大，引起它变化的原因也会很多，这些耦合在一起会导致脆弱和低内聚的设计