背景

因为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. vue系列之vue-resource

    vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且 ...

  2. 学习笔记(二)--->《Java 8编程官方参考教程（第9版）.pdf》:第七章到九章学习笔记

    注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法者自负一切 ...

  3. 对 Laravel 的 Controller 做 Unit Test

    之前尝试过对 Laravel 的 Controller 做 Feature Test,但是在业务变得越来越复杂之后,我感觉对 controller 里的函数也没了自信,急需对功能函数做 Unit Te ...

  4. js中字符串概念

    字符串概念:所有带单引号和双引号的叫做字符串 字符串的数据类型:字符串既是基本数据类型,又是复合数据类型. 字符串存储在内存里[只读数据段]的地方.字符串的变量里存储的是字符串的地址. [注]使用起来 ...

  5. 2018-2019 2 20165203 《网络对抗技术》 Exp3 免杀原理与实践

    2018-2019 2 20165203 <网络对抗技术> Exp3 免杀原理与实践 免杀原理与实践说明及基础问答部分 实验任务 正确使用msf编码器(0.5分),msfvenom生成如j ...

  6. mysql中delete from in子查询删除失败

    遇到一个情况,想通过表1的id找到表2,删除表2中barcode关联的库存数据,然后一直不能失败,如下: delete from 库存表 where BARCODE in( select BARCOD ...

  7. HDU 4763 求最大长度的串A，使得S满足APAQA

    给一个串,让你找一个子串,形如EAEBE,就是一个串在开头结尾中间各出现一次,问这个E最长是多少 Sample Input5xyabcaaaaaaabaaaxoaaaaa Sample Output0 ...

  8. SVN提交，提示“remains in conflict”错误

    SVN commit时,提示"remains in conflict"错误: 1.error出现原因: 在本地项目删除了一个目录,又通过SVN的"Repo-browser ...

  9. linux 重要笔记

    nginx 服务器重启命令,关闭   nginx -s reload  :修改配置后重新加载生效 nginx -s reopen  :重新打开日志文件nginx -t -c /path/to/ngin ...

  10. HDU1575-Tr 【矩阵快速幂】(模板题)

    <题目链接> 题目大意: A为一个方阵,则Tr A表示A的迹(就是主对角线上各项的和),现要求Tr(A^k)%9973.  Input 数据的第一行是一个T,表示有T组数据. 每组数据的第 ...