`

构建自己的JavaScript模板小引擎

前端web框架UIJQUERY 
阅读更多

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

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

01 <!doctype html>
02 <html>
03 <head>
04    <meta charset=utf-8>
05    <title>Simple Templating</title>
06 </head>
07 <body>
08    
09   <div class="result"></div>
10    
11   <script type="template" id="template">
12     <h2>
13       <a href="{{href}}">
14         {{title}}
15       </a>
16     </h2>
17     <img src="{{imgSrc}}" alt="{{title}}">
18   </script>
19    
20 </body>
21 </html>

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

01 var data = [
02 {
03 title: "Knockout应用开发指南",
04 href: "http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html",
05 imgSrc: "http://www.jcodecraeer.com"
06 },
07 {
08 title: "微软ASP.NET站点部署指南",
09 href: "http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html",
10 imgSrc:"http://www.jcodecraeer.com"
11 },
12 {
13 title: "HTML5学习笔记简明版",
14 href: "http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html",
15 imgSrc: "http://www.jcodecraeer.com"
16 }
17 ],

 

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

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

01 template = document.querySelector('#template').innerHTML,
02 result = document.querySelector('.result'),
03 i = 0, len = data.length,
04 fragment = '';
05    
06 for ( ; i < len; i++ ) {
07     fragment += template
08       .replace( /\{\{title\}\}/, data[i].title )
09       .replace( /\{\{href\}\}/, data[i].href )
10       .replace( /\{\{imgSrc\}\}/, data[i].imgSrc );
11 }
12    
13 result.innerHTML = fragment;

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

01 template = document.querySelector('#template').innerHTML,
02 result = document.querySelector('.result'),
03 attachTemplateToData;
04    
05 // 将模板和数据作为参数，通过数据里所有的项将值替换到模板的标签上（注意不是遍历模板标签，因为标签可能不在数据里存在）。
06 attachTemplateToData = function(template, data) {
07         var i = 0,
08             len = data.length,
09             fragment = '';
10    
11         // 遍历数据集合里的每一个项，做相应的替换
12         function replace(obj) {
13             var t, key, reg;
14  　　　　　　
15 　　　　　　　//遍历该数据项下所有的属性，将该属性作为key值来查找标签，然后替换
16             for (key in obj) {
17                 reg = new RegExp('{{' + key + '}}', 'ig');
18                 t = (t || template).replace(reg, obj[key]);
19             }
20    
21             return t;
22         }
23    
24         for (; i < len; i++) {
25             fragment += replace(data[i]);
26         }
27    
28         return fragment;
29     };
30    
31 result.innerHTML = attachTemplateToData(template, data);

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

0
顶
0
踩
分享到：
| jQuery中实现自定义方法的扩展
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于JavaScript的模板引擎

    总的来说，JavaScript模板引擎是前端开发中不可或缺的一部分，它们帮助开发者更高效地处理动态内容，提高代码的可维护性。理解不同模板引擎的特性并合理选用，对于提升开发效率和产品质量具有重要意义。

    tstemplate一个基于模板字符串的模板引擎的最简实现只适用于node环境

    综上所述，tstemplate是一个基于JavaScript模板字符串的简单模板引擎，专为Node.js环境设计，适用于快速、轻量级的服务器端渲染需求。如果需要更复杂的功能或更广泛的应用场景，开发者可能需要寻找其他更成熟的模板...

    JavaScript构建自己的模板小引擎示例

    ### JavaScript构建自己的模板小引擎知识点 #### 模板引擎的简介 模板引擎是一种将数据和模板结合起来生成HTML或其他格式文档的工具，它在Web开发中非常常见，用于将数据动态地渲染到页面上。在JavaScript中，模板...

    基于新一代 javascript的模板引擎

    在新一代JavaScript中，模板引擎的实现变得更加优雅和强大。例如，ES6引入的模板字面量（Template Literals）就提供了一种内建的模板处理方式，它允许我们在字符串中嵌入表达式，并且支持多行文本。 ```javascript ...

    Tempos高效的Javascript模板引擎

    Tempos是一款高效的JavaScript模板引擎，专为前端开发者设计，用于快速构建动态HTML页面。在Web开发中，模板引擎扮演着至关重要的角色，它允许开发者将数据和视图逻辑分离，使得代码更加模块化，更易于维护。Tempos...

    PowJS基于DOMTree的JavaScript模板引擎

    PowJS与其他JavaScript模板引擎（如Handlebars、EJS、Mustache等）相比，其特色在于DOM Tree的直接操作，这可能会提供更快的渲染速度和更好的浏览器兼容性。然而，每个模板引擎都有其适用场景，选择哪种引擎应根据...

    Hoganjs来自Twitter的JavaScript模板引擎

    Hogan.js是一个由Twitter开发的轻量级JavaScript模板引擎，它是对Mustache模板语言的实现。这个库的主要目的是为了提供一种高效且易于理解和使用的数据绑定和逻辑表达方式，用于生成HTML或其他格式的文本。在前端...

    JavaScript模板引擎原理与用法详解.docx

    JavaScript模板引擎是一种在JavaScript中处理数据和HTML组合的工具，它的主要目的是将数据逻辑与页面展示分离，提高代码的可维护性和复用性。在Web开发中，它扮演着一个预处理器的角色，允许开发者编写类似于HTML的...

    templatejs的fis编译插件一款javascript模板引擎

    Template.js就是这样一个JavaScript模板引擎，它被设计用来帮助开发者快速、高效地实现动态内容的展示。 **template.js介绍** template.js是一款轻量级的JavaScript模板引擎，它提供了简洁的语法和高效的执行效率...

    常用的JavaScript模板引擎介绍

    本文将介绍八款常用的JavaScript模板引擎，并特别讲解了artTemplate模板引擎，这是目前性能出众且支持模板编译的现代JavaScript模板引擎之一。 首先是Mustache，这是一款简单易用的模板引擎，其基于JavaScript实现...

    laytpl-JavaScript模板引擎 v1.1.zip

    总之，laytpl作为一款高效的JavaScript模板引擎，它的v1.1版本在保持小巧体积的同时，提供了强大而易于使用的模板语法，使得前端开发人员能更加专注于数据和逻辑的处理，而非繁琐的DOM操作。通过熟练掌握laytpl，...

    laytpl是一款非常轻量的JavaScript模板引擎

    总结来说，laytpl是一款以简洁和高性能为特点的JavaScript模板引擎，它遵循原生JS语法，易于学习和使用。在前端开发中，laytpl可以帮助我们高效地实现数据和视图的动态绑定，提升开发效率，是构建响应式Web应用的一...

    templatejs的webpakc编译loader一款javascript模板引擎

    Template.js作为JavaScript模板引擎，具有以下优点： - **简洁的语法**：它的模板语法简单直观，易于学习和使用。 - **高效性能**：通过预编译模板为JavaScript函数，可以在运行时快速生成HTML，提高页面渲染速度。 ...

    js模板引擎从无到有

    本篇文章将深入探讨如何从零开始构建一个简单的JavaScript模板引擎，逐步改进并理解其核心原理。 首先，我们需要理解模板引擎的基本工作流程。模板引擎接受两部分输入：数据和模板。模板通常是一段包含占位符的HTML...

    基于JavaScript和html的开发模板引擎

    1. EJS：EJS是一种简单易用的JavaScript模板引擎，支持内联表达式和控制流语句，可以在客户端和服务器端运行。 2. Handlebars：Handlebars提供了一种声明式的模板语法，允许开发者定义模板帮助器，便于扩展和复用。 ...

    mustache.js javascript模板引擎

    **Mustache.js：JavaScript模板引擎详解** Mustache.js，又称为mustache，是一款轻量级且功能强大的模板引擎，专为JavaScript设计。它遵循“逻辑less”的理念，将视图和数据分离，使得代码更易于理解和维护。...

    JavaScript Template JST模板引擎

    Trimpath JavaScript 是不个轻量级的，基于JavaScript的，跨浏览器，采用APL/GPL开放源代码协议的，可以让你轻松进行基于模板编程方式的纯JS引擎。 它有如下的特点： 1、采用标准的JavaScript编写，支持跨浏览器 2...

    基于JavaScript和html的高性能模板引擎

    在前端开发领域，JavaScript和HTML是构建Web应用的基石，而高效的模板引擎则是将数据与视图结合的关键技术。本文将深入探讨如何利用JavaScript和HTML实现高性能的模板引擎，以及涉及的相关知识点。 首先，理解模板...

    问沫模板引擎问沫模板引擎

    问沫模板引擎是一种高效、灵活的文本生成工具，主要用于Web开发中的视图渲染。...问沫模板引擎设计的目标是简化前端...在实际开发中，理解并熟练掌握这些知识点将有助于你更有效地利用问沫模板引擎，构建高性能的Web应用。

Magicbox
Global site tag (gtag.js) - Google Analytics