在JavaScript里嵌入大量字符串常量的實(shí)現(xiàn)方法
數(shù)量少還好,多的話就密密麻麻的一坨文字,講究美觀的文藝青年們,會(huì)用大量的字符連接符號(hào)甚至加上縮進(jìn),強(qiáng)制換成好幾行。例如:
var html =
'<div>' +
'<p>Hello</p>' +
'<p>World'</p>' +
'</div>';
這還好,要是字符串里有不少雙引號(hào)單引號(hào),那就更麻煩了,各種轉(zhuǎn)義字符看的眼花繚亂。
其實(shí)有個(gè)不怎么起眼的小技巧,就能解決這個(gè)問(wèn)題。大家總認(rèn)為字符串必須在"..."或'...'里面,這點(diǎn)沒(méi)錯(cuò)。但還有一個(gè)地方的字符串也能當(dāng)非代碼語(yǔ)義保存下來(lái),那就是一個(gè)function的toString,把整個(gè)函數(shù)的代碼當(dāng)字符串輸出——其中的注釋部分當(dāng)然也是保留的!
所以我們寫(xiě)個(gè)空函數(shù),里面就一個(gè)/**/注釋,其中就是我們想要的常量?jī)?nèi)容。toString后加一個(gè)正則就可以提取我們想要的!
馬上試試:
var RES_CODE = _TEXT(function(){/*
#include <iostream>
int main()
{
std::cout << "Hello world" << std::endl;
return 0;
}
*/});
var RES_POEM = _TEXT(function(){/*
更吹落,星如雨。
寶馬雕車香滿路。
鳳簫聲動(dòng),玉壺光轉(zhuǎn),一夜魚(yú)龍舞。
蛾兒雪柳黃金縷,
笑語(yǔ)盈盈暗香去。
眾里尋他千百度,
驀然回首,那人卻在燈火闌珊處。
*/});
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去掉了,如果僅僅是放代碼的話問(wèn)題也不大~ 當(dāng)然有個(gè)前提是字符里不能出現(xiàn)*/
值得注意的是,壓縮代碼的時(shí)會(huì)過(guò)濾注釋,需要手動(dòng)排除一部分。
相關(guān)文章
原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過(guò)濾操作示例
這篇文章主要介紹了原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過(guò)濾操作,結(jié)合實(shí)例形式分析了JavaScript基于頁(yè)面元素遍歷、運(yùn)算、判斷實(shí)現(xiàn)的表格過(guò)濾相關(guān)操作技巧,需要的朋友可以參考下2019-08-08Javascript驗(yàn)證Visa和MasterCard信用卡號(hào)的方法
這篇文章主要介紹了Javascript驗(yàn)證Visa和MasterCard信用卡號(hào)的方法,涉及javascript正則驗(yàn)證的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07JavaScript實(shí)現(xiàn)圖片懶加載的三種方案詳解
圖片懶加載,當(dāng)圖片出現(xiàn)在可視區(qū)域再進(jìn)行加載,提升用戶的體驗(yàn),這篇文章主要為大家整理了三個(gè)常用的圖片懶加載實(shí)現(xiàn)方法,希望對(duì)大家有所幫助2023-12-12怎么使用javascript深度拷貝一個(gè)數(shù)組
一般情況下,使用 “=” 可以實(shí)現(xiàn)賦值。但對(duì)于數(shù)組、對(duì)象、函數(shù)等這些引用類型的數(shù)據(jù),這個(gè)符號(hào)就不好使了。下面我們來(lái)詳細(xì)學(xué)習(xí)下吧2019-06-06JS 自動(dòng)完成 AutoComplete(Ajax 查詢)
實(shí)現(xiàn)類似于百度或谷歌的搜索下拉列表的,就是打開(kāi)百度往里輸入你要查詢的條件,只要你一輸入他就自動(dòng)彈出一個(gè)下拉列表框,并顯示相關(guān)所有搜索內(nèi)容2009-07-07JS中onpropertychange和onchange事件區(qū)別小結(jié)
當(dāng)一個(gè)HTML元素的屬性用js改變的時(shí)候,都能通過(guò)onpropertychange來(lái)捕獲。例如一個(gè)文本text對(duì)象的value屬性被頁(yè)面的腳本修改的時(shí)候,onchange無(wú)法捕獲到,而onpropertychange卻能夠捕獲。2010-07-07webpack打包中path.resolve(__dirname, 'dist')的含義解
這篇文章主要介紹了webpack打包中path.resolve(__dirname, 'dist')的含義解析,path:path.resolve(__dirname, 'dist')就是在打包之后的文件夾上拼接了一個(gè)文件夾,在打包時(shí),直接生成,本文給大家講解的非常詳細(xì),需要的朋友可以參考下2023-05-05