javascript文本模板用法实例

2024-08-17 13:34:22

本文实例讲述了javascript文本模板用法。分享给大家供大家参考。具体如下：

这是我参考Prism.js算法写的一个小功能，没什么可说的，作为程序猿看例子应该秒懂。

字符串模板引擎类：

/*class*/StringTemplate = function (
/* Optional {patt: RegExp, clPatt: RegExp}*/pattern) {
  if (!!pattern) {
    this.patt = pattern.patt;
    this.clPatt = pattern.clPatt;
  } else {
    this.patt = /%\{\s*[\w\-]+\s*\}/g;
    this.clPatt = /(^%\{\s*)|(\s*\}$)/g;
  }
  this.format = function(val, map) {
    var ls = [];
    var res;
    var prevEnd = 0;
    while ((res = this.patt.exec(val)) != null) {
      var va = res[0];
      var start = val.substr(prevEnd, res.index - prevEnd);
      prevEnd = res.index + va.length;
      ls.push(start);
      var vac = va.replace(this.clPatt, "");
      ls.push(map[vac]);
    }
    ls.push(val.substr(prevEnd, val.length));
    return ls.join("");
  }
}

使用方式：

var str = new StringTemplate().format("你好%{userName }, 欢迎再次登陆%{systemName}",{userName: "小明", systemName: "jb51"});
//str="你好小明, 欢迎再次登陆jb51";

希望本文所述对大家的javascript程序设计有所帮助。

Json2Template.js 基于jquery的插件绑定JavaScript对象到Html模板中

复制代码代码如下: $("#div").bindTemplate({ source : json object, template : null | $("#template") | "<div>{{object}}</div>", dateFormat : "d.m.y", tagOpen : "{{", tagClose : "}}" }); bindTem
javascript轻量级模板引擎juicer使用指南

使用方法编译模板并根据数据立即渲染出结果 juicer(tpl, data); 仅编译模板暂不渲染,返回一个可重用的编译后的函数 var compiled_tpl = juicer(tpl); 根据给定的数据对之前编译好的模板进行渲染 var complied_tpl = juicer(tpl); var html = complied_tpl.render(data); 注册/注销自定义函数(对象) juicer.register('function_name', function); ju
JavaScript模板引擎用法实例

本文实例讲述了JavaScript模板引擎用法.分享给大家供大家参考.具体如下: 这里介绍的这个模板引擎写得短小精悍,非常值得一看 tmpl.js文件如下: // Simple JavaScript Templating // John Resig - http://ejohn.org/ - MIT Licensed (function() { var cache = {}; this.tmpl = function tmpl(str, data) { // Figure out if we'r
laytpl 精致巧妙的JavaScript模板引擎

laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能.所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又或者不是,但毋庸置疑的是,laytpl的确在用最轻量的方式呈现给世人.如果你从未接触这方面的应用,没关系,下面的讲述将会让你迫不及待地选择laytpl,从此更好地把握页面的数据渲染,走上人生巅峰! laytpl优势 •性能卓绝,执行速度比号称性能王的artTemplate.doT还
JavaScript模板入门介绍

比如要在一个列表中利用ajax插入一个li的时候,我会直接把数据跟html标签拼接成一句完整的html,然后插入到ul中.无论数据是从服务器端拿回的,或者是从用户的input输入中拿到的--无论哪种方法都是一样. 这个拼接过程放在JavaScript文件中,显得非常不优雅.如果还把style也放在JavaScript中,那数据.结构还有样式整个就是一锅粥了,要维护这样的代码会让人想自杀.最过分的就是把页面上最终要生成的HTML都直接放在服务器端,ajax吐出数据就包含了<li>标签,这样的页面
JavaScript 动态添加表格行使用模板、标记

对于复杂的操作情况,比如:添加一行之后,在这一行上还要进行相关的操作会显得有些吃力:本人比较喜欢表现层使用模板.标记填充数据的做法,于是自己做手做了个小组件,与大家一起分享. 组件运行截图: 设计思路: 在Table的thead中加入一行隐藏的行,当要添加一行时,复制一次隐藏的行,再将实例数据填充到这一行中相应的位置,填充完毕之后,再将这一行加到表格中去,整个操作完成. 模板:隐藏的行即相当于模板,当需要时复制一次模板. 标记:将模板行复制出来后,该如何填充数据? 网上比较多的组件的做法是,传递
Javascript模板技术

