John Resig 的“JavaScript 微模板”有什么进展吗？答案

【问题标题】：Any advances on John Resig's "JavaScript Micro-Templating"?John Resig 的“JavaScript 微模板”有什么进展吗？
【发布时间】：2009-09-28 03:24:57
【问题描述】：

所以我在 JavaScript Micro-Templating 上看到了 John Resig 的这篇帖子，我需要这样的微模板引擎。

但他在帖子中表示，他将在他的 JavaScript 忍者秘密一书中保留一个更完善的版本，并提到他希望看到它的发展。

所以我想知道，John Resig 的这个微模板引擎是否有更稳定/更高级的版本？如果是这样，我怎样才能获得它？那本 JavaScript 书在我的国家/地区不可用。

【问题讨论】：

标签： javascript templating-engine

【解决方案1】：

正如@James 指出的那样，无论您居住在哪个国家/地区，您都可以在线购买该 pdf。

有没有更稳定/先进的这个微模板的版本 John Resig 的引擎？

参见Rick Stahl's blog（在一堆客户端模板引擎上），他在其中修复了 Resig 的微模板引擎中的单引号问题。这是我见过的对源代码的唯一改进。

【讨论】：

我现在正在使用它，它很棒。虽然它确实让我写了这个疯狂： $("input").each(function() { eval("data." + $(this).attr("id") + "=\"" + $(this ).val() + "\";"); }); （这会设置一个包含所有输入字段值的“数据”对象，然后我将其传递给模板函数，以方便访问字段值。）
@Steve: var data = {}; $("input").each(function() { data[this.id] = this.value }); 见stackoverflow.com/questions/1184123/…
为了快速参考，我根据他的示例创建了一个 repo：github.com/clouddueling/javascript-micro-templating

【解决方案2】：

另见jQote2。我将引用网站本身：

jQote（读作类似于星际迷航的 Chakotey）基本上是对 John Resig 出色的 JavaScript 微模板实用程序的重写。我把他的代码移植到 jQuery 中，彻底检查了解析/转换部分并扩展了它的功能，以尽量减少每个人的编码工作。

【讨论】：

【解决方案3】：

看看jQuery插件

https://github.com/vkiryukhin/vkTemplate,

基于 John Resig 的微模板引擎。修复了“单引号”问题，并根据插件的架构稍微简化了引擎。

http://www.eslinstructor.net/vktemplate/的演示和文档

【讨论】：

【解决方案4】：

如果您访问 http://www.manning.com/resig/，您可以预订 PDF 以查看即将出版的书籍。

【讨论】：

【解决方案5】：

underscore.js 中的模板函数是基于 John Resig 的微模板引擎。 http://documentcloud.github.com/underscore/#template

【讨论】：

【解决方案6】：

简单的模板引擎……超级小……基于 John Resigs 代码……经过改进。仅 335 字节，速度极快，并且修复了原始代码中的许多错误。

https://github.com/leolems/javascript/tree/master/templates

【讨论】：

【解决方案7】：

这是 John Resig 的（稍作修改）脚本，来自 Rick Strahl 的网站 (http://weblog.west-wind.com/posts/2008/Oct/13/Client-Templating-with-jQuery)

var _tmplCache = {}
this.tmpl= function(str, data) {
/// <summary>
/// Client side template parser that uses &lt;#= #&gt; and &lt;# code #&gt; expressions.
/// and # # code blocks for template expansion.
/// NOTE: chokes on single quotes in the document in some situations
///       use &amp;rsquo; for literals in text and avoid any single quote
///       attribute delimiters.
/// </summary>    
/// <param name="str" type="string">The text of the template to expand</param>    
/// <param name="data" type="var">
/// Any data that is to be merged. Pass an object and
/// that object's properties are visible as variables.
/// </param>    
/// <returns type="string" />  
var err = "";
try {
    var func = _tmplCache[str];
    if (!func) {
        var strFunc =
        "var p=[],print=function(){p.push.apply(p,arguments);};" +
                    "with(obj){p.push('" +
        //                        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('');";

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

        //alert(strFunc);
        func = new Function("obj", strFunc);
        _tmplCache[str] = func;
    }
    return func(data);
} catch (e) { err = e.message; }
return "< # ERROR: " + err.htmlEncode() + " # >";
}

可以这样使用： tmpl($('myHtmlTempl').html(), 数据);

我对其进行了测试，它适用于“单引号”（在我找到这个之前，这是我的主要问题）。此版本已准备好使用标记。

【讨论】：

【解决方案8】：

我所做的一个小改进/自定义是允许在模板的 id 中使用连字符。使用原始代码，这将不起作用：

<script type="text/html" id="my-awesome-template">
  <!-- template contents -->
</script>

它实际上只是尝试对字符串“my-awesome-template”进行模板化，这显然只会返回“my-awesome-template”。

为了解决这个问题，我在第 9 行左右修改了正则表达式

var fn = !/\W/.test(str) ?

到以下：

var fn = !/[^a-zA-Z0-9_-]/.test(str) ?

【讨论】：