Fork me on GitHub
汤姆大叔构建自己的JavaScript模板小引擎

有时候，我们不需要太牛逼太强大的JavaScript模板引擎（比如jQuery tmpl或者handlebarsjs），我们只是需要在简单的模板里绑定一些非常简单的字段，本文将使用非常简单的技巧来帮你实现这个小功能。

首先我们先来定义我们需要的模板，在id为template的script块里：

<!doctype html>
<html>
<head>
   <meta charset=utf-8>
   <title>Simple Templating</title>
</head>
<body>
 
  <div class="result"></div>
 
  <script type="template" id="template">
    <h2>
      <a href="{{href}}">
        {{title}}
      </a>
    </h2>
    <img src="{{imgSrc}}" alt="{{title}}">
  </script>
 
</body>
</html>
复制代码

 

然后，我们需要通过Ajax等其它方式获取所需要的数据，这里为了展示方便，我们使用了自己定义的数组：

  var data = [
    {
      title: "Knockout应用开发指南",
      href: "http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html",
      imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_knockout2.jpg"
    },
    {
      title: "微软ASP.NET站点部署指南",
      href: "http://www.cnblogs.com/TomXu/archive/2011/11/25/2263050.html",
      imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_vs.jpg"
    },
    {
      title: "HTML5学习笔记简明版",
      href: "http://www.cnblogs.com/TomXu/archive/2011/12/06/2277499.html",
      imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png"
    }
  ],
复制代码


我们有2种方式来绑定这些数据到模板上，第一种是非常简单的hardcode方法，第二种是自动识别变量式的。

我们先来看第一种方式，是通过替换花括号里的值为data里所对应的值来达到目的：

template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result'),
i = 0, len = data.length,
fragment = '';
 
for ( ; i < len; i++ ) {
    fragment += template
      .replace( /\{\{title\}\}/, data[i].title )
      .replace( /\{\{href\}\}/, data[i].href )
      .replace( /\{\{imgSrc\}\}/, data[i].imgSrc );
}
 
result.innerHTML = fragment;
复制代码

运行效果：http://jsfiddle.net/TomXu/3GKw2/


第二种方式比较灵活，是通过正则表达式来替换所有花括号的值，而无需一个一个替换，这样相对来说比较灵活，但是要注意模板标签可能在数据里不存在的情况：

template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result'),
attachTemplateToData;
 
// 将模板和数据作为参数，通过数据里所有的项将值替换到模板的标签上（注意不是遍历模板标签，因为标签可能不在数据里存在）。
attachTemplateToData = function(template, data) {
        var i = 0,
            len = data.length,
            fragment = '';
 
        // 遍历数据集合里的每一个项，做相应的替换
        function replace(obj) {
            var t, key, reg;
 　　　　　　
　　　　　　　//遍历该数据项下所有的属性，将该属性作为key值来查找标签，然后替换
            for (key in obj) {
                reg = new RegExp('{{' + key + '}}', 'ig');
                t = (t || template).replace(reg, obj[key]);
            }
 
            return t;
        }
 
        for (; i < len; i++) {
            fragment += replace(data[i]);
        }
 
        return fragment;
    };
 
result.innerHTML = attachTemplateToData(template, data);
复制代码

运行效果：http://jsfiddle.net/TomXu/HjSLf/

这样，我们就可以做到，无限制定义自己的标签和item属性了，而无需修改JS代码。

 

更多关于模板引擎的信息，你可以访问如下2个地址，这2个引擎都不错哦。

HandleBars.js
Mustache.js

 

参考原文：http://net.tutsplus.com/tutorials/javascript-ajax/create-a-makeshift-javascript-templating-solution/

同步与结束语

本文已同步至目录索引：《大叔手记全集》
大叔手记：旨在记录日常工作中的各种小技巧与资料（包括但不限于技术），如对你有用，请推荐一把，给大叔写作的动力

随笔档案 - 2011年12月

大叔手记（7）：构建自己的JavaScript模板小引擎

2011-12-15 19:35 by 汤姆大叔, 483 visits, 网摘, 收藏, 编辑
摘要：有时候，我们不需要太牛逼太强大的JavaScript模板引擎（比如jQuery tmpl或者handlebarsjs），我们只是需要在简单的模板里绑定一些非常简单的字段，本文将使用非常简单的技巧来帮你实现这个小功能。首先我们先来定义我们需要的模板，在id为template的script块里：<!doctype html><html><head> <meta charset=utf-8> <title>Simple Templating</title></head><body> <div cla 阅读全文

