背景

因为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. Linux下进程/程序网络带宽占用情况查看工具 -- NetHogs

    http://www.vpser.net/manage/nethogs.html   来自.  最后略有修改 之前VPS侦探曾经介绍过流量带宽相关的工具如:iftop.vnstat,这几个都是统计和监 ...

  2. 造轮子和用轮子：快速入门JavaScript模块化

    造轮子和用轮子:快速入门JavaScript模块化 前言 都说“不重复造轮子”,就像iPhone——它除了打电话还可以播放音乐——但是工程师不用从零开始做一个音乐播放功能,也许只要在iPhone的系统 ...

  3. C++ code：数值计算之矩形法求解积分问题

    积分的通常方法是将区域切割成一个个的小矩形,然后求这些小矩形的和.小矩形切割得越细,计算精度就越高,可以将切割小矩形的数量作为循环迭代变量,将前后两个不同精度下的小矩形和之差,作为逼近是否达到要求的比 ...

  4. GItlab作CI/CD时，想快点，有啥招？

    如果希望.m2文件有存缓,或是不要每次从dockerhub上找镜像(有的是本地镜像,远程没有的) 那么,gitlab-runner的config.toml初步优化文件如下: concurrent = ...

  5. MySQL和Java数据类型对应

    Java MySQL数据类型对照 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述             VARCHAR L+N VARCHAR java.lang.S ...

  6. poj 2155（未完成）

    线段树套线段树模板题 链接:http://poj.org/problem?id=2155 题解: 代码: #include <bits/stdc++.h> using namespace ...

  7. python全栈开发day43-javascript

    一.昨日内容回顾 1.绝对定位的盒子居中 left:50%: margin-left:负的盒子宽度的一半 2.固定位置 脱离标准文档流 作用:返回顶部,广告,滚动监听栏.固定导航栏(body{marg ...

  8. BZOJ1180 [CROATIAN2009]OTOCI LCT

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1180 本题和BZOJ2843一样. BZOJ2843 极地旅行社 LCT 题意概括 有n座岛 每座 ...

  9. Pytorch 基础

    Pytorch 1.0.0 学习笔记: Pytorch 的学习可以参考:Welcome to PyTorch Tutorials Pytorch 是什么? 快速上手 Pytorch! Tensors( ...

  10. JavaFx 中常见的包和类（javafx笔记 ）

    JavaFx 中常见的包和类(javafx笔记 ) 更多详细内容请参考<Pro JavaFX 8>. javafx.stage 包包含以下类: Stage 类 ​ Stage 类是任何 J ...