JavaScript의 템플릿 메소드 싱글톤 구현 예

이 글은 주로 javascript의 템플릿 메소드 싱글턴 구현 방법에 대한 관련 정보를 소개합니다. 도움이 필요한 친구들은

Javascript의 템플릿 메소드 싱글턴 구현 방법

을 참조하세요. 메소드 싱글톤

템플릿 메소드 정의: 상위 클래스에서 일련의 연산 알고리즘 뼈대를 정의하고 일부 구현 단계를 하위 클래스로 확장하여 하위 클래스가 상위 클래스의 알고리즘 구조를 변경하지 않고 알고리즘을 재정의할 수 있도록 합니다. 구현 단계.

code block

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;
   }
  ]);

실제로 템플릿 메서드 패턴은 구성 요소를 정규화할 때뿐만 아니라 때로는 다음과 같은 경우에도 사용됩니다. 페이지를 만드는 데 일반적으로 사용됩니다. 위의 코드는 정적 페이지의 캡슐화와 비즈니스 로직의 대화형 캡슐화를 파생할 수 있습니다.

위 내용은 JavaScript의 템플릿 메소드 싱글톤 구현 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!