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

2018/05/30 10:23
阅读数 18

<div id="content" style="overflow:visible"> <div>这样看来ES6的多行字符模板可能就不需要了……<br></div><div><br></div><div><br></div><div>通过这个你可以整段整段地在JS中写HTML、SQL了。</div><div><br></div><h3>示例</h3><div><br></div><div>之前你得这样写</div><div><br></div><pre>var str = '' +<br>'&lt;!doctype html&gt;' +<br>'&lt;html&gt;' +<br>' &nbsp; &lt;body&gt;' +<br>' &nbsp; &nbsp; &nbsp; &lt;h1&gt;❤ unicorns&lt;/h1&gt;' +<br>' &nbsp; &lt;/body&gt;' +<br>'&lt;/html&gt;' +<br>'';</pre><div><br></div><div>写起来太复杂</div><div><br></div><div>或者这样写</div><div><br></div><pre>var str = '\<br>&lt;!doctype html&gt;\<br>&lt;html&gt;\<br>&nbsp; &nbsp;&lt;body&gt;\<br>&nbsp; &nbsp; &nbsp; &nbsp;&lt;h1&gt;❤ unicorns&lt;/h1&gt; \<br>&nbsp; &nbsp;&lt;/body&gt; \<br>&lt;/html&gt;';</pre><div><br></div><div>限制很多,你不能使用Windows的换行符,"\" 必须在最后;</div><div><br></div><div><br></div><div>现在你可以这样写</div><div><br></div><pre>var str = multiline(function(){/*<br>&lt;!doctype html&gt;<br>&lt;html&gt;<br>&nbsp; &nbsp; &lt;body&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;❤ unicorns&lt;/h1&gt;<br>&nbsp; &nbsp; &lt;/body&gt;<br>&lt;/html&gt;<br>*/});</pre><div><br></div><h3>原理<br></h3><div><br></div><div>非常简单:</div><div>&nbsp; 1. 在一个function中写上一段多行注释</div><div>&nbsp; 2. 将此function toString()</div><div>&nbsp; 3. 将多行注释内容用正则匹配出来</div><div><br></div><div>如下所示:</div><div><br></div><pre>var str = (function(){/*<br>&lt;!doctype html&gt;<br>&lt;html&gt;<br>&nbsp; &nbsp; &lt;body&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;❤ unicorns&lt;/h1&gt;<br>&nbsp; &nbsp; &lt;/body&gt;<br>&lt;/html&gt;<br>*/});<br>str.toString().match(/\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)\s*\*\//);</pre><div><br></div><div>整个源码压缩后可能不足1K。</div><div><br></div><h3>防压缩?</h3><div><br></div><div>注释被压缩工具去掉了怎么办?</div><div><br></div><ul><li>uglify: 使用 /*@preserve 代替 /* 即可</li><li>Closure Compiler(Google): 使用 /*@preserve 代替 /*</li><li>YUI Compressor: 使用 /*! 代替 /*</li></ul><div><br></div><div><br></div><div>所以最终版本是这个样子的:<br><br></div><pre>var str = multiline(function(){/*!@preserve<br>&lt;!doctype html&gt;<br>&lt;html&gt;<br>&nbsp; &nbsp; &lt;body&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;❤ unicorns&lt;/h1&gt;<br>&nbsp; &nbsp; &lt;/body&gt;<br>&lt;/html&gt;<br>*/console.log});</pre><div><br></div><div><br></div><div>项目地址: <a href="https://github.com/sindresorhus/multiline" target="_blank" rel="nofollow">https://github.com/sindresorhus/multiline</a></div> <div id="adsBottom" butbd1p="" hidden=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1941367294435664" data-ad-slot="5227599630" data-ad-format="auto" butbd1p="" hidden=""></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部