結合?ES6?類編寫JavaScript?創(chuàng)建型模式
前言
什么是設計模式？
設計模式是軟件設計中常見問題的解決方案，這些模式很容易重復使用并且富有表現力。
在軟件工程中，設計模式（design pattern）是對軟件設計中普遍存在（反復出現）的各種問題，所提出的解決方案。它并不直接用來完成代碼的編寫，而是描述在各種不同情況下，要怎么解決問題的一種方案。面向對象設計模式通常以類別或對象來描述其中的關系和相互作用，但不涉及用來完成應用程序的特定類別或對象。—— 維基百科
有三種模式：創(chuàng)建型模式，結構型模式、行為型模式。
- 創(chuàng)建型模式：解決與創(chuàng)建對象相關的問題。
- 結構型模式：處理實體之間的關系，以及它們如何共同組成一個更大的結構。
- 行為型模式：處理對象如何相互通信和交互。
創(chuàng)建型設計模式
創(chuàng)建設計模式將創(chuàng)建對象，而不是直接實例化對象。
在軟件工程中，創(chuàng)建型模式是處理對象創(chuàng)建的設計模式，試圖根據實際情況使用合適的方式創(chuàng)建對象，因為基本的對象創(chuàng)建方式可能會導致設計上的問題，或增加設計的復雜度。創(chuàng)建型模式的關注點是如何創(chuàng)建對象，其核心思想是要把對象的創(chuàng)建和使用相分離。—— 維基百科
- 工廠模式
- 抽象工廠
- 構建器模式
- 原型模式
- 單例模式
1. 工廠模式
工廠模式定義了一個用于創(chuàng)建單個對象的接口，并讓子類決定要實例化類。
工廠方法模式（英語：Factory method pattern）是一種實現了“工廠”概念的面向對象設計模式。就像其他創(chuàng)建型模式一樣，它也是處理在不指定對象具體類型的情況下創(chuàng)建對象的問題。工廠方法模式的實質是“定義一個創(chuàng)建對象的接口，但讓實現這個接口的類來決定實例化哪個類。—— 維基百科
實例
以一個點為例，有一個 Point 類，必須創(chuàng)建一個笛卡爾點和一個極點。將定義一個 Point 工廠來完成這項工作。
CoordinateSystem = {
CARTESIAN:0,
POLAR:1
};
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static get factory() {
return new PointFactory();
}
}現在將創(chuàng)建 Point 工廠，現在將使用工廠：
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. 抽象工廠
抽象工廠創(chuàng)建公共對象的族或組，而不指定它們的具體類。
抽象工廠模式提供了一種方式，可以將一組具有同一主題的單獨的工廠封裝起來。—— 維基百科
實例
將使用飲料和飲料制造機的示例。
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. 構建器模式
構建器模式從簡單對象構造復雜對象。
又名：建造模式，是一種對象構建模式。它可以將復雜對象的建造過程抽象出來（抽象類別），使這個抽象過程的不同實現方法可以構造出不同表現（屬性）的對象。—— 維基百科
實例
將使用存儲 Person 信息的 person 類的 ab 示例。
class Person {
constructor() {
this.streetAddress = this.postcode = this.city = "";
this.companyName = this.position = "";
this.annualIncome = 0;
}
toString() {
return `個人生活在 ${this.streetAddress}，${this.city}，${this.postcode} ，工作在 ${this.companyName} 作為一名 ${this.position} 收入 ${this.annualIncome}`;
}
}現在將創(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;
}
}現在將使用上面定義的構建器：
const personBuilder = new PersonBuilder();
const person = personBuilder.lives
.at("高新南九道")
.in("深圳")
.withPostcode("518029")
.works.at("字節(jié)跳動")
.asA("工程師")
.earning(10000)
.build();
console.log(person.toString()); // 個人生活在 高新南九道，深圳，518029 ，工作在 字節(jié)跳動 作為一名 工程師 收入 100004. 原型模式
原型模式從現有對象創(chuàng)建新對象。
其特點在于通過“復制”一個已經存在的實例來返回新的實例,而不是新建實例。被復制的實例就是我們所稱的“原型”，這個原型是可定制的。—— 維基百科
實例
使用汽車的例子：
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. 單例模式
單例模式確保只為特定類創(chuàng)建一個對象。
在軟件工程中，單例模式是一種軟件設計模式，它將類的實例化限制為一個“單一”實例。當需要一個對象來協(xié)調整個系統(tǒng)的動作時，這很有用。 —— 維基百科
實例
創(chuàng)建一個單例類：
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();到此這篇關于結合 ES6 類編寫JavaScript 創(chuàng)建型模式的文章就介紹到這了,更多相關JS 創(chuàng)建型模式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了js實現炫酷的煙花效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
BootstrapTable refresh 方法使用實例簡單介紹
本文就bootstrapTable refresh 方法如何傳遞參數做簡單舉例說明，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-02-02
這篇文章主要介紹了詳解ECMAScript2019/ES10新屬性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
正常使用AJAX會需要正?？紤]跨域問題，所以偉大的程序員們又折騰出了一系列跨域問題的解決方案，如JSONP、flash、ifame、xhr2等等。本文給大家介紹JS跨域解決方案之使用CORS實現跨域，感興趣的朋友參考下吧2016-04-04
怎樣去掉Javascript的Array的重復項，這個問題看起來簡單，但考的不僅僅是實現這個功能，更能看出你對計算機程序執(zhí)行的深入理解2014-09-09
這篇文章主要介紹了給事件響應函數傳參數的四種方式。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了javascript實現行拖動的方法,涉及javascript鼠標事件及頁面元素的相關操作技巧,需要的朋友可以參考下2015-05-05
JavaScript中的動態(tài)?import()用法示例解析
這篇文章主要為大家介紹了JavaScript中的動態(tài)import()用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
詳解微信小程序-掃一掃 wx.scanCode() 掃碼大變身
這篇文章主要介紹了微信小程序-掃一掃wx.scanCode() 掃碼大變身，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
placeholder屬性是HTML5 中為input添加的。在input上提供一個占位符，文字形式展示輸入字段預期值的提示信息（hint），該字段會在輸入為空時顯示2016-01-01