设计模式知识连载（42）---惰性模式:

最新推荐文章于 2022-01-05 21:07:31 发布
最新推荐文章于 2022-01-05 21:07:31 发布
阅读量192 收藏
点赞数
分类专栏： 设计模式 文章标签： 设计模式 惰性模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/78942588
版权 
<body>


<h3>设计模式知识连载（42）---惰性模式:</h3>
<p>
    减少每次代码执行时的重复性的分支判断，通过对对象重定义来屏蔽原对象中的分支判断
</p>

<hr>
<button id = 'btn'>点击</button>

<script type="text/javascript">



    /**
    *   案例一：，方式一：初始
    */
    // // // 单体模式定义命名空间
    // var A = {} ;
    // // 添加绑定事件方法on
    // A.on = function(dom, type, fn) {
    //  if(dom.addEventListener) {
    //      dom.addEventListener(type, fn, false) ;
    //  }else if(dom.attachEvent) {
    //      dom.attachEvent('on' + type, fn) ;
    //  }else {
    //      dom['on' + fn] = fn ;
    //  }
    // }
    // var btn = document.getElementById('btn') ;
    // A.on(btn, 'click', function() {
    //  console.log('111') ;
    // }) ;

    /**
    *   案例一：，方式二：进阶
    */
    // // 单体模式定义命名空间
    // var A = {} ;
    // // 添加绑定事件方法on
    // A.on = (function(dom, type, fn) {
    //  // 如果支持addEventListener方法
    //  if(document.addEventListener) {
    //      // 返回重新定义方法
    //      return function(dom, type, fn) {
    //          dom.addEventListener(type, fn, false) ;
    //      }
    //  // 如果支持attachEvent方法（IE）    
    //  }else if(document.attachEvent) {
    //      // 返回重新定义方法
    //      return function(dom, type, fn) {
    //          dom.attachEvent('on' + type, fn) ;
    //      }
    //  // 定义on方法
    //  }else {
    //      // 返回重新定义方法
    //      return function() {
    //          dom['on' + fn] = fn ;   
    //      }
    //  }
    // })() ;

    // console.log(A.on) ;



    /**
    *   案例一：，方式三：进阶
    */
    // 单体模式定义命名空间
    var A = {} ;
    // 添加绑定事件方法on
    A.on = function(dom, type, fn) {
        // 如果支持addEventListener方法
        if(dom.addEventListener) {
            // 显示重新定义on方法
            A.on = function(dom, type, fn) {
                dom.addEventListener(type, fn, false) ;
            }

        // 如果支持attachEvent方法（IE）    
        }else if(dom.attachEvent) {
            // 显示重新定义on方法
            A.on = function(dom, type, fn) {
                dom.attachEvent('on' + type, fn) ;
            }
        // 定义on方法
        }else {
            // 显示重新定义on方法
            A.on = function(dom, type, fn) {
                dom['on' + fn] = fn ;   
            }
        }
        // 执行重新定义on方法
        A.on(dom, type, fn) ;
    } ;

    // 测试用例
    var btn = document.getElementById('btn') ;
    A.on(btn, 'click', function() {
        console.log('111') ;
    }) ;




    /**
    *   案例二：创建XHR对象，方式一：初始
    */
    // 创建XHR对象
    // function createXHR() {
    //  // 标准浏览器
    //  if(typeof XMLHttpRequest != 'undefined') {
    //      return new XMLHttpRequest() ;
    //  // IE浏览器
    //  }else if(typeof ActiveXObject != 'undefined') {
    //      if(typeof arguments.callee.activeXString != 'string') {
    //          var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'] ;
    //          var i = 0 ;
    //          var len = versions.length ;
    //          // 遍历并设置版本
    //          for(; i < len; i++) {
    //              try {
    //                  new ActiveXObject(versions[i]) ;
    //                  arguments.callee.activeXString = versions[i] ;
    //                  break ;
    //              }catch(e) {

    //              }
    //          }
    //      }
    //      return new ActiveXObject(arguments.callee.activeXString) ;
    //  // 对不支持的浏览器抛出错误提示   
    //  }else {
    //      throw new Error('您的浏览器并不支持Ajax') ;
    //  }
    // }



    /**
    *   案例二：创建XHR对象，方式二：进阶
    *   加载时损失性能，但是第一次调用时不损失性能
    */
    // 创建XHR对象
    // var createXHR = (function () {
    //  // 标准浏览器
    //  if(typeof XMLHttpRequest != 'undefined') {
    //      return function() {
    //          return new XMLHttpRequest() ;
    //      }
    //  // IE浏览器
    //  }else if(typeof ActiveXObject != 'undefined') {
    //      return function() {
    //          if(typeof arguments.callee.activeXString != 'string') {
    //              var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'] ;
    //              var i = 0 ;
    //              var len = versions.length ;
    //              // 遍历并设置版本
    //              for(; i < len; i++) {
    //                  try {
    //                      new ActiveXObject(versions[i]) ;
    //                      arguments.callee.activeXString = versions[i] ;
    //                      break ;
    //                  }catch(e) {

    //                  }
    //              }
    //          }
    //          return new ActiveXObject(arguments.callee.activeXString) ;
    //      }

    //  // 对不支持的浏览器抛出错误提示   
    //  }else {
    //      return function() {
    //          throw new Error('您的浏览器并不支持Ajax') ;
    //      }

    //  }
    // })() ;



    /**
    *   案例二：创建XHR对象，方式三：进阶
    *   加载时不损失性能，但是第一次调用时损失性能
    */

    function createXHR() {
        // 标准浏览器
        if(typeof XMLHttpRequest != 'undefined') {
            createXHR = function() {
                return new XMLHttpRequest() ;
            }
        // IE浏览器
        }else if(typeof ActiveXObject != 'undefined') {
            createXHR = function() {
                if(typeof arguments.callee.activeXString != 'string') {
                    var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'] ;
                    var i = 0 ;
                    var len = versions.length ;
                    // 遍历并设置版本
                    for(; i < len; i++) {
                        try {
                            new ActiveXObject(versions[i]) ;
                            arguments.callee.activeXString = versions[i] ;
                            break ;
                        }catch(e) {

                        }
                    }
                }
                return new ActiveXObject(arguments.callee.activeXString) ;
            }

        // 对不支持的浏览器抛出错误提示   
        }else {
            createXHR() {
                throw new Error('您的浏览器并不支持Ajax') ;
            }
        }
        return createXHR() ;
    }

