js设计模式之组合模式

原创
2017/05/30 11:13
阅读数 217

var News = function() {
  this.children = [];
  this.element = null;
}
News.prototype = {
  init: function() {
   
  },
  add: function() {
    
  },
  getElement: function() {
    
  }
}

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.ad = 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 news1 = new Container("news", document.body);
  news1.add(
    new Item("normal").add(
      new IconNews("aaaaa", "#", "video")
    )
  ).add(
    new Item("normal").add(
      new IconNews("bbbbb", "#", "live")
    )
  ).add(
    new Item('normal').add(
      new NewsGroup("has-img").add(
        new ImageNews("cccc", "#", "small")
      ).add(
        new EasyNews("ddddd", "#")
      ).add(
        new EasyNews("eeeee", "#")
      )
    )
  ).show();
function inheritObject(o){
  function F(){}
  F.prototype = o;
  return new F();
}
function inheritPrototype(subClass,superClass){
  try{
      var p=inheritObject(superClass.prototype);
  p.constructor = subClass;
  subClass.prototype=p;
  }catch(e){}
}

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部