开源的多行字符串工具：在JS中整段地写HTML-CSDN博客

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

项目地址： https://github.com/sindresorhus/multiline

转载于:https://www.cnblogs.com/jpfss/p/9109464.html

开源的多行字符串工具： 在JS中整段地写HTML

示例

原理

防压缩？

开源的多行字符串工具：在JS中整段地写HTML