在JavaScript里嵌入大量字符串常量的實現(xiàn)方法
數(shù)量少還好,多的話就密密麻麻的一坨文字,講究美觀的文藝青年們,會用大量的字符連接符號甚至加上縮進,強制換成好幾行。例如:
var html =
'<div>' +
'<p>Hello</p>' +
'<p>World'</p>' +
'</div>';
這還好,要是字符串里有不少雙引號單引號,那就更麻煩了,各種轉(zhuǎn)義字符看的眼花繚亂。
其實有個不怎么起眼的小技巧,就能解決這個問題。大家總認為字符串必須在"..."或'...'里面,這點沒錯。但還有一個地方的字符串也能當非代碼語義保存下來,那就是一個function的toString,把整個函數(shù)的代碼當字符串輸出——其中的注釋部分當然也是保留的!
所以我們寫個空函數(shù),里面就一個/**/注釋,其中就是我們想要的常量內(nèi)容。toString后加一個正則就可以提取我們想要的!
馬上試試:
var RES_CODE = _TEXT(function(){/*
#include <iostream>
int main()
{
std::cout << "Hello world" << std::endl;
return 0;
}
*/});
var RES_POEM = _TEXT(function(){/*
更吹落,星如雨。
寶馬雕車香滿路。
鳳簫聲動,玉壺光轉(zhuǎn),一夜魚龍舞。
蛾兒雪柳黃金縷,
笑語盈盈暗香去。
眾里尋他千百度,
驀然回首,那人卻在燈火闌珊處。
*/});
var RES_XML = _TEXT(function(){/*
<projectDescription>
<name>Hello</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.adobe.flexbuilder.project.flexbuilder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>com.adobe.flexbuilder.project.apollobuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
</projectDescription>
*/});
function _TEXT(wrap) {
return wrap.toString().match(/\/\*\s([\s\S]*)\s\*\//)[1];
}
alert(RES_CODE);
alert(RES_POEM);
alert(RES_XML);
OK!就是Chrome里把注釋每行前面的Tab去掉了,如果僅僅是放代碼的話問題也不大~ 當然有個前提是字符里不能出現(xiàn)*/
值得注意的是,壓縮代碼的時會過濾注釋,需要手動排除一部分。
相關文章
原生JS 實現(xiàn)的input輸入時表格過濾操作示例
這篇文章主要介紹了原生JS 實現(xiàn)的input輸入時表格過濾操作,結合實例形式分析了JavaScript基于頁面元素遍歷、運算、判斷實現(xiàn)的表格過濾相關操作技巧,需要的朋友可以參考下2019-08-08Javascript驗證Visa和MasterCard信用卡號的方法
這篇文章主要介紹了Javascript驗證Visa和MasterCard信用卡號的方法,涉及javascript正則驗證的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07JavaScript實現(xiàn)圖片懶加載的三種方案詳解
圖片懶加載,當圖片出現(xiàn)在可視區(qū)域再進行加載,提升用戶的體驗,這篇文章主要為大家整理了三個常用的圖片懶加載實現(xiàn)方法,希望對大家有所幫助2023-12-12JS中onpropertychange和onchange事件區(qū)別小結
當一個HTML元素的屬性用js改變的時候,都能通過onpropertychange來捕獲。例如一個文本text對象的value屬性被頁面的腳本修改的時候,onchange無法捕獲到,而onpropertychange卻能夠捕獲。2010-07-07webpack打包中path.resolve(__dirname, 'dist')的含義解
這篇文章主要介紹了webpack打包中path.resolve(__dirname, 'dist')的含義解析,path:path.resolve(__dirname, 'dist')就是在打包之后的文件夾上拼接了一個文件夾,在打包時,直接生成,本文給大家講解的非常詳細,需要的朋友可以參考下2023-05-05