专栏首页Super 前端JavaScript设计模式--单例模式

JavaScript设计模式--单例模式

一、定义

保证一个类仅有一个实例,并提供一个访问它的全局访问点。 当单击登陆按钮,页面中出现一个登陆浮窗,这个登陆浮窗是唯一的,无论单击多少次登陆按钮,这个浮窗都只会被创建一次,那么这个登陆浮窗就适合用单例模式来创建。

二、实现原理

要实现单例并不复杂,使用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象。

三、假单例

全局变量不是单例模式,但在JavaScript开发中,我们经常会把全局变量当成单例来使用。

var a = {};

降低全局变量带来的命名污染 (1)使用命名空间

var namespace1 = {
    a: function(){},
    b: 2
}

(2)使用闭包封装私有变量

var user = (function() {
    var _name = 'lee',
        _age = '25';
    return {
        getUserInfo: function() {
            return _name + ":" + _age;
        }
    };
})();

四、惰性单例:在需要的时候才能创建对象实例。

var getSingle = function(fn) {
    var result;
    return function() {
        return result || (result = fn.apply(this, arguments));
    };
};

// 测试
function testSingle(){}
getSingle(testSingle)() === getSingle(testSingle)();    // true

五、补充:

(1)懒加载

var lazyload = function() {
    console.log(1);
    lazyload = function() {
        console.log(2);
    }
    return lazyload();
}

lazyload();

(2)预加载

var preload = (function() {
    console.log(1);
    preload = function() {
        console.log(2);
    };
    return preload;
})();

preload();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 编写高质量代码:改善JavaScript程序建议--函数式编程

    使用call和apply方法可以把一个函数转换为方法传递给某个对象。这种行为只是临时的,函数最终并没有作为对象的方法而存在,当函数被调用后,该对象方法会自动被注...

    奋飛
  • 函数表达式

    定义函数的方式有两种:第一种是“函数声明”,另一种就是“函数表达式”。 “函数声明”会被提升,意味着把函数声明放在调用它的语句后面。 示例1:

    奋飛
  • JavaScript作用域闭包(你不知道的JavaScript)

    JavaScript闭包,是JS开发工程师必须深入了解的知识。3月份自己曾撰写博客《JavaScript闭包》,博客中只是简单阐述了闭包的工作过程和列举了几个示...

    奋飛
  • emlog全版本CSRF加用户xsser.me模块

        前几天写了那个CSRF防御模块,官网回应较少,看来那里鲜有人把安全放在眼中。。今天干脆封装一个CSRF的模块,加入xsser.me这个平台里,方便以后...

    phith0n
  • lodash源码解读之模块化的基础——IIFE

    IIFE包含两部分。 第一部分是一个匿名函数,它包裹在分组操作符()中,拥有独立的词法作用域。 第二部分是再一次使用分组操作符(),创建一个立即执行函数表达式。...

    我是leon
  • webpack2 的 tree-shaking 好用吗?

    代码压缩的现状 下面是一个使用 react 的业务的代码依赖,但是实际上业务代码中并没有对依赖图中标识的模块,也就是说构建工具将不需要的代码打包到了最终的代码当...

    IMWeb前端团队
  • ​助力你的工作效率, 封装一些常用的工具函数(一)

    为了提高以后自己的工作效率,今天抽取了一些公共函数,希望大家可以一起总结!后续我会陆陆续续更新工具函数

    前端老鸟
  • 第112天:javascript中函数预解析和执行阶段

    关于javascript中的函数:    1、预解析:把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前    2、执行 :从上到下执行,但有例外(se...

    半指温柔乐
  • phpcms v9 常用函数

    常用函数 , 打开include/global.func.php,下面存放一些公共函数 view plaincopy to clipboardprint? fu...

    joshua317
  • 前端:JavaScript闭包

    渔父歌

扫码关注云+社区

领取腾讯云代金券