
js高阶编程之---单例模式,XHR兼容 (惰性思想)
发布日期:2021-05-18 05:57:09
浏览次数:11
分类:精选文章
本文共 1435 字,大约阅读时间需要 4 分钟。
高级JS编程中的惰性思想:能一次性完成的任务,不需要多次执行。
项目中的单例模式(惰性思想_案例1)
在实际项目开发中,惰性思想能够显著提升效率。以下是一个典型案例:获取CSS属性值的方法。
var utils = (function() { var flag = 'getComputedStyle' in window; function getCss(attr) { var val = null, reg = null; if (flag) { val = window.getComputedStyle(this, null)[attr]; } else { if (attr === 'opacity') { val = this.currentStyle['filter']; reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/; val = reg.test(val) ? reg.exec(val)[1]/100 : 1; } else { val = this.currentStyle[attr]; } } reg = /^(-?\d+(\.\d+)?)((px|pt|em|rem)?$/); return reg.test(val) ? parseFloat(val) : val; } return {getCSS: getCSS};})();
应用场景:
- 该方法用于获取元素的CSS属性值。
- 在标准浏览器中,使用
getComputedStyle
。 - 在IE6-8中,则需要额外处理
opacity
属性,并通过正则表达式转换filter
值。
调用示例:
utils.getCSS.call(curEle, 'width');
惰性思想_案例2
在实际开发中,好多方法需要逐次尝试才能找出最终可用的版本。以下是一个典型案例:创建AJAX对象的兼容性处理。
function createXHR() { var xhr = null, flag = false, ary = [ function(){return new XMLHttpRequest();}, function(){return new ActiveXObject('Microsoft.XMLHTTP');}, function(){return new ActiveXObject('Msxml2.XMLHTTP');}, function(){return new ActiveXObject('Msxml3.XMLHTTP');} ]; for (var i=0; i
核心思想:
- 这种懒初始化方式,能够在出现错误时,自动尝试下一个候选方案。
- 一旦找到可行的方法,就立即固定到
createXHR
,避免重复判断。
这样的方法在处理浏览器兼容问题时,能够显著降低调试成本和开发复杂度。
发表评论
最新留言
能坚持,总会有不一样的收获!
[***.219.124.196]2025年04月22日 23时50分31秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
[日常] PHP与Mysql测试kill慢查询并检验PDO的错误模式
2019-03-15
[日常] Go语言圣经-并发的非阻塞缓存
2019-03-15
[PHP] 工厂模式的日常使用
2019-03-15
[PHP] 控制反转依赖注入的日常使用
2019-03-15
[PHP] try catch在日常中的使用
2019-03-15
[Linux] 进程间通信
2019-03-15
[PHP] error_reporting(0)可以屏蔽Fatal error错误
2019-03-15
[PHP] 解决php中上传大文件的错误
2019-03-15
[Linux] 使用awk比较两个文件的内容
2019-03-15
[Git] 彻底删除github上的某个文件以及他的提交历史
2019-03-15
[Go] gin框架渲染html字符串
2019-03-15
[js] js中的闭包以及特点
2019-03-15
[操作系统]内存连续分配管理方式
2019-03-15
[Go] json.Unmarshal()解析后存储的结构体定义
2019-03-15
[PHP]PHP不支持方法重载和只支持方法覆盖
2019-03-15
[Go] 获取Go二进制文件的真正执行路径os.Args
2019-03-15
java Map
2019-03-15
scala Tuple入门到熟悉
2019-03-15
RDD partitioner入门详解
2019-03-15
presto查询报错
2019-03-15