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개의 뉴스 항목만 표시할 수 있으므로 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 = "";
  }
 }
}

이렇게 하면 플라이웨이트 모드를 사용하여 페이지를 재구성한 후 각 작업마다 5개 요소만 작업하면 되므로 성능이 많이 향상될 수 있습니다.
플라이웨이트 모드의 적용은 프로그램의 실행 효율성과 시스템 성능을 향상시키기 위한 것입니다. 따라서 프로그램 내 데이터 중복을 피하기 위해 대규모 시스템 개발에 널리 사용됩니다. 적용 시 내부 상태와 외부 상태를 정확하게 파악해야 보다 합리적으로 추출하고 분리할 수 있습니다.

위 내용은 JS 디자인 패턴의 구조적 플라이웨이트 패턴에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!