再起航,我的學習筆記之JavaScript設計模式05(簡單工程模式)

来源:http://www.cnblogs.com/chen-jie/archive/2017/08/09/JavaScript-Simple-Factory.html
-Advertisement-
Play Games

我的學習筆記是根據我的學習情況來定期更新的,預計2 3天更新一章,主要是給大家分享一下,我所學到的知識,如果有什麼錯誤請在評論中指點出來,我一定虛心接受,那麼廢話不多說開始我們今天的學習分享吧! 前幾次已經和大家分享過了,如何實現javascript的封裝繼承和多態,這次我們開始正式介紹javasc ...


我的學習筆記是根據我的學習情況來定期更新的,預計2-3天更新一章,主要是給大家分享一下,我所學到的知識,如果有什麼錯誤請在評論中指點出來,我一定虛心接受,那麼廢話不多說開始我們今天的學習分享吧!

前幾次已經和大家分享過了,如何實現javascript的封裝繼承和多態,這次我們開始正式介紹javascript設計模式。

這次我們要介紹的是創建型設計模式,創建型設計模式是一類處理對象創建的設計模式,通過某種方式控制對象的創建來避免基本對象創建時可能導致設計上的問題或增加設計上的複雜度。

在創建型設計模式中,主要為大家分享的有簡單工廠模式,工廠方法模式,抽象工廠模式,建造者模式,原型模式,單例模式。本次主要和大家分享,簡單工廠模式。

簡單工廠模式

簡單工廠模式(Simple Factory): 又叫靜態工廠方法,由一個工廠對象決定創建某一種產品對象的實例。主要用來創建同一類對象。

這樣說有可能概念很模糊,下麵我用示例給大家演示

如果我們要寫一組js方法分別要根據不同情況彈出alert(提示框),Confirm(確認框),Prompt(可輸入提示框),我們會怎麼做?

就談談我吧,要換做以前我會直接調用這3個方法,哪裡使用哪裡直接調用

function TestAlert(){
     alert("這是一個提示框!");
 }
 function TestConfirm(){
     confirm("這是一個確認框!")
 }
 function TestPrompt(){
     prompt("今天天氣怎麼樣!","");
 }

但是,如果需求更改,我要彈出別的提示,我有可能會再寫3個方法

function TestAgainAlert(){
     alert("這又是一個提示框!");
 }
 function TestAgainConfirm(){
     confirm("這又是一個確認框!")
 }
 function TestAgainPrompt(){
     prompt("明天天氣怎麼樣!","");
 }

以前或許覺得沒什麼就複製粘貼改改就行,但是如果寫的多了,有可能方法在哪自己都忘了還要一個個去找,但是有了封裝的概念之後,我可能會這麼改,我可以把這三個提示框看成3個類,分別是提示類,確認類,可輸入提示類

var AlertClass=function(text){
    this.content=text;
 }
AlertClass.prototype.show=function(){
    alert(this.content);
};

我們來看看調用

var TestAlert=new AlertClass("這是一個提示框!");
TestAlert.show();

其他的類同理

//確認類
 var ConfirmClass=function(text){
    this.content=text;
 }
ConfirmClass.prototype.show=function(){
    confirm(this.content);
};
var TestConfirm=new ConfirmClass("這是一個確認框!");
TestConfirm.show();
//可輸入提示類
 var PromptClass=function(text){
    this.content=text;
 }
PromptClass.prototype.show=function(){
    prompt(this.content);
};
var TestPrompt=new PromptClass("今天天氣怎麼樣!");
TestPrompt.show();

這樣,我們封裝成類了之後可以便於管理,但是還是很麻煩因為不同的情況我們需要,實例化不同的對象,這個時候我們可以通過簡單工廠模式,去解決這個問題。

我們先定義一個工廠

var EjectFactory=function(name,text){
    switch(name){
        case 'alert':
        return new AlertClass(text);
        case 'confirm':
        return new confirm(text);
        case 'prompt':
        return new PromptClass(text);
    }
}

這樣我們就創建了一個工廠,我們試著調用一下。

var TestAgainAlert=EjectFactory('alert','這是一個簡單工廠模式創建的提示框!');
TestAgainAlert.show();

是不是看上去很簡單,這樣我們就可以通過一個工廠去決定我們要去實例化哪個類的實例,簡單工廠模式的理念就是創建對象,像我剛纔演示就是對不同的類實例化,當然除此之外簡單工廠模式還可以用來創建相似的對象。

我們同樣用上面的例子,我們可以看到上面的例子同樣的都有content屬性和show方法,那麼我們可以把他們提出來。

var CreateEjectFactory=function(type,text){
    //我們先創建一個對象,並對對象拓展屬性和方法
    var o=new Object();
    o.content=text;
    o.show=function(){
        if(type=="alert") alert(text);
        if(type=="confirm") confirm(text);
        if(type=="prompt") prompt(text);
    }
    return o;
}

我們來調用一下

var TestAgainAlert=CreateEjectFactory('alert','這還是一個簡單工廠模式創建的提示框!');
TestAgainAlert.show();

我們上述兩種簡單工廠模式的創建方法,第一種是通過實例化對象創建的,第二種是通過創建一個新對象然後包裝其屬性和功能來實現的,我們具體的選擇還是要根據我們的實際需求來決定。

也謝謝大家看到這裡:)如果你覺得我的分享還可以請點擊推薦,分享給你的朋友讓我們一起進步~

好了以上就是本次分享的全部內容,本次示例參考自JavaScript設計模式一書,讓我們一點點積累一點點成長,希望對大家有所幫助。


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

-Advertisement-
Play Games
更多相關文章
  • 關於離散化, 推薦幾篇博客 http://www.matrix67.com/blog/archives/108 http://blog.csdn.net/doyouseeman/article/details/51154142 ...
  • 1.直接使用歸檔文件安裝yii2的高級模板: 從 yiiframework.com 下載歸檔文件。 下載yii2的高級模板的壓縮文件, 將yii-advanced-app-2.0.12文件夾複製到項目的目錄中如下: 查看yii-advanced-app-2.0.12的子集目錄發現有backend和f ...
  • 題目鏈接 Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he gives Rikka some math tasks to practice. Ther ...
  • https://glot.io/new/php ...
  • 給出一個問題,如下: 解決方案如下: 執行這段代碼發現問題,就是同一張票號可能被多個售票視窗出售,惹禍的代碼就是if else語句塊。 解決方法就是在需要同步的代碼段用synchronized(Object){你要同步的代碼}即可。 修改後代碼如下: 執行這段代碼發現出票正常了。 線程1正執行需要做 ...
  • 流程圖: Code: 新建的兩個.txt文件 user.txt中列舉的用戶名,密碼 ...
  • 好久沒有更新博客了,今天搞了快一天的網頁自適應,頭暈。。。因為最近開始做項目,項目中需要用到圖表方面的知識,於是乎接觸到了echarts,所以其實我也算是新手了。只是近幾天弄了很久的關於圖表隱藏之後再次顯示,卻無法顯示出來的問題。在網上也搜尋了好久。都沒有特別對口的答案,echarts圖表一直是顯示 ...
  • 由於工作太忙,一直沒時間更新博客,之前有很多朋友一直問我什麼時候將後續的代碼發上來,一直沒時間,今天就長話短說,不寫文章了,直接上demo,裡面將正式項目中用到的一些敏感信息修改了,要使用的話下載後自行修改。 Demo:https://github.com/landonzeng/SignalRBus ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...