探讨神奇的需求变更：程序员遭遇车祸成植物人，需求变更将其唤醒

2011-12-15 15:56 by 汤姆大叔, 1623 visits, 网摘, 收藏, 编辑
摘要：北京程序员王XX遭遇车祸成植物人，医生说活下来的希望只有万分之一，唤醒更为渺茫。可他的Lead和亲人没有放弃，他们根据王XX工作如命的作风，每天都在他身边念：“XX，需求又改了，该干活了，你快来呀！”，奇迹终于发生了，王XX醒来了，第一句话：“需求又改了？”。 阅读全文

深入理解JavaScript系列

2011-12-15 10:02 by 汤姆大叔, 9 visits, 网摘, 收藏, 编辑
摘要：深入理解JavaScript系列文章，包括了原创，翻译，转载，整理等各类型文章，如果对你有用，请推荐支持一把，给大叔写作的动力。深入理解JavaScript系列（1）：编写高质量JavaScript代码的基本要点深入理解JavaScript系列（2）：全面解析Module模式深入理解JavaScript系列（3）：命名函数表达式探秘 阅读全文

大叔翻译博文索引

2011-12-15 09:52 by 汤姆大叔, 2 visits, 网摘, 收藏, 编辑
摘要：以下文章，如对你有用，请推荐一把，给大叔写作的动力【翻译】大型JavaScript应用程序架构模式【翻译】我钟爱的Visual Studio前端开发工具/扩展【翻译】我钟爱的HTML5和CSS3在线工具【翻译】使用Modernizr探测HTML5/CSS3新特性【翻译】ASP.NET MVC：转化业务对象到Select List Items上【翻译】使用Lazy<T>和抽象包装类延迟加载复杂的系统参数 阅读全文

大叔手记（6）：巧用ASP.net MVC3里的HandleErrorAttribute

2011-12-15 08:42 by 汤姆大叔, 913 visits, 网摘, 收藏, 编辑
摘要：前言一直在给Team的人强调“Good programming is good Error Handling”，没人喜欢YSOD（Yellow Screen of Death）。我每次看到黄页的时候都是心惊肉跳的，尤其是在给客户演示的时候，所以在任何时候，如果出现黄页是由于你开发的代码导致的话，对不起，我会给你的绩效打很低的分。当然，有些情况的黄页，在某些特殊的情况，我们可能真的无法预知，但我们起码得一些技巧让终端用户看不到这个YSOD页面。方案幸运的是，在MVC3里有现成的功能支持让我们可以做到这一点，它就是HandleErrorAttribte类，有2种方式可以使用它，一是在类或者方法上直 阅读全文

HTML5学习笔记简明版（9）：变化的元素和属性

2011-12-15 08:40 by 汤姆大叔, 69 visits, 网摘, 收藏, 编辑
摘要： 
本章节介绍的HTML5的对现有元素和属性的更改，其中元素有14个类型的更改，属性有7大类的更改。例如，没有href属性的a元素将显示成一个占位符，而且a元素内部现在支持flow content类型的元素了（例如：article, input, span等）。address可以被article, aside, nav, section限定范围了，以前只能作用于全局范围。 阅读全文

大叔手记（5）：使用QUnit结合MVC3来做JavaScript单元测试

2011-12-14 19:35 by 汤姆大叔, 715 visits, 网摘, 收藏, 编辑
摘要：关于QUnit几乎所有的网站都在使用JavaScript，而所有的Javascript开发人员也都想做单元测试，但是一直都为付诸行动，大叔告诫大家，该做了，不然要被别人鄙视了，因为现在是个上网的人都应该用到了JavaScript，而且HTML5来临以后，越来越多的JavaScript代码要去开发。本文所用到的QUnit是由jQuery team开发的，原本是用于jQuery框架的测试，后来独立发展出来，可以测试任意JavaScript代码，而且提供了非常简单的API让你非常简单的来创建你的Test Case。先上个简单的代码：// calculator.jsvar Calculator = f 阅读全文

HTML5学习笔记简明版（8）：新增的全局属性

