이 글은 주로 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 = '<a href="{#href#}" rel="external nofollow" title="{#title#}">{#name#}</a>'; //创建字符串 this.html=''; for (var i = 0; i < data.length; i++) { this.html += fromateString(this.item, data[i]); } return this.html; } //带有信息提示信息导航 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); } //带有链接地址的导航 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); } //测试带有信息提示的导航 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 : '腾讯首页', name : '腾讯', num : 3, link : 'www.qq.com' } ]);
실제로 템플릿 메서드 패턴은 구성 요소를 정규화할 때뿐만 아니라 때로는 다음과 같은 경우에도 사용됩니다. 페이지를 만드는 데 일반적으로 사용됩니다. 위의 코드는 정적 페이지의 캡슐화와 비즈니스 로직의 대화형 캡슐화를 파생할 수 있습니다.
관련 권장 사항:
Java 클래식 디자인 패턴의 템플릿 메서드 패턴 정의 및 사용에 대한 코드 예제
위 내용은 자바스크립트의 템플릿 메소드 싱글톤의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!