Eine kurze Einführung in das strukturelle Fliegengewichtsmuster von js-Entwurfsmustern

In diesem Artikel werden hauptsächlich die relevanten Informationen zum strukturellen Fliegengewichtsmuster des js-Entwurfsmusters ausführlich vorgestellt. Es hat einen gewissen Referenzwert.

Es unterstützt eine große Anzahl von Teilen feinkörnige Objekte, um unnötigen Overhead zu vermeiden, der durch den gleichen Inhalt zwischen Objekten entsteht.
Das Fliegengewichtsmodell trennt hauptsächlich den Austausch von Daten und Methoden und unterteilt Daten und Methoden in interne Daten, interne Methoden und externe Daten und externe Methoden. Interne Methoden und interne Daten beziehen sich auf ähnliche oder gemeinsam genutzte Daten und Methoden. Extrahieren Sie sie daher, um den Overhead zu reduzieren.

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;
   }
  }
 }
}

Erstellen Sie oben eine Fliegengewichtsklasse. Da auf jeder Seite nur 5 Nachrichten angezeigt werden können, werden 5 Elemente erstellt und in der Fliegengewichtsklasse gespeichert getp-Methode, um das erstellte Element abzurufen. Als nächstes müssen wir externe Daten und externe Methoden implementieren. Da jeder Inhalt anders ist, kann er nicht geteilt werden.

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 = "";
  }
 }
}

Auf diese Weise ist nach Verwendung des Fliegengewichtsmodus zum Rekonstruieren der Seite nur noch jeder Vorgang erforderlich 5-Elemente, diese Leistung kann erheblich verbessert werden.
Die Anwendung des Flyweight-Modus besteht darin, die Ausführungseffizienz des Programms und die Leistung des Systems zu verbessern. Daher wird er häufig bei der Entwicklung großer Systeme verwendet, um Datenduplizierung im Programm zu vermeiden. Bei der Bewerbung müssen Sie den internen und externen Status korrekt ermitteln, damit Sie sie sinnvoller extrahieren und trennen können.

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in das strukturelle Fliegengewichtsmuster von js-Entwurfsmustern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!