背景

因为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系列之flex经典案例

    案例分析: 1.中间文字居中 2.文字俩边有横线 横线无法固定宽度,因为在大屏手机上,容易出现Bug,宽度不够,俩边会出现大量空隙 解决办法,使用flex布局(网站链接) 代码: <div cl ...

  2. OCM_第十五天课程：Section6 —》数据库性能调优 _SQL 访问建议 /SQL 性能分析器/配置基线模板/SQL 执行计划管理/实例限制

    注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...

  3. h5之js生成二维码

    目录架构: index.html <!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=& ...

  4. VIM 报错

    syntax error: unexpected end of file if 没配对 在最后加 fi 试试 环境变量用不了 export PATH=/usr/bin:/usr/sbin:/bin:/ ...

  5. PHP 将数组的值赋值给一组变量

    经常需要将一个字符串分割成一组值,然后赋值给不同的变量. 逐行赋值非常繁琐,于是查了一下 PHP 中是否有类似 python 中 a, b = (a, b) 的操作. 果然有 $info = arra ...

  6. python3笔记（一）初识Python

    基础资料 什么是Python? Python官方网站 安装Python python的优点 完成同一个任务,C语言要写1000行代码,Java只需要写100行,而Python可能只要20行. pyth ...

  7. python 全栈开发，Day82(点赞和踩灭,用户评论)

    一.点赞和踩灭 样式 先来做样式,修改article_detail.html,增加div_digg的div {% extends "base.html" %} {% block c ...

  8. 在php中调用以及编写接口(转)

    如: http://localhost/openUser.php?act=get_user_list&type=json 在这里openUser.php相当于一个接口,其中get_user_l ...

  9. Tomcat下指定JDK

  10. PowerDesigner表创建脚本双引号问题

    在使用PowerDesigner表属性的Preview查看创建脚本的时候,发现大多表名和字段名都加上了双引号,而且有引号的都是大小写混合的,导致创建的表里,表名和字段名也都是大小写混合的. 在一番搜索 ...