快捷導(dǎo)航

學(xué)習(xí)JavaScript設(shè)計(jì)模式之單例模式

更新時(shí)間：2016年01月19日 11:01:29 作者：奮飛

這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的單例模式，對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下

一、定義

保證一個(gè)類(lèi)僅有一個(gè)實(shí)例，并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。
當(dāng)單擊登陸按鈕，頁(yè)面中出現(xiàn)一個(gè)登陸浮窗，這個(gè)登陸浮窗是唯一的，無(wú)論單擊多少次登陸按鈕，這個(gè)浮窗都只會(huì)被創(chuàng)建一次，那么這個(gè)登陸浮窗就適合用單例模式來(lái)創(chuàng)建。

二、實(shí)現(xiàn)原理

要實(shí)現(xiàn)單例并不復(fù)雜，使用一個(gè)變量來(lái)標(biāo)志當(dāng)前是否已經(jīng)為某個(gè)類(lèi)創(chuàng)建過(guò)對(duì)象，如果是，則在下一次獲取該類(lèi)的實(shí)例時(shí)，直接返回之前創(chuàng)建的對(duì)象。

三、假單例

全局變量不是單例模式，但在JavaScript開(kāi)發(fā)中，我們經(jīng)常會(huì)把全局變量當(dāng)成單例來(lái)使用。

var a = {};

降低全局變量帶來(lái)的命名污染
（1）使用命名空間

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

（2）使用閉包封裝私有變量

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

四、惰性單例：在需要的時(shí)候才能創(chuàng)建對(duì)象實(shí)例

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

// 測(cè)試
function testSingle(){}
getSingle(testSingle)() === getSingle(testSingle)();  // true

五、補(bǔ)充：

（1）懶加載

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

lazyload();

（2）預(yù)加載

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

preload();

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

TopList標(biāo)簽和JavaScript結(jié)合兩例
TopList標(biāo)簽和JavaScript結(jié)合兩例...
2007-08-08
詳解webpack介紹&安裝&常用命令
本篇文章主要介紹了詳解webpack介紹&安裝&常用命令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
javascript 實(shí)現(xiàn)自由落體的方塊效果
這其實(shí)是一個(gè)很簡(jiǎn)單的實(shí)現(xiàn)，create一個(gè)新的div元素，然后append到文檔的body上，經(jīng)過(guò)一定時(shí)間的延遲，做自由落體運(yùn)動(dòng)，著地后fade消失。不多說(shuō)，直接上代碼。
2010-01-01
JavaScript實(shí)現(xiàn)兩個(gè)數(shù)組的交集
這篇文章主要介紹了JavaScript實(shí)現(xiàn)兩個(gè)數(shù)組的交集，給定兩個(gè)數(shù)組???nums1???和??nums2??返回它們的交集，輸出結(jié)果中的每個(gè)元素一定是唯一的，下文詳細(xì)介紹，需要的小伙伴可以參考一下
2022-03-03
js獲取元素到文檔區(qū)域document的(橫向、縱向)坐標(biāo)的兩種方法
獲取頁(yè)面中元素到文檔區(qū)域document的橫向、縱向坐標(biāo)，在js控制元素運(yùn)動(dòng)的過(guò)程中，對(duì)于頁(yè)面元素坐標(biāo)位置的獲取是經(jīng)常用到的，這里主要總結(jié)下兩種方法
2013-05-05
JS調(diào)用打印方法設(shè)置頁(yè)眉頁(yè)腳的實(shí)例
一個(gè)網(wǎng)頁(yè)打印相關(guān)功能的擴(kuò)展演示特效，在實(shí)現(xiàn)了打印功能外，還實(shí)現(xiàn)了打印預(yù)覽、打印前的頁(yè)眉頁(yè)腳設(shè)置，直接打印等功能，以前對(duì)JS打印前設(shè)置頁(yè)腳見(jiàn)的不多，所以這一個(gè)也算是挺有價(jià)值的，希望閑暇時(shí)參閱
2013-05-05
利用JavaScript檢測(cè)CPU使用率自己寫(xiě)的
這篇文章主要介紹了自己寫(xiě)的一個(gè)利用JavaScript檢測(cè)CPU使用率的方法,需要的朋友可以參考下
2014-03-03
JavaScript fetch接口案例解析
本文通過(guò)案例給大家介紹了JavaScript fetch接口,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-08-08
JS短路原理的應(yīng)用示例精簡(jiǎn)代碼的途徑
正如標(biāo)題所言，js中||和&&的特性幫我們精簡(jiǎn)了代碼的同時(shí)，也帶來(lái)了代碼可讀性的降低。這就需要我們自己來(lái)權(quán)衡了，下面有個(gè)不錯(cuò)的示例
2013-12-12
JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播示例
這篇文章主要介紹了JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播,結(jié)合實(shí)例形式分析了JavaScript面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播相關(guān)對(duì)象定義、初始化及功能實(shí)現(xiàn)技巧,需要的朋友可以參考下
2020-01-01