Javascript單例模式概念與實例

来源:http://www.cnblogs.com/luozhihao/archive/2016/09/30/5924057.html
-Advertisement-
Play Games

前言 和其他編程語言一樣,Javascript同樣擁有著很多種設計模式,比如單例模式、代理模式、觀察者模式等,熟練運用Javascript的設計模式可以使我們的代碼邏輯更加清晰,並且更加易於維護和重構。 本文將介紹Javascript模式中較為常見和實用的模式——單例模式,主要分為概念和實例部分。在 ...


前言

和其他編程語言一樣,Javascript同樣擁有著很多種設計模式,比如單例模式、代理模式、觀察者模式等,熟練運用Javascript的設計模式可以使我們的代碼邏輯更加清晰,並且更加易於維護和重構。

本文將介紹Javascript模式中較為常見和實用的模式——單例模式,主要分為概念和實例部分。在介紹實例的同時也會對代碼中額外的知識點進行講解。

單例模式概念

首先什麼是單例模式?可以這樣理解:單例模式旨在保證一個類僅有一個實例,並提供一個全局的訪問點。

可能有人還是不太理解單例的概念,那麼你可以想象生活中的一些例子。比如註冊賬號的時候,如果我們註冊的賬號已經存在,那麼系統會提示我們“賬號已經存在是否使用該賬號登陸”,我們無法再次創建一個一模一樣的賬號,除非把原賬號註銷。這就是單例模式的生動體現。

類似的例子還有網頁上的登陸彈框,無論我們點擊多少次登陸按鈕,界面上始終只會顯示一個登陸彈框,無法再創建第二個。

本文就將以登陸彈框為例介紹單例模式的使用方式。

單例模式實例

1.demo展示

演示地址為:彈框實例

2.代碼展示

構建單例模式彈框實例的代碼每個人可能寫的都不一樣,但是目的都是一個:構建一個全局唯一併可訪問的彈框。接下來我們一步一步來實現這個例子。

(1)獲取DOM對象

var $ = function(id) {
    return typeof id === 'string' ? document.getElementById(id) : id; 
};

首先為了便於之後關於DOM的一些操作,我們這裡利用函數式編程的原理將獲取目標id的元素對象方法封裝了一下,直接利用$(id)就可以獲取。

(2)彈框構造函數

var Modal = function(id, html) {
    this.html = html;
    this.id = id;
    this.open = false;
};

這裡我們聲明瞭一個Modal作為彈框的構造函數,並且再其內部定義了公有屬性html、id和open。html用來定義彈框內部的內容,id用來給彈框定義id名稱,open用於判斷彈框是否打開。

(3)open方法

Modal.prototype.create = function() {
    if (!this.open) {
        var modal = document.createElement('div');

        modal.innerHTML = this.html;
        modal.id = this.id;
        document.body.appendChild(modal);

        setTimeout(function() {
            modal.classList.add('show');
        }, 0);

        this.open = true;
    }
};

我們在Modal的原型鏈上定義了create方法,方法內部我們創建並向DOM中插入彈框,同時給彈框加上一個class為”show”的動畫效果。這裡簡單介紹下classList:

classList是一個比className更便捷的操作元素class的屬性,不過在相容性方面不相容IE10以下版本:

classList相容性

其提供的操作class方法和jQuery的類似,主要有

  • add(class1, class2, …) 在元素中添加一個或多個類名,類似jQuery的addClass()
  • remove(class1, class2, …) 移除元素中一個或多個類名,類似jQuery的removeClass()
  • contains(class) 判斷指定的類名是否存在,類似jQuery的hasClass()

這裡我們用到了add方法給Modal添加show類。

(4)close方法

Modal.prototype.delete = function() {
    if (this.open) {
        var modal = $(this.id);

        modal.classList.add('hide'); 
        setTimeout(function() {
            document.body.removeChild(modal);
        }, 200);

        this.open = false;
    }
};

定義了open方法後我們這裡定義關閉彈框的方法,在其內部給彈框對象添加hide類動畫效果,最後在頁面上移除彈框對象。

(5)創建實例

var createIntance = (function() {
    var instance;
    return function() {
        return instance || (instance = new Modal('modal', '這是一個彈框'))
    }
})();

