[js高手之路]設計模式系列課程-組合模式+寄生組合繼承實戰新聞列表

所謂組合模式，就是把一堆結構分解出來，組成在一起，現實中很多這樣的例子，如：

1、肯德基套餐就是一種組合模式， 比如雞腿堡套餐，一般是是由一個雞腿堡，一包薯條，一杯可樂等組成的

2、組裝的台式機同理，由主板，電源，內存條，顯卡， 機箱，顯示器，外設等組成的

把一個成型的產品組成部件，分成一個個獨立的部件，這種方式可以做出很多靈活的產品，這就是組合模式的優勢

比如：家用台式機電腦，要求配置比較低， 這個時候只需要主板+電源+內存條+機箱+顯示器+外設就可以了，不需要配置獨立顯卡 

雞腿堡+雞翅+紫薯+可樂可以配置出另外一種套餐。

而在我們的前端領域，經常要接觸的就是排版，通過不同的html結構+css樣式組合成不用絢麗多彩的網頁，我們也可以通過組合模式來完成的,

有人可能要問，為什么要用js來生成，直接寫html和css不是很省事嗎？是的，但是用組合模式做成不同的套餐(模塊)，是不是可以非常快的生成出不同的模板呢？ 大大提高網頁編寫的速度？

本文我們來實戰一個最基本的列表新聞模塊，看看怎么使用組合模式？先看下要做出來的效果:

這個是一個無序列表加一個a標簽，非常簡單的套餐(模塊)

1、首先，我們定義父類，2個屬性，3個方法

/***************父類開始***********************/
var Layout = function () {
    this.children = [];
    this.element = null;
}
Layout.prototype = {
    init: function () {
        throw new Error('該方法需要重寫');
    },
    add: function () {
        throw new Error('該方法需要重寫');
    },
    getElement: function () {
        throw new Error('該方法需要重寫');
    }
}
/***************父類結束***********************/

this.element用來存儲當前的元素，this.children用來存儲當前元素下面的子元素

init方法：用來初始化元素的標簽，屬性，樣式

add方法：把子節點添加在父節點下面

getElement: 獲取當前的節點

2、這里我們需要用到寄生組合繼承

function object(o) {
    var G = function () {
    };
    G.prototype = o;
    return new G();
}
function inheritPrototype(subObj, superObj) {
    var proObj = object(superObj.prototype); //復制父類superObj的原型對象
    proObj.constructor = subObj; //constructor指向子類構造函數
    subObj.prototype = proObj; //再把這個對象給子類的原型對象
}

3，由於這個新聞模塊最外層是ul,所以我們要封裝一個生成ul元素的容器類

/***************列表容器類開始***********************/
var UlContainer = function (id, parent) {
    Layout.call(this);
    this.id = id;
    this.parent = parent;
    this.init();
}
inheritPrototype(UlContainer, Layout);
UlContainer.prototype.init = function () {
    this.element = document.createElement("ul");
    this.element.id = this.id;
    this.element.className = 'news-list';
}
UlContainer.prototype.add = function (child) {
    this.children.push(child);
    this.element.appendChild(child.getElement());
    return this;
}
UlContainer.prototype.getElement = function () {
    return this.element;
}
UlContainer.prototype.show = function () {
    this.parent.appendChild(this.element);
}
/***************列表容器類結束***********************/

采用寄生組合繼承，把父類的方法重寫，父類的屬性通過子類的借用構造函數復制到子類實例上，新增了一個show方法，這個方法的目的就是，把最終的模板顯示出來

4、生成li元素

/***************列表項li開始***********************/
var LiTag = function (cName) {
    Layout.call(this);
    this.className = cName || '';
    this.init();
}
inheritPrototype(LiTag, Layout);
LiTag.prototype.init = function () {
    this.element = document.createElement("li");
    this.element.className = this.className;
}
LiTag.prototype.add = function (child) {
    this.children.push(child);
    this.element.appendChild(child.getElement());
    return this;
}
LiTag.prototype.getElement = function () {
    return this.element;
}
/***************列表項li結束***********************/

5、生成圖片與a標簽組合的方式

/***************圖片新聞開始*******************/
var ImageMsg = function (url, href, cName) {
    Layout.call(this);
    this.url = url || '';
    this.href = href || '#';
    this.className = cName || 'default';
    this.init();
}
inheritPrototype(ImageMsg, Layout);
ImageMsg.prototype.init = function () {
    this.element = document.createElement("a");
    var oImg = new Image();
    oImg.src = this.url;
    this.element.appendChild(oImg);
    this.element.className = 'img-Layout ' + this.className;
    this.element.href = this.href;
}
ImageMsg.prototype.add = function () {
}
ImageMsg.prototype.getElement = function () {
    return this.element;
}
/***************圖片新聞結束*******************/

6，生成單純的a標簽和內容這種組合

/***************簡單新聞開始*******************/
var ATag = function (text, href, cName) {
    Layout.call(this);
    this.href = href || '#';
    this.className = cName || 'default';
    this.text = text || '';
    this.init();
}
inheritPrototype(ATag, Layout);
ATag.prototype.init = function () {
    this.element = document.createElement("a");
    this.element.href = this.href;
    this.element.innerHTML = this.text;
}
ATag.prototype.add = function () {
}
ATag.prototype.getElement = function () {
    return this.element;
}
/***************簡單新聞結束*******************/

7，生成帶分類的新聞標題

/***************分類新聞開始*******************/
var TypeMsg = function (text, href, type, cName, pos) {
    Layout.call(this);
    this.text = text || '';
    this.href = href || '#';
    this.type = type || '';
    this.pos = pos || 'left';
    this.className = cName || '';
    this.init();
}
inheritPrototype(TypeMsg, Layout);
TypeMsg.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 = this.className;
}
TypeMsg.prototype.add = function () {
}
TypeMsg.prototype.getElement = function () {
    return this.element;
}
/***************分類新聞結束*******************/

8、大功告成，開始調用生成最后的模塊

window.onload = function () {
    var oUlContainer = new UlContainer('Layout', document.body);
    oUlContainer.add(
        new LiTag('default').add(
            new TypeMsg('es6系列教程 - 新的類語法實戰選項卡', 'http://www.cnblogs.com/ghostwu/p/7465066.html', 'js高手之路-ghostwu', 'default', 'left')
        )
    ).add(
        new LiTag('default').add(
            new TypeMsg('設計模式系列課程-單例模式實現模態框', 'http://www.cnblogs.com/ghostwu/p/7460301.html', 'js高手之路-ghostwu', 'default', 'left')
        )
    ).add(
        new LiTag('default').add(
            new TypeMsg('HTML標簽解釋成DOM節點', 'http://www.cnblogs.com/ghostwu/p/7455184.html', 'js高手之路-ghostwu', 'default', 'left')
        )
    ).add(
        new LiTag('default').add(
            new TypeMsg('HTML標簽解釋成DOM節點', 'http://www.cnblogs.com/ghostwu/p/7455184.html', 'js高手之路-ghostwu', 'default', 'left')
        )
    ).add(
        new LiTag('default').add(
            new ATag('構造函數的基本特性與優缺點', 'http://www.cnblogs.com/ghostwu/p/7434609.html', 'js高手之路-ghostwu' )
        )
    ).show();
}