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

return

"<p>Hello, my name is " +

this.name +

". I\'m " +

this.profile.age +

" years old.</p>";

当然啦，实际的模板引擎中，我们会把模板切分为小段的文本和有意义的Javascript代码。前面你可能看见我应用简单的字符串拼接来达到想要的效不雅，不过这并不是100%相符我们请求的做法。因为应用者很可能会传递加倍复杂的Javascript代码，所以我们这儿须要再来一个轮回，如下：

var template = 
 
'My skills:' + 
 
'<%for(var index in this.skills) {%>' + 
 
'<a href=http://developer.51cto.com/art/201707/"">' + 
 
'<%}%>';

如不雅应用字符串拼接的话，代码就应当是下面的样子：

return 
 
'My skills:' + 
 
for(var index in this.skills) { + 
 
'<a href=http://developer.51cto.com/art/201707/"">' + 
 
this.skills[index] + 
 
'</a>' + 
 
}

当然，这个代码不克不及直接跑，跑了会掉足。于是我用了John的文┞仿里写的逻辑，把所有的字符串放在一个数组里，在法度榜样的最后把它们拼接起来。

好了，如许就能跑了，然则还不敷好。这里我们以data["property"]的方法应用了一个简单对象来传递数据，然则实际情况下我们很可能须要更复杂的嵌套对象。所以我们稍微修改了一下data对象：

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

下一步就是收集模板琅绫擎不合的代码行，用于生成函数。经由过程前面介绍的办法，我们可以知道模板中有哪些占位符(译者注：或者嗣魅正则表达式的匹配项)以及它们的地位。所以，依附一个帮助变量(cursor，游标)，我们就能获得想要的结不雅。

var TemplateEngine = function(tpl, data) { 
	
			 3/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