设为首页 加入收藏

TOP

常用的JavaScript设计模式(四)
2016-09-13 12:03:11 】 浏览:939
Tags:常用 JavaScript 设计模式
s.state("补打卡成功");


// 忘记打卡的日期为:2016-9-11, 补打卡状态:补打卡成功


应用场景:


  比如图片的懒加载,我们就可以运用这种技术。在图片未加载完成之前,给个loading图片,加载完成后再替换成实体路径。


var myImage = (function(){
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
return function(src){
imgNode.src = src;
}
})();
// 代理模式
var ProxyImage = (function(){
var img = new Image();
img.onload = function(){
myImage(this.src);
};
return function(src) {
// 占位图片loading
myImage("https://www.cppentry.com/upload_files/article/54/1_8wder__.gif");
img.src = src;
}
})();
// 调用方式


ProxyImage("https://img.alicdn.com/tps/i4/TB1b_neLXXXXXcoXFXXc8PZ9XXX-130-200.png"); // 真实要展示的图片


  当然,这种懒加载方法不用代理模式也是可以实现的,只是用代理模式。我们可以让 myImage 只做一件事,只负责将实际图片加入到页面中,而loading图片交给ProxyImage去做。从而降低代码的耦合度。因为当我不想用loading的时候,可以直接调用myImage 方法。也即是说假如我门不需要代理对象的话,直接可以换成本体对象调用该方法即可。


外观模式


概念:


  外观模式是很常见。其实它就是通过编写一个单独的函数,来简化对一个或多个更大型的,可能更为复杂的函数的访问。也就是说可以视外观模式为一种简化某些内容的手段。


  说白了,外观模式就是一个函数,封装了复杂的操作。


代码实现:


  比如一个跨浏览器的ajax调用


function ajaxCall(type,url,callback,data){
// 根据当前浏览器获取对ajax连接对象的引用
var xhr=(function(){
try {
// 所有现代浏览器所使用的标准方法
return new XMLHttpRequest();


}catch(e){}

// 较老版本的internet Explorer兼容
try{


return new ActiveXObject("Msxml2.XMLHTTP.6.0");


}catch(e){}


try{


return new ActiveXObject("Msxml2.XMLHTTP.3.0");

}catch(e){}


try{


return new ActiveXObject("Microsoft.XMLHTTP");

}catch(e){}


// 如果没能找到相关的ajax连接对象,则跑出一个错误。
throw new Error("Ajax not support in this browser.")


}()),
STATE_LOADED=4,
STATUS_OK=200;


// 一但从服务器收到表示成功的相应消息,则执行所给定的回调方法
xhr.onreadystatechange=function{
if(xhr.readyState !==STATE_LOADED){
return;
}
if(xhr.state==STATUS_OK){
callback(xhr.responseText);
}
}


// 使用浏览器的ajax连接对象向所给定的URL发出相关的调用
xhr.open(type.toUpperCase(),url);
xhr.send(data);
}


// 使用方法
ajaxCall("get","/user/12345",function(rs){
alert('收到的数据为:'+rs);
})


应用场景:


  当需要通过一个单独的函数或方法来访问一系列的函数或方法调用,以简化代码库的其余内容,使得代码更容易跟踪管理或者更好的维护时,可以使用外观模式。其实我们平时代码中这种模式应该是用的比较多的。


java script的设计模式有很多种,本文只是总结了其中的几种,以后可能会补充。这篇文章下来查阅了挺多资料,也学到挺多东西的。


首页 上一页 1 2 3 4 下一页 尾页 4/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Java中变量命名和引用变量的一个.. 下一篇C语言常见类型占用字节数

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目