Implementierungsbeispiel der Template-Methode Singleton in JavaScript

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Implementierungsmethode der Template-Methode Singleton in Javascript vor. Ich hoffe, dieser Artikel kann allen helfen, die Hilfe benötigen.

Beispiel für die Template-Methode Singleton Implementierungsmethode

Vorlagenmethode Singleton

Definition der Vorlagenmethode: Definieren Sie eine Reihe von Operationsalgorithmus-Skeletten in der übergeordneten Klasse und erweitern Sie einige Implementierungsschritte auf In Die Unterklasse kann einige Implementierungsschritte im Algorithmus neu definieren, ohne die Algorithmusstruktur der übergeordneten Klasse zu ändern.

Codeblock

HTML-Teil, zum Beispiel:

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

JS-Teil, zum Beispiel:

  //格式化字符串方法
  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;
   }
  ]);

Tatsächlich wird das Vorlagenmethodenmuster nicht nur bei der Normalisierung von Komponenten verwendet, sondern auch sehr häufig beim Erstellen von Seiten. Der obige Code kann die Kapselung statischer Seiten und die interaktive Kapselung der Geschäftslogik ableiten.

Das obige ist der detaillierte Inhalt vonImplementierungsbeispiel der Template-Methode Singleton in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!