2011-12-14 09:51 by 汤姆大叔, 59 visits, 网摘, 收藏, 编辑
摘要： 
本章节介绍的是HTML5在现有元素上增加的全局属性：contenteditable,contextmenu,data-*,draggable和dropzone,hidden,role和aria-*,spellcheck，主要是用来提供用户体验的。 比如，任何元素使用contenteditable属性的话，代表该元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。 阅读全文

大型JavaScript应用程序架构模式

2011-12-14 09:06 by 汤姆大叔, 3706 visits, 网摘, 收藏, 编辑
摘要：11月中旬在伦敦举行的jQuery Summit顶级大会上有个session讲的是大型JavaScript应用程序架构，看完PPT以后觉得甚是不错，于是整理一下发给大家共勉。PDF版的PPT下载地址：http://www.slideshare.net/jibyjohnc/jqquerysummit-largescale-javascript-application-architecture注：在整理的过程中，发现作者有些思想是返来复去地说，所以删减了一部分，如果你的英文良好，请直接阅读英文的PPT。以下是本文的主要章节：1. 什么叫“JavaScript大型程序”？2. 顾当前的程序架构3. 阅读全文

大叔手记（4）：jQuery自定义绑定的魔法升级版

2011-12-13 20:28 by 汤姆大叔, 1287 visits, 网摘, 收藏, 编辑
摘要：jQuery自定义绑定首先让我们来看看jQuery的自定义绑定的使用方法，你可以使用bind或者live来订阅一个事件（当然1.7以后也可以使用on了），代码如下：$("#myElement").bind('customEventName',function(e){ ... });$(".elementsClass").live('customEventName',function(e){ ... });然后通过如下方式来触发事件：$("#myelement").trigger('customE 阅读全文

使用HTML5/CSS3五步快速制作便签贴特效

2011-12-13 11:58 by 汤姆大叔, 1573 visits, 网摘, 收藏, 编辑
摘要：摘要本篇文字将展示给你的是，如何利用HTML5/CSS3，仅用5步就可以制作便签贴效果的HTML页面，效果图如下：(注：图里的文字纯属杜撰，搞笑目的，如有雷同，纯属巧合，谢谢！)注：该效果可以在Safari, Chrome,Firefox和Opera在看到效果，IE上由于对HTML5的支持不完全，所以看不出效果。第一步：创建基本HTML和正方形首先添加基本的HTML结构以及构建基本的正方形，代码如下： <ul> <li><a href="#"> <h2>Dudu：</h2> <p>最近咋没有美女发帖呢？ 阅读全文

HTML5学习笔记简明版（7）：新增属性（2）

2011-12-13 08:52 by 汤姆大叔, 951 visits, 网摘, 收藏, 编辑
摘要： 
本章节介绍的是HTML5对现有元素新增的属性。例如，input 和 textarea 元素有了一个新元素 dirname，用于用户所设置的提交的方向性的控制(译注，即书写的方向性，ltr或rtl)。或者textarea新增的maxlength和input的maxlength是一样的，都是限制最大长度的。 阅读全文

HTML5学习笔记简明版（6）：新增属性（1）

2011-12-12 13:30 by 汤姆大叔, 1036 visits, 网摘, 收藏, 编辑
摘要： 
本章节介绍的是现有元素上新增的一批属性。为了和link元素保存一致性，a元素和area元素也都增加了media属性，只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的，默认值是all，详细语法规范请访问 阅读全文

HTML5学习笔记简明版（5）：input的type超级类型

2011-12-12 08:39 by 汤姆大叔, 121 visits, 网摘, 收藏, 编辑
摘要： HTML5为input的type类型增加了多种枚举值，用来表达不同的意思，同事具有验证功能，如果格式不对，浏览器将原始提供错误提示，堪称超级牛X啊。同时大叔发现mhtml5网站上已经有很多现成的资料了，所以余下的一些新元素请大家自行参考该网站的资料学习，大叔将着重继续学习HTML5在现有元素上的更新改变。 阅读全文

大叔手记（3）：Windows Silverlight/Phone7/Mango开发学习系列教程

2011-12-11 16:59 by 汤姆大叔, 1286 visits, 网摘, 收藏, 编辑
摘要：以下资料来自www.jeffblankenburg.com网站，是一个完整的系列，所以如果需要学习Mango系统的开发，需要先学习Silverlight，然后学习Windows Phone 7，最后再进入Mango的开发，这样做，可以循序渐进，以避免直接就进入Mango开发而导致的痛苦。另外文章底部也附加上了翻译的中文连接。31 Days of SilverlightDay #1: Mouse Events in SilverlightDay #2: Silverlight Screen TransitionsDay #3: Custom Silverlight Loading ScreenD 阅读全文

大叔手记全集

2011-12-10 16:23 by 汤姆大叔, 173 visits, 网摘, 收藏, 编辑
摘要：大叔手记：旨在记录日常工作中的各种小技巧与资料（包括但不限于技术）大叔手记（7）：构建自己的JavaScript模板小引擎大叔手记（6）：巧用ASP.net MVC3里的HandleErrorAttribut 大叔手记（5）：使用QUnit结合MVC3来做JavaScript单元测试大叔手记（4）：jQuery自定义绑定的魔法升级版大叔手记（3）：Windows Silverlight/Phone7/Mango开发学习系列教程大叔手记（2）：为每个应用程序池单独设置aspnet.config配置文件大叔手记（1）：使用Visual Studio的查找与替换替代默认的系统搜索 阅读全文

HTML5学习笔记简明版（4）：新元素之video,audio,meter,datalist,keygen,output

2011-12-09 08:58 by 汤姆大叔, 1128 visits, 网摘, 收藏, 编辑
摘要： 本章节介绍的HTML5的另外6个新元素video,audio,meter,datalist,keygen,output。通过video标签，我们可以抛弃最近不怎么讨好的Flash，直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式，但该元素标签同样支持音频与图片。audio有原生支持音频播放的功能，而不需要浏览器安装额外的扩展；目前支持audio元素的浏览器主要有Safari 4，Firefox 3.5和Chrome 3。 阅读全文

HTML5学习笔记简明版（3）：新元素之hgroup,header,footer,address,nav

2011-12-08 08:54 by 汤姆大叔, 1163 visits, 网摘, 收藏, 编辑
摘要： 本章节介绍的HTML5的另外5个新元素hgroup,header,footer,address,nav。header元素是一种具有引导和导航作用的辅助元素。通常，header元素可以包含一个区块的标题(如h1至h6，或者hgroup元素标签)，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。 阅读全文

HTML5学习笔记简明版（2）：新元素之section,article,aside

2011-12-07 10:39 by 汤姆大叔, 1040 visits, 网摘, 收藏, 编辑
摘要： 本章节主要介绍的是HTML5的三个新元素：section,article,aside。section元素描绘的是一个文档或者程序里的普通的section节，一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节，或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section，分别代表introduction, news items和contact information。 阅读全文

HTML5学习笔记简明版（1）：HTML5介绍与语法

2011-12-06 09:33 by 汤姆大叔, 1817 visits, 网摘, 收藏, 编辑
摘要： HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性（例如nav网站导航块和footer）。新型的标签有利于搜索引擎和语义分析，同时更好地帮助小屏幕装置和视障人士使用，除此之外，也提供了一些新的功能，比如视频音频用的video和audio，总结而言，有如下几大特点： 阅读全文

汤姆大叔博客索引

2011-12-06 09:27 by 汤姆大叔, 124 visits, 网摘, 收藏, 编辑
摘要：
本帖是本站所有系列博文的目录索引帖地址，新系列博文的状态每天在这里都可以体现。 
如果大家有其它方面的技术需求的话，可以留言，大叔如果会的话，会尽量满足各位的需求。 阅读全文

HTML5学习笔记简明版 目录索引

2011-12-06 09:19 by 汤姆大叔, 142 visits, 网摘, 收藏, 编辑
摘要：之前学习HTML5的时候，没有及时记录下来，这周比较清闲，所以每天准备写一篇HTML5学习笔记简明版（1）：HTML5介绍与语法HTML5学习笔记简明版（2）：新元素之section,article,asideHTML5学习笔记简明版（3）：新元素之hgroup,header,footer,address,navHTML5学习笔记简明版（4）：新元素之video,audio,meter,datalist,keygen,outputHTML5学习笔记简明版（5）：input的type超级类型HTML5学习笔记简明版（6）：新增属性（1）HTML5学习笔记简明版（7）：新增属性（2）HTML5学习 阅读全文

微软ASP.NET站点部署指南（11）：部署SQL Server数据库更新

2011-12-05 12:42 by 汤姆大叔, 909 visits, 网摘, 收藏, 编辑
摘要：
本章节展示的是如何向完整版SQL Server 数据库部署一个数据库升级。与第9章的数据库升级部署有所不同（第9章是部署到SQL Server Compact数据库）。
这个小节，做一个数据库修改和相应的代码更新，在部署到测试和生产环境之前，先在Visual Studio 里测试。修改内容是给Instructor 实体添加一个OfficeHours 列，然后再Instructors 页面上显示。 阅读全文

Knockout应用开发指南 第十章：更多信息（完结篇）

2011-12-05 09:16 by 汤姆大叔, 870 visits, 网摘, 收藏, 编辑
摘要： 
本篇属于该系列教程的最后一章节，主要是列举了相关网站和帖子的一些信息，希望大家对Knockout这个JavaScript类库感兴趣，如果有任何问题，请在这里留言，大家一起讨论。本章节包括3部分（浏览器支持、需求帮助、更多教程和例子）。 阅读全文

大叔手记（2）：为每个应用程序池单独设置aspnet.config配置文件

2011-12-04 08:48 by 汤姆大叔, 1267 visits, 网摘, 收藏, 编辑
摘要：ASP.NET2.0之后的版本就在各Framework的根目录下提供了一个aspnet.config文件，这个文件用来配置全局的一些信息，但是一直以来我们都没有怎么用过。ASP.NET4.0之后，这个配置文件在并发和线程方面得到了充分的支持。比如，可以设置maxConcurrentRequestsPerCPU, maxConcurrentThreadsPerCPU和requestQueueLimit等参数，用来更加灵活的设置asp.net runtime的配置。C:\Windows\Microsoft.NET\Framework64\v4.0.30319\aspnet.configC:\Win 阅读全文

大叔手记（1）：使用Visual Studio的查找与替换替代默认的系统搜索

2011-12-03 13:54 by 汤姆大叔, 94 visits, 网摘, 收藏, 编辑
摘要：一直以来，一直使用Visual Studio的查找与替换（Find and Replace）来搜索当前项目或整个解决方案里的代码，从来没怎么注意右边的那个选择文件夹功能。原来还可以选择非解决方案的文件夹，而且试用了一下，速度明显比默认的系统搜索功能快，尤其是在阅读.NET4.0源码的时候，效果真是高啊。大叔手记：旨在记录日常工作中的各种小技巧与资料（包括但不限于技术） 阅读全文

Knockout应用开发指南 第九章：高级应用举例

2011-12-02 15:04 by 汤姆大叔, 1046 visits, 网摘, 收藏, 编辑
摘要： 
本章展示的4个例子主要是利用了Knockout的高级特性（比如自定义绑定等等)，让大家感受到使用Kncokout的快感。 通过这些例子你可以很熟练地使用Knockout类库。 阅读全文

