函數內巧用註釋實現多行文本拼接

時間 2019-11-11

標籤函數巧用註釋實現行文拼接简体版

原文原文鏈接

常常會遇到這麼個場景，須要將html代碼轉爲JavaScript輸出。
通常的作法，就是使用字符串拼接或者使用數組拼接後最終轉爲字符串。javascript

常規作法：html

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>函數內巧用註釋實現多行文本拼接</h1>' +
'   </body>' +
'</html>' +
'';

之前，我通常是用轉換工具實現，好比這個網址：HTML to JavaScript Convertorjava

用工具確實是個好方法，那有沒有更好的解決方案？之前曾用過函數內用注射來實現本地調試的效果，那麼註釋是否也能夠實現字符串拼接？git

實現方案：

function multiline(fn){
        var reCommentContents = /\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)[ \t]*\*\//;
    var match = reCommentContents.exec(fn.toString());
 
    if (!match) {
        throw new TypeError('Multiline comment missing.');
    }
 
    return match[1];
}

原理很是簡單：github

在一個function中寫上一段多行註釋
將此function toString()
將多行註釋內容用正則匹配出來

如何使用：

multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>函數內巧用註釋實現多行文本拼接</h1>
    </body>
</html>
*/});

函數執行後的輸出結果：數組

<!doctype html>
<html>
    <body>
        <h1>函數內巧用註釋實現多行文本拼接</h1>
    </body>
</html>

利用注射巧妙的省去了字符串拼接的煩惱，那麼在實際項目中是否可用？
通常在實際項目上線前，js都須要壓縮，而壓縮後將致使正則提取失敗。函數

如何防止註釋被壓縮工具去掉？工具

uglify: 使用 /@preserve 代替 / 便可
Closure Compiler(Google): 使用 /@preserve 代替 /
YUI Compressor: 使用 /! 代替 /

若是須要壓縮的話，可用以下方式輸出：調試

multiline(function(){/*!@preserve
<!doctype html>
<html>
    <body>
        <h1>函數內巧用註釋實現多行文本拼接</h1>
    </body>
</html>
*/});

項目地址:https://github.com/baofen14787/multilinecode

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。