把JS與CSS寫在同一個(gè)文件里的書寫方法

我們經(jīng)常把多個(gè)CSS或者多個(gè)JS并成一個(gè)，以節(jié)省請(qǐng)求，但是這樣最少還是要兩個(gè)。在MSDN的Blog上看到原來(lái)也是可以把JS和CSS并在一個(gè)文件里，那怎樣做呢？利用注釋，先看一下這代碼。

<!-- /* 
window.onload=function(){ 
document.getElementById("test2").innerHTML="傳說(shuō)中滴JS測(cè)試者。如果你看到我，那<strong>JS</strong>也生效了"; 
} 
<!-- */ 
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}

CSS處理時(shí)會(huì)忽視掉<!--，這時(shí)JS部分只是CSS的注釋/* js */，而JS處理時(shí)把<!--轉(zhuǎn)成// 也就是JS的單行注釋，單行注釋會(huì)把后面的/*和*/干掉，同時(shí)也干掉了CSS，不廢話了，看演示的例子。

在網(wǎng)上運(yùn)行時(shí)還要通過(guò)程序輸出個(gè)“*/*”的頭，不然MIME不對(duì)有的瀏覽器不干活。PHP的是這樣：

<?header('Content-type: */*');?>

理論上在服務(wù)器上指定某種后綴的MIME是“*/*”應(yīng)用也行得通，不過(guò)我沒(méi)有試。把JS跟CSS寫在同一個(gè)文件特別適合第三方調(diào)用的那種，雖然文件大了一點(diǎn)，但能少了一半的請(qǐng)求數(shù)，帥帥滴

當(dāng)然，這樣的格式寫起來(lái)一定很不爽，不過(guò)配合程序來(lái)讀原來(lái)已經(jīng)的，并處理一下就可以，這樣就可以保持原來(lái)文件也方便維護(hù)，輸出文件又省點(diǎn)請(qǐng)求，如果想的話，處理處理緩存，跟靜態(tài)文件差不多了。這里有份C#的，據(jù)說(shuō)是官方滴，我的是PHP的，因?yàn)檫€沒(méi)寫緩存的機(jī)制就不拿出來(lái)丟人了，其實(shí)原理也很簡(jiǎn)單，會(huì)編程的三兩下就搞定。

再其實(shí)，我是想找把多份CSS合并的方式，合成一個(gè)不難，可以是處理好各模塊化的分離同時(shí)能在客戶端緩存及方便程序調(diào)用才是難的，CSS又不像JS可以在客戶端異步調(diào)用，誰(shuí)有好的方式介紹一下給我。

傳說(shuō)中的測(cè)試
傳說(shuō)中的測(cè)試者一號(hào)。如果你看到我有邊框跟顏色，那就是說(shuō)CSS生效了。

傳說(shuō)中滴JS測(cè)試者。如果你看到我，那JS也生效了

使用同一份文件：jscss.php 
<link type="text/css" rel="stylesheet" href="jscss.php" /><script type="text/javascript" src="jscss.php"></script>jscss.php的內(nèi)容 
<?header('Content-type: */*');?> 
<!-- /* 
window.onload=function(){ 
 document.getElementById("test2").innerHTML="傳說(shuō)中滴JS測(cè)試者。如果你看到我，那<strong>JS</strong>也生效了"; 
} 
<!-- */ 
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;} 
Copyright ? 2006-2007 aoao , Some Rights Reserved .

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com