美文网首页
组合模式

组合模式

作者: niumew | 来源:发表于2016-04-14 11:00 被阅读0次

部分-整体模式

// 寄生式继承父类
function object(o) {    
  function F(){}    
  F.prototype=o;    
  return new F();
}
function inheritPrototype(subType,superType) {    
  var obj = object(superType.prototype);  //创建对象      
  obj.constructor = subType;                      //增强对象    
  subType.prototype = obj;                        //指定对象
}

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);    
  this.id = id;    
  this.parent = parent;    
  this.init();
}
inheritPrototype(Container, News);
Container.prototype.init = function() {    
  this.element = document.createElement('ul');    
  this.element.id = this.id;    
  this.element.className = 'new-container';
};
Container.prototype.add = 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.prototype.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();
}
inheritPrototype(NewsGroup, News);
NewsGroup.prototype.init = function() {    
  this.element = document.createElement('div');    
  this.element.className = this.className;
}
NewsGroup.prototype.add = function(child) {    
  this.children.push(child);    
  this.element.appendChild(child.getElement());    
  return this;
}
NewsGroup.prototype.getElement = function() {    
  return this.element;
}
// 创建新闻类
var ImageNews = function(url, href, classname) {    
  News.call(this);    
  this.url = url || '';    
  this.href = href || '#';    
  this.className = classname || 'normal';    
  this.init();
}
inheritPrototype(ImageNews, News);
ImageNews.prototype.init = function() {    
  this.element = document.createElement('a');    
  var img = new Image();    
  img.src = this.url;    
  this.element.appendChild(img);    
  this.element.className = 'image-news' + this.className;      
  this.element.href = this.href;
}
ImageNews.prototype.add = function() {}
ImageNews.prototype.getElement  = function () {    
  return this.element;
}
var IconNews = function(text, href, type) {    
  News.call(this);    
  this.text = text || '';    
  this.href = href || '#';    
  this.type = type || 'video';    
  this.init();
}
inheritPrototype(IconNews, News);
IconNews.prototype.init = function() {    
  this.element = document.createElement('a');    
  this.element.innerHTML = this.text;    
  this.element.href = this.href;    
  this.element.className = 'icon' + this.type;
}
IconNews.prototype.add = function () {}
IconNews.prototype.getElement = function () {    
  return this.element;
}
var EasyNews = function (text, href) {    
  News.call(this);    
  this.text = text || '';    
  this.href = href || '#';    
  this.init();
}
inheritPrototype(EasyNews, News);
EasyNews.prototype.init = function() {    
  this.element = document.createElement('a');      
  this.element.innerHTML = this.text;    
  this.element.href = this.href;    
  this.element.className = 'text';
}
EasyNews.prototype.add = function() {}
EasyNews.prototype.getElement = function () {    
  return this.element;
}
var TypeNews = function(text, href, type, pos) {    
  News.call(this);    
  this.text = text || '';    
  this.href = href || '#';    
  this.type = type || '';    
  this.pos = pos || 'left';    
  this.init();
}
inheritPrototype(TypeNews, News);
TypeNews.prototype.init = function () {    
  this.element = document.createElement('a');    
  if (this.pos === 'left') {        
    this.element.innerHTML = '[' + this.type + ']' + this.text    
  } else {        
    this.element.innerHTML = this.text + '[' + this.type + ']';    
  }    
  this.element.href = this.href;    
  this.element.className = 'text';
}
TypeNews.prototype.add = function() {}
TypeNews.prototype.getElement = function () {    
  return this.element;
}
// 创建新闻模块
var news1 = new Container('news', document.body);
news1.add(    
  new  Item('normal').add(        
    new IconNews('左小祖咒最帅了', '#', 'video')    
  )
).add(    
  new Item('normal').add(        
    new IconNews('辩护人上映了', '#', 'live')    )
).add(    
  new Item('normal').add(        
    new NewsGroup('has-img').add(            
      new ImageNews('img.jpg', '#', 'small')        
    ).add(            
      new EasyNews('快速减肥法', '#')        
    ).add(            
      new EasyNews('三小时学会PHP', '#')        
    )    
  )
).add(    
  new Item('normal').add(        
    new TypeNews('择天记', '#', '小说', 'left')    )
).add(    
  new Item('normal').add(        
    new TypeNews('大话西游', '#', '游戏', 'right')    
  )
).show();

相关文章

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

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

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

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

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

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

  • 组合模式

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

  • 组合模式

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

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

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

  • 组合模式

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

  • 组合模式

    设计模式之组合模式 什么是组合模式? 组合模式允许你将对象组合成树形结构来表现”部分-整体“的层次结构,使得客户以...

  • 15、组合模式(Composite Pattern)

    1. 组合模式 1.1 简介   Composite模式,即组合模式,又叫部分整体模式。Composite模式将对...

  • 组合模式原型解析

    组合模式定义: 组合模式,将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象...

网友评论

      本文标题:组合模式

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