JS中的單例/工廠設計模式

在沒有對象和函數等引用數據類型的時候，咱們只能基於建立變量的方式來描述某一件事務，某一個個體的相關信息

var name="張三";
var age=25;
var height="180cm";

var name="李四";
var age=28;
var height="175cm";
......
複製代碼

這樣會大量建立全局變量，最後致使全局變量的衝突（全局變量污染）

需求：咱們指望可以把描述一個事務的相關信息可以分組（或分類）來管理;

• 此時對象數據類型就起到了很大的做用

var person1={
	name:'張三',
	age:25,
	...
};

var person2={
	name:'李四',
	age:28,
	...
};
複製代碼

• 分組以後，每一組中的鍵值對都是私有的，即便兩組之間有相同名字的屬性，也不會衝突，大大解決了全局變量污染的問題
• => 「這種分組管理的概念，就是JS中最先的單例設計模式思想」

1、單例設計模式

一、定義

• 基於對象數據類型，把描述當前事務的屬性和方法統一放在一塊兒分組管理，可以減小全局變量污染，這種JS設計模式就是「單例設計模式」

二、特色

• 1.每個對象都是一個單獨的實例（單獨的堆內存），存儲的鍵值對都是堆中私有的內容，因此兩個實例之間不會有任何的衝突
• 2.在單例設計模式中，有一些新的概念，在下述案例中：
  • var obj = { xxx:xxx , ...};
  • obj不只僅是一個變量存儲對象（對象名），也被成爲「命名空間」（其實就是給對象的堆內存設置一個obj的名字，堆內存是空間，obj是名字）;
  • 把描述當前事務的屬性和方法，放到空間中進行分組管理

在其它的編程語言中，認爲只有基於構造函數構造出來的實例才能被稱爲「單例設計模式」，也就是 var xxx = new xxx;

可是在JS中，var obj={...}; 自己就是基於 new Object() 構建出來的，因此是標準的單例設計模式；

三、應用

• 真實項目開發中，尤爲是團隊協做開發，咱們常常會把一個大的頁面，按照功能特色進行「版塊/模塊」劃分，這樣一個版塊中須要編寫不少屬性和方法來實現具體的功能；

• 此時，有些方法只須要版塊內部使用，而有些方法可能再其餘版塊中也須要使用，這樣咱們既要私有化，也要暴露一些方法供面調取，這裏就涉及到咱們的模塊管理思想；

單例設計模式也是最基礎的模塊化思想

四、模塊管理思想

• 單例設計模式也是最基礎的模塊化思想
• AMD / CMD （requireJS 和 seaJS）
• UMD
• CommonJS
• ES6Module
• ......

基於單例設計模式思想 + 閉包思想 + 模塊管理思想

var utils=(function(){
    function queryElement(){}
    function deleteElement(){}
    ...

    //=>導出當前版塊中須要供別人調取的屬性方法（也至關於把這些屬性方法放到utils命名空間下進行分組管理，避免和別人的衝突）
    return {
        queryElement:queryElement,
        deleteElement:deleteElement
    };
})();

var searchModule=(function(){
    function queryData(){}
    function bindHTML(){
        //=>須要調取utils模塊（命名空間中的方法）
        utils.queryElement();
    }
    return {
        init:function(){
        }
    };
})();
複製代碼

五、缺陷

基於「單例設計模式」記錄人員信息（舉例）：建立單獨的實例或者命名空間，把描述每一個人的信息分組管理便可實現

var person1={
	name:'小明',
	age:92,
	sex:'男',
	score:90
};

var person2={
	name:'小剛',
	age:62,
	sex:'男',
	score:85
};

var person3={
	name:'小紅',
	age:18,
	sex:'女',
	score:100，
	qunzi:'red'
};
複製代碼

• 可是每當描述一個事務的信息，須要把對應的鍵值對都去編寫一下，若是重複描述類似事務的信息，不只須要重複作不少事情，並且還會致使代碼的冗餘

2、工廠設計模式

一、定義

• 所謂工廠設計模式，是在須要建立不少「類似實例」的情境下，讓咱們告別手動建立，而實現工業化批量生產（根據這句話讓咱們想到=>提升開發效率、減小了頁面中的冗餘代碼 => 「低耦合高內聚」 => 函數封裝）

function createPerson(name,age,sex,score,qunzi){
	var person={};
	person.name=name;
	person.age=age;
	person.sex=sex;
	person.score=score;
	if(typeof qunzi!=="undefined"){
		//=>傳遞了qunzi 形參對應的實參值
		person.qunzi=qunzi;
	}
	return person;
}
var person1=createPerson('小明',92,'男',90);
var person2=createPerson('小剛',62,'男',85);
var person3=createPerson('小紅',18,'女',100,'red');
複製代碼

思惟導圖