組合模式 寄生組合繼承實戰新聞列表

2022-09-11 12:39:21 字數 2908 閱讀 5505

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

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

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

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

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

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

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

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

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

這個是乙個無序列表加乙個a標籤，非常簡單的**(模組)

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

//父類開始


var layout = function () 


layout.prototype = ,


add: function () ,


getelement: function () 


}//父類結束
this.element用來儲存當前的元素，this.children用來儲存當前元素下面的子元素

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

add方法：把子節點新增在父節點下面

getelement: 獲取當前的節點

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

function object(o) ;


g.prototype = o;


return new g();


}function inheritprototype(subobj, superobj)
3，由於這個新聞模組最外層是ul,所以我們要封裝乙個生成ul元素的容器類

//列表容器類開始


var ulcontainer = function (id, parent) 


inheritprototype(ulcontainer, layout);


ulcontainer.prototype.init = function () 


ulcontainer.prototype.add = function (child) 


ulcontainer.prototype.getelement = function () 


ulcontainer.prototype.show = function () 


//列表容器類結束
採用寄生組合繼承，把父類的方法重寫，父類的屬性通過子類的借用建構函式複製到子類例項上，新增了乙個show方法，這個方法的目的就是，把最終的模板顯示出來

4、生成li元素

//列表項li開始


var litag = function (cname) 


inheritprototype(litag, layout);


litag.prototype.init = function () 


litag.prototype.add = function (child) 


litag.prototype.getelement = function () 


//列表項li結束
5、生成與a標籤組合的方式

//新聞開始


var imagemsg = function (url, href, cname) 


inheritprototype(imagemsg, layout);


imagemsg.prototype.init = function () 


imagemsg.prototype.add = function () 


imagemsg.prototype.getelement = function () 


//新聞結束
6，生成單純的a標籤和內容這種組合

//簡單新聞開始


var atag = function (text, href, cname) 


inheritprototype(atag, layout);


atag.prototype.init = function () 


atag.prototype.add = function () 


atag.prototype.getelement = function () 


//簡單新聞結束
7，生成帶分類的新聞標題

//分類新聞開始


var typemsg = function (text, href, type, cname, pos) 


inheritprototype(typemsg, layout);


typemsg.prototype.init = function ()  else 


this.element.href = this.href;


this.element.classname = this.classname;


}typemsg.prototype.add = function () 


typemsg.prototype.getelement = function () 


//分類新聞結束
8、大功告成，開始呼叫生成最後的模組

window.onload = function ()

寄生組合繼承

核心 通過寄生方式，砍掉父類的例項屬性，這樣，在呼叫兩次父類的構造的時候，就不會初始化兩次例項方法 屬性，避免的組合繼承的缺點 既然要實現繼承定義乙個父類 定義乙個動物類 function animal name super.prototype animal.prototype 例項作為子類的原型 ...

組合繼承和寄生式組合繼承

組合繼承綜合了原型鏈和盜用建構函式，解決了原型內引用值共享的問題，以及子類在例項化時不能給父類建構函式傳參的問題。缺點 呼叫了兩次父類建構函式影響效率，而且子類的原型物件上也擁有了不必要也用不上的屬性，即父類建構函式的例項屬性。這樣的話子類的例項物件如果刪除某個屬性，這個屬性仍然可以訪問到，因為它可...

寄生式組合繼承

function box f 這樣直接將原型指向乙個物件,會將原有的constructor覆蓋 box.prototype 因此這裡我們使用定義屬性,重新穿件這個constructor的指向 object.defineproperty box.prototype,constructor functi...