首頁  >  文章  >  web前端  >  es6有工廠模式嗎

es6有工廠模式嗎

WBOY
WBOY原創
2022-05-06 16:23:381424瀏覽

es6有工廠模式;工廠模式將邏輯封裝到一個函數中,在es6中可以不使用建構函式建立對象,而使用class配合static關鍵字將簡單工廠封裝到User類別的靜態方法中,語法為「class User{建構器}static 靜態方法(){}」。

es6有工廠模式嗎

本教學操作環境:windows10系統、ECMAScript 6.0版、Dell G3電腦。

es6有工廠模式嗎

ES6中給我們提供了class新語法,雖然class本質上是一顆語法糖,並沒有改變JavaScript是使用原型繼承的語言,但是確實讓物件的創建和繼承的過程變得更加的清晰和易讀。下面我們使用ES6的新語法來重寫上面的範例。

ES6重寫簡單工廠模式

使用ES6重寫簡單工廠模式時,我們不再使用建構子建立對象,而是使用class的新語法,並使用static關鍵字將簡單工廠封裝到User類別的靜態方法中:

//User类
class User {
  //构造器
  constructor(opt) {
    this.name = opt.name;
    this.viewPage = opt.viewPage;
  }
  //静态方法
  static getInstance(role) {
    switch (role) {
      case 'superAdmin':
      return new User({ name: '超级管理员', viewPage: ['首页', '通讯录', '发现页', '应用数据', '权限管理'] });
        break;
      case 'admin':
        return new User({ name: '管理员', viewPage: ['首页', '通讯录', '发现页', '应用数据'] });
        break;
      case 'user':
        return new User({ name: '普通用户', viewPage: ['首页', '通讯录', '发现页'] });
        break;
      default:
        throw new Error('参数错误, 可选参数:superAdmin、admin、user')
    }
  }
}

//调用
let superAdmin = User.getInstance('superAdmin');
let admin = User.getInstance('admin');
let normalUser = User.getInstance('user');

工廠模式是最常見的一種開發模式,將new操作單獨封裝,當遇到new是應考慮工廠模式。創建對象,不暴露程式碼邏輯,把邏輯寫到函數裡面。這個函數就是工廠模式。優點,簡單​​。   缺點就是,每增加建構函數,都要修改函數裡面的程式碼邏輯。

工廠模式是用來創建物件的一種最常用的設計模式。我們不暴露創建物件的具體邏輯,而是將邏輯封裝在一個函數中,那麼這個函數就可以被視為一個工廠。工廠模式依抽象程度的差異可以分為:簡單工廠,工廠方法和抽象工廠。

如果只接觸過JavaScript這門語言的人可能會對抽象這個詞的概念有點模糊,因為JavaScript一直將abstract作為保留字而沒有去實現它。如果不能很好的理解抽象的概念,那麼就很難理解工廠模式中的三種方法的異同。所以,我們先以一個場景去簡單的講述一下抽象和工廠的概念。

簡單工廠模式又叫靜態工廠模式,由一個工廠物件決定建立某一種產品物件類別的實例。主要用來建立同一類物件。

在實際的專案中,我們常常需要根據使用者的權限來渲染不同的頁面,高級權限的使用者所擁有的頁面有些是無法被低階權限的使用者所查看。所以我們可以在不同權限等級使用者的建構函式中,儲存該使用者能夠看到的頁面。在根據權限實例化使用者。

程式碼如下:

class SuperAdmin{
  constructor(){
    this.name = "超级管理员";
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理'];
  }
}
class Admin{
  constructor(){
    this.name = "管理员";
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理'];
  }
}
class NormalUser{
  constructor(){
    this.name = "普通用户";
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理'];
  }
}
//工厂方法类
class UserFactory {
  getFactory(role){
   switch (role) {
     case 'superAdmin':
       return new SuperAdmin();
       break;
     case 'admin':
       return new Admin();
       break;
     case 'user':
       return new NormalUser();
       break;
     default:
       throw new Error('参数错误, 可选参数:superAdmin、admin、user');
   }
  }
 }
 
//调用
let uesr =new UserFactory();
uesr.getFactory('superAdmin');
uesr.getFactory('admin');
uesr.getFactory('user');

簡單工廠的優點在於,你只需要一個正確的參數,就可以獲得你所需要的對象,而無需知道其創建的具體細節。但在函數內包含了所有物件的創建邏輯(建構函數)和判斷邏輯的程式碼,每增加新的建構子還需要修改判斷邏輯程式碼。

當我們的物件不是上面的3個而是30個或更多時,這個函數會成為一個龐大的超級函數,便得難以維護。

所以,簡單工廠只能作用於 創建的物件數量較少,而物件的創建邏輯不複雜時使用。

【相關推薦:javascript影片教學web前端

以上是es6有工廠模式嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn