javascript中模板方法單例

本文主要介紹了javascript 中模板方法單例的實現方法的相關資料,希望透過本文能幫助到大家，需要的朋友可以參考下，希望能幫助到大家。

javascript 中範本方法單例的實作方法

#範本方法單例

範本方法的定義：父類中定義一組操作演算法骨架，將一些實作步驟延伸到子類別中，使得子類別可以不改變父類別的演算法結構的同時可重新定義演算法中某些實作步驟。

程式碼區塊

html部分，例如：

<p id="content"></p>

js部分，例如：

#

  //格式化字符串方法
  function fromateString(str, data) {
   return str.replace(/\{#(\w+)#\}/g, function(match, key){
    return typeof data[key] === undefined ? '' : data[key]
   });
  }
  //基础导航
  var Nav = function (data) {
   //基础导航样式模板
   this.item = &#39;<a href="{#href#}" rel="external nofollow" title="{#title#}">{#name#}</a>&#39;;
   //创建字符串
   this.html=&#39;&#39;;
   for (var i = 0; i < data.length; i++) {
    this.html += fromateString(this.item, data[i]);
   }
   return this.html;
  }
  //带有信息提示信息导航
  var NumNav = function (data) {
   //消息提醒小心组件模板
   var tpl = &#39;<p>{#num#}</p>&#39;;
   for (var i = data.length -1; i >= 0; i--) {
    data[i].name += data[i].name + fromateString(tpl, data[i]);
   }
   return Nav.call(this, data);
  }
  //带有链接地址的导航
  var LinkNav = function (data) {
   //消息提醒小心组件模板
   var tpl = &#39;<span>{#link#}</span>&#39;;
   for (var i = data.length -1; i >= 0; i--) {
    data[i].name += data[i].name + fromateString(tpl, data[i]);
   }
   return Nav.call(this, data);
  }

  //测试带有信息提示的导航
  var nav = document.getElementById(&#39;content&#39;);
  nav.innerHTML = NumNav([
   {
    href : &#39;www.baidu.com&#39;,
    title : &#39;百度一下你就知道&#39;,
    name : &#39;百度&#39;,    
    num : 10,
    link : &#39;www.baidu.com&#39;
   },
   {
    href : &#39;www.taobao.com&#39;,
    title : &#39;淘宝商城&#39;,
    name : &#39;淘宝&#39;,    
    num : 2,
    link : &#39;www.taobao.com&#39;
   },
   {
    href : &#39;www.qq.com&#39;,
    title : &#39;腾讯首页&#39;,
    name : &#39;腾讯&#39;,    
    num : 3,
    link : &#39;www.qq.com&#39;
   }
  ]);

其實模板方法模式不僅在我們歸一化元件的時候使用有時候創建頁面時也是很常用到的。透過上述程式碼可以衍生出的靜態頁面的封裝以及業務邏輯的互動封裝。

相關推薦：

Java經典設計模式中關於範本方法模式定義與用法的程式碼實例

PHP模板方法模式的實例程式碼分享

模板方法模式及其php實作

以上是javascript中模板方法單例的詳細內容。更多資訊請關注PHP中文網其他相關文章！