Vorlagenmethode Singleton in Javascript

In diesem Artikel werden hauptsächlich relevante Informationen zur Implementierungsmethode der Singleton-Vorlage in JavaScript vorgestellt. Ich hoffe, dass dieser Artikel allen helfen kann.

Implementierungsmethode der Template-Methode Singleton in Javascript

Template-Methode Singleton

Definition der Template-Methode: übergeordnete Klasse Definieren Sie a Satz von Betriebsalgorithmusgerüsten und erweitern einige Implementierungsschritte auf Unterklassen, sodass Unterklassen einige Implementierungsschritte im Algorithmus neu definieren können, 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.

Verwandte Empfehlungen:

Codebeispiele für die Definition und Verwendung von Vorlagenmethodenmustern in klassischen Java-Designmustern

Beispielcode-Sharing des PHP-Vorlagenmethodenmusters

Vorlagenmethodenmuster und seine PHP-Implementierung

Das obige ist der detaillierte Inhalt vonVorlagenmethode Singleton in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!