部分-整体模式
// 寄生式继承父类
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();