本文實(shí)例講述了javascript設(shè)計(jì)模式 ? 享元模式原理與用法。分享給大家供大家參考，具體如下：

介紹：在我們?nèi)粘ｉ_(kāi)發(fā)中需要?jiǎng)?chuàng)建很多對(duì)象，雖然垃圾回收機(jī)制能幫我們進(jìn)行回收，但是在一些需要重復(fù)創(chuàng)建對(duì)象的場(chǎng)景下，就需要有一種機(jī)制來(lái)進(jìn)行優(yōu)化，提高系統(tǒng)資源的利用率。

享元模式就是解決這類(lèi)問(wèn)題，主要目的是減少創(chuàng)建對(duì)象的數(shù)量。享元模式提倡重用現(xiàn)有同類(lèi)對(duì)象，如未找到匹配的對(duì)象則創(chuàng)建新對(duì)象

定義：運(yùn)用共享技術(shù)有效的支持大量細(xì)粒度對(duì)象的復(fù)用。系統(tǒng)只適用少量的對(duì)象，而這些對(duì)象都很相似，狀態(tài)變化很小，可以實(shí)現(xiàn)對(duì)象的多次復(fù)用。由于享元模式要求能夠共享的對(duì)象必須是細(xì)粒度的對(duì)象，因此他又稱(chēng)為輕量級(jí)模式，是一種對(duì)象結(jié)構(gòu)型模式。

場(chǎng)景：我們以創(chuàng)建圓形對(duì)象為例，通過(guò)兩個(gè)例子來(lái)對(duì)比享元模式的效果。

示例：

var redCricle = new Circle(’red’);redCricle.setAttr(10,10,10);redCricle.draw(); var redCricle1 = new Circle(’red’);redCricle1.setAttr(1,1,100);redCricle1.draw(); var redCricle2 = new Circle(’red’);redCricle2.setAttr(5,5,50);redCricle2.draw(); var blueCricle = new Circle(’blue’);blueCricle.setAttr(1,1,50);blueCricle.draw(); var blueCricle1 = new Circle(’blue’);blueCricle1.setAttr(12,12,50);blueCricle1.draw(); var blueCricle2 = new Circle(’blue’);blueCricle2.setAttr(2,12,20);blueCricle2.draw();// 創(chuàng)建了一個(gè)對(duì)象// 畫(huà)圓： 顏色：red x:10 y:10 radius:10// 創(chuàng)建了一個(gè)對(duì)象// 畫(huà)圓： 顏色：red x:1 y:1 radius:100// 創(chuàng)建了一個(gè)對(duì)象// 畫(huà)圓： 顏色：red x:5 y:5 radius:50// 創(chuàng)建了一個(gè)對(duì)象// 畫(huà)圓： 顏色：blue x:1 y:1 radius:50// 創(chuàng)建了一個(gè)對(duì)象// 畫(huà)圓： 顏色：blue x:12 y:12 radius:50// 創(chuàng)建了一個(gè)對(duì)象// 畫(huà)圓： 顏色：blue x:2 y:12 radius:20

這種情況下每次使用都需要實(shí)例化一次Circle對(duì)象，對(duì)系統(tǒng)資源來(lái)說(shuō)是一種浪費(fèi)。

觀察下不難發(fā)現(xiàn)，除了第一次需要實(shí)例化，其余的可以基于實(shí)例繼續(xù)修改。

我們修改下：

var Circle = function(color){ console.log(’創(chuàng)建了一個(gè)對(duì)象’); this.color = color; this.x; this.y; this.radius; this.setAttr = function(x, y, radius){ this.x = x; this.y = y; this.radius = radius; } this.draw = function(){ console.log(’畫(huà)圓： 顏色：’ + this.color + ’ x:’ + this.x + ’ y:’ + this.y + ’ radius:’ + this.radius) }} var ShapeFactory = function(){ this.circleMap = {}; this.getCircle = function(color){ var circle = this.circleMap[color]; if(!circle){ circle = new Circle(color); this.circleMap[color] = circle; } return circle; }}var factory = new ShapeFactory(); var redCricle = factory.getCircle(’red’);redCricle.setAttr(10,10,10);redCricle.draw(); var redCricle1 = factory.getCircle(’red’);redCricle1.setAttr(1,1,100);redCricle1.draw(); var redCricle2 = factory.getCircle(’red’);redCricle2.setAttr(5,5,50);redCricle2.draw(); var blueCricle = factory.getCircle(’blue’); blueCricle.setAttr(1,1,50);blueCricle.draw(); var blueCricle1 = factory.getCircle(’blue’);blueCricle1.setAttr(12,12,50);blueCricle1.draw(); var blueCricle2 = factory.getCircle(’blue’);blueCricle2.setAttr(2,12,20);blueCricle2.draw(); // 創(chuàng)建了一個(gè)對(duì)象// 畫(huà)圓： 顏色：red x:10 y:10 radius:10// 畫(huà)圓： 顏色：red x:1 y:1 radius:100// 畫(huà)圓： 顏色：red x:5 y:5 radius:50// 創(chuàng)建了一個(gè)對(duì)象// 畫(huà)圓： 顏色：blue x:1 y:1 radius:50// 畫(huà)圓： 顏色：blue x:12 y:12 radius:50// 畫(huà)圓： 顏色：blue x:2 y:12 radius:20

我們通過(guò)一個(gè)工廠(chǎng)來(lái)動(dòng)態(tài)創(chuàng)建Circle對(duì)象，將實(shí)例進(jìn)行保存，保存的位置稱(chēng)之為享元池。第二次創(chuàng)建時(shí)，直接使用已有的結(jié)果。節(jié)約了系統(tǒng)資源

享元模式總結(jié)：

優(yōu)點(diǎn)：* 大大減少對(duì)象的創(chuàng)建，降低系統(tǒng)內(nèi)存使用，使效率提高。* 享元模式外部狀態(tài)獨(dú)立，不會(huì)影響其內(nèi)部狀態(tài)，使得享元對(duì)象可以在不同環(huán)境被共享。

缺點(diǎn)：* 提高了系統(tǒng)復(fù)雜度，且需要相同的屬性，否則會(huì)造成系統(tǒng)混亂

適用場(chǎng)景：* 一個(gè)系統(tǒng)有大量相同或相似的對(duì)象，造成內(nèi)存大量耗費(fèi)。* 對(duì)象大部分狀態(tài)都可以外部化* 在使用享元模式時(shí)需要維護(hù)一個(gè)存儲(chǔ)享元對(duì)象的享元池，而這需要耗費(fèi)一定的系統(tǒng)資源。因此使用時(shí)要衡量。

感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。