A brief introduction to the structural flyweight pattern of js design patterns

This article mainly introduces the relevant information of the structural flyweight pattern of js design pattern in detail. It has certain reference value. Interested friends can refer to it

Effective use of sharing technology It supports a large number of fine-grained objects to avoid unnecessary overhead caused by having the same content between objects.
The flyweight model mainly separates the sharing of data and methods, and divides the data and methods into internal data, internal methods and external data and external methods. Internal methods and internal data refer to similar or shared data and methods, so extract them to reduce overhead.

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

The above creates a flyweight class. Since only 5 news items can be displayed on each page, 5 elements are created and stored inside the flyweight class. You can use the getp method to get the created element. Next, we need to implement external data and external methods. External data is all the news content we want to display. Since each content is different, it cannot be shared.

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

After using flyweight mode to reconstruct the page, each operation only needs to operate 5 elements, so Performance can be improved a lot.
The application of flyweight mode is to improve the execution efficiency and system performance of the program. Therefore, it is widely used in the development of large systems to avoid data duplication in the program. When applying, you must find out the internal state and external state correctly, so that you can extract and separate them more reasonably.

The above is the detailed content of A brief introduction to the structural flyweight pattern of js design patterns. For more information, please follow other related articles on the PHP Chinese website!