javascript常見設計模式

crelaber 發(fā)布于2019-08-26 10:14 / 2509人閱讀

摘要：設計模式軟件設計過程中針對特定問題的簡潔而優(yōu)雅的解決方案單例模式單例模式的定義保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。通過中介者模式可以解除對象與對象之間的緊耦合關系。

設計模式：軟件設計過程中針對特定問題的簡潔而優(yōu)雅的解決方案

1.單例模式

單例模式的定義：保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。實現(xiàn)的方法為先判斷實例存在與否，如果存在則直接返回，如果不存在就創(chuàng)建了再返回，這就確保了一個類只有一個實例對象。
適用場景：實現(xiàn)一個單一對象，比如彈窗，無論被創(chuàng)建多少次，只應該有一個實例對象。

class Modal {
    constructor(title, content) {
        this.title = title;
        this.content = content;
    }
}

const getModal = (function () {
    let instance = null;
    return function () {
        if (!instance) {
            instance = new Modal("標題", "文本內容");
        }
        return instance;
    }
})();

let a = getModal();
let b = getModal();

console.log(a === b); // true

2. 策略模式

策略模式的目的就是將算法的使用算法的實現(xiàn)分離開來。
策略模式至少由兩部分組成：
1.策略類：策略類封裝了具體的算法，并負責具體的計算過程，是可變的；
2.環(huán)境類：環(huán)境類接受客戶的請求，隨后將請求委托給某一個策略類，不可變；

/*策略類*/
var levelOBJ = {
    "A": function(money) {
        return money * 4;
    },
    "B" : function(money) {
        return money * 3;
    },
    "C" : function(money) {
        return money * 2;
    } 
};
/*環(huán)境類*/
var calculateBouns =function(level,money) {
    return levelOBJ[level](money);
};
console.log(calculateBouns("A",10000)); // 40000

3. 代理模式

代理模式的定義：為一個對象提供一個代用品或占位符，以便控制對它的訪問。
圖片懶加載就是一種典型有用場景：

function LazyImg() {}
LazyImg.prototype.getImg = function () {
    var imgNode = document.createElement("img");
    document.body.appendChild(imgNode);
    imgNode.src = "./fake.png";
    return imgNode;
}
LazyImg.prototype.setImg = function (src) {
    var imgNode = this.getImg();
    var img = new Image();
    img.onload = function() {
        imgNode.src = this.src;
    }
    img.src = src;
}

var pic = new LazyImg();

cx.setImg("./rel.png");

4. 中介者模式

中介者模式的定義：通過一個中介者對象，其他所有的相關對象都通過該中介者對象來通信，而不是相互引用，當其中的一個對象發(fā)生改變時，只需要通知中介者對象即可。通過中介者模式可以解除對象與對象之間的緊耦合關系。
現(xiàn)實生活中，航線上的飛機只需要和機場的塔臺通信就能確定航線和飛行狀態(tài)，而不需要和所有飛機通信。同時塔臺作為中介者，知道每架飛機的飛行狀態(tài)，所以可以安排所有飛機的起降和航線安排。

5.裝飾者模式

裝飾者模式的定義：在不改變對象自身的基礎上，在程序運行期間給對象動態(tài)地添加方法。

云服務器 GPU云服務器 javascript常見用法 javascript設計模式 javascript命令模式 javascript嚴格模式

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/105826.html

JavaScript 中常見設計模式整理

摘要：開發(fā)中，我們或多或少地接觸了設計模式，但是很多時候不知道自己使用了哪種設計模式或者說該使用何種設計模式。本文意在梳理常見設計模式的特點，從而對它們有比較清晰的認知。 showImg(https://segmentfault.com/img/remote/1460000014919705?w=640&h=280); 開發(fā)中，我們或多或少地接觸了設計模式，但是很多時候不知道自己使用了哪種設...

Nosee 2019-08-22 17:21 評論0 收藏0
前端每周清單半年盤點之 JavaScript 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。背后的故事本文是對于年之間世界發(fā)生的大事件的詳細介紹，闡述了從提出到角力到流產(chǎn)的前世今生。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎...

Vixb 2019-08-21 12:04 評論0 收藏0
[總結貼] 十個 JavaScript 中易犯的小錯誤

摘要：但是在中，的生命還會繼續(xù)。這其中最典型的問題便是批量增加元素。這時，如果構造函數(shù)被調用時沒有參數(shù)，則會自動設置為。因為從系統(tǒng)的角度來說，當你用字符串的時候，它會被傳進構造函數(shù)，并且重新調用另一個函數(shù)。序言在今天，JavaScript已經(jīng)成為了網(wǎng)頁編輯的核心。尤其是過去的幾年，互聯(lián)網(wǎng)見證了在SPA開發(fā)、圖形處理、交互等方面大量JS庫的出現(xiàn)。如果初次打交道，很多人會覺得js很簡單...

icattlecoder 2019-08-22 10:57 評論0 收藏0
【拒絕拖延】常見的JavaScript內存泄露原因及解決方案

摘要：前言內存泄漏指由于疏忽或錯誤造成程序未能釋放已經(jīng)不再使用的內存。這里就講一些常見會帶來內存泄露的原因。解決方案和都設為。前言內存泄漏指由于疏忽或錯誤造成程序未能釋放已經(jīng)不再使用的內存。內存泄漏并非指內存在物理上的消失，而是應用程序分配某段內存后，由于設計錯誤，導致在釋放該段內存之前就失去了對該段內存的控制，從而造成了內存的浪費。這里就講一些常見會帶來內存泄露的原因。 0. 全局變量...

tangr206 2019-08-23 17:55 評論0 收藏0
JavaScript文章

摘要：我對知乎前端相關問題的十問十答張鑫旭張鑫旭大神對知乎上經(jīng)典的個前端問題的回答。作者對如何避免常見的錯誤，難以發(fā)現(xiàn)的問題，以及性能問題和不好的實踐給出了相應的建議。但并不是本身有問題，被標準定義的是極好的。這一次，徹底弄懂 JavaScript 執(zhí)行機制本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老...

mumumu 2019-08-22 13:50 評論0 收藏0