背景

因为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. oracle：储存过程实现分页

    CREATE OR REPLACE PACKAGE PKG_QUERY IS -- Author : ADMINISTRATOR -- Created : 2016/12/8 星期四 10:28:37 ...

  2. 上传本地文件到github仓库基本操作

    上传文件到github时老师忘记指令,或者总是出一些错,每次都要百度浪费时间,因此将常用操作指令归纳卸载这里,以后再也不要担心百度找帖子了... 第一步:新建仓库 新建仓库步骤省略,最后我们得到一个仓 ...

  3. python接口自动化测试二十四：上传多个附件，参数化

    # 添加多个附件参数化files = [("1.png", "1.png") ("2.png", "2.png") ]d ...

  4. 数据库中的null用法

  5. 使用匿名内部类调用start方法

    package chapter03;//类实现接口public class WD implements Runnable{//重写接口的方法 @Override public void run() { ...

  6. ERP合同审核流程处理（二十九）

    合同审批流程: 前端的代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" ...

  7. Could not find com.android.tools.build:aapt2:3.2.0-alpha14-4748712.

    https://blog.csdn.net/lx6101989/article/details/80334232 android studio 升级到了3.0 取消了apt 报了这个错 在最上级的bu ...

  8. <sdoi2017>树点涂色

    题解: 首先,按照原树,构建出一个全部都是虚边的LCTLCT ,并用树剖维护每个点到根节点的路径权值valval.可以发现,每个点到根节点的路径权值就是每个点到根节点的路径上实链的个数. 我们发现,操 ...

  9. 转 关于Https协议中的ssl加密解密流程

    关于Https协议中的ssl加密解密流程 2016年09月28日 09:51:15 阅读数:14809 转载自:http://www.cnblogs.com/P_Chou/archive/2010/1 ...

  10. 【Java】 剑指offer(7) 二叉树的下一个结点

    本文参考自<剑指offer>一书,代码采用Java语言.  更多:<剑指Offer>Java实现合集 题目 给定一棵二叉树和其中的一个结点,如何找出中序遍历顺序的下一个结点?  ...