JavaScript設(shè)計(jì)模式——?jiǎng)?chuàng)建型設(shè)計(jì)模式
作者：幻城
用原型實(shí)例指向創(chuàng)建對(duì)象的類，適用于創(chuàng)建新的對(duì)象的類共享原型對(duì)象的屬性以及方法。 簡(jiǎn)而言之，就是根據(jù)一個(gè)基類（原型類）構(gòu)造出多個(gè)子類，將公用方法和屬性保存在原型類中。
簡(jiǎn)單工廠模式
抽象各個(gè)對(duì)象的共同點(diǎn)，加工出最初形態(tài)，對(duì)于不同點(diǎn)進(jìn)行獨(dú)立設(shè)計(jì)。
function createBook(name, time, type) {
//創(chuàng)建一個(gè)對(duì)象，并對(duì)對(duì)象拓展屬性和方法
const o = new Object();
//共同參數(shù)
o.name = name;
o.time = time;
o.getName = function () {
console.log(this.name);
}
//差異性
if (type === "js") {
//js類書(shū)差異處理
} else if (type === "css") {
//css類書(shū)差異處理
} else if (type === "html") {
//html類書(shū)差異處理
}
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();安全工廠模式
安全工廠模式可以屏蔽對(duì)類的錯(cuò)誤使用，如忘記寫(xiě)new實(shí)例化對(duì)象避免產(chǎn)生一些非預(yù)期的行為。
function Factory(type, content) {
//如果忘記寫(xiě)new實(shí)例化了，加工重新執(zhí)行一次
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哪家強(qiáng)');
Factory('Java', 'Java哪家強(qiáng)');建設(shè)者模式
顧名思義，結(jié)合多個(gè)類，創(chuàng)造出結(jié)合出來(lái)的終極人物（對(duì)象）
//創(chuàng)建人類
function Human(param) {
//技能
this.skill = param && param.skill || "保密";
//興趣愛(ài)好
this.hobby = param && param.hobby || "保密";
}
Human.prototype.getSkill = function () {
return this.skill;
}
Human.prototype.getHobby = function () {
return this.hobby;
}
//創(chuàng)建姓名類
function Name(name) {
(function (_this, name) {
_this.wholeName = name;
_this.firstName = name.slice(0, name.indexOf(" "));
_this.secordName = name.slice(name.indexOf(" "));
})(this, name)
}
//創(chuàng)建職位類
function Work(work) {
(function (_this, work) {
switch (work) {
case "code":
_this.work = "工程師";
_this.workDescript = "每天沉醉于編程";
break;
case "UI":
case "UE":
_this.work = "設(shè)計(jì)師";
_this.workDescript = "設(shè)計(jì)更是一種藝術(shù)";
break;
case "teach":
_this.work = "教師";
_this.workDescript = "分享頁(yè)是一種快樂(lè)";
break;
default:
_this.work = work;
_this.workDescript = "對(duì)不起，我們還不清楚您所選擇職位的相關(guān)描述";
}
})(this, work)
}
//創(chuàng)建建設(shè)者類
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這里結(jié)合了Humer、Name、Work，最后在Person中構(gòu)造出了一個(gè)應(yīng)聘者。
原型模式
用原型實(shí)例指向創(chuàng)建對(duì)象的類，適用于創(chuàng)建新的對(duì)象的類共享原型對(duì)象的屬性以及方法。 簡(jiǎn)而言之，就是根據(jù)一個(gè)基類（原型類）構(gòu)造出多個(gè)子類，將公用方法和屬性保存在原型類中。
//圖片輪播基類
function LoopImages(imgArr, container) {
this.imgArr = imgArr;
this.container = container;
}
LoopImages.prototype = {
//創(chuàng)建輪播圖片
createImage: function (img) {
this.imgArr.push(img);
console.log('LoopImages createImage function');
},
//切換下一張圖片
changeImage: () => {
console.log('LoopImages changeImage function');
}
}
//上下滑動(dòng)切換類
function SlideLoopImg(imgArr, container) {
LoopImages.call(this, imgArr, container);
}
SlideLoopImg.prototype = new LoopImages();
//重寫(xiě)繼承的切換下一張圖片方法
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();
//重寫(xiě)繼承的切換下一張圖片方法
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可以看到，原型模式可以讓多個(gè)對(duì)象分享同一個(gè)原型對(duì)象的屬性與方法，這也是一種繼承方式。 原型對(duì)象更加適合在創(chuàng)建復(fù)雜的對(duì)象時(shí)，對(duì)于那些需求一直在變化而導(dǎo)致對(duì)象結(jié)構(gòu)不停改變時(shí)，將那些比較穩(wěn)定的屬性與方法公共提取，實(shí)現(xiàn)繼承，代碼復(fù)用。
單例模式
單例模式，顧名思義，一個(gè)類只能有一個(gè)實(shí)例，重復(fù)實(shí)例化只會(huì)返回第一次實(shí)例的對(duì)象。
靜態(tài)變量
通過(guò)一個(gè)立即執(zhí)行函數(shù)，將所有方法掛載，并且為靜態(tài)變量，無(wú)法改變。
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'))實(shí)例化單例
創(chuàng)建一個(gè)立即執(zhí)行函數(shù)，利用閉包，使記錄值常駐在內(nèi)存中，每次實(shí)例化的時(shí)候判斷是否為第一次實(shí)例化，實(shí)現(xiàn)單例。
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惰性單例
非實(shí)例化創(chuàng)建方式，也是一種延遲創(chuàng)建的方式。
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總結(jié)
本文介紹了JavaScript中創(chuàng)建型設(shè)計(jì)模式，希望看過(guò)之后對(duì)讀者開(kāi)發(fā)中代碼質(zhì)量有所幫助，有所感悟。
責(zé)任編輯：武曉燕
來(lái)源：
量子前端
