結(jié)合?ES6?類(lèi)編寫(xiě)JavaScript?創(chuàng)建型模式
前言
什么是設(shè)計(jì)模式?
設(shè)計(jì)模式是軟件設(shè)計(jì)中常見(jiàn)問(wèn)題的解決方案,這些模式很容易重復(fù)使用并且富有表現(xiàn)力。
在軟件工程中,設(shè)計(jì)模式(design pattern)是對(duì)軟件設(shè)計(jì)中普遍存在(反復(fù)出現(xiàn))的各種問(wèn)題,所提出的解決方案。它并不直接用來(lái)完成代碼的編寫(xiě),而是描述在各種不同情況下,要怎么解決問(wèn)題的一種方案。面向?qū)ο笤O(shè)計(jì)模式通常以類(lèi)別或?qū)ο髞?lái)描述其中的關(guān)系和相互作用,但不涉及用來(lái)完成應(yīng)用程序的特定類(lèi)別或?qū)ο蟆?mdash;— 維基百科
有三種模式:創(chuàng)建型模式,結(jié)構(gòu)型模式、行為型模式。
- 創(chuàng)建型模式:解決與創(chuàng)建對(duì)象相關(guān)的問(wèn)題。
- 結(jié)構(gòu)型模式:處理實(shí)體之間的關(guān)系,以及它們?nèi)绾喂餐M成一個(gè)更大的結(jié)構(gòu)。
- 行為型模式:處理對(duì)象如何相互通信和交互。
創(chuàng)建型設(shè)計(jì)模式
創(chuàng)建設(shè)計(jì)模式將創(chuàng)建對(duì)象,而不是直接實(shí)例化對(duì)象。
在軟件工程中,創(chuàng)建型模式是處理對(duì)象創(chuàng)建的設(shè)計(jì)模式,試圖根據(jù)實(shí)際情況使用合適的方式創(chuàng)建對(duì)象,因?yàn)榛镜膶?duì)象創(chuàng)建方式可能會(huì)導(dǎo)致設(shè)計(jì)上的問(wèn)題,或增加設(shè)計(jì)的復(fù)雜度。創(chuàng)建型模式的關(guān)注點(diǎn)是如何創(chuàng)建對(duì)象,其核心思想是要把對(duì)象的創(chuàng)建和使用相分離。—— 維基百科
- 工廠(chǎng)模式
- 抽象工廠(chǎng)
- 構(gòu)建器模式
- 原型模式
- 單例模式
1. 工廠(chǎng)模式
工廠(chǎng)模式定義了一個(gè)用于創(chuàng)建單個(gè)對(duì)象的接口,并讓子類(lèi)決定要實(shí)例化類(lèi)。
工廠(chǎng)方法模式(英語(yǔ):Factory method pattern)是一種實(shí)現(xiàn)了“工廠(chǎng)”概念的面向?qū)ο笤O(shè)計(jì)模式。就像其他創(chuàng)建型模式一樣,它也是處理在不指定對(duì)象具體類(lèi)型的情況下創(chuàng)建對(duì)象的問(wèn)題。工廠(chǎng)方法模式的實(shí)質(zhì)是“定義一個(gè)創(chuàng)建對(duì)象的接口,但讓實(shí)現(xiàn)這個(gè)接口的類(lèi)來(lái)決定實(shí)例化哪個(gè)類(lèi)。—— 維基百科
實(shí)例
以一個(gè)點(diǎn)為例,有一個(gè) Point 類(lèi),必須創(chuàng)建一個(gè)笛卡爾點(diǎn)和一個(gè)極點(diǎn)。將定義一個(gè) Point 工廠(chǎng)來(lái)完成這項(xiàng)工作。
CoordinateSystem = {
CARTESIAN:0,
POLAR:1
};
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static get factory() {
return new PointFactory();
}
}現(xiàn)在將創(chuàng)建 Point 工廠(chǎng),現(xiàn)在將使用工廠(chǎng):
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static get factory() {
return new PointFactory();
}
}
class PointFactory {
static newCartesianPoint(x, y) {
return new Point(x, y);
}
static newPolarPoint(rho, theta) {
return new Point(rho * Math.cos(theta), rho * Math.sin(theta));
}
}
const point = PointFactory.newPolarPoint(5, Math.PI / 2);
const point2 = PointFactory.newCartesianPoint(5, 6);
console.log(point);
console.log(point2);2. 抽象工廠(chǎng)
抽象工廠(chǎng)創(chuàng)建公共對(duì)象的族或組,而不指定它們的具體類(lèi)。
抽象工廠(chǎng)模式提供了一種方式,可以將一組具有同一主題的單獨(dú)的工廠(chǎng)封裝起來(lái)。—— 維基百科
實(shí)例
將使用飲料和飲料制造機(jī)的示例。
class Drink {
consume() {}
}
class Tea extends Drink {
consume() {
console.log("This is tea");
}
}
class Coffee extends Drink {
consume() {
console.log("This is coffee");
}
}
class DrinkFactory {
prepare(amount) {}
}
class TeaFactory extends DrinkFactory {
makeTea() {
console.log("Tea Created");
return new Tea();
}
}
class CoffeeFactory extends DrinkFactory {
makeCoffee() {
console.log("Coffee Created");
return new Coffee();
}
}
const teaDrinkFactory = new TeaFactory();
const tea = teaDrinkFactory.makeTea();
tea.consume();
const coffeeDrinkFactory = new CoffeeFactory();
const coffee = coffeeDrinkFactory.makeCoffee();
coffee.consume();3. 構(gòu)建器模式
構(gòu)建器模式從簡(jiǎn)單對(duì)象構(gòu)造復(fù)雜對(duì)象。
又名:建造模式,是一種對(duì)象構(gòu)建模式。它可以將復(fù)雜對(duì)象的建造過(guò)程抽象出來(lái)(抽象類(lèi)別),使這個(gè)抽象過(guò)程的不同實(shí)現(xiàn)方法可以構(gòu)造出不同表現(xiàn)(屬性)的對(duì)象。—— 維基百科
實(shí)例
將使用存儲(chǔ) Person 信息的 person 類(lèi)的 ab 示例。
class Person {
constructor() {
this.streetAddress = this.postcode = this.city = "";
this.companyName = this.position = "";
this.annualIncome = 0;
}
toString() {
return `個(gè)人生活在 ${this.streetAddress},${this.city},${this.postcode} ,工作在 ${this.companyName} 作為一名 ${this.position} 收入 ${this.annualIncome}`;
}
}現(xiàn)在將創(chuàng)建 Person Builder、Person Job Builder 和 Person Address Builder。
class PersonBuilder {
constructor(person = new Person()) {
this.person = person;
}
get lives() {
return new PersonAddressBuilder(this.person);
}
get works() {
return new PersonJobBuilder(this.person);
}
build() {
return this.person;
}
}
class PersonJobBuilder extends PersonBuilder {
constructor(person) {
super(person);
}
at(companyName) {
this.person.companyName = companyName;
return this;
}
asA(position) {
this.person.position = position;
return this;
}
earning(annualIncome) {
this.person.annualIncome = annualIncome;
return this;
}
}
class PersonAddressBuilder extends PersonBuilder {
constructor(person) {
super(person);
}
at(streetAddress) {
this.person.streetAddress = streetAddress;
return this;
}
withPostcode(postcode) {
this.person.postcode = postcode;
return this;
}
in(city) {
this.person.city = city;
return this;
}
}現(xiàn)在將使用上面定義的構(gòu)建器:
const personBuilder = new PersonBuilder();
const person = personBuilder.lives
.at("高新南九道")
.in("深圳")
.withPostcode("518029")
.works.at("字節(jié)跳動(dòng)")
.asA("工程師")
.earning(10000)
.build();
console.log(person.toString()); // 個(gè)人生活在 高新南九道,深圳,518029 ,工作在 字節(jié)跳動(dòng) 作為一名 工程師 收入 100004. 原型模式
原型模式從現(xiàn)有對(duì)象創(chuàng)建新對(duì)象。
其特點(diǎn)在于通過(guò)“復(fù)制”一個(gè)已經(jīng)存在的實(shí)例來(lái)返回新的實(shí)例,而不是新建實(shí)例。被復(fù)制的實(shí)例就是我們所稱(chēng)的“原型”,這個(gè)原型是可定制的。—— 維基百科
實(shí)例
使用汽車(chē)的例子:
class Car {
constructor(name, model) {
this.name = name;
this.model = model;
}
setName(name) {
console.log(name);
this.name = name;
}
clone() {
return new Car(this.name, this.model);
}
}
const car = new Car();
car.setName("閃電");
const car2 = car.clone();
car2.setName("麥昆");5. 單例模式
單例模式確保只為特定類(lèi)創(chuàng)建一個(gè)對(duì)象。
在軟件工程中,單例模式是一種軟件設(shè)計(jì)模式,它將類(lèi)的實(shí)例化限制為一個(gè)“單一”實(shí)例。當(dāng)需要一個(gè)對(duì)象來(lái)協(xié)調(diào)整個(gè)系統(tǒng)的動(dòng)作時(shí),這很有用。 —— 維基百科
實(shí)例
創(chuàng)建一個(gè)單例類(lèi):
class Singleton {
constructor() {
const instance = this.constructor.instance;
if (instance) {
return instance;
}
this.constructor.instance = this;
}
say() {
console.log("Saying……");
}
}
const s1 = new Singleton();
const s2 = new Singleton();
console.log("Are they same?" + (s1 === s2));
s1.say();到此這篇關(guān)于結(jié)合 ES6 類(lèi)編寫(xiě)JavaScript 創(chuàng)建型模式的文章就介紹到這了,更多相關(guān)JS 創(chuàng)建型模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
BootstrapTable refresh 方法使用實(shí)例簡(jiǎn)單介紹
本文就bootstrapTable refresh 方法如何傳遞參數(shù)做簡(jiǎn)單舉例說(shuō)明,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-02-02
JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域
正常使用AJAX會(huì)需要正??紤]跨域問(wèn)題,所以偉大的程序員們又折騰出了一系列跨域問(wèn)題的解決方案,如JSONP、flash、ifame、xhr2等等。本文給大家介紹JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域,感興趣的朋友參考下吧2016-04-04
給事件響應(yīng)函數(shù)傳參數(shù)的四種方式小結(jié)
這篇文章主要介紹了給事件響應(yīng)函數(shù)傳參數(shù)的四種方式。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
javascript實(shí)現(xiàn)行拖動(dòng)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)行拖動(dòng)的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
JavaScript中的動(dòng)態(tài)?import()用法示例解析
這篇文章主要為大家介紹了JavaScript中的動(dòng)態(tài)import()用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
詳解微信小程序-掃一掃 wx.scanCode() 掃碼大變身
這篇文章主要介紹了微信小程序-掃一掃wx.scanCode() 掃碼大變身,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
input點(diǎn)擊后placeholder中的提示消息消失
placeholder屬性是HTML5 中為input添加的。在input上提供一個(gè)占位符,文字形式展示輸入字段預(yù)期值的提示信息(hint),該字段會(huì)在輸入為空時(shí)顯示2016-01-01

