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

来源:http://www.cnblogs.com/ghostwu/archive/2017/09/04/7475756.html
-Advertisement-
Play Games

所謂組合模式，就是把一堆結構分解出來，組成在一起，現實中很多這樣的例子，如： 1、肯德基套餐就是一種組合模式， 比如雞腿堡套餐，一般是是由一個雞腿堡，一包薯條，一杯可樂等組成的 2、組裝的台式機同理，由主板，電源，記憶體條，顯卡， 機箱，顯示器，外設等組成的 把一個成型的產品組成部件，分成一個個獨立的 ...


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

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

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

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

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

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

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

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

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

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

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

 1 /***************父類開始***********************/
 2 var Layout = function () {
 3     this.children = [];
 4     this.element = null;
 5 }
 6 Layout.prototype = {
 7     init: function () {
 8         throw new Error('該方法需要重寫');
 9     },
10     add: function () {
11         throw new Error('該方法需要重寫');
12     },
13     getElement: function () {
14         throw new Error('該方法需要重寫');
15     }
16 }
17 /***************父類結束***********************/

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

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

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

getElement: 獲取當前的節點

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

 1 function object(o) {
 2     var G = function () {
 3     };
 4     G.prototype = o;
 5     return new G();
 6 }
 7 function inheritPrototype(subObj, superObj) {
 8     var proObj = object(superObj.prototype); //複製父類superObj的原型對象
 9     proObj.constructor = subObj; //constructor指向子類構造函數
10     subObj.prototype = proObj; //再把這個對象給子類的原型對象
11 }

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

 1 /***************列表容器類開始***********************/
 2 var UlContainer = function (id, parent) {
 3     Layout.call(this);
 4     this.id = id;
 5     this.parent = parent;
 6     this.init();
 7 }
 8 inheritPrototype(UlContainer, Layout);
 9 UlContainer.prototype.init = function () {
10     this.element = document.createElement("ul");
11     this.element.id = this.id;
12     this.element.className = 'news-list';
13 }
14 UlContainer.prototype.add = function (child) {
15     this.children.push(child);
16     this.element.appendChild(child.getElement());
17     return this;
18 }
19 UlContainer.prototype.getElement = function () {
20     return this.element;
21 }
22 UlContainer.prototype.show = function () {
23     this.parent.appendChild(this.element);
24 }
25 /***************列表容器類結束***********************/

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

4、生成li元素

 1 /***************列表項li開始***********************/
 2 var LiTag = function (cName) {
 3     Layout.call(this);
 4     this.className = cName || '';
 5     this.init();
 6 }
 7 inheritPrototype(LiTag, Layout);
 8 LiTag.prototype.init = function () {
 9     this.element = document.createElement("li");
10     this.element.className = this.className;
11 }
12 LiTag.prototype.add = function (child) {
13     this.children.push(child);
14     this.element.appendChild(child.getElement());
15     return this;
16 }
17 LiTag.prototype.getElement = function () {
18     return this.element;
19 }
20 /***************列表項li結束***********************/

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

 1 /***************圖片新聞開始*******************/
 2 var ImageMsg = function (url, href, cName) {
 3     Layout.call(this);
 4     this.url = url || '';
 5     this.href = href || '#';
 6     this.className = cName || 'default';
 7     this.init();
 8 }
 9 inheritPrototype(ImageMsg, Layout);
10 ImageMsg.prototype.init = function () {
11     this.element = document.createElement("a");
12     var oImg = new Image();
13     oImg.src = this.url;
14     this.element.appendChild(oImg);
15     this.element.className = 'img-Layout ' + this.className;
16     this.element.href = this.href;
17 }
18 ImageMsg.prototype.add = function () {
19 }
20 ImageMsg.prototype.getElement = function () {
21     return this.element;
22 }
23 /***************圖片新聞結束*******************/

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

 1 /***************簡單新聞開始*******************/
 2 var ATag = function (text, href, cName) {
 3     Layout.call(this);
 4     this.href = href || '#';
 5     this.className = cName || 'default';
 6     this.text = text || '';
 7     this.init();
 8 }
 9 inheritPrototype(ATag, Layout);
