JavaScript設計模式——創建型設計模式
作者：幻城
用原型實例指向創建對象的類，適用于創建新的對象的類共享原型對象的屬性以及方法。 簡而言之，就是根據一個基類（原型類）構造出多個子類，將公用方法和屬性保存在原型類中。
簡單工廠模式
抽象各個對象的共同點，加工出最初形態，對于不同點進行獨立設計。
function createBook(name, time, type) {
//創建一個對象，并對對象拓展屬性和方法
const o = new Object();
//共同參數
o.name = name;
o.time = time;
o.getName = function () {
console.log(this.name);
}
//差異性
if (type === "js") {
//js類書差異處理
} else if (type === "css") {
//css類書差異處理
} else if (type === "html") {
//html類書差異處理
}
return o;
}
const book1 = createBook('js book', 2014, 'js');
const book2 = createBook('css book', 2013, 'css');
const book3 = createBook('html book', 2012, 'css');
book1.getName();
book2.getName();
book3.getName();安全工廠模式
安全工廠模式可以屏蔽對類的錯誤使用，如忘記寫new實例化對象避免產生一些非預期的行為。
function Factory(type, content) {
//如果忘記寫new實例化了，加工重新執行一次
if (this instanceof Factory) {
this[type](content);
} else {
new Factory(type, content);
}
}
Factory.prototype = {
JavaScript: (content) => {
console.log(content)
},
Java: (content) => {
console.log(content)
},
}
Factory('JavaScript', 'JavaScript哪家強');
Factory('Java', 'Java哪家強');建設者模式
顧名思義，結合多個類，創造出結合出來的終極人物（對象）
//創建人類
function Human(param) {
//技能
this.skill = param && param.skill || "保密";
//興趣愛好
this.hobby = param && param.hobby || "保密";
}
Human.prototype.getSkill = function () {
return this.skill;
}
Human.prototype.getHobby = function () {
return this.hobby;
}
//創建姓名類
function Name(name) {
(function (_this, name) {
_this.wholeName = name;
_this.firstName = name.slice(0, name.indexOf(" "));
_this.secordName = name.slice(name.indexOf(" "));
})(this, name)
}
//創建職位類
function Work(work) {
(function (_this, work) {
switch (work) {
case "code":
_this.work = "工程師";
_this.workDescript = "每天沉醉于編程";
break;
case "UI":
case "UE":
_this.work = "設計師";
_this.workDescript = "設計更是一種藝術";
break;
case "teach":
_this.work = "教師";
_this.workDescript = "分享頁是一種快樂";
break;
default:
_this.work = work;
_this.workDescript = "對不起，我們還不清楚您所選擇職位的相關描述";
}
})(this, work)
}
//創建建設者類
function Person(name, work) {
var person = new Human();
person.name = new Name(name);
person.work = new Work(work);
return person;
}
const person = new Person("xiao ming", "code");
console.log(person.skill); //保密
console.log(person.work.workDescript); //每天沉醉于編程
console.log(person.name.firstName); //xiao這里結合了Humer、Name、Work，最后在Person中構造出了一個應聘者。
原型模式
用原型實例指向創建對象的類，適用于創建新的對象的類共享原型對象的屬性以及方法。 簡而言之，就是根據一個基類（原型類）構造出多個子類，將公用方法和屬性保存在原型類中。
//圖片輪播基類
function LoopImages(imgArr, container) {
this.imgArr = imgArr;
this.container = container;
}
LoopImages.prototype = {
//創建輪播圖片
createImage: function (img) {
this.imgArr.push(img);
console.log('LoopImages createImage function');
},
//切換下一張圖片
changeImage: () => {
console.log('LoopImages changeImage function');
}
}
//上下滑動切換類
function SlideLoopImg(imgArr, container) {
LoopImages.call(this, imgArr, container);
}
SlideLoopImg.prototype = new LoopImages();
//重寫繼承的切換下一張圖片方法
SlideLoopImg.prototype.changeImage = () => {
console.log('SlideLoopImg changeImage function');
}
//漸隱切換類
function FadeLoopImg(imgArr, container, arrow) {
LoopImages.call(this, imgArr, container);
this.arrow = arrow;
}
FadeLoopImg.prototype = new LoopImages();
//重寫繼承的切換下一張圖片方法
FadeLoopImg.prototype.changeImage = () => {
console.log('FadeLoopImg changeImage function');
}
const fade = new FadeLoopImg([
'01.jpg',
'02.jpg',
'03.jpg',
'04.jpg'
], 'div', [
'left.jpg',
'right.jpg'
])
console.log(fade.arrow); //['left.jpg','right.jpg']
console.log(fade.imgArr); //['01.jpg', '02.jpg', '03.jpg', '04.jpg']
fade.createImage('05.jpg'); //LoopImages createImage function
console.log(fade.imgArr); //['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg']
fade.changeImage(); //FadeLoopImg changeImage function可以看到，原型模式可以讓多個對象分享同一個原型對象的屬性與方法，這也是一種繼承方式。 原型對象更加適合在創建復雜的對象時，對于那些需求一直在變化而導致對象結構不停改變時，將那些比較穩定的屬性與方法公共提取，實現繼承，代碼復用。
單例模式
單例模式，顧名思義，一個類只能有一個實例，重復實例化只會返回第一次實例的對象。
靜態變量
通過一個立即執行函數，將所有方法掛載，并且為靜態變量，無法改變。
const React = (function () {
var react = {
useState: () => { },
useEffect: () => { },
useRef: () => { },
useMemo: () => { },
useCallback: () => { },
useReducer: () => { },
useContext: () => { }
}
return {
get: function (name) {
return react[name] || null;
}
}
})()
console.log(React.get('useState'))實例化單例
創建一個立即執行函數，利用閉包，使記錄值常駐在內存中，每次實例化的時候判斷是否為第一次實例化，實現單例。
const React = (function () {
let instance = null;
return function (params) {
if (instance) {
return instance
}
this.params = params;
return instance = this;
}
})()
console.log(new React({
useState: () => { },
useEffect: () => { },
useRef: () => { },
useMemo: () => { },
useCallback: () => { },
useReducer: () => { },
useContext: () => { }
}) === new React('hh')); //true惰性單例
非實例化創建方式，也是一種延遲創建的方式。
function React(fns) {
this.fns = fns;
}
React.instance = null;
React.getFn = function () {
console.log(this.fns)
}
React.getInstance = function (name) {
if (!this.instance) {
return this.instance = new React(name)
}
return this.instance
}
console.log(React.getInstance({
useState: () => { },
useEffect: () => { },
useRef: () => { },
useMemo: () => { },
useCallback: () => { },
useReducer: () => { },
useContext: () => { }
}) === React.getInstance('xx')); //true總結
本文介紹了JavaScript中創建型設計模式，希望看過之后對讀者開發中代碼質量有所幫助，有所感悟。
責任編輯：武曉燕
來源：
量子前端
