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

jopen 10年前
这样看来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});