javascript 中模板方法單例的實(shí)現(xiàn)方法

更新時(shí)間：2017年10月17日 09:25:16 作者：res_min

這篇文章主要介紹了javascript 中模板方法單例的實(shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下

javascript 中模板方法單例的實(shí)現(xiàn)方法

模板方法單例

模板方法的定義：父類中定義一組操作算法骨架，將一些實(shí)現(xiàn)步驟延伸到子類中，使得子類可以不改變父類的算法結(jié)構(gòu)的同時(shí)可重新定義算法中某些實(shí)現(xiàn)步驟。

代碼塊

html部分，例如：

<div id="content"></div>

js部分，例如：

  //格式化字符串方法
  function fromateString(str, data) {
   return str.replace(/\{#(\w+)#\}/g, function(match, key){
    return typeof data[key] === undefined ? '' : data[key]
   });
  }
  //基礎(chǔ)導(dǎo)航
  var Nav = function (data) {
   //基礎(chǔ)導(dǎo)航樣式模板
   this.item = '<a href="{#href#}" rel="external nofollow" title="{#title#}">{#name#}</a>';
   //創(chuàng)建字符串
   this.html='';
   for (var i = 0; i < data.length; i++) {
    this.html += fromateString(this.item, data[i]);
   }
   return this.html;
  }
  //帶有信息提示信息導(dǎo)航
  var NumNav = function (data) {
   //消息提醒小心組件模板
   var tpl = '<p>{#num#}</p>';
   for (var i = data.length -1; i >= 0; i--) {
    data[i].name += data[i].name + fromateString(tpl, data[i]);
   }
   return Nav.call(this, data);
  }
  //帶有鏈接地址的導(dǎo)航
  var LinkNav = function (data) {
   //消息提醒小心組件模板
   var tpl = '<span>{#link#}</span>';
   for (var i = data.length -1; i >= 0; i--) {
    data[i].name += data[i].name + fromateString(tpl, data[i]);
   }
   return Nav.call(this, data);
  }

  //測(cè)試帶有信息提示的導(dǎo)航
  var nav = document.getElementById('content');
  nav.innerHTML = NumNav([
   {
    href : 'www.baidu.com',
    title : '百度一下你就知道',
    name : '百度',    
    num : 10,
    link : 'www.baidu.com'
   },
   {
    href : 'www.taobao.com',
    title : '淘寶商城',
    name : '淘寶',    
    num : 2,
    link : 'www.taobao.com'
   },
   {
    href : 'www.qq.com',
    title : '騰訊首頁(yè)',
    name : '騰訊',    
    num : 3,
    link : 'www.qq.com'
   }
  ]);

其實(shí)模板方法模式不僅僅在我們歸一化組件的時(shí)候使用有時(shí)候創(chuàng)建頁(yè)面時(shí)也是很常用到的。通過(guò)上述代碼可以衍生出的靜態(tài)頁(yè)面的封裝以及業(yè)務(wù)邏輯的交互封裝。

如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: