20 行代码实现模板引擎

更新日期: 2019-08-29阅读: 2.4k标签: 引擎

实现功能 : 

变量值的替换、if / else 及 for 循环等复杂操作。

// 最终效果
var opt = {
    hero: {
        name: 'Flash',
        age: 22,
    },
    skills: [
        'time travel',
        'speed force',
        'strike lightening'
    ]
}

var str = 
'<p>' 
    + '<% if( this.hero.name ) { %>'
    + '<b><% this.hero.name %></b>'
    + '<b><% this.hero.age %></b>'
    + '<% for ( let val of opt.skills ) { %>'
    + '<span><% val %></span>'
    + '<% } %>'
    + '<% } %>'
    + '</p>';

console.log(template(str, opt));

/* 
<p><b>Flash</b><b>22</b><span>time travel</span><span>speed force</span><span>strike lightening</span></p>
 */


核心代码 :

function template(html, options) {
    var rule = /<%(.+?)%>/g,
        ruleExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
        code = 'var arr = [];',
        cursor = 0,
        match;
    var add = function(line, js) {
        js 
        ? (code += line.match(ruleExp) ? line : 'arr.push(' + line + ');')
            : (code += line != '' ? 'arr.push("' + line.replace(/"/g, '\\"') + '");' : line);
        return add;
    }
    while( match = rule.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 arr.join("");';
    return new Function(code.replace(/[\r\t\n]/g, ' ')).apply(options);
}


难点解析 :

首先搞清楚两段正则表达式所表示的意思。

var rule = /<%(.+?)%>/g 指的是匹配 <% %> 中的值。

var ruleExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g 则匹配 <% %> 中含有的 JS 语句。

利用 exec 方法将变量替换为对象属性值,注意此方法输出的是一个数组,形如下方代码。

[
    "<%name%>",
    " name ", 
    index: 21,
    input: 
    "<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>"
]

利用 cursor 与 index 分割模板与普通字符串,即当遇到 <% %> 时就分割,不属于模板内的直接用 push 方法将字符串传入 arr 中,此时注意转义 " 符号。属于模板中的值则进行进一步的判断,当值为语句时则不 push 到 arr 中,当值为变量时则需要将变量 push 到 arr 中。

利用 arr.join("") 方法将数组转换为字符串并用正则将字符串里面的空格全部替换掉。

最后使用 new Function(code).apply(options) 让字符串代码变得可执行,apply 的作用则是让值的引用指向正确的对象,即确保 this 指向正确。

原文来自:https://github.com/RetroAstro/cosmos-blog/blob/master/posts/6.md


链接: https://fly63.com/article/detial/5605

V8引擎是如何工作?

V8是google开发的JavaScript引擎, 它是 开源的 ,而且是用C++编写的。它用于客户端(Google Chrome)和服务器端(node.js)JavaScript应用程序。V8最初旨在提高Web浏览器中JavaScript执行的性能。为了提升速度,V8将JavaScript代码转换为更高效的机器代码,而不是使用解释器。

Javascript模版引擎mustache.js简介

最近使用ELK的sentinl进行告警配置,sentinl的邮件通知支持mustache。mustache的核心是标签和logic-less.标签: 定义模板的时候,使用了{{name}}、{{#systems}}{{/systems}}标记. 这就是mustache的标签,只不过用{{}}替代了<>

JavaScript 引擎

编写Web代码有时会让开发人员编写一系列字符并像魔术那样神奇,这些字符会在浏览器中变成具体的图像,文字和动作。了解该技术可以帮助开发人员更好地调整他们作为程序员的技能

JavaScript物理引擎之Matter.js与Box2d性能对比

在挑选JavaScript 2D物理引擎的时候,不外乎两种主流的选择:第一种是老牌的Box2D,最开始的版本是C++实现的,后来有了很多种实现,比如flash版本和js版本,第二种是新潮的matter-js,matter-js比较轻量,API和文档都比较有友好。

JS 引擎 V8 发布 v7.4,性能又大幅提高了

JavaScript 引擎 V8 发布了 7.4 版本,目前处于 beta 阶段,正式版将于几个星期后与 Chrome 74 Stable 一起发布。此版本带来了一些新特性,并极大提升了性能。

精读《V8 引擎 Lazy Parsing》

本周精读的文章是 V8 引擎 Lazy Parsing,看看 V8 引擎为了优化性能,做了怎样的尝试吧!这篇文章介绍的优化技术叫 preparser,是通过跳过不必要函数编译的方式优化性能。

JavaScript引擎是如何工作的?从调用栈到Promise你需要知道的一切

你有没有想过浏览器是如何读取和运行 JavaScript 代码的吗?这看起来很神奇,但你可以学到一些发生在幕后的事情。让我们通过介绍 JavaScript 引擎的精彩世界在这种语言中尽情畅游。

从Google V8引擎剖析Promise实现

本文阅读的源码为Google V8 Engine v3.29.45,此版本的promise实现为js版本,在后续版本Google继续对其实现进行了处理。引入了es6语法等,在7.X版本迭代后,逐渐迭代成了C版本实现。

V8引擎-枚举+位运算实现参数配置

基本上从初始化引擎,到Isolate、handleScope、Context一直到编译其实都有记录,但是实在是无从下手。虽说我的博客也没有什么教学意义,但是至少也需要有一个中心和结论。

Node js 视图引擎

Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是,视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。此外,它还可以从服务器端导入数据并渲染最终的 HTML

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!