【问题标题】: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) ?
                

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 2011-02-08
                  • 1970-01-01
                  • 2012-08-12
                  • 2011-09-19
                  • 2013-01-12
                  • 2011-04-18
                  相关资源
                  最近更新 更多