【Javascript】用 js 写一个模板引擎

⭐️ 本文首发自前端修罗场(点击加入)，是一个由资深开发者独立运行的专业技术社区，我专注 Web 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展。博主创作的《前端面试复习笔记》（点击订阅），广受好评，已帮助多人提升实力、拿到 offer。现在订阅，私聊我即可获取一次免费的模拟面试机会，帮你评估知识点的掌握程度，获得更全面的学习指导意见！

模板引擎在前后端都能用到，但是通过作为前端，我们只需要一些简单的模板引擎。

先上代码：

<!DOCTYPE html>
<html>
<head><title>模板引擎</title>
</head>
<body><div id="tpl" type="text/plain"><p>Today: { date }</p><a href="/{ user.id|safe }">{ user.company }</a></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript">var tpl = new Template($('#tpl').html());var date= new Date();var model = tpl.render({date: date,user: {id: '0000',company: 'babybus'}});$('#tpl').html(model);function Template(tpl) {varfn,match,code = ['var r=[];\nvar _html = function (str) { return str.replace(/&/g, \'&amp;\').replace(/"/g, \'&quot;\').replace(/\'/g, \''\').replace(/</g, \'&lt;\').replace(/>/g, \'&gt;\'); };'],re = /\{\s*([a-zA-Z\.\_0-9()]+)(\s*\|\s*safe)?\s*\}/m,addLine = function (text) {code.push('r.push(\'' + text.replace(/\'/g, '\\\'').replace(/\n/g, '\\n').replace(/\r/g, '\\r') + '\');');};while (match = re.exec(tpl)) {if (match.index > 0) {addLine(tpl.slice(0, match.index));}if (match[2]) {code.push('r.push(String(this.' + match[1] + '));');}else {code.push('r.push(_html(String(this.' + match[1] + ')));');}tpl = tpl.substring(match.index + match[0].length);}addLine(tpl);code.push('return r.join(\'\');');fn = new Function(code.join('\n'));this.render = function (model) {return fn.apply(model);};}</script></body>
</html>

这个我们能用这个模板引擎创建一个我们前端需要的html片段了。

这里面我们使用正则表达式去匹配字符串中的变量，当然，你要对js正则表达式熟练应用。

【Javascript】用 js 写一个模板引擎相关推荐

不用正则表达式，用javascript从零写一个模板引擎(一)
前言模板引擎的作用就是将模板渲染成html,html = render(template,data),常见的js模板引擎有Pug,Nunjucks,Mustache等.网上一些制作模板引擎的文章大部 ...
用js写一个模板引擎
模板引擎在前后端都能用到,但是通过作为前端,我们只需要一些简单的模板引擎. 先上代码: <code class="hljs xml has-numbering" style= ...
说说如何用JavaScript实现一个模板引擎
前言不知不觉就很长时间没造过什么轮子了,以前一直想自己实现一个模板引擎,只是没付诸于行动,最近终于在业余时间里抽了点时间写了一下.因为我们的项目大部分用的是 swig 或者 nunjucks ,于是 ...
Jade —— 源于 Node.js 的 HTML 模板引擎
2013-12-11 发布 Jade -- 源于 Node.js 的 HTML 模板引擎开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读 · 读完需要 69 分钟 ...
仿vue.js实现简单模板引擎（2kB）
仿vue.js实现简单模板引擎(2kB) 点击预览 index.html <!DOCTYPE html> <html lang="zh-CN"> <h ...
【Part2】用JS写一个Blog （node + vue + mongoDB）
[Part1]用JS写一个Blog (node + vue + mongoDB) 上一节前后端项目分别初始化完成,这一小节我就从后端项目开始写.实现mongoDB数据库的连接. 整理后端目录下面是通 ...
JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
js写一个关于内角和的工具
js写一个关于内角和的工具今天在刷视频的时候发现了一个关于内角和的视频这时,我不禁深思 1.内角和是什么玩意儿 2.我初中学过这个吗答案都是 NO 于是我又仔细的看了下去视频主要讲了通过正几 ...
【javascript】手写一个webpack loder
[javascript]手写一个webpack loder 手写一个loader 为什么需要loader? webpack 实际上只能处理js文件,那么对于除了js文件的其他类型的文件比如 css ...

【Javascript】用 js 写一个模板引擎

【Javascript】用 js 写一个模板引擎相关推荐

最新文章

热门文章