javascript 中模板方法单例的实现方法

javascript 中模板方法单例的实现方法

模板方法单例

模板方法的定义：父类中定义一组操作算法骨架，将一些实现步骤延伸到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。

代码块

html部分，例如：

<div id="content"></div>

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

其实模板方法模式不仅仅在我们归一化组件的时候使用 有时候创建页面时也是很常用到的。通过上述代码可以衍生出的静态页面的封装以及业务逻辑的交互封装。

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • Javascript单例模式的介绍和实例

    Javascript单例模式的介绍和实例

    前言 其实和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式.代理模式.观察者模式等,熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构. 本文将会介绍Javascript中的单例模式,在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个

  • 轻松掌握JavaScript单例模式

    定义:保证一个对象(类)仅有一个实例,并提供一个访问它的全局访问点: 实现原理:利用闭包来保持对一个局部变量的引用,这个变量保存着首次创建的唯一的实例;  主要用于:全局缓存.登录浮窗等只需要唯一一个实例的时候: 一. 为一个非单例模式对象(如:Demo)实现单例模式的方法:  给Demo添加一个静态方法来实现单例: Demo.getSingle = (function(){ var demo = null; return function(name){ if(!demo){ demo = ne

  • javascript单例模式的简单实现方法

    本文实例讲述了javascript单例模式的简单实现方法.分享给大家供大家参考.具体实现方法如下: function SingeInstance(){ if(!SingeInstance._instance) SingeInstance._instance=this; return SingeInstance._instance; } var obj1=new SingeInstance(); var obj2=new SingeInstance(); console.log(obj1===ob

  • 解析Javascript单例模式概念与实例

    解析Javascript单例模式概念与实例

    前言 和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式.代理模式.观察者模式等,熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构. 本文将介绍Javascript模式中较为常见和实用的模式--单例模式,主要分为概念和实例部分.在介绍实例的同时也会对代码中额外的知识点进行讲解. 单例模式概念 首先什么是单例模式?可以这样理解:单例模式旨在保证一个类仅有一个实例,并提供一个全局的访问点. 可能有人还是不太理解单例的概念,那么你可

  • javascript 中模板方法单例的实现方法

    javascript 中模板方法单例的实现方法 模板方法单例 模板方法的定义:父类中定义一组操作算法骨架,将一些实现步骤延伸到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤. 代码块 html部分,例如: <div id="content"></div> js部分,例如: //格式化字符串方法 function fromateString(str, data) { return str.replace(/\{#(\w+)#\}/g,

  • JavaScript 中的单例内置对象Global 与 Math

    目录 前言 Global 1.URL编码方法 2.eval()方法 3.Gobal对象属性 4.window 对象 Math 1.Math 对象属性 2.min()和max()方法 3.舍入方法 Math.ceil(),Math.floor(),Math.round(),Math.fround() random()方法 前言 ECMA-262 对内置对象的定义是“任何由ECMAScript实现提供,与宿主环境无关,并在ECMAScript 程序开始执行时就存在的对象”.这意味着,开发者不用显示的

  • c++中的单例类模板的实现方法详解

     1.什么是单例模式 在架构设计时,某些类在整个系统生命周期中最多只能有一个对象存在 ( Single Instance ).如超市收银系统,其外观主要由显示器(1个).扫描枪(1个).收款箱(1个)组成,在系统正常运行期间这三部分都是唯一存在的:也就是说,显示器.扫描枪.收款箱这三部分都应该有各自的类,并且每个类只能唯一地实例化一个对象,基于这种模式的程序设计,称为单例模式. !!!单例模式只能创建一个对象,且该对象的生命周期伴随系统的整个运行期间. 2.怎么实现单例模式 思考:如何定义一个类

  • Swift中定义单例的方法实例

    什么是单例 单例模式是设计模式中最简单的一种,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象. 单例模式(Singleton Pattern),也叫单子模式,是一种常用的软件设计模式. 在应用这个模式时,单例对象的类必须保证只有一个实例存在. 单实例Singleton设计模式可能是被讨论和使用的最广泛的一个设计模式了,这可能也是面试中问得最多的一个设计模式了.这个设计模式主要目的是想在整个系统中只能出现一个类的实例.这样做当然

  • JavaScript编程的单例设计模讲解

    在Javascript中,单例模式是一种最基本又经常用到的设计模式,可能在不经意间就用到了单例模式. 本文将从最基础的理论开始,讲述单例模式的基本概念和实现,最后用一个例子来讲述单例模式的应用. 理论基础 概念 单例模式,顾名思义就是只有一个实例存在.通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源.如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案. 基本结构 最简单的单例模式起始就是一个对象字面量,它将有关联的属性和方

  • PHP创建单例后台进程的方法示例

    本文实例讲述了PHP创建单例后台进程的方法.分享给大家供大家参考,具体如下: 可以通过如下语句启动一个PHP后台进程: $command = " php script.php "; $pid = exec("nohup $command > /dev/null 2>&1 & echo $!"); nohup表示这个进程独立于创建的用户,可以以守护方式运行. 如果需要这个后台进程是单例运行的,那么可以通过下面的方法来记录/判断进程是否已运行

  • JavaScript中 创建动态 QML 对象的方法

    一.动态创建对象 有两种方法可以从 JavaScript 动态创建对象: 调用 Qt.createComponent() 动态创建 Component 对象 使用 Qt.createQmlObject() 从 QML 字符串创建对象 虽然动态创建的对象可以与其他对象一样使用,但它们在 QML 中没有 id. 1.1.动态创建组件 可以调用它的 createObject() 方法来创建该组件的一个实例.这个函数可以接受两个参数: 第一个是新对象的父对象.父对象可以是图形对象(即 Item 类型)或

  • swift 单例的实现方法及实例

    swift 单例的实现方法及实例 定义Game类,代码如下: public class Game { public var score = 0 public static let dafaultGame = Game() private init(){ } public func addscore(){ score += 10 } } 1.将init方法设置成private 2.定义静态变量 3.赋值给静态变量调用init方法 调用 let game1 = Game.dafaultGame ga

  • JavaScript获得表单target属性的方法

    本文实例讲述了JavaScript获得表单target属性的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <form id="frm1" action="form_action.asp" target="_blank"> First name: <input type="text" name="fnam

  • 详解JavaScript中的4种类型识别方法

    具体内容如下: 1.typeof [输出]首字母小写的字符串形式 [功能] [a]可以识别标准类型(将Null识别为object) [b]不能识别具体的对象类型(Function除外) [实例] console.log(typeof "jerry");//"string" console.log(typeof 12);//"number" console.log(typeof true);//"boolean" console

随机推荐