这样看来ES6的多行字符模板可能就不需要了……
通过这个你可以整段整段地在JS中写HTML、SQL了。
示例
之前你得这样写
var str = '' +
'<!doctype html>' +
'<html>' +
' <body>' +
' <h1>❤ unicorns</h1>' +
' </body>' +
'</html>' +
'';
写起来太复杂
或者这样写
var str = '\
<!doctype html>\
<html>\
<body>\
<h1>❤ unicorns</h1> \
</body> \
</html>';
限制很多，你不能使用Windows的换行符，"\" 必须在最后；
现在你可以这样写
var str = multiline(function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});原理
非常简单：
1. 在一个function中写上一段多行注释
2. 将此function toString()
3. 将多行注释内容用正则匹配出来
如下所示：
var str = (function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});
str.toString().match(/\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)\s*\*\//);整个源码压缩后可能不足1K。
防压缩？
注释被压缩工具去掉了怎么办？
- uglify: 使用 /*@preserve 代替 /* 即可
- Closure Compiler(Google): 使用 /*@preserve 代替 /*
- YUI Compressor: 使用 /*! 代替 /*
所以最终版本是这个样子的：
var str = multiline(function(){/*!@preserve
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/console.log});
mark
如果模版里有变量，变量替换、循环等不好操作
@patient_sun #2
我喜欢coffeescript，其中之一是因为可以这样写，当然除非必要的话，否则还是不要在js中写html。
不错,我一般用第二种,
sublime text 选中文本 , Ctrl+Shift+L , End 巨方便
真麻烦，用ES6的反引号不就OK了。还可以支持变量的替换。
您好请问怎么引入mutiline
@路江世 #6
$ npm install --save multiline
在前端用有一定风险，因为压缩工具可能会去掉这些注释。