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

jopen 10年前發布 | 16K 次閱讀 JS
這樣看來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});


 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
  本文地址：http://www.baiduhome.net/news/view/8d3424