JavaScript 模板引擎 - 将左手三元(无赋值)转换为条件语句
JavaScript templating engine - Converting left hand ternary (without an assignment) into conditional statement(s)
我找到了 完美的 JavaScript 模板引擎,由 Krasimir 构建,它正是我所需要的。
模板引擎工作得很好,但我自然无法抗拒对它进行一些修改甚至可能添加一些功能的冲动。
不幸的是,我无法理解某些代码。
代码如下:
var TemplateEngine = function(html, options) {
var re = /<%([^%>]+)?%>/g,
reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
code = 'var r=[];\n',
cursor = 0,
match;
var add = function(line, js) {
/* --begin problem */
js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') : (code += line != '' ? 'r.push("' + line.replace(/"/g, '\"') + '");\n' : '');
/* --end problem */
return add;
};
while (match = re.exec(html)) {
add(html.slice(cursor, match.index))(match[1], true);
cursor = match.index + match[0].length;
}
add(html.substr(cursor, html.length - cursor));
code += 'return r.join("");';
return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
};
这是我不明白的行:
js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') : (code += line != '' ? 'r.push("' + line.replace(/"/g, '\"') + '");\n' : '');
我不是 JavaScript 的新手,但这是一些看起来很奇怪的代码,据我所知,它是一个没有左手赋值的三元运算符(如果我错了请纠正我)
因此,为了更好地理解作者在做什么,我尝试将三元运算符转换为条件语句。
这是我目前拥有的:
if(js) {
if(code += line.match(reExp)) {
line += '\n';
} else {
line += 'r.push(' + line + ');\n';
}
} else {
if(code += line !== '') {
line += 'r.push("' + line.replace(/"/g, '\"') + '");\n';
} else {
line += "";
}
}
失败并抛出错误 "Uncaught SyntaxError: Unexpected token if"
任何人都可以帮我将这段代码转换成条件语句,甚至可以给我解释一下代码的作用吗?
同样出于好奇,谁能告诉我 IE8 是否支持此代码?
注意:我不介意 IE8 支持我只是想知道这个模板引擎是否支持 IE8。
上找到模板引擎
三元运算符 ?:
在 JavaScript 中的工作方式与在 C 中一样。在这种情况下,我们可以将表达式格式化为
js? (code += (line.match(reExp)? line + '\n' : 'r.push(' + line + ');\n')
: (code += line != '' ? 'r.push("' + line.replace(/"/g, '\"') + '");\n' : '');
它看起来就像一个 if-else 块。整个表达式的计算结果为两个复合赋值表达式之一,具体取决于 js
的值。这个表达式的值被忽略了,但我们仍然可以从中得到副作用。作者干脆选择写这个而不是if (js) { code += ...; } else { code += ...; }
.
我知道这个问题没有得到太多关注,但我想我还是会 post 这个答案,希望它能帮助面临这个问题的人。
经过一些努力和来自 JSHint 的 ton 的帮助,我找到了解决问题的方法。
我将当前编译的行附加到 "line" 变量而不是 "code" 变量。
这导致 "line" 变量包含模板的最后一行和编译代码的其余部分,这意味着 "code" 变量没有代码 :D 并且因此相当于 null
.
这是我弄清楚我做错了什么之前的代码:
var add = function(line, js) {
if(js) {
if(code += line.match(reExp)) {
line += '\n';
} else {
line += 'r.push(' + line + ');\n';
}
} else {
if(code += line !== '') {
line += 'r.push("' + line.replace(/"/g, '\"') + '");\n';
} else {
line += "";
}
}
};
在用 "code" 变量替换 "line" 变量并在此处进行一些优化后,最终的工作答案是:
var add = function(line, js) {
if(js && typeof js !== "undefined") {
if(line.match(reExp)) {
code += line;
} else {
code += "r.push(" + line + ");";
}
} else if(line !== "") {
code += "r.push(\"" + line.replace(/"/g, '\"') + "\");";
}
};
您不应该将代码附加到必须附加到代码的行,试试这个:
if (js && type(js) !== "undefined") {
if (line.match(reExp)) {
code += line;
} else {
code += "r.push(" + line + ");";
}
} else if (line !== "") {
code = code + "r.push(\"" + line.replace(/"/g, '\"') + "\");";
}
我找到了 完美的 JavaScript 模板引擎,由 Krasimir 构建,它正是我所需要的。
模板引擎工作得很好,但我自然无法抗拒对它进行一些修改甚至可能添加一些功能的冲动。
不幸的是,我无法理解某些代码。
代码如下:
var TemplateEngine = function(html, options) {
var re = /<%([^%>]+)?%>/g,
reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
code = 'var r=[];\n',
cursor = 0,
match;
var add = function(line, js) {
/* --begin problem */
js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') : (code += line != '' ? 'r.push("' + line.replace(/"/g, '\"') + '");\n' : '');
/* --end problem */
return add;
};
while (match = re.exec(html)) {
add(html.slice(cursor, match.index))(match[1], true);
cursor = match.index + match[0].length;
}
add(html.substr(cursor, html.length - cursor));
code += 'return r.join("");';
return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
};
这是我不明白的行:
js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') : (code += line != '' ? 'r.push("' + line.replace(/"/g, '\"') + '");\n' : '');
我不是 JavaScript 的新手,但这是一些看起来很奇怪的代码,据我所知,它是一个没有左手赋值的三元运算符(如果我错了请纠正我)
因此,为了更好地理解作者在做什么,我尝试将三元运算符转换为条件语句。
这是我目前拥有的:
if(js) {
if(code += line.match(reExp)) {
line += '\n';
} else {
line += 'r.push(' + line + ');\n';
}
} else {
if(code += line !== '') {
line += 'r.push("' + line.replace(/"/g, '\"') + '");\n';
} else {
line += "";
}
}
失败并抛出错误 "Uncaught SyntaxError: Unexpected token if"
任何人都可以帮我将这段代码转换成条件语句,甚至可以给我解释一下代码的作用吗?
同样出于好奇,谁能告诉我 IE8 是否支持此代码?
注意:我不介意 IE8 支持我只是想知道这个模板引擎是否支持 IE8。
三元运算符 ?:
在 JavaScript 中的工作方式与在 C 中一样。在这种情况下,我们可以将表达式格式化为
js? (code += (line.match(reExp)? line + '\n' : 'r.push(' + line + ');\n')
: (code += line != '' ? 'r.push("' + line.replace(/"/g, '\"') + '");\n' : '');
它看起来就像一个 if-else 块。整个表达式的计算结果为两个复合赋值表达式之一,具体取决于 js
的值。这个表达式的值被忽略了,但我们仍然可以从中得到副作用。作者干脆选择写这个而不是if (js) { code += ...; } else { code += ...; }
.
我知道这个问题没有得到太多关注,但我想我还是会 post 这个答案,希望它能帮助面临这个问题的人。
经过一些努力和来自 JSHint 的 ton 的帮助,我找到了解决问题的方法。
我将当前编译的行附加到 "line" 变量而不是 "code" 变量。
这导致 "line" 变量包含模板的最后一行和编译代码的其余部分,这意味着 "code" 变量没有代码 :D 并且因此相当于 null
.
这是我弄清楚我做错了什么之前的代码:
var add = function(line, js) {
if(js) {
if(code += line.match(reExp)) {
line += '\n';
} else {
line += 'r.push(' + line + ');\n';
}
} else {
if(code += line !== '') {
line += 'r.push("' + line.replace(/"/g, '\"') + '");\n';
} else {
line += "";
}
}
};
在用 "code" 变量替换 "line" 变量并在此处进行一些优化后,最终的工作答案是:
var add = function(line, js) {
if(js && typeof js !== "undefined") {
if(line.match(reExp)) {
code += line;
} else {
code += "r.push(" + line + ");";
}
} else if(line !== "") {
code += "r.push(\"" + line.replace(/"/g, '\"') + "\");";
}
};
您不应该将代码附加到必须附加到代码的行,试试这个:
if (js && type(js) !== "undefined") {
if (line.match(reExp)) {
code += line;
} else {
code += "r.push(" + line + ");";
}
} else if (line !== "") {
code = code + "r.push(\"" + line.replace(/"/g, '\"') + "\");";
}