JS デザイン パターンの構造フライウェイト パターンの簡単な紹介

この記事では、主に JS デザイン パターンの構造フライウェイト パターンの関連情報を詳しく紹介します。興味のある方は参考にしてください。

回避すべき多数のきめの細かいオブジェクトを効果的にサポートするために、共有テクノロジーを使用します。オブジェクト間で同じ内容を持つことによって生じる不要なオーバーヘッド。
フライウェイト モデルは主にデータとメソッドの共有を分離し、データとメソッドを内部データ、内部メソッド、外部データと外部メソッドに分割します。内部メソッドと内部データは類似または共有のデータとメソッドを参照するため、それらを抽出してオーバーヘッドを削減します。

var Flyweight = function() {
 // 已创建的元素
 var created = [];
 // 创建一个新闻包装容器
 function create() {
  var dom = document.createElement('p');
  // 将容器插入新闻列表容器中
  document.getElementById('container').appendChild(dom);
  // 缓存新创建的元素
  created.push(dom);
  // 返回创建的新元素
  return dom;
 }
 return {
  // 获取创建新闻元素方法
  getp: function() {
   // 如果已创建的元素小于当前页元素总个数(5个)，则创建
   if(created.length < 5) {
    return created();
   } else {
    // 获取第一个元素，并插入去后面
    var p = created.shift();
    created.push(p);
    return p;
   }
  }
 }
}

各ページに表示できるニュース項目は 5 つまでなので、flyweight クラス内に 5 つの要素が作成され、作成された要素は getp メソッドで取得できます。次に、外部データと外部メソッドを実装する必要があります。外部データは表示したいすべてのコンテンツであるため、共有することはできません。

var paper = 0,
  num = 5,
  len = article.length;
// 添加五条新闻
for(var i = 0; i < 5; i++) {
 if(article[i])
 // 通过享元类获取创建的元素并写入新闻内容
 Flyweight.getp().innerHTML = article[i];
}

// 下一页按钮绑定事件
document.getElementById('next_page').onclick = function() {
 // 如果新闻内容不足5条则返回
 if(article.length < 5) {
  return;
 }
 var n = ++paper * num % len, // 获取当前页的第一条新闻索引
   j = 0;
 // 插入5条新闻
 for(; j < 5; j++) {
  // 如果存在n+j条则插入
  if(article[n + j]) {
   Flyweight.getp().innerHTML = article[n + j];
  // 否则插入起始位置第n+j-len条
  } else if(article[n + j - len]) {
   Flyweight.getp().innerHTML = article[n + j - len];
  } else {
   Flyweight.getp().innerHTML = "";
  }
 }
}

このように、flyweight モードを使用してページを再構築した後は、各操作で 5 つの要素を操作するだけで済むため、パフォーマンスが大幅に向上します。
フライウェイト モードの用途は、プログラムの実行効率とシステム パフォーマンスを向上させることであるため、プログラム内のデータの重複を避けるために大規模なシステムの開発で広く使用されています。適用する場合、内部状態と外部状態をより合理的に抽出および分離できるように、内部状態と外部状態を正確に把握する必要があります。

以上がJS デザイン パターンの構造フライウェイト パターンの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。