這是實現單例模式的重要部分,我們來分析下知識點:

  1. 使用閉包封裝了instance私有變數並返回一個函數
  2. 利用 || 語法判斷如果instance不存在則執行後者的實例化Modal方法,存在則直接返回instance,確保了只存在一個彈框實例

本實例的創建也可以理解為代理模式的一部分。

(6)按鈕操作

var operate = {
    setModal: null,
    open: function() {
        this.setModal = createIntance();
        this.setModal.create();
    },
    delete: function() {
        this.setModal ? this.setModal.delete() : '';
    }
};

這裡我們將按鈕操作放在operate對象里,使得打開和關閉操作可以通過this獲取實例setModal。

(7)綁定事件

$('open').onclick = function() {
    operate.open();
};

$('delete').onclick = function() {
    operate.delete();
};

最後我們將打開和刪除方法綁定到兩個按鈕上去,至此我們用單例模式實現的彈框demo就實現了。

完整代碼請查看:完整代碼

結語

本文只演示了單例模式的一種實現方式,至於如何構建一個通用的單例模式就交給有興趣的讀者了。

文章靈感來源於《Javascrit設計模式與開發實踐》一書。

 

原創文章,轉載請註明來自 勞卜 - 博客園[http://www.cnblogs.com/luozhihao]

本文首發於微信公眾號:前端呼啦圈(Love-FED)

博客園:http://www.cnblogs.com/luozhihao/p/5924057.html

segmentfault:https://segmentfault.com/a/1190000007053934

簡書:http://www.jianshu.com/p/52bb14ca2ae6

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一直希望能夠搭建一個完整的,基礎Web框架,方便日後接一些外快的時候,能夠省時省力,終於花了一周的時間,把這個東西搞定了。特此寫下此博客,一來是紀念,二來是希望能夠為別人提供方便。 ...
  • 回到目錄 知識點 本文是一個很另類的文章,在項目中用的比較少,但如果項目中真的出現了這種情況,我們也需要知道如何去解決,對於知識點StringContent和FormUrlEncodedContent我們應該瞭解的多一點,FormUrlEncodedContent是以鍵/值對的形式進行POST數據的 ...
  • A.優化站點資源 速度很重要。用戶很關心。我們的站點必須載入夠快,否則用戶就會走人。SEO 也很重要。我們的站點必須載入夠快,否者搜索排名就會下降。 明白了這樣,我們就來清點一下 【Bootstrap】2.作品展示站點 中的資源。特別的,來看一看我們能控制的、影響頁面速度的重要因素 —— 文件大小, ...
  • 標準文檔流 將窗體自上而下分成一行行, 併在每行中按從左至右的順序排放元素,即為文檔流.每個非浮動塊級元素都獨占一行, 浮動元素則按規定浮在行的一端. 若當前行容不下, 則另起新行再浮動. 標準流的微觀現象 空白摺疊現象 圖片也是一樣,圖片和表單元素可以看成是文字 高矮不齊,底邊對齊 自動換行,一行 ...
  • 用到過PDF的媛媛and猿猿們,總會發現這大千世界之萬能播放器插件,總能少了對媒體控制的介面。 你總會發現PDF無法像img圖片一樣正常載入展現出來,那麼我們在通用語法的基礎上拓展出了適用於預覽及打開的PDF插件便於開發應用。 最主要的是使用到了一個jquery的插件jquery.media.js, ...
  • 一. DOM 分為DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不專屬與javascript。 獲取對象:document.getElementsByTagName('div') 獲取屬性:elem.getAtrribute('title') 2.html-DOM document. ...
  • 選擇器是jQuery的根基 一. 認識 1.CSS常用的選擇器 標簽選擇器,後代選擇器,Id選擇器,通配符選擇器,類選擇器,群組選擇器——主流瀏覽器全部支持 偽類選擇器,子選擇器,臨近選擇器等等——不是全部被支持 2.jQuery選擇器 比如有個 <p class="demo">demo</p> C ...
  • 一.常用的JavaScript庫對比 Prototype、Dojo、YUI、Mootools jQuery是一個輕量級的JavaScript庫,大型開發必備——由John Resig於2006年創建。 jQuery的理念是:寫得少做得多。 優勢:簡化了Js的複雜操作,不再關心相容性,大量的實用方法。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...