underscore.js - 如果没有行号，调试 underscore.js 模板很困难

Question

我正在将一个相当大的 php 模板(其中包含基本逻辑的页面)转换为一个 underscore.js 模板。

问题是我一直有错误，并且它是缩小的“编译”版本在抛出错误时没有提供有用的信息或行号。

有没有办法在 underscore.js 中获得更好的模板调试(例如行号)？如果没有，有没有办法让模板在某个点终止(这样我可以缩小错误的范围)。

Answer 1

截至 2012 年 4 月的勘误表: Underscore 1.3.2(2012 年 4 月 9 日)引入了对 _.template() 的更改，查看changelog和来源，因为这里描述的复杂性可能已经出现。

是和否 - 模板首先被翻译成一串(难以阅读的)Javascript代码并作为一个代码块执行，所以如果你正在寻找语法错误，你必须从你的模板中删除有问题的代码'重新尝试执行。

但如果是别的东西，嵌入一个 <% return __p.join(''); %>将中断执行并将模板的结果返回到该点(阅读源代码以了解原因，但本质上，模板 block 的结果被一个接一个地放入名为 __p 的数组中)。

您还可以在模板评估时进行日志记录(即，将 <% console.log(<..>) %> 放入模板中以查看诊断信息。对于更高级的故障排除，您还可以将 <% debugger; %> 放入模板代码中以放入您喜欢的调试器中。虽然您的代码'll see 将不友好阅读您将有权访问评估模板范围。

如果我正在做大量工作并且需要更广泛的调试工具，我可能会复制 underscore.js脚本并将一些诊断支持代码添加到 _.template()功能本身。例如:

_.template = function(str, data) {
  var c  = _.templateSettings;
  var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +
    'with(obj||{}){__p.push(\'' +
    str.replace(/\\/g, '\\\\')
       .replace(/'/g, "\\'")
       .replace(c.interpolate, function(match, code) {
         return "'," + code.replace(/\\'/g, "'") + ",'";
       })
       .replace(c.evaluate || null, function(match, code) {
         return "');" + code.replace(/\\'/g, "'")
                            .replace(/[\r\n\t]/g, ' ') + "__p.push('";
       })
       .replace(/\r/g, '\\r')
       .replace(/\n/g, '\\n')
       .replace(/\t/g, '\\t')
       + "');}return __p.join('');";
  console.log(tmpl.replace(/;/g, '\n')); // <- dump compiled code to console before evaluating
  var func = new Function('obj', tmpl);
  return data ? func(data) : func;
};