更改模板标签后,John Resig 的微模板出现语法错误 <# % 等

Posted

技术标签:

【中文标题】更改模板标签后,John Resig 的微模板出现语法错误 <# % 等【英文标题】:Syntax Error with John Resig's Micro Templating after changing template tags <# % etc更改模板标签后,John Resig 的微模板出现语法错误 <# % 等 【发布时间】:2011-02-08 14:50:03 【问题描述】:

我在使用 John Resig 的微模板时遇到了一些问题。

谁能帮我解释为什么它不起作用?

这是模板

<script type="text/html" id="row_tmpl">
test content %=id% %=name%
</script>

以及引擎的修改部分

str
      .replace(/[\r\t\n]/g, " ")
      .split("%").join("\t")
      .replace(/((^|%>)[^\t]*)'/g, "$1\r")
      .replace(/\t=(.*?)%>/g, "',$1,'")
      .split("\t").join("');")
      .split("%").join("p.push('")
      .split("\r").join("\\'")
  + "');return p.join('');");

javascript

var dataObject =  "id": "27", "name": "some more content" ;
var html = tmpl("row_tmpl", dataObject);

结果,如您所见, =id 和 =name 似乎在错误的位置?除了将模板语法块从 更改为 % % 我没有更改任何内容。

这是来自 Firefox。

Error: syntax error
Line: 30, Column: 89
Source Code:
var p=[],print=function()p.push.apply(p,arguments);;with(obj)p.push(' test content ');=idp.push(' ');=namep.push(' ');return p.join('');

【问题讨论】:

当我提到“引擎的修改部分”时,我真的很困惑。 【参考方案1】:

要更改 John Resig 的微模板库中的标签,您必须更改原始代码中的两个 split() 调用和两个正则表达式。

例如,将原始标签 更改为 = 是这样完成的

//ORIGINAL
str
  .replace(/[\r\t\n]/g, " ")
  .split("<%").join("\t")              //CHANGE string "<%"
  .replace(/((^|%>)[^\t]*)'/g, "$1\r") //CHANGE expression /((^|%>)[^\t]*)'/g
  .replace(/\t=(.*?)%>/g, "',$1,'")    //CHANGE expression /\t=(.*?)%>/g
  .split("\t").join("');")             
  .split("%>").join("p.push('")        //CHANGE string "%>"
  .split("\r").join("\\'")

//INTO
str
  .replace(/[\r\t\n]/g, " ")
  .split("").join("\t")                //INTO string ""
  .replace(/((^|\\)[^\t]*)'/g, "$1\r") //INTO expression /((^|\\)[^\t]*)'/g
  .replace(/\t=(.*?)\\/g, "',$1,'")    //INTO expression /\t=(.*?)\\/g
  .split("\t").join("');")
  .split("").join("p.push('")          //INTO string ""
  .split("\r").join("\\'")

在引擎中更改正则表达式时要小心,必须对特殊字符进行转义。在正则表达式的 javascript 风格中,这些是: \ / [ ] ( ) ? + * | . ^ $ 通过在它们前面加上“\”来转义它们。这不适用于拆分参数,因为在这种情况下它们不是正则表达式。

【讨论】:

【参考方案2】:

当您修改引擎时,您忘记更改这些行:

  .replace(/((^|%>)[^\t]*)'/g, "$1\r")
  .replace(/\t=(.*?)%>/g, "',$1,'")

到这里:

  .replace(/((^|%\)[^\t]*)'/g, "$1\r")
  .replace(/\t=(.*?)%\/g, "',$1,'")

【讨论】:

以上是关于更改模板标签后,John Resig 的微模板出现语法错误 <# % 等的主要内容,如果未能解决你的问题,请参考以下文章

John Resigs 微模板与 JQuery 模板或其他?

addEvent()作者:John Resig

对 John Resig 的 JavaScript 类框架的改进

《jQuery实战》 Jquery之父John Resig 推荐序言

John Resig 的 OO JavaScript 实现生产安全吗?

使用 John Resig 的“简单 JavaScript 继承”如何从方法中调用超级方法以及额外代码?