JavaScript AJAX之惰性载入函数
作者:bea
在JS中有些内存只需执行一遍即可,如浏览器类型检测是最常用的一个功能,因为我们使用Ajax的时候需要检测浏览器的内置的XHR。我们可以在第一次检测的时候记录下类型,往后在使用Ajax的时候就不需要再去检测浏览器类型了。在JS中就算只有一个if也总比没有if的语句效率要高。 普通Ajax方法 代码如下: /** * JS惰性函数 */ function ajax(){ if(typeof XMLHttpRequest != "undefined"){ r
在JS中有些内存只需执行一遍即可,如浏览器类型检测是最常用的一个功能,因为我们使用Ajax的时候需要检测浏览器的内置的XHR。我们可以在第一次检测的时候记录下类型,往后在使用Ajax的时候就不需要再去检测浏览器类型了。在JS中就算只有一个if也总比没有if的语句效率要高。
普通Ajax方法
代码如下:
/**
* JS惰性函数
*/
function ajax(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for(var i=0,k=version.length;i<k;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
throw ex;
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw "No XHR object";
}
}
每次调用ajax()函数都要对浏览器内置的XHR检查,效率不高。
使用惰性方式的方法
代码如下:
/**
* JS惰性函数
*/
function ajax(){
if(typeof XMLHttpRequest != "undefined"){
ajax = function(){
return new XMLHttpRequest();
};
}else if(typeof ActiveXObject != "undefined"){
ajax = function(){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for(var i=0,k=version.length;i<k;i++){
try{
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
}catch(ex){
throw ex;
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
}else{
ajax = function(){
throw "No XHR object";
}
}
return ajax();
}
在第二个惰性方法中if的每个分支都会为ajax()变量赋值,有效覆盖了原有函数,最后一步调用新的函数。下一次调用的ajax()的时候,就直接调用变量。
优化重点
要执行特定代码只有实际调用才执行,而某些JS库一开始就检测浏览器,预先设置好。
由于加了复杂的判断所以首次运行速度慢,但后边的多册运行的效率会更快。 有时候写代码久了,不能一成不变,要经常思考怎样才能使程序运行的更快,更有效率。这样的思考下写出来的程序才是精装,而不会产生多余的垃圾代码。这也不是简单OO就能一刀切,实际上代码很多地方都是活的,人更是活的。
有用 | 无用
普通Ajax方法
代码如下:
/**
* JS惰性函数
*/
function ajax(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for(var i=0,k=version.length;i<k;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
throw ex;
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw "No XHR object";
}
}
每次调用ajax()函数都要对浏览器内置的XHR检查,效率不高。
使用惰性方式的方法
代码如下:
/**
* JS惰性函数
*/
function ajax(){
if(typeof XMLHttpRequest != "undefined"){
ajax = function(){
return new XMLHttpRequest();
};
}else if(typeof ActiveXObject != "undefined"){
ajax = function(){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for(var i=0,k=version.length;i<k;i++){
try{
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
}catch(ex){
throw ex;
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
}else{
ajax = function(){
throw "No XHR object";
}
}
return ajax();
}
在第二个惰性方法中if的每个分支都会为ajax()变量赋值,有效覆盖了原有函数,最后一步调用新的函数。下一次调用的ajax()的时候,就直接调用变量。
优化重点
要执行特定代码只有实际调用才执行,而某些JS库一开始就检测浏览器,预先设置好。
由于加了复杂的判断所以首次运行速度慢,但后边的多册运行的效率会更快。 有时候写代码久了,不能一成不变,要经常思考怎样才能使程序运行的更快,更有效率。这样的思考下写出来的程序才是精装,而不会产生多余的垃圾代码。这也不是简单OO就能一刀切,实际上代码很多地方都是活的,人更是活的。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 通过js为元素添加多项样式,浏览器全兼容写法
- 原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
- 原生js实现复制对象、扩展对象 类似jquery中的extend()方法
- ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
- 仿百度联盟对联广告实现代码
- jQuery针对各类元素操作基础教程
- jQuery事件用法实例汇总
- laytpl 精致巧妙的JavaScript模板引擎
- jQuery动画特效实例教程
- jQuery实用函数用法总结
- jQuery实现异步获取json数据的2种方式
- 原生javascript实现的分页插件pagenav
- JavaScript判断变量是对象还是数组的方法
- 分享一个自己动手写的jQuery分页插件
- jQuery标签替换函数replaceWith()的使用例子
- jQuery焦点图切换简易插件制作过程全纪录
- javascript正则表达式参数/g与/i及/gi的使用指南
- JavaScript数组函数unshift、shift、pop、push使用实例
- JavaScript实现的in_array函数