本页二维码,扫一扫分享到朋友圈
朋友圈

javascript代理模式与开发实践


阅读186 评论0 赞 46返回首页    go 编程与技术  go javascript


前言

今天说说代理模式在前端开发中的应用实践。


代理模式

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。客户实际上访问的是一个代用品,代用品对请求作出一些处理之后,再把请求转交给本体对象。应用场景有许多比如图片预加载、合并http请求等功能性函数,或者数据和ajax的缓存等。

后面会一一说到使用代理和不使用代理的场景。


代理的意义

我们以图片预加载的例子来看看代理的意义所在。

简单的图片预加载

一个普通的图片预加载,原理就不再解释:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

varMyImage = (function(){

varimgNode =document.createElement('img');

document.body.appendChild(imgNode);

varimg =newImage;

//图片加载后,将默认占位图换为指定图片

img.onload =function(){

imgNode.src = img.src;

};

retrun {

setSrc:function(src){

//默认占位图片

imgNode.src ='pic.jpg';

img.src = src;

}

}

})();

MyImage.setSrc('myPic.jpg');

上面代码中的MyImage对象不仅需要负责给img节点设置src,还要负责预加载图片,这样耦合性太强,不利于拓展。比如说,现在我们不再需要预加载功能了,就得修改MyImage对象内部了。

使用代理的图片预加载

我们看看使用代理模式的图片预加载:

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

//myImage只负责给图片设置src属性

varmyImage = (function(){

varimgNode =document.createElement('img');

document.body.appendChild(imgNode);

return{

setSrc:function(src){

imgNode.src = src;

}

}

})();

//代理负责预加载

varproxyImg = (function(){

varimg =newImage;

img.onload =function(){

myImage.setSrc(this.src);

}

return{

setSrc:function(src){

myImage.setSrc('pic.jpg');

img.src = src;

}

}

})();

proxyImg.setSrc('myPic.jpg');

我们通过proxyImg间接地访问MyImage,并在此过程中加入一些额外的操作。

这样如果我们不需要预加载功能了,也可以直接使用

1

myImage.setSrc('myPic.jpg');

来完成基本功能,从而提高灵活性。

代理和本地接口一致性

上面的例子可以看到,代理和本体的入口参数格式一致,这样设计有助于提高灵活性,代理和本地将来可以被替换使用。


应用实例

下面说一些代理模式的应用实例。

合并HTTP请求

Web开发中网络是很消耗资源的,我们假设一种情况,用户在很短的时间内多次请求服务器,势必会有所影响,我们可以通过代理来做一点小手脚,偷偷的合并HTTP请求:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//模拟http请求

varsendData =function(id){

console.log('发送数据'+ id);

}

//将http请求合并后一起发送

varproxySendData = (function(){

varcache = [];//保存一段时间内的请求id

vartimer;//定时器

returnfunction(id){

cache.push(id);

if(timer){

return;

}

timer = setTimeout(function(){

//2秒后发送请求的集合

sendData(cache.join(','));

clearTimeout(timer);//清空定时器

timer =null;

cache.length =0;

},2000);

}

})();

上面的例子很简单,但是主要是为了提出代理的设计思想,下面我们看看缓存代理的应用。

缓存代理

缓存代理可以为一些比较大的运算结果提供暂时的存储,在下次运算时,如果传递进来的参数跟之前一致,则可以直接返回前面存储的运算结果。

比如说分页,比如说复杂的数学运算。这里以一个简单的算法为例子:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

//简单的乘法

varmult =function(){

vara =1;

for(vari =0,len =arguments.length;i<1;i++){

a = a*arguments[i];

}

returna;

}

//缓存代理

varproxyMult = (function(){

varcache = {};//存放缓存的结果

returnfunction(){

varargs =Array.prototype.join.call(arguments,',');

//如果入口参数一样,这返回缓存中的值

if(argsincache){

returncache[args];

}

//如果入口参数不一样,这计算结果并存入缓存

returncache[args] = mult.apply(this,arguments);

}

})();

proxyMult(1,2,3,4)//24

mult(1,2,3,4)//24


  上一篇:go jQuery的deferred对象详解
  下一篇:go 网站图片使用canvas加载和延迟加载的方法


评论


用QQ登录管理/创建网站 用微博登录管理/创建网站   发布于:11-19