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

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

 

标题 轻松掌握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 12:11:32