曾经阅读过《只有20行JAVASCRIPT代码, 手把手教你写一个页面模版引擎》这篇文章, 对其中实现模版的想法实在膜拜, 于是有了这篇读后感, 谈谈自己对模版引擎的理解, 以及用自己的语言探讨他的实现方式, 加深理解

文章地址: http://krasimirtsonev.com/blog/article/Javascript-template-engine-in-just-20-line

前端编写过程中, 经常性的会出现需要在js中组合, 或生成html插入到页面中

类似:

$.get('/data.json', function (json) {
var dataList = json.data,
index, length, html = ''; for (index = 0, length = dataList.length; index < length; index++) {
html += '<div>' + dataList[index'].name + '</div>';
} document.getElementById('content').innerHTML = html;
});

如果需要生成的html比较简单, 没有什么逻辑判断的时候, 并不觉得有什么问题, 但...

$.get('/data.json', function (json) {
var dataList = json.data;
index, length, data, html = ''; for (index = 0, length = dataList.length; index < length; index++) {
data = dataList[index]; html += '<div'
if (data.isDelete) {
html += ' class="red" ';
}
html += '>'; if (data.sex == 1) {
html += '男';
} else {
html += '女';
} html += ' age: ' + (data.age - 1); html += '</div>';
}
});

这种时候, 就有很多坑了, 经常性的标签没有正确闭合, 而且不输出html的情况下, 无法预测html的结构, 实在坑爹... 这时候, 模版引擎的优势就体现出来了

在《深入理解PHP》一书中, 提到, PHP的模版引擎, 就是把你发明的语言, 通过你实现的编译器, 翻译成PHP语言, 再给PHP执行.

同样的, JS模版引擎也是类似的

把你发明的语言, 通过你实现的编译器, 翻译成HTML, 再插入到DOM中, 就是JS模版引擎的工作的, 实际上, 模版引擎应当只负责翻译的工作, 是否插入到DOM中, 或者是怎么插入, 就由自己选择了

实现模版引擎, 关键以及重点其实就是在于 正则表达式 的运用, 通过正则表达式, 获取模版中的关键字, 通过各种方法去替换, 或循环, 或逻辑判断, 最后组合返回HTML

在文章中, 使用<% %>作为替换的标志, 类似与<?php ?>之间的代码会被php执行一样, 规定<%%>之间的代码, 才会被执行, 因此得出的正则

var reg = /<%([^%>]+)%>/g;

通过该正则循环获取, 并替换

while (match = reg.exec(html)) {
//code
}

为了添加逻辑判断, 在<%%>中, 如果出现if, else, case, break, switch等关键字, 就不输出, 直接当做js执行, 所以添加了另外一句正则

var reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g;

对正则的编写是整个模版引擎的核心, 其余便是一些字符串替换以及如何巧妙得拼接字符串, 该文章采用了new Function的方式, 再使用一个数组r, 往数组r中push字符串, 再最后join输出, 实在是巧妙

最后的15行代码:

var TemplateEngine = function(html, options) {
var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];\n', cursor = 0;
var add = function(line, js) {
js? (code += line.match(reExp) ? line + '\n': 'r.push('+ line + ');\n') :
(code += line != '' && line.replace(/\s/g, "") != '' ? 'r.push("'+ line.replace(/"/g, '\\"') + '");\n': '');
return add;
}
while(match = re.exec(html)) {
add(html.slice(cursor, match.index))(match[1], true);
cursor = match.index + match[0].length;
}
add(html.substr(cursor, html.length - cursor));
code += 'return r.join("");';
return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
}

在实际使用过程中, 发现了一些小问题

如果在使用逻辑判断switch中, 模版有换行的时候, new Function中会插入了多个

r.push("");
switch(str) {
r.push("");
case 1:
r.push(""); break:
r.push("");
}

所以 add 方法在 js == false的情况, 应当还要判断line是否为空字符串

var add = function(line, js) {
js? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
(code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
return add;
} //改为 var add = function(line, js) {
js? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
(code += line != '' && line.replace(/\s/g, "") != "" ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
return add;
}

最后结果

var templateEngine = function(html, options) {
var re = /<%([^%>]+)?%>/g,
reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
code = 'var r=[];\n',
cursor = 0;
var add = function(line, js) {
js ? (code += line.match(reExp) ? line + '\n': 'r.push(' + line + ');\n') : (code += line != '' && line.replace(/\s/g, "") != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n': '');
return add;
}
while (match = re.exec(html)) {
add(html.slice(cursor, match.index))(match[1], true);
cursor = match.index + match[0].length;
}
add(html.substr(cursor, html.length - cursor));
code += 'return r.join("");'; return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
}

实际使用时, 个人喜欢在html中插入一个type="text/tpl"的script作为模版标签

<script type="text/tpl" id="tpl">
<% for (var i = 0, length = this.length; i < length; i++) { %>
<div <% if (this[i].isDeleted) { %>class="red"<% } %>>
<% if (this[i].sex == 0) { %>

<% } else { %>

<% } %>
</div>
</script>

获取该script的innerHTML后, 通过模版引擎编译, 再插入到需要插入的DOM中

JS模版引擎[20行代码实现模版引擎读后感]的更多相关文章

  1. HTML5游戏实战(4): 20行代码实现FlappyBird

    这个系列很久没有更新了.几个月前有位读者调侃说,能不能一行代码做一个游戏呢.呵呵,接下来一段时间,我天天都在想这个问题,怎么能让GameBuilder+CanTK进一步简化游戏的开发呢.经过几个月的努 ...

  2. 20 行代码极速为 App 加上聊天功能

    现在很多 App 都需要集成 IM 功能,今天就为大家分享一下集成 IM 基本功能的步骤.本文内容以 JMessage 为例.极光 IM ( JMessage ) = 极光推送 ( JPush ) + ...

  3. Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (3)

    接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2) 7. 使用配置文件指定监听地址 打开 appsettings.json 文件,加入一行 "UseUrls&q ...

  4. HTML5游戏实战之20行代码实现打地鼠

    之前写过一篇打地鼠的博客70行的代码实现打地鼠游戏,细致思考过后,发现70行代码都有点多余了,应用tangide的控件特性,能够将代码量缩减到20行左右. 先show一下终于成果,点击试玩:打地鼠.或 ...

  5. 20 行代码:Serverless 架构下用 Python 轻松搞定图像分类和预测

    作者 | 江昱 前言 图像分类是人工智能领域的一个热门话题.通俗解释就是,根据各自在图像信息中所反映的不同特征,把不同类别的目标区分开来的图像处理方法. 它利用计算机对图像进行定量分析,把图像或图像中 ...

  6. 1. node.js环境搭建 第一行代码

    一.NodeJs简介 NodeJS官网上的介绍: Node.js is a platform built on  Chrome's JavaScript runtime  for easily bui ...

  7. Grid布局20行代码快速生成瀑布流

    网格布局 Grid 布局,好用又简单,至少比 Flex 要人性化一点,美中不足就是浏览器支持度差点. DOM结构 中间夹层为了后续拓展. CSS .grid { display: grid; grid ...

  8. javascript写贪吃蛇游戏(20行代码!)

    <!doctype html> <html> <body> <canvas id="can" width="400" ...

  9. 学会python可以上天!20行代码获取斗鱼平台房间数据,就是这么牛逼!

    Python(发音:英[?pa?θ?n],美[?pa?θɑ:n]),是一种面向对象.直译式电脑编程语言,也是一种功能强大的通用型语言,已经具有近二十年的发展历史,成熟且稳定.它包含了一组完善而且容易理 ...

随机推荐

  1. nand flash 和nor flash 区别

    NOR和NAND是现在市场上两种主要的非易失闪存技术.Intel于1988年首先开发出NOR flash技术,彻底改变了原先由EPROM和EEPROM一统天下的局面.紧接着,1989年,东芝公司发表了 ...

  2. linux中cron用法

    http://blog.chinaunix.net/uid-677314-id-83387.html

  3. HW3.12

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  4. PC-删除共享[绝对够狠的方法]

    1.批处理清除法-------------------------------------------------------------------------------------------- ...

  5. Robotium学习笔记一

    一. 重签名问题 1.从手机Pull所需的apk通过压缩工具删除META-INF目录 2.通过以下命令行进行签名 >jarsigner -keystore "C:\Documents ...

  6. poj1873 The Fortified Forest 凸包+枚举 水题

    /* poj1873 The Fortified Forest 凸包+枚举 水题 用小树林的木头给小树林围一个围墙 每棵树都有价值 求消耗价值最低的做法,输出被砍伐的树的编号和剩余的木料 若砍伐价值相 ...

  7. 如何用C#检查硬盘是否是固态硬盘SSD

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何用C#检查硬盘是否是固态硬盘SSD.

  8. Eclipse选择rt.jar的源代码的位置

    1.点 “window”-> "Preferences" -> "Java" -> "Installed JRES" 2. ...

  9. 递归小demo(1-100的和)

    public class demo1 { public static void main(String[] args) { //初始值为100 int n = 100; //调用number方法,返回 ...

  10. Microsoft.Net中数字签名技术

    概 述:本文以Microsoft.Net中创建签名的CAB文件为例,说明如何创建签名文件,从而使你的代码能够安全的在INTERNET上公布.希望能起到抛转引玉的作用. keyword:数字签名,Act ...