Comment implémenter la méthode de modèle singleton en JavaScript-js tutoriel-php.cn

Comment implémenter la méthode de modèle singleton en JavaScript

黄舟

Libérer： 2017-10-18 10:56:30

original

1210 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur la méthode d'implémentation de la méthode modèle singleton en javascript. J'espère que cet article pourra aider tout le monde. Les amis dans le besoin peuvent se référer à

Exemple de méthode modèle singleton en javascript. méthode d'implémentation

Méthode modèle singleton

Définition de la méthode modèle : définir un ensemble de squelettes d'algorithmes d'opération dans la classe parent et étendre certaines étapes d'implémentation à In la sous-classe, la sous-classe peut redéfinir certaines étapes de mise en œuvre dans l'algorithme sans modifier la structure de l'algorithme de la classe parent.

Bloc de code

partie html, par exemple :

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

Copier après la connexion

partie js, par exemple :

  //格式化字符串方法
  function fromateString(str, data) {
   return str.replace(/\{#(\w+)#\}/g, function(match, key){
    return typeof data[key] === undefined ? &#39;&#39; : 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;
   }
  ]);

Copier après la connexion

En fait, le modèle de méthode modèle n'est pas seulement utilisé lorsque nous normalisons des composants, mais est également très couramment utilisé lors de la création de pages. Le code ci-dessus peut dériver l'encapsulation de pages statiques et l'encapsulation interactive de la logique métier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!