网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 轻松掌握JavaScript单例模式
内容
    这篇文章主要为大家详细介绍了JavaScript单例模式，帮助大家轻松掌握JS单例模式，感兴趣的小伙伴们可以参考一下
    定义：保证一个对象（类）仅有一个实例，并提供一个访问它的全局访问点；
    实现原理：利用闭包来保持对一个局部变量的引用，这个变量保存着首次创建的唯一的实例; 
    主要用于：全局缓存、登录浮窗等只需要唯一一个实例的时候； 
    一. 为一个非单例模式对象（如：Demo）实现单例模式的方法：
    给Demo添加一个静态方法来实现单例：
    Demo.getSingle = (function(){
      var demo = null;
      return function(name){
        if(!demo){
          demo = new Demo(name);
        }
        return demo;
      }
    })(); 
    用法： 
    非单例模式：var a = new Demo('Peter'); 
    单例模式：
    var b1 = Demo.getSingle('Peter');
    var b2 = Demo.getSingle('Sufei');
    b1 === b2;//true,都引用的是new Demo('Peter') 
    通过代理类来实现单例：
    var ProxyDemo = (function(){
      var demo = null;
      return function(name){
        if(!demo){
          demo = new Demo(name);
        }
        return demo;
      }
    })(); 
    用法： 
    非单例模式：var a = new Demo('Peter');
    单例模式：var b = new ProxyDemo('Peter'); 
    二. 惰性单例模式：只在需要的时候才创建该单例； 
    以下是通用惰性单例的创建方法：
    var getSingle = function(foo){
      var single = null;
      return function(){
        return single || (single = foo.apply(this,arguments));
      }
    }; 
    用法：
    var createLoginLayer = function(){
      var frag = document.createDocumentFragment();
      var div = document.createElement('div');
      div.style.display = 'none';
      //以下给div添加其它登录元素
      ...
      document.body.appendChild(frag.appendChild(div));
      return div;
    }
    var createSingleLoginLayer = getSingle(createLoginLayer);
    //当用户第一次点击按钮(id = 'lgBtn')时，来创建并显示登录窗口，之后重复点击按钮不会重复创建；
    document.getElementById('lgBtn').onclick = function(){
      var lg = createSingleLoginLayer();
      lg.style.display = 'block';
    } 
    附：缓存函数的计算结果，如计算一个数的数列 
    以下是不缓存的写法，非常慢！
    function foo(n){
      results = n < 2 ? n : foo(n - 1) + foo(n - 2);
      return results;
    }
    console.log(foo(40));//得计算好几秒 
    以下是缓存写法，基本瞬间出结果！
    var cache = {};
    function foo(n){
      if(!cache[n]){
        cache[n] = n < 2 ? n : foo(n - 1) + foo(n - 2);
      }
      return cache[n];
    }
    console.log(foo(100));
    更好的写法：
    var foo = (function(){
      var cache = {};
      return function(n){
        if(!cache[n]){
          cache[n] = n < 2 ? n : foo(n - 1) + foo(n - 2);
        }
        return cache[n];
      };
    })();
    console.log(foo(100));
    参考文献：
    《JavaScript模式》
    《JavaScript设计模式与开发实践》
    以上就是本文的全部内容，希望对大家的学习有所帮助
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/22 23:29:06