黑马程序员技术交流社区

标题: 【广州前端】- JavaScript设计模式--单例模式 [打印本页]

---

作者: 老哥哥    时间: 2018-5-26 16:48
标题: 【广州前端】- JavaScript设计模式--单例模式


一、定义

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

二、实现原理

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

三、假单例

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

[JavaScript] 纯文本查看 复制代码

var a = {};

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

[JavaScript] 纯文本查看 复制代码

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

（2）使用闭包封装私有变量

[JavaScript] 纯文本查看 复制代码

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

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

[JavaScript] 纯文本查看 复制代码

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

// 测试

function testSingle(){}getSingle(testSingle)() === getSingle(testSingle)();   

// true

五、补充：

（1）懒加载

[JavaScript] 纯文本查看 复制代码

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

（2）预加载

[JavaScript] 纯文本查看 复制代码

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

点击查看更多精彩前端资源

点击有惊喜

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2