微软ASP.NET站点部署指南（10）：迁移至SQL Server

2011-12-02 09:05 by 汤姆大叔, 879 visits, 网摘, 收藏, 编辑
摘要： 
SQL Server Express和完整版SQL Server
一旦你决定使用完整版SQL Server，你需要在开发和测试环境使用SQL Server Express 或者完整版SQL Server。在工具支持和数据库引擎功能上，SQL Server Compact 和其它版本的SQL Server都是有区别的，可以导致不同的代码产生不同的结果。 阅读全文

微软ASP.NET站点部署指南（9）：部署数据库更新

2011-12-01 13:13 by 汤姆大叔, 863 visits, 网摘, 收藏, 编辑
摘要： 
不管什么时候，程序都有可能像代码更新一样更新数据库。本章节你将进行数据库修改，测试，然后部署到测试环境和生产环境。 提醒：如果根据本章节所做的操作出现错误信息或一些功能不正常的话，请务必check Troubleshooting页面。 阅读全文

Knockout应用开发指南 第八章：简单应用举例（2）

2011-12-01 09:47 by 汤姆大叔, 569 visits, 网摘, 收藏, 编辑
摘要： 
本章展示的另外4个例子主要是利用了Knockout的基本语法特性，让大家感受到使用Kncokout的快感。 通过这些例子你可以很熟练地使用Knockout类库。 阅读全文
posted on 2011-12-15 21:57  HackerVirus  阅读(792)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2024 HackerVirus
Powered by .NET 8.0 on Kubernetes