背景

因为JS没有提供“字符串插入”和“多行字符串”特性，传统的拼凑字符串容易出错、性能不高和不容易理解代码，为了应对这些问题，很多个人和团队开发了模板引擎，现在主流的JS框架几乎都提供此类功能了。

模板引擎的实现方式有很多种，此处介绍一种简单、灵活和强大的思路，该方式借鉴了 JSP（web 服务器最终将 JSP 页面转换为了 Servlet），编译后会把模板转换为一个方法。

这个实现只是为团队介绍模板引擎的原理，具体应用还需要选择成熟的开源实现。

实现

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

 </head>

 <body>

 </body>

 </html>

 <script id="test-tpl" type="text/template">

 start

 <# for(var i=0; i< items.length; i++) {#>

     <#= items[i].name #>

 <# } #>

 end

 </script>

 <script type="text/javascript">

     var Template = function (tpl) {

         var me = this;

         me.tpl = tpl;

     };

     Template.prototype.compile = function () {

         var me = this;

         var codes = [];

         codes.push("var results = [];");

         codes.push("with(context) {");

         var frags = me.tpl.split(/(<#=.+?#>)|(<#.+?#>)/);

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

             var frag = frags[i];

             if (!frag) {

                 continue;

             }

             if (frag.indexOf("<#=") == 0) {

                 codes.push("results.push(" + frag.substring(3, frag.length - 2) + ");");

             }

             else if (frag.indexOf("<#") == 0) {

                 codes.push(frag.substring(2, frag.length - 2));

             }

             else {

                 codes.push("results.push('" + frag.split('\n').join('\\n') + "');");

             }

         }

         codes.push("}");

         codes.push("return results.join('');");

         console.log(codes.join("\n"));

         me.compiledTplFun = new Function("context", codes.join("\n"));

     };

     Template.prototype.apply = function (context) {

         var me = this;

         if (!me.compiledTplFun) {

             me.compile();

         }

         return me.compiledTplFun(context);

     };

     var tpl = new Template(document.getElementById("test-tpl").innerHTML)

     console.log(tpl.apply({ items: [{ name: "dgw" }] }));

 </script>

Javascript：自己写模板引擎的更多相关文章

  1. JST(JavaScript Trimpath)前端模板引擎简介

    JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...

  2. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

  3. javascript模板引擎Mustache

    Mustache(英文本意:触须,胡须)是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手. 下载:https:/ ...

  4. JS模板引擎 ：ArtTemplate （2）

    上一篇初略的介绍了一下javascript中的模板引擎,有兴趣的可以戳 这里 . 这一篇将带着大家一起做一个简易的模板引擎, 上一篇介绍到:模板引擎其实做的就是两件事. 根据一定的规则,解析我们所定义 ...

  5. PHP实现简易的模板引擎

    PHP实现简易的模板引擎 1.MVC简介 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式(详情自己百度): 1. Mode ...

  6. php的模板引擎

    设计一个交互式的网站,我们需要关注两个主要的问题:分别是图形用户界面和业务逻辑.例如,一个标准的web开发小组由两三个美工和三个程序员组成,则设计流程是:美工设计者制作了项目的网站的界面模板,然后把它 ...

  7. php 实现简易模板引擎

    1.MVC简介 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式(详情自己百度): 1. Model(模型)表示应用程序核心 ...

  8. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  9. Web模板引擎—Mustache

    Web模板引擎——Mustache 2012年9月12日 BY BELL·12 COMMENTS Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 ...

随机推荐

  1. asp.net core 操作误区

    更新时提示数据变化错误 在更新事件中提示下面错误,在网上找了一下,大部分都是说是冲突问题,但是测试时同时只有一个客户端在进行操作,不应该会有冲突问题,后来发现编辑加载时的ID,和更新提交时的ID不同了 ...

  2. mockito简单教程

    注:本文来源:sdyy321的<mockito简单教程> 官网: http://mockito.org API文档:http://docs.mockito.googlecode.com/h ...

  3. LeetCode（49）： 字母异位词分组

    Medium! 题目描述: 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", ...

  4. java StringTokenizer

    在java引入正则表达式和Scanner类之前分割字符串的唯一方法是使用StringTokenizer来分词,不过现在有了正则表达式和Scanner类我们可以使用更加简单更加简洁的方式来完成同样的工作 ...

  5. python 全栈开发，Day27(复习, defaultdict,Counter,时间模块,random模块,sys模块)

    一.复习 看下面一段代码,假如运行结果有问题,那么就需要在每一步计算时,打印一下结果 b = 1 c = 2 d = 3 a = b+c print(a) e = a + d print(e) 执行输 ...

  6. WebApi的调用-1.前端调用

    前端调用 html <div class="row"> <form id="queryForm"> <input name=&qu ...

  7. B 找规律

    Description 对于正整数n,k,我们定义这样一个函数f,它满足如下规律f(n,k=1)=-1+2-3+4-5+6...nf(n,k=2)=-1-2+3+4-5-6...nf(n,k=3)=- ...

  8. hdu 1181 以b开头m结尾的咒语 (DFS)

    咒语是以a开头b结尾的一个单词,那么它的作用就恰好是使A物体变成B物体现在要将一个B(ball)变成一个M(Mouse),比如 "big-got-them". Sample Inp ...

  9. POJ 2976 3111（二分-最大化平均值）

    POJ 2976 题意 给n组数据ai,bi,定义累计平均值为: 现给出一个整数k,要求从这n个数中去掉k个数后,最大累计平均值能有多大?(四舍五入到整数) 思路 取n−k个数,使得累计平均值最大. ...

  10. （APIO2014）序列分割

    题解: 我也不知道为啥上午上课讲了我昨天看的3题 这题关键在于发现操作顺序无关的 可以发现最终答案是任意两段乘积的和 那这个东西显然是可以dp的 然后可以斜率优化一波 nklongn 另外上课讲的是当 ...