JS模板实现方法

概述


我们在使用JS渲染DOM时，一般使用字符串创建DOM然后附加到父元素上，如果附加的DOM是动态易变的，那需要在函数中写大量逻辑。如果在控件实现过程中，这带来的问题更为严重。

解决这个问题的常见解决方案是是使用模板，作为配置项传入控件，实现数据和渲染的分离。具体的实现方法有以下方法：

  1. 字符串替换，使用正则匹配将数据替换进字符串中。
  2. 渲染函数，函数返回字符串。
  3. 模板引擎，可以将执行字符串中的函数（内置或者自定义的）

替换（Substitute）

字符串替换是最简单的实现模板的方式，看一下具体的实现：

1. 定义替换函数

代码如下:

/**

* 替换字符串中的字段.

* @param {String} str 模版字符串

* @param {Object} o json data

* @param {RegExp} [regexp] 匹配字符串的正则表达式

*/

function substitute(str,o,regexp){

return str.replace(regexp || /\\?\{([^{}]+)\}/g, function (match, name) {

return (o[name] === undefined) ? '' : o[name];

});

}

2.使用配置项：

代码如下:

var config = {

data : {value : '123',text:'abc'},

template : '<label>{text}</label><input type="text" value="{value}"/>'

};

3. 在创建DOM的过程中我们这样调用：

代码如下:

var str = substitute(template,data);

$(str).appendTo('body');

通过以上示例，我们就完成了数据和字符串的解耦，可以灵活的用在控件中，当前大多数JS框架都提供了此种方式的模板。

在此基础上可以有下面的扩展，感兴趣的可以自己去实现：

1. 使用数字代替参数名：

如 '<label>{0}</label><input type="text" value="{1}"/>'

2. 嵌套使用对象属性：

如 '<label>{obj.name}</label><input type="text" value="{obj.value}"/>'

优点：实现简单，易于理解。

缺点：只能进行简单的数据结构，无法处理循环、条件语句。

渲染方法（Render）

我们可以在渲染函数中处理非常复杂的逻辑，可以将渲染函数作为参数传入配置项。

配置项：

代码如下:

var config = {

data : [{value : '0',text:'abc'},{value : '1',text:'bcd'}],

renderer : function(obj){

if(obj.value === '0'){

return obj.text;

}else{

return '<img title="' + obj.text + '" src=""/>';

}

}

};

在使用时：

代码如下:

for(var i = 0 ; i< data.length; i++){

var obj = data[i],

str = config.renderer(obj);

$(str).appendTo('body');

}

在处理循环，条件语句时，这是一种很好的解决方案。

优点：实现相对简单，实现灵活，能满足复杂数据结构，易于调试

缺点：

  1. 渲染函数作为配置项，不易理解。
  2. 函数较长时，使配置项臃肿。
  3. 每个场景都需要自己实现渲染函数。

模板引擎（XTemplate）

每一个JS UI库都会有一个功能强大的模板引擎，一个模板引擎需要实现以下功能：

1. 字符串替换

2. 处理复杂语句 条件、循环

3. 使用内嵌函数

4. 允许用户传入自定义函数

目前的模板引擎有2种常见的实现方式：

1. 使用正则分析字符串，执行其中的特殊语句逻辑，替换对应的数据

我们来看一下KISSY 模板的一个实例：

'Hello, {{#each users}}{{#if _ks_value.show}}{{_ks_value.name}}{{/if}}{{/each}}.'

上面这是一个模板，可以处理循环、条件语句。

2. 对字符串进行语法分析，生成语法树，执行替换对应的标签或数据。

下面是Ext的 xtemplate使用方式：

代码如下:

var tpl = new Ext.XTemplate(
'<p>{name}\'s favorite beverages:</p>',
'<tpl for="drinks">',
'<div> - {.}</div>',
'</tpl>'
);
tpl.overwrite(panel.body, data);

优点：功能强大，灵活性高

缺点：使用复杂，更加不易理解。不便于调试。

问题思考

1. 控件中使用模板，可以将数据和DOM分离，但是如果一个控件中包含大量的模板，会增加使用者的工作量，而且不易于调试，需要权衡使用。

2. 如果大量控件使用相同的模板，和相同的数据结构，每个控件单独配置不便于使用，更好的方案是允许父控件配置模板。

赞 (0)