/***Template.class.js***/ function Template() { this.classname="Template"; this.debug=false; this.file=new HashMap(); this.root=""; this.varkeys=new HashMap(); this.varvals=new HashMap(); this.unknowns="remove"; this.halt_o
常用的JavaScript模板引擎介绍

最近工作内容慢慢接近我的理想化(web前端),所以关注比较多的是前端性能!后台同事介绍使用ajax模板引擎,提高渲染速度! 下面介绍几款 JavaScript 模板引擎 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简单易用! 2. doT.js doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎. 3. jSmart jSmart 是著名的 PHP 模板引擎 S
高性能JavaScript模板引擎实现原理详解

随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter.淘宝网.新浪微博.腾讯QQ空间.腾讯微博等大型网站中均能看到它们的身影. 本文将用最简单的示例代码描述现有的 javascript 模板引擎
javascript文本模板用法实例

本文实例讲述了javascript文本模板用法.分享给大家供大家参考.具体如下: 这是我参考Prism.js算法写的一个小功能,没什么可说的,作为程序猿看例子应该秒懂. 字符串模板引擎类: /*class*/StringTemplate = function ( /* Optional {patt: RegExp, clPatt: RegExp}*/pattern) { if (!!pattern) { this.patt = pattern.patt; this.clPatt = patter
javascript闭包(Closure)用法实例简析

本文实例讲述了javascript闭包(Closure)用法.分享给大家供大家参考,具体如下: closure被翻译成"闭包",感觉这东西被包装的太学术化.下面参考书本和网上资源简单探讨一下(理解不当之处务请留意). 1.什么是闭包官方的回答:所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 看了上面的定义,如果你不是高手,我坚信你会和我一样愤怒的质问:这tmd是人话吗? 要理解闭包,还是代码
javascript原型模式用法实例详解

本文实例讲述了javascript原型模式用法.分享给大家供大家参考.具体分析如下: 一般在了解了工厂模式和构造函数模式的弊端之后,就知道为什么需要原型模式了原型模式i的定义:每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.比如在构造函数模型中sayInformation()方法,如果声明两个实例就要构造两次sayInformation方法,但是声明两次是没有必要的,这就是为什么有原型模式的出现(尼玛,网上那些博客
javascript中attachEvent用法实例分析

本文实例讲述了javascript中attachEvent用法.分享给大家供大家参考.具体分析如下: 一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.onclick=method1 obj.onclick=method2 obj.onclick=method3 如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,
javascript中this用法实例详解

本文实例讲述了javascript中this用法.分享给大家供大家参考,具体如下: JavaScript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式.函数有以下几种调用方式:作为对象方法调用.作为函数调用.作为构造函数调用.apply或call调用. 对象方法调用作为对象方法调用的时候,this会被绑定到该对象. var point = { x : 0, y : 0, moveTo : function(x, y) { this.x = this
Javascript中Array用法实例分析

本文实例讲述了Javascript中Array用法.分享给大家供大家参考.具体分析如下: JavaScript中的Array对象就是数组,首先是一个动态数组,而且是一个像C#.Java中"数组.List.HashMap/Dictionary"等的超强综合体. Array数组使用方式: 例1: var citys = new Array(); //创建数组对象,无需初始化长度,动态 citys[0] = '上海'; citys[1] ='北京'; citys[2] = '深圳'; fo
JavaScript数据库TaffyDB用法实例分析

本文实例讲述了JavaScript数据库TaffyDB用法.分享给大家供大家参考.具体如下: TaffyDB 是一个免费开源的 JavaScript 库,用于在 Web 上实现一个轻量级的数据访问层,也就是一个简单的数据库. 数据定义: var friends = new TAFFY( [ {name:"Bob", gender:"M", married:"No", age:25, state:"NY", favorite_f
JavaScript对象反射用法实例

本文实例讲述了JavaScript对象反射用法.分享给大家供大家参考.具体如下: 这里讲述JavaScript对象反射用法,涉及反射DOM对象和自定义对象 <html> <head> <title>JavaScript反射工具</title> <style type="text/css"> #show{ width:400px;height:300px; border:red solid 1px; overflow:scrol
javascript运动框架用法实例分析(实现放大与缩小效果)

本文实例讲述了javascript运动框架用法.分享给大家供大家参考,具体如下: 该运动框架可以实现多物体任意值运动运行效果截图如下: 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>运动框架</title> <style> #div1{ width:100px; height:100px; background:red;
javascript三元运算符用法实例

三元运算符用法实例: 如名字表示的三元运算符需要三个操作数. 语法是条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2.满足条件时结果1否则结果2. 复制代码代码如下: <script type="text/javascript"> var b=5; (b == 5) ? a="true" : a="false"; document.write(" --------

javascript文本模板用法实例

相关推荐

随机推荐