</script>    

</body>
宇智波幽助
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
设计模式知识连载（47）---Widget模式:
yuzhiboyouzhu的博客
01-07 954
<h3>设计模式知识连载（47）---Widget模式:</h3> <div> <p> （Web Widget指的是一块可以在任意页面中执行的代码块）Widget模式是指借用Web Widget思想将页面分解成部件，针对部件开发，最终组合成完整的页面。 </p> </div> <hr>
js设计模式之惰性模式
zxw305的博客
10-21 337
写过前段脚本的经常会遇到绑定时间方法，但是要交兼容IE浏览器和标准浏览器 例如： var JsObject = {}; JsObject.on = function (dom,type,fn){ if(dom.addEventListener){ //除去IE外的标准浏览器 dom.addEventListener(type,fn,false); }else if(dom.a
js通用的惰性单例示例
Hi_xiexialing的博客
01-15 1102
惰性单例 惰性单例指的是在需要的时候才创建对象实例 通用的惰性单例示例 登录 var createLoginLayer = function(){ var div = document,createElement("div"); div.innerHTML = "我是登录悬浮框"; div.style.display =
设计模式之惰性模式
qq_42778289的博客
01-05 688
惰性模式： 惰性模式并不是经典设计模式中的一种，可以把它看作一种拓展的设计模式。 它的使用场景通常如下： 当执行某段代码前有前置逻辑判断，但该前置逻辑判断在特定环境下不会发生改变时，只需要执行一次。 如果已知前置的逻辑判断后，仍然每次执行方法都走一遍前置的逻辑判断，则会造成 js 性能浪费。此时可以使用惰性模式来解决该问题。 它的实现方式： 利用自执行函数实现 利用函数重写来实现 举子： var addEvent = function( dom, type, fn ) { if( dom.addEv
设计模式知识连载（18）---单例模式:
yuzhiboyouzhu的博客
12-14 146
<body><h3>设计模式知识连载（18）---单例模式:</h3> <p> 单例模式：又被称为单体模式，是只允许实例化一次的对象类。 常用一个对象来规划一个命名空间，井井有条的管理对象上的属性和方法 </p><script type="text/javascript"> /** * 案例，方式一：初始 */ // // 滑动特效 // fu
python-patterns：Python中设计模式惯用语的集合
02-05
Python中的设计模式和习惯用法的集合。 当前模式 创作模式： 模式 描述 对特定工厂使用通用函数 实例之间具有共享状态的单例 生成器对象不使用多个构造函数，而是接收参数并返回构造的对象 委托专门的功能/方法来...
JS设计模式之惰性模式（二）
10-19
主要为大家详细介绍了JS设计模式之惰性模式的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript设计模式---单例模式详解【四种基本形式】
10-15
以上四种单例模式在JavaScript中都有其适用的场景，开发者可以根据实际需求选择合适的设计模式。单例模式在JavaScript中的应用广泛，比如管理DOM元素、提供全局配置、控制页面的公共资源等。理解并熟练运用单例模式...
egison-haskell：Egison模式匹配的模板Haskell实现
02-04
Egison Haskell是一个开源项目，它实现了Egison模式匹配机制，并将其与Haskell的模板Haskell集成。模板Haskell是一种元编程系统，允许在编译时生成和操作Haskell代码，而Egison模式匹配则是一种强大的数据结构匹配...
设计模式知识连载（43）---参与者模式:
yuzhiboyouzhu的博客
01-02 409
<body> <h3>设计模式知识连载（43）---参与者模式:</h3> <p> 在特定的作用域中执行给定的函数，并将参数原封不动的传递。 </p><hr><button>点击</button> <p>hello</p><script type="text/javascript"> /** * 案例一：传递数据，方式一：初始 */ // // 单体模式定
设计模式知识连载（45）---同步模块模式:
yuzhiboyouzhu的博客
01-04 272
<body> <h3>设计模式知识连载（45）---同步模块模式:</h3> <div> <p> 模块化：将复杂的系统分解成高内聚、低耦合的模块，使系统开发变得可控、可维护、可拓展，提高模块的复用率 </p> <p> 请求发出后，无论模块是否存在，立即执行后续的逻辑，实现模块开发中对模块的立即引用。 </p> </div> <hr><d
设计模式知识连载（44）---等待者模式:
yuzhiboyouzhu的博客
01-04 260
<body> <h3>设计模式知识连载（44）---等待者模式:</h3> <p> 通过对多个异步进程监听，来触发未来发生的动作 </p><hr> <script type="text/javascript"> /** * 案例一：接口拆分，方式一：初始 */ // 等待者对象 var Waiter = function() { //
设计模式知识连载（25）---享元模式:
yuzhiboyouzhu的博客
06-09 249
<body> <h3>设计模式知识连载（25）---享元模式:</h3> <p> 运用共享技术有效地支持大量的细粒度的对象，避免对象间拥有相同内容造成多余的开销【优化用的】 </p><hr> <div id = 'container'></div> <div> <span id = 'next_page'>下一页</span> </div><script type="text/jav
设计模式知识连载（11）---继承_7:多继承
yuzhiboyouzhu的博客
12-13 223
<body><h3>设计模式知识连载（11）---继承_7:多继承</h3> <p> JavaScript中的继承是依赖于原型prototype链实现的， 但是只有一条原型链，所以理论上是不能继承多个父类的。 然而可以通过一些技巧方法来实现类似的多继承 </p><script type="text/javascript"> // 这里的extend方法的实现就是对对象中
设计模式知识连载（23）---桥接模式:
yuzhiboyouzhu的博客
12-19 188
<body> <style type="text/css"> span { display: inline-block; margin: 10px ; padding: 10px ; color: #333333 ; border: 1px solid black ; background-col
设计模式知识连载（10）---继承_6:终极继承者-寄生组合式继承
yuzhiboyouzhu的博客
12-12 187
<body><h3>设计模式知识连载（10）---继承_6:终极继承者-寄生组合式继承</h3> <p> 寄生式继承处理的不是对象，而是类原型 </p><script type="text/javascript"> // 封装类式继承 function inheritObject(o) { // 声明一个过度函数对象 function F() {
设计模式知识连载（46）---异步模块模式:
yuzhiboyouzhu的博客
01-05 184
<body> <h3>设计模式知识连载（46）---异步模块模式:</h3> <div> <p> 模块化：将复杂的系统分解成高内聚、低耦合的模块，使系统开发变得可控、可维护、可拓展，提高模块的复用率 </p> <p> 请求发出后，继续其他业务逻辑，知道模块加载完成执行后续的逻辑，实现模块开发中对模块加载完成后的引用 </p> </div
设计模式知识连载（38）---委托模式:
yuzhiboyouzhu的博客
12-31 183
<body> <h3>设计模式知识连载（38）---委托模式:</h3> <p> 多个对象接收并处理同一请求，他们将请求委托给另一个对象同一处理请求 </p><hr><div> <ul id = 'container'> <li>111</li> <li>222</li> <li>333</li> <li>444</li
JavaScript设计模式：提升代码优雅度的经典指南
5. **jQuery中的设计模式** - 针对jQuery库，介绍了一些特定的模式，如组合模式、适配器模式、外观模式、观察者模式、迭代器模式、惰性初始化模式、代理模式和建造者模式。 6. **其他模式** - 包括一些针对jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值