我们甚至不须要显式地传参数给这个函数。我们应用apply办法来调用它。它会主动设定函数履行的高低文。这就是为什愦我们能在函数琅绫擎应用this.name。这里this指向data对象。

模板引擎接近完成了，不过还有一点，我们须要支撑更多复杂的语句，比如前提断定和轮回。我们接着膳绫擎的例子持续写。

var template = 
 
'My skills:' + 
 
'<%for(var index in this.skills) {%>' + 
 
'<a href=http://developer.51cto.com/art/201707/"#">' + 
 
'<%}%>'; 
 
console.log(TemplateEngine(template, { 
 
  skills: ["js", "html", "css"] 
 
}));  

这里会产生一个异常，Uncaught SyntaxError: Unexpected token for。如不雅我们调试一下，把code变量打印出来，我们就能发明问题地点。

当然，编译出来的结不雅也是对的。

var r=[]; 
 
r.push("My skills:"); 
 
r.push(for(var index in this.skills) {); 
 
r.push("<a href=http://developer.51cto.com/"/">"); 
 
r.push(this.skills[index]); 
 
r.push("</a>"); 
 
r.push(}); 
 
r.push(""); 
 
return r.join("");  

带有for轮回的那一行不该该被直接放到数组琅绫擎，而是应当作为脚本的一部分直接运行。所以我们在把内容添加到code变量之前还要多做一个断定。

这里我们新增长了一个正则表达式。它会断定代码中是否包含if、for、else等等关键字。如不雅有的话就直接添加到脚本代码中去，不然就添加到数组中去。运行结不雅如下：

var r=[]; 
 
r.push("My skills:"); 
 
for(var index in this.skills) { 
 
  r.push("<a href=http://developer.51cto.com/"#/">"); 
 
  r.push(this.skills[index]); 
 
  r.push("</a>"); 
 
} 
 
r.push(""); 
 
return r.join("");  

My skills:<a href=http://developer.51cto.com/art/201707/	
			
 6/8   首页 上一页 4 5 6 7 8 下一页 尾页
	
			

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


传统的机械进修

            
                
                    
                
                【51CT>>>详细阅读


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