OOP | 單例設計模式和工廠設計模式

文 / 景朝霞
來源公號 / 朝霞的光影筆記
ID / zhaoxiajingjing
圖 / 本身畫

❥❥❥❥點個贊，讓我知道你來過~❥❥❥❥

---

0 / 單例設計模式

假設：你須要錄入兩我的的信息：李雷和韓梅梅。不要問我他們是誰

我原本想舉個例子，叫"媽媽喊你去相親"。後來一想，換個例子吧，被媽媽說也就算了，看個代碼還要被扎心，太可憐了吧

在最開始學代碼時候，我可能會這樣寫▽

let name = '李雷';
let age = 26;
let sex = '男';

let name = '韓梅梅';
let age = 28;
let sex = '女';

but，若是要把這兩段代碼放在一個js文件裏，確定會衝突啊怎麼辦？分個組吧：

let person1 = {
    name:'李雷',
    age:26,
    sex:'男'
};
let person2 = {
    name:'韓梅梅',
    age:28,
    sex:'女'
};

△ 這樣把信息分組歸類了

person1和person2是一個對象，也叫命名空間，能夠減小全局變量的污染。

以上的person1和person2也是單例設計模式（singleton pattern），即：只有一個實例的對象。

在JS中，以對象字面量的方式和構造函數模式是能夠建立單例對象的。

單例設計模式：把描述事務的信息放到一個命名空間中進行歸類，防止全局變量污染

高級單例模式：你在開發中也常常用，好比：公共模塊都寫在utils裏面、頁面模塊單獨寫在一個JS文件裏面

let utils = (function (){
    function deepCopy(){
        //.....CODE
    }
    function addHandler(){
        //....CODE
    }
    
    //...CODE
    
    return {
        deepCopy,
        addHandler
    };
})();

△ 高級單例模式

高級單例模式使用閉包的保護機制，讓裏面的代碼不受外界的干擾。

函數執行會造成一個全新的私有做用域，保護裏面的代碼不受到外界的干擾，這種保護機制就是閉包。閉包有兩個做用：保護和保存。傳送門：圖解 | 理解閉包

1 / 工廠模式

寫一兩我的的信息好弄，若是班裏有30我的，這樣一個個寫得累蒙圈了，並且會產生大量的重複代碼。

因而，能夠造一個工廠出來，批量能夠把屬性都造出來：

function person(name, age, sex){
    let person = {};
    
    person.name = name;
    person.age = age;
    person.sex = sex;
    
    return person;
}

let p1 = person('李雷', 26, '男');
let p2 = person('韓梅梅', 28, '女');
let p3 = person('莉莉', 26, '女');
//....餘下的人信息

△ 在單例的基礎上能夠批量產出屬性，錄入信息了

person就是個函數，函數的意義在於什麼？封裝

工廠模式：用函數來封裝以特定的方式來建立對象的細節。

（1）低耦合：能夠減小一個個建立對象這些冗餘的代碼

（2）高內聚：提升代碼的重複使用率

2 / 面向對象

【PS:這個概念很大，以我目前的知識儲備和文字表達能力可能說的不是很清楚的，請見諒~】

面向對象編程（Object Oriented Programming）

還記得第一次面試，面試官問：什麼是對象？答：萬物皆對象~【PS：那時候真勇敢呀~】

△ 20.1_天然中的分類【PS：請原諒個人生物知識都還給老師了~~】

"萬物皆對象"中的"對象"自己只是一個泛指，任何事物都是一個對象，均可以是咱們研究和麪對的。

把抽象的「對象」，按照特色來進行分類（大類/小類）後，把共同的東西抽取出來，放到對應的類別中。即：「類」是對「對象」一種細分和公共部分的封裝。

經過類別派生出來的具體事務叫作：類的「實例」

實例既有屬於本身私有的東西，也會繼承各個類別中的公有信息

面向對象編程須要掌握「對象」「類」「實例」之間的關係

△ 20.2_畫個草圖

好比，以前寫的一個選項卡：

<div id="tabBox" class="tabBox">
        <ul id="navBox" class="navBox">
            <li class="active">代碼</li>
            <li>看書</li>
            <li>運動</li>
        </ul>
        <div class="active">
            讀讀代碼
            <p>公號：朝霞的光影筆記</p>
            <p>ID：zhaoxiajingjing</p>
        </div>
        <div>
            書中自有顏如玉
            <p>公號：朝霞的光影筆記</p>
            <p>ID：zhaoxiajingjing</p>
        </div>
        <div>
            瘦子生活模式，好好吃飯，好好生活
            <p>公號：朝霞的光影筆記</p>
            <p>ID：zhaoxiajingjing</p>
        </div>
    </div>

△ 20.3_查看元素

△ 20.4 研究一個實例

研究一個實例：

一、私有的信息

二、所屬類公有的信息

三、一層層從小類別一直找到Object爲止，研究屬性和方法

dir(tabBox)
|=>__proto__:HTMLDivElement.prototype
|=>__proto__:HTMLElement.prototype
|=>__proto__:Element.prototype
|=>__proto__:Node.prototype
|=>__proto__:EventTarget.prototype
|=>__proto__:Object.prototype

3 / 預告

請問：原型和原型鏈是啥？