如何在html中写js,如何在js中优雅地写HTML模板

注释形式写在js中，然后用Function.prototype.toString方法拿到。

var compile = function (functionObject) {

return functionObject.toString().match(/\/\*([\s\S]*?)\*\//)[1];

};

var html = compile(function () {/*

title

content

*/

});

作为模板，当然还需要关键词的替换功能。接下来实现它！

参考ES6中的template string：

`

${title}

${content}

`

只需要替换符合/\$\{\w.+\}/g这个正则的文本即可。

用replace方法：

.replace(/\$\{\w.+\}/g, function (variable) {

return otherValue;

});

去掉${和}，然后返回实际值即可。

var compile = function (functionObject) {

return function (it) {

return functionObject.toString().match(/\/\*([\s\S]*?)\*\//)[1].replace(/\$\{\w.+\}/g, function (variable) {

return it[variable];

});

}

};

测试下：

var toHtml1 = compile(function () {/*

${title}

${content}

*/

});

var test2 = {

title: 'title string 2',

content: 'content string 2'

};

document.body.innerHTML += toHtml1(test2);

那么如果变量是这样的呢

${data.title}

？

只需要用.分割字符串，然后逐步拿到值就行了：

var value = it;

variable = variable.replace('${', '').replace('}', '');

variable.split('.').forEach(function (section) {

value = value[section];

});

return value;

测试下：

var test3 = {

data: {

title: 'title string 3',

content: 'content string 3'

}

};

var toHtml3 = compile(function () {/*

${data.title}

${data.content}

*/

});

toHtml3(test3);

"

title string 3

content string 3

"

See example here.

另：已经有人造了轮子：multiline