变量值的替换、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
V8是google开发的JavaScript引擎, 它是 开源的 ,而且是用C++编写的。它用于客户端(Google Chrome)和服务器端(node.js)JavaScript应用程序。V8最初旨在提高Web浏览器中JavaScript执行的性能。为了提升速度,V8将JavaScript代码转换为更高效的机器代码,而不是使用解释器。
最近使用ELK的sentinl进行告警配置,sentinl的邮件通知支持mustache。mustache的核心是标签和logic-less.标签: 定义模板的时候,使用了{{name}}、{{#systems}}{{/systems}}标记. 这就是mustache的标签,只不过用{{}}替代了<>
编写Web代码有时会让开发人员编写一系列字符并像魔术那样神奇,这些字符会在浏览器中变成具体的图像,文字和动作。了解该技术可以帮助开发人员更好地调整他们作为程序员的技能
在挑选JavaScript 2D物理引擎的时候,不外乎两种主流的选择:第一种是老牌的Box2D,最开始的版本是C++实现的,后来有了很多种实现,比如flash版本和js版本,第二种是新潮的matter-js,matter-js比较轻量,API和文档都比较有友好。
JavaScript 引擎 V8 发布了 7.4 版本,目前处于 beta 阶段,正式版将于几个星期后与 Chrome 74 Stable 一起发布。此版本带来了一些新特性,并极大提升了性能。
本周精读的文章是 V8 引擎 Lazy Parsing,看看 V8 引擎为了优化性能,做了怎样的尝试吧!这篇文章介绍的优化技术叫 preparser,是通过跳过不必要函数编译的方式优化性能。
你有没有想过浏览器是如何读取和运行 JavaScript 代码的吗?这看起来很神奇,但你可以学到一些发生在幕后的事情。让我们通过介绍 JavaScript 引擎的精彩世界在这种语言中尽情畅游。
本文阅读的源码为Google V8 Engine v3.29.45,此版本的promise实现为js版本,在后续版本Google继续对其实现进行了处理。引入了es6语法等,在7.X版本迭代后,逐渐迭代成了C版本实现。
基本上从初始化引擎,到Isolate、handleScope、Context一直到编译其实都有记录,但是实在是无从下手。虽说我的博客也没有什么教学意义,但是至少也需要有一个中心和结论。
Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是,视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。此外,它还可以从服务器端导入数据并渲染最终的 HTML
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!