javascript設計模式之享元模式
一. 認識享元模式
享元模式：是一種用於性能優化的模式，其核心是運用共享技術來有效支持大量細粒度的對象。
通俗點來講就是找出事物很多屬性種屬性分類最少的一種，利用屬性值的個數來分類。比如說有這麼一個例子，假如一個工廠需要 20 個男性模特和 20 個女性模特需要穿上 40 件新款衣服拍照做宣傳，如果我們不使用享元模式，則需要聘請 40 位模特，這會造成巨大的經濟損失，也沒有必要，如果使用享元模式通過性別來區分，則隻需要一男一女兩個模特。下面我們來看代碼實現。
二. 代碼具體實現
1. 不使用享元模式實現上述案例
分析：這是正常的代碼實現，我們一共創建瞭 40 個對象，我們日常編寫代碼可能不會註意這種情況，但是在實際開發中如果遇到創建幾萬個甚至幾十萬個對象，就會造成嚴重的性能損耗，浪費內存。
let Model = function(sex, underwear) {
this.sex = sex;
this.underwear = underwear;
}
Model.prototype.takePhoto = function () {
console.log('sex=' + this.sex + 'underwear = ' + this.underwear);
}
for(let i = 0; i < 20 ; i++){
new Model('男', 'underwear' + i).takePhoto();
}
for(let i = 0; i < 20 ; i++){
new Model('女', 'underwear' + i).takePhoto();
}
2. 使用享元模式重構上述代碼
分析：代碼重構後，我們隻創建瞭兩個對象便完成瞭同樣的任務，無論需要多少對象，但是我們隻需要創建兩個對象，大大提高瞭性能。
let ModelR = function( sex ) {
this.sex = sex;
}
let ModelF = new ModelR( '女' );
let ModelM = new ModelR('男');
ModelR.prototype.takePhoto = function () {
console.log('sex=' + this.sex + 'underwear = ' + this.underwear);
}
for(let i = 0; i < 20 ; i++) {
ModelF.underwear = 'underwear' + i;
ModelF.takePhoto();
}
for(let i = 0; i < 20 ; i++) {
ModelM.underwear = 'underwear' + i;
ModelM.takePhoto();
}
總體分析：
現在我們對享元模式有瞭一個大致的瞭解，思想其實很簡單，利用所有對象相同的屬性來初始化創建對象，上述例子中利用人的性別這個屬性來創建對象，而性別這個屬性隻有男女這兩種，因此我們隻需要創建兩個對象，將衣服作為其他不同的屬性添加到對象中便完成瞭對象的替換，相當於擁有 40 個不同的對象，但是實際隻創建瞭兩個。
因此，我們就引出瞭一個新的概念，內部狀態與外部狀態。
3. 享元模式的狀態
- 內部狀態：也就是我們上文提到的屬性分類最少的一種，也就是性別，隻有兩種，可以被對象共享。
- 外部狀態：其他屬性，不能被共享。
結論：剝離瞭外部狀態的對象成為瞭共享對象，外部對象在必要時被傳入共享對象來組裝成一個完整的對象，組裝外部對象需要花費一定的時間，但節省瞭大量內存損耗，因此，享元模式是一種時間換空間的優化模式。
三. 享元模式實際應用
假如我們需用對文件上傳，現在假設有兩種上傳方式 flash 和 plugin，每一次上傳都對應一次 js 對象的創建，如果我們按部就班，當大量文件上傳時就會造成瀏覽器假死狀態，因此我們用享元模式來設計代碼，首先我們來確定文件的內部狀態和外部狀態，我們思考下文件有什麼屬性，文件大小，文件類型，文件上傳方式，文件大小和文件類型都是不可控屬性，文件上傳方式隻有兩種，因此將文件上傳方式作為外部狀態，現在我們來編寫代碼。
let Upload = function(uploadType) {
this.uploadType = uploadType;
}
Upload.prototype.delFile = function( id ) {
uploadManager.setExternalState(id, this);
if(this.fileSize < 3000) {
return this.dom.parentNode.removeChild(this.dom);
}
}
// 使用工廠模式來創建對象
let UploadFactory = function() {
let cache = {};
return {
create(uploadType) {
if(cache[uploadType]){
return cache[uploadType];
}
return cache[uploadType] = new Upload( uploadType );
}
}
}()
// 創建一個管理器封裝外部狀態
let uploadManager = function() {
uploadDatabase = {};
return {
add(id, uploadType, fileName, fileSize){
let uploadObj = UploadFactory.create( uploadType );
let dom = document.createElement('div');
dom.innerHTML = `<span>文件名稱： ${ fileName },文件大小：${fileSize}</span> <button id="del">刪除</button>`;
dom.querySelector('#del').onclick = function() {
uploadObj.delFile( id );
}
document.body.appendChild( dom );
uploadDatabase[ id ] = {
fileName,
fileSize,
dom
}
return uploadObj;
},
setExternalState(id, uploadObj){
let uploadData = uploadDatabase[id];
for(let i in uploadData) {
uploadObj[i] = uploadData[i];
}
}
}
}();
let id = 0;
window.startUpload = function(uploadType, files) {
for(let i = 0,file; file = files[i++];){
let uploadObj = uploadManager.add(++id, uploadType, file.fileName, file.fileSize);
// 進行上傳
}
};
startUpload('plugin', [
{
fileName: '1.txt',
fileSize: 1000
},
{
fileName: '2.txt',
fileSize: 1000
},
{
fileName: '3.txt',
fileSize: 3000
}
])
startUpload('flash', [
{
fileName: '4.txt',
fileSize: 1000
},
{
fileName: '5.txt',
fileSize: 1000
},
{
fileName: '6.txt',
fileSize: 3000
}
])
擴展：再談內部狀態和外部狀態
現在我們思考下，如果沒有內部狀態或者沒有外部狀態那有該怎麼辦。
- 沒有內部狀態享元：此時，所有屬性作為外部享元，相當於內部享元隻有一種空，因此我們隻需要創建一個對象，此時便相當於之前所提單的單例模式。
- 沒有外部狀態享元：這時引入一個新的概念，對象池。
四. 對象池
對象池的應用十分廣泛，數據庫的連接池就是其重要用武之地。對象池的大多數使用場景就是 DOM 操作，因為 DOM 的創建和刪除是 js 種最消耗性能的操作。
理解對象池非常簡單，比如說我們想做一個圓形的月餅，隻需要制造一個圓形的模具便可以做無數的圓形月餅，當我們想做方形月餅時，隻需要制造一個方形模具，同時將圓形模具保留下來，等再次使用時拿出來直接用便可。對象池就是這樣的原理，我們看一下其通用實現代碼。
let objectPoolFactory = function( fn ) {
let pool = [];
return {
create(...args){
let obj = (pool.length === 0)? fn.apply(this, args) : pool.shift();
return obj;
},
recover(obj) {
pool.push(obj);
}
}
}
實際應用
我們在地圖上搜索幾個不同的位置，第一次搜索顯示北京的兩個景區位置，第二次搜索北京三個飯店的位置。
分析：第一次需要兩個 DOM 節點，因此創建兩個節點，之後將其回收，第二次需要三個DOM節點，使用之前的兩個，隻需要再創建一個新的節點便可，大大提高瞭代碼性能。
// 創建 dom 節點
let createDomFactory = objectPoolFactory(()=>{
let div = document.createElement('div');
document.body.appendChild(div);
return div;
});
let ary = []; // 用於回收
let name = ['天安門', "長城"];
for(let i = 0, l= name.length; i < l ;i++){
let dom = createDomFactory.create();
dom.innerHTML = name[i];
ary.push(dom);
}
for(let i = 0, l = ary.length; i < l ; i ++ ){
createDomFactory.recover(ary[i]);
}
let name1 = ["飯店1", "飯店2", "飯店3"];
for(let i = 0, l = name1.length; i < l; i++) {
let dom = createDomFactory.create();
dom.innerHTML = name1[i];
}
五. 總結
享元模式是一種很好的性能優化方案，但也會帶來一些復雜性問題，因此需要選擇合適的時機使用享元模式，比如：
一個程序種使用瞭大量相似對象使用大量對象造成很大內存開銷對象大多數狀態都可以變為外部狀態剝離出外部對象之後，可以用相對較少的共享對象取代大量的對象
本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!