Une brève introduction au modèle de poids structurel des modèles de conception js

Cet article présente principalement en détail les informations pertinentes sur le modèle de poids structurel du modèle de conception js. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Utiliser efficacement la technologie de partage Il prend en charge un grand nombre de. objets à granularité fine pour éviter une surcharge inutile causée par le même contenu entre les objets.
Le modèle flyweight sépare principalement le partage des données et des méthodes, en divisant les données et les méthodes en données internes, méthodes internes et données externes et méthodes externes. Les méthodes internes et les données internes font référence à des données et méthodes similaires ou partagées, alors extrayez-les pour réduire les frais généraux.

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

Créez une classe de poids mouche ci-dessus. Puisque seulement 5 actualités peuvent être affichées sur chaque page, 5 éléments sont créés et stockés à l'intérieur de la classe de poids mouche. Vous pouvez passer. méthode getp pour obtenir l'élément créé. Ensuite, nous devons implémenter des données externes et des méthodes externes. Les données externes sont tout le contenu d'actualité que nous souhaitons afficher. Puisque chaque contenu est différent, il ne peut pas être partagé.

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

De cette façon, après avoir utilisé le mode poids mouche pour reconstruire la page, chaque opération ne nécessite que 5 opérations éléments, cette performance peut être considérablement améliorée.
L'application du mode Flyweight vise à améliorer l'efficacité d'exécution du programme et les performances du système. Par conséquent, il est largement utilisé dans le développement de grands systèmes pour éviter la duplication des données dans le programme. Lors de la candidature, vous devez connaître correctement l'état interne et l'état externe, afin de pouvoir les extraire et les séparer plus raisonnablement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!