只有20行Javascript代码！手把手教你写一个页面模板引擎

【技巧沙龙】AI开辟者拭魅战营-7分钟打造1个定制技能。7月22号，我们等你一路！

经由过程这种办法，我们可以根据字符串构造函数，包含它的参数和函数体。这不恰是我们想要的嘛!不过先别急，在构造函数之前，我们先来看看函数体是什么样子的。按照之前的设法主意，这个模板引擎最终返回的应当是一个编译好的模板。照样用之前的模板字符串作为例子，那么返回的内容应当类似于：

AbsurdJS 作者写的一篇教程，一步步教你如何用 Javascript 实现一个纯客户端的模板引擎。全部引擎实现只有不到 20 行代码。如不雅你能大年夜头看到尾的话，还能有不少收成的。你甚至可以追侍从年夜牛的脚步也本身着手写一个引擎。以下是全文。

不知道你有木有据说过一个基于Javascript的Web页面预处理器，叫做AbsurdJS。我是它的作者，今朝我还在赓续地完美它。最初我只是枷⒚鸫一个CSS的预处理器，不过后来扩大到了CSS和HTML，可以用来把Javascript代码转成CSS和HTML代码。当然，因为可以生成HTML代码，你也可以把它当成一个模板引擎，用于在标记说话中填充数据。

于是我又想着能不克不及写一些简单的代率攀来完美这个模板引擎，又能与其它现有的逻辑协同工作。AbsurdJS本身主如果以NodeJS的模块的情势宣布的，不过它也会宣布客户端版本。推敲到这些，我就不克不及直接应用现有的引擎了，因为它们大年夜部分都是在NodeJS上运行的，而不克不及跑在浏览器上。我须要的是一个小巧的，纯粹以Javascript编写的器械，可以或许直接运行在浏览器上。当我某天有时发明John Resig的┞封篇博客，我惊喜地发明，这不恰是我苦苦寻找的器械嘛!我稍稍做了一些修改，代码行数差不多20行阁下。个中的逻辑异常有意思。在这篇文┞仿中我会一步一步重现编写这个引擎的过程，如不雅你能一路看下去的话，你就会明白John的┞封个设法主意是多么锋利!

最初我的设法主意是如许子的：

var TemplateEngine = function(tpl, data) { 
 
    // magic here ... 
 
} 
 
var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>'; 
 
console.log(TemplateEngine(template, { 
 
    name: "Krasimir", 
 
    age: 29 
 
}));

一个简单的函数，输入是我们的模板以及数据对象，输出么估计你也很轻易想到，像下面如许子：

<p>Hello, my name is Krasimir. I'm 29 years old.</p>

个中第一步要做的是寻找琅绫擎的模板参数，然后调换成传给引擎的具体数据。我决定应用正则表达式来完成这一步。不过我不是最善于这个，所以写的不好的话迎接随时来喷。

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

这灸┞俘则表达式会捕获所有以<%开首，以%>结尾的片段。末尾的参数g(global)表示不只匹配一个，而是匹配所有相符的片段。Javascript琅绫擎有很多种应用正则表达式的办法，我们须要的是根据正则表达式输出一个数组，包含所有的字符串，这恰是exec所做的。

var re = /<%([^%>]+)?%>/g; 
 
var match = re.exec(tpl);

如不雅我们用console.log把变量match打印出来，我们会看见：

[ 
 
"<%name%>", 
 
" name ", 
 
index: 21, 
 
input: 
 
"<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>"	
			 1/8    1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　人工智能与机器学习有哪些不同
            【技巧沙龙】AI开辟者拭魅战营-7分钟打造1个定制技能。7月22号，我们等你一路！


传统的机械进修

            
                
                    
                
                【51CT>>>详细阅读


本文标题：只有20行Javascript代码！手把手教你写一个页面模板引擎
地址：http://www.17bianji.com/lsqh/36297.html
 1/2    1