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

]

不过我们可以看见，返回的数组仅仅包含第一个匹配项。我们须要用while轮回把上述逻辑包起来，如许才能获得所有的匹配项。

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

如不雅把膳绫擎的代码跑一遍，你就会看见<%name%> 和 <%age%>都被打印出来了。

下面，有意思的部分来了。辨认出模板中的匹配项后，我们要把他们调换成传递给函数的实际数据。最简单的办法就是应用WordStr函数。我们可以像如许来写：

{ 
 
  name: "Krasimir Tsonev", 
 
  profile: { age: 29 } 
 
}

不过直接如许子写的话还不克不及跑，因为在模板中应用<%profile.age%>的话，代码会被调换成data[‘profile.age’]，结不雅是undefined。如许我们就不克不及简单地用WordStr函数，而是要用其余办法。如不雅可以或许在<%和%>之间直接应用Javascript代码就最好了，如许就能对传入的数据直接求值，像下面如许：

var template = '<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>';

你可能会好奇，这是怎么实现的?这里John应用了new Function的语法，根据字符串创建一个函数。我们不妨来看个例子：

var fn = new Function("arg", "console.log(arg + 1);"); 
 
fn(2); // outputs 3

fn可是一个货真价实的函数。它接收一个参数，函数体是console.log(arg + 1);。上述代码等价于下面的代码：

var fn = function(arg) { 
 
  console.log(arg + 1); 
  
} 
 
fn(2); // outputs 3

var re = /<%([^%>]+)?%>/g, 
 
reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, 
 
code = 'var r=[];\n', 
 
cursor = 0; 
 
var add = function(line, js) { 
 
  js? code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n' : 
 
  code += 'r.push("' + line.WordStr(/"/g, '\\"') + '");\n'; 
 
}

	
			 2/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