小編給大家分享一下js設(shè)計模式之結(jié)構(gòu)型享元模式的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、西華網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為西華等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

運(yùn)用共享技術(shù)有效地支持大量的細(xì)粒度的對象，避免對象間擁有相同內(nèi)容造成多余的開銷。
享元模式主要是對其數(shù)據(jù)、方法共享分離，將數(shù)據(jù)和方法分成內(nèi)部數(shù)據(jù)、內(nèi)部方法和外部數(shù)據(jù)、外部方法。內(nèi)部方法與內(nèi)部數(shù)據(jù)指的是相似或共有的數(shù)據(jù)和方法，所以將其提取出來減少開銷。

var Flyweight = function() {
 // 已創(chuàng)建的元素
 var created = [];
 // 創(chuàng)建一個新聞包裝容器
 function create() {
  var dom = document.createElement('div');
  // 將容器插入新聞列表容器中
  document.getElementById('container').appendChild(dom);
  // 緩存新創(chuàng)建的元素
  created.push(dom);
  // 返回創(chuàng)建的新元素
  return dom;
 }
 return {
  // 獲取創(chuàng)建新聞元素方法
  getDiv: function() {
   // 如果已創(chuàng)建的元素小于當(dāng)前頁元素總個數(shù)(5個)，則創(chuàng)建
   if(created.length < 5) {
    return created();
   } else {
    // 獲取第一個元素，并插入去后面
    var div = created.shift();
    created.push(div);
    return div;
   }
  }
 }
}

上面創(chuàng)建一個享元類，由于每頁只能顯示5條新聞，所以創(chuàng)建5個元素，保存在享元類內(nèi)部，可以通過getDiv方法來獲取創(chuàng)建的元素。下面就要實現(xiàn)外部數(shù)據(jù)和外部方法，外部數(shù)據(jù)就是我們要顯示的所有新聞內(nèi)容，由于每個內(nèi)容都不一樣肯定不能共享。

var paper = 0,
  num = 5,
  len = article.length;
// 添加五條新聞
for(var i = 0; i < 5; i++) {
 if(article[i])
 // 通過享元類獲取創(chuàng)建的元素并寫入新聞內(nèi)容
 Flyweight.getDiv().innerHTML = article[i];
}

// 下一頁按鈕綁定事件
document.getElementById('next_page').onclick = function() {
 // 如果新聞內(nèi)容不足5條則返回
 if(article.length < 5) {
  return;
 }
 var n = ++paper * num % len, // 獲取當(dāng)前頁的第一條新聞索引
   j = 0;
 // 插入5條新聞
 for(; j < 5; j++) {
  // 如果存在n+j條則插入
  if(article[n + j]) {
   Flyweight.getDiv().innerHTML = article[n + j];
  // 否則插入起始位置第n+j-len條
  } else if(article[n + j - len]) {
   Flyweight.getDiv().innerHTML = article[n + j - len];
  } else {
   Flyweight.getDiv().innerHTML = "";
  }
 }
}

這樣用享元模式對頁面重構(gòu)之后每次操作只需要操作5個元素，這樣性能可以提高很多。
享元模式的應(yīng)用是為了提高程序的執(zhí)行效率與系統(tǒng)性能，因此在大型系統(tǒng)開發(fā)中應(yīng)用比較廣泛，可以避免程序中的數(shù)據(jù)重復(fù)。應(yīng)用時一定要找準(zhǔn)內(nèi)部狀態(tài)與外部狀態(tài)，這樣才能更合理地提取分離。

以上是“js設(shè)計模式之結(jié)構(gòu)型享元模式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標(biāo)題：js設(shè)計模式之結(jié)構(gòu)型享元模式的示例分析-創(chuàng)新互聯(lián)
文章位置：http://www.chinadenli.net/article18/docsgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站策劃、外貿(mào)建站、網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)