10 ATag.prototype.init = function () {
11     this.element = document.createElement("a");
12     this.element.href = this.href;
13     this.element.innerHTML = this.text;
14 }
15 ATag.prototype.add = function () {
16 }
17 ATag.prototype.getElement = function () {
18     return this.element;
19 }
20 /***************簡單新聞結束*******************/

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

 1 /***************分類新聞開始*******************/
 2 var TypeMsg = function (text, href, type, cName, pos) {
 3     Layout.call(this);
 4     this.text = text || '';
 5     this.href = href || '#';
 6     this.type = type || '';
 7     this.pos = pos || 'left';
 8     this.className = cName || '';
 9     this.init();
10 }
11 inheritPrototype(TypeMsg, Layout);
12 TypeMsg.prototype.init = function () {
13     this.element = document.createElement("a");
14     if (this.pos === 'left') {
15         this.element.innerHTML = '[' + this.type + '] ' + this.text;
16     } else {
17         this.element.innerHTML = this.text + ' [' + this.type + ']';
18     }
19     this.element.href = this.href;
20     this.element.className = this.className;
21 }
22 TypeMsg.prototype.add = function () {
23 }
24 TypeMsg.prototype.getElement = function () {
25     return this.element;
26 }
27 /***************分類新聞結束*******************/

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

 1 window.onload = function () {
 2     var oUlContainer = new UlContainer('Layout', document.body);
 3     oUlContainer.add(
 4         new LiTag('default').add(
 5             new TypeMsg('es6系列教程 - 新的類語法實戰選項卡', 'http://www.cnblogs.com/ghostwu/p/7465066.html', 'js高手之路-ghostwu', 'default', 'left')
 6         )
 7     ).add(
 8         new LiTag('default').add(
 9             new TypeMsg('設計模式系列課程-單例模式實現模態框', 'http://www.cnblogs.com/ghostwu/p/7460301.html', 'js高手之路-ghostwu', 'default', 'left')
10         )
11     ).add(
12         new LiTag('default').add(
13             new TypeMsg('HTML標簽解釋成DOM節點', 'http://www.cnblogs.com/ghostwu/p/7455184.html', 'js高手之路-ghostwu', 'default', 'left')
14         )
15     ).add(
16         new LiTag('default').add(
17             new TypeMsg('HTML標簽解釋成DOM節點', 'http://www.cnblogs.com/ghostwu/p/7455184.html', 'js高手之路-ghostwu', 'default', 'left')
18         )
19     ).add(
20         new LiTag('default').add(
21             new ATag('構造函數的基本特性與優缺點', 'http://www.cnblogs.com/ghostwu/p/7434609.html', 'js高手之路-ghostwu' )
22         )
23     ).show();
24 }

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS知識點：IE瀏覽器的hasLayout，IE低版本的bug根源
    什麼是hasLayout？ hasLayout是IE特有的一個屬性。很多的ie下的css bug都與其息息相關。在ie中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。當一個元素的hasLayout屬性值為true時，它負責對自己和可能的子孫元素進行尺寸計算和 ...
  • 基於JS的身份證驗證（完整版）
    var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ]; // 加權因數 var ValideCode = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ]; // 身份證驗證位值.10代表X f... ...
  • js if for 詳解 獲取元素方式 及一些js 基礎知識
    ##獲取元素的新方法## --document.querySelector('Css Selector{css選擇器}') 接收一個css選擇器（通配，群組，類，包含，id。。。。等） 若這個選擇器對應的是一組元素，就找第0個，註意js從0開始計數。CSS計數從一開始。 ##判斷## 當同一種操作有 ...
  • 【前端】前端筆試題 [1]
    1. 請用div+css寫出文字水平垂直居中，圖片水平垂直居中的樣式及佈局。2. 請用div+css寫出左側固定(width：200px)，右側自適應的頁面佈局。3. 請寫出至少五種css瀏覽器相容性的寫法。4. jquery的綁定事件有幾種方式 ，請舉例說明其優缺點。5. 請寫出至少三種js瀏覽器 ...
  • 【前端】CSS3的calc()使用
    calc()對大家來說，或許很陌生，不太會相信calc()是css中的部分。因為看其外表像個函數，既然是函數為何又出現在CSS中呢？這一點也讓我百思不得其解，今天有一同事告訴我，說CSS3中有一個屬性能實現自適應的佈局，首先讓我想到的是box-sizing，但跟我說還可以計算，這讓我不得不想起cal ...
  • web前端面試題
    與大家分享一下最近所接觸的面試題 1.對WEB標準以及W3C的理解與認識 標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要 ...
  • 獲取非行間樣式
    //獲取非行間樣式的方法function getCss(obj,arr){ if(obj.currentStyle){ return obj.currentStyle[arr]; }else{ return getComputedStyle(obj,false)[arr]; }};//獲取class ...
  • html+css3模擬心的跳動
    模擬心的跳動 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類