curTain

写一个代理模式.

1. 情景

情景: 小明追女生 A

  • 非代理模式: 小明 =花=> 女生A
  • 代理模式: 小明 =花=> 让女生A的好友B帮忙 =花=> 女生A

2. 代理模式的特点

  • 代理对象和本体对象具有一致的接口, 对使用者友好

常用的虚拟代理形式:某一个花销很大的操作,可以通过虚拟代理的方式延迟到这种需要它的时候才去创建(例:使用虚拟代理实现图片懒加载)
图片懒加载的方式:先通过一张loading图占位,然后通过异步的方式加载图片,等图片加载好了再把完成的图片加载到img标签里面。

3. 代码设计

4. es6 代理模式 —- Proxy

目的:在操作前可以进行其他的操作(对数据加工等)。

代码设计

运行结果:

案例参考:

4. 总结

代理模式,总的来说,是在操作前,可以进行其他的操作。

5. 参考材料

BasicSkill–代理模式

JavaScript设计模式

js –代理模式

6. 代码

图片懒加载
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
// 真实的对象
class RealImg {
constructor(){
this.imgNode = document.createElement("img")
document.body.appendChild( this.imgNode )
}
setSrc( src ){
this.imgNode.src = src
}
}
// 代理对象
class ProxyImg {
constructor(){
this.realImg = new RealImg()
}
setSrc( src ){
this.realImg.setSrc("http://seopic.699pic.com/photo/40007/8839.jpg_wh1200.jpg")
let img = new Image()
img.src = src
img.onload = () => {
this.realImg.setSrc( src )
}
}
}

let proxyImg = new ProxyImg()
proxyImg.setSrc( "http://seopic.699pic.com/photo/40006/7735.jpg_wh1200.jpg" )

 评论