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,避免重复判断。

这样的方法在处理浏览器兼容问题时,能够显著降低调试成本和开发复杂度。

上一篇:你所理解的同源和跨域
下一篇:HTML meta标签详解

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.219.124.196]2025年04月22日 23时50分31秒