美文网首页
14.第三篇:组合模式

14.第三篇:组合模式

作者: 爱吃鱼的肥兔子 | 来源:发表于2018-12-14 11:51 被阅读0次

本文摘自 《JavaScript 设计模式》张容铭 著 版权归原作者所有

var News = function(){
  // 子组件容器
  this.children = [];
  // 当前组件元素
  this.element = null;
}
News.prototype = {
  init:function(){
    throw new Error('请重启你的方法');
  },
  add:function(){
    throw new Error('请重启你的方法');
  },
  getElement:function(){
    throw new Error('请重启你的方法');
  }
}
// 容器类构造函数
var Container = function(id,parent){
  // 构造函数继承父类
  News.call(this);
  // 模块id
  this.id = id;
  // 模块父容器
  this.parent = parent;
  // 构建方法
  this.init();
}
// 寄生式继承父类原型方法
inhritprototype(Container,News);
// 构建方法
Container.prototype.init = function(){
  this.element = document.createElement('ul');
  this.element.id = this.id;
  this.element.className = 'new-container';
};
// 添加子元素方法
Container.prototype.getElement = function(child){
  // 在子元素容器中插入子元素
  this.children.push(child);
  // 插入当前组件元素树种
  this.element.appendChild(child.getElement());
  return this;
}
// 获取当前元素方法
Container.prototype.getElement= function(){
  return this.element;
}
// 显示方法
Container.[prototype.show = function(){
  this.parent.appendChild(this.element);
}

var Item = function(classname){
  News.call(this);
  this.classname = classname || '';
  this.init();
}
inheritPrototype(Item,News);
Item.prptotype.init = function(){
  this.element = document.createElement('li');
  this.element.className = this.classname;
}
Item.prototype.add = function(child){
  this.children.push(child);
  this.element.appendChild(child.getElement());
  return this;
}
Item.prototype.getElement = function(){
  return this.element;
}
var NewsGroup = function(classname)(){
  News.call(this);
  this,classname = classname || '';
  this.init();
}
inheriPrototype(NewsGroup,Mews);
NewsGroup.prototype.init = function(){
  this.element = document.createElement('div');
  this.element.className = this.classname;
}
NewsGroup.prtotype.add = function(child){
  this.children.push(child);
  this,element.appenChild(child.getElement());
  return this;
}
NewsGroup.prototype.getElment = function(){
  return this.element;
}

相关文章

  • 14.第三篇:组合模式

    本文摘自 《JavaScript 设计模式》张容铭 著 版权归原作者所有

  • C++设计模式-第三篇 (Boolan)

    C++设计模式-第三篇 (Boolan) 本章内容:1 备忘录模式2 状态模式3 组合模式4 迭代器模式5 职责模...

  • 浅谈js的几种模式(三)

    接着前面两篇,终于到了第三篇了,天真热。 1 组合使用构造函数模式和原型模式 前面讲到了js中的原型模式,是为了解...

  • 设计模式:组合模式 职责链模式

    组合模式 职责链模式 组合模式 组合模式将对象组合成树形结构,以表示“部分-整体”的层次结构。 在组合模式的树形结...

  • 第4章 结构型模式-组合模式

    一、组合模式简介 二、组合模式的优缺点 三、组合模式的使用场景 、组合模式的实例

  • 组合模式(统一叶子与组合对象)

    目录 从生活场景出发,映射组合模式 组合模式的理论概念 组合模式的实现 组合模式在源码中的应用 组合 “优于” 继...

  • 组合模式

    1. 组合模式 1.1 组合模式的定义 组合模式(Composite): 又称部分-整体模式, 将对象组合成树形结...

  • 组合模式

    设计模式系列7--组合模式 《Objective-c 编程之道 iOS 设计模式解析》 - 组合模式 常见组合模式...

  • 设计模式 | 组合模式及典型应用

    本文的主要内容: 介绍组合模式 示例 组合模式总结 源码分析组合模式的典型应用java.awt中的组合模式Java...

  • 组合模式

    一、组合模式介绍 二、组合模式代码实例

网友评论

      本文标题:14.第三篇:组合模式

      本文链接:https://www.haomeiwen.com/subject/oksuhqtx.html