这样看来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});