相关推荐

  • 探究Javascript模板引擎mustache.js使用方法

    我们将为大家详解Mustache.js轻量级JavaScript模版引擎使用方法. 简单示例 function show(t) { $("#content").html(t); } var view = { title: 'YZF', cacl: function () { return 6 + 4; } }; $("#content").html(Mustache.render("{{title}} spends {{cacl}}", view

  • AngularJS入门教程（二）：AngularJS模板

    是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: 复制代码 代码如下: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.你可以到GitHub去

  • JavaScript 动态添加表格行 使用模板、标记

    JavaScript 动态添加表格行 使用模板、标记

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

  • 详解Javascript模板引擎mustache.js

    详解Javascript模板引擎mustache.js

    本文总结它的使用方法和一些使用心得,内容不算很高深,纯粹是入门内容,看看即可.不过要是你还没有用过此类的javascript引擎库,那么本文还是值得你一读的,相信在你了解完它强大的功能和简单用法之后,一定会迫不及待地将之用于你的工作当中. 1. 从一个简单真实的需求讲起 目前公司做了一个统一的开发平台,后台封装了MVC的接口和数据增删改查的接口,前端我自己用bootstrap+手写各类组件的方式弄了一套开发框架:集成了CAS,在CAS的基础上,首先做了一套统一权限管理系统,这个系统是我们开发平台

  • 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 字符串模板的简单实现

    这是源于两年前,当我在做人生中第一个真正意义上的网站时遇到的一个问题 该网站采用前后端分离的方式,由后端的 REST 接口返回 JSON 数据,再由前端渲染到页面上. 同许多初学 Javascript 的菜鸟一样,起初,我也是采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯.每写一个变量就要断一下,插入一个 + 和 ".十分容易出错. 无法重用.HTML 片段都是离散化的数据,难以对其中

  • JS模板实现方法

    概述 我们在使用JS渲染DOM时,一般使用字符串创建DOM然后附加到父元素上,如果附加的DOM是动态易变的,那需要在函数中写大量逻辑.如果在控件实现过程中,这带来的问题更为严重. 解决这个问题的常见解决方案是是使用模板,作为配置项传入控件,实现数据和渲染的分离.具体的实现方法有以下方法: 字符串替换,使用正则匹配将数据替换进字符串中. 渲染函数,函数返回字符串. 模板引擎,可以将执行字符串中的函数(内置或者自定义的) 替换(Substitute) 字符串替换是最简单的实现模板的方式,看一下具体的

  • 仿服务器端脚本方式的JS模板实现方法

    http://bbs.51js.com/thread-65160-1-1.html <html xmlns="http://www.w3.org/1999/xht... <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jssp演示</title> <script languag

  • smarty中js的调用方法示例

    本文实例讲述了smarty中js的调用方法,分享给大家供大家参考.具体方法分析如下: 一.问题: 有时候,在smarty中,包含js的时候,整个页面就不会显示,而程序员往往在页面中找错误,程序页面,模板页面检查了多次都没有错误,就很郁闷了. 二.解决办法: 把模板页面中的js代码拷贝出来放在新建的js文件中,然后在包含到模板页面里面,如: 复制代码 代码如下: {popup_init src="css/commen.js"} 这样一来,问题就解决了. 希望本文所述对大家的PHP程序设计

  • ThinkPHP模版中导入CSS和JS文件的方法

    本文实例讲述了ThinkPHP模版中导入CSS和JS文件的方法.分享给大家供大家参考.具体方法如下: 常用方法 1. css使用link 2. js使用src 用tp自己的导入标签import 导入Public文件夹下面的Js目录中的test.js文件,import标签可以省略type属性,默认就是js的文件 复制代码 代码如下: <import type='js' file='Js.test'> <import type='css' file='Css.test'> 不在Publ

  • yii，CI，yaf框架+smarty模板使用方法

    本文实例讲述了yii,CI,yaf框架+smarty模板使用方法.分享给大家供大家参考,具体如下: 最近折腾了框架的性能测试,其中需要测试各个模板跟smarty配合的性能,所以折腾了一桶,现总结一下.之前已经写过kohana框架+smarty模板,这里不再重复了. 一.yii框架+smarty模板 yii是覆盖了viewRenderer组件. 1.1,下载yii框架并解压,下载smarty框架并解压,将smarty/libs文件夹拷到yii框架application/protected/vend

  • xtemplate node.js 的使用方法实例解析

    工程下安装XTemplate并使用它的方法实例说明: 1.安装xtpl 复制代码 代码如下: npm install xtpl xtemplate --save 2.在views目录添加test.xtpl文件,其内容为 this is {{title}}! 4.集成到Express中,只需要在app.js中,设置模板引擎即可 var print = require('./routes/print'); //此行代码放入app.js的require 声明代码段下边 app.set('view en

  • PHP采集静态页面并把页面css,img,js保存的方法

    本文实例讲述了PHP采集静态页面并把页面css,img,js保存的方法.分享给大家供大家参考.具体分析如下: 这是一个可以获取网页的html代码以及css,js,font和img资源的小工具,主要用来快速获取模板,如果你来不及设计UI或者看到不错的模板,则可以使用这个工具来抓取网页和提取资源文件,提取的内容会按相对路径来保存资源,因此你不必担心资源文件的错误url导入. 首页 index.php,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <

  • Zabbix添加Node.js监控的方法

    目前网上已有 pm2-zabbix 工具可以实现Zabbix对Node.js的监控报警,Github地址. 特征: 自动发现通过PM2管理的Node.js进程. 报告Nodes.js进程状态.CPU占用率.内存占用以及进程是否重启. 监控PM2守护进程自身状态.资源占用和PID改变. 已提供易于安装的Zabbix监控项模板. 1.Node.js服务器安装 pm2-zabbix npm install -g pm2-zabbix 测试自动发现功能是否正常: pm2-zabbix --discove

  • twig里使用js变量的方法

    本文实例讲述了twig里使用js变量的方法的方法.分享给大家供大家参考,具体如下: 先看一段代码 <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(#my_input).change(function(){ var value = jQuery(#my_input).val(); jQuery.ajax({ url: {{ path('ParteAccidentes_ajax'

  • 详解Node.js模板引擎Jade入门

    Jade是Node.js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近.并且,Jade也支持空格. 1.标签 在Jade里,一行开头的任何文本都被默认解释成HTML标签.并且你只需要你写开始标签--注意:不需要加"<>".因为Jade会帮我们渲染闭合和开始标签.例如: body div h1 Jade是Node.js的一个模板引擎 p 它借鉴了Haml的很多地方,所以语法上和Haml比较相近. div footer © Pandora 上面的Jad

随机推荐