把JS與CSS寫在同一個文件里的書寫方法
更新時間:2007年06月02日 00:00:00 作者:
我們經(jīng)常把多個CSS或者多個JS并成一個,以節(jié)省請求,但是這樣最少還是要兩個。在MSDN的Blog上看到原來也是可以把JS和CSS并在一個文件里,那怎樣做呢?利用注釋,先看一下這代碼。
<!-- /*
window.onload=function(){
document.getElementById("test2").innerHTML="傳說中滴JS測試者。如果你看到我,那<strong>JS</strong>也生效了";
}
<!-- */
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}
CSS處理時會忽視掉<!--,這時JS部分只是CSS的注釋/* js */,而JS處理時把<!--轉(zhuǎn)成// 也就是JS的單行注釋,單行注釋會把后面的/*和*/干掉,同時也干掉了CSS,不廢話了,看演示的例子。
在網(wǎng)上運行時還要通過程序輸出個“*/*”的頭,不然MIME不對有的瀏覽器不干活。PHP的是這樣:
<?header('Content-type: */*');?>
理論上在服務(wù)器上指定某種后綴的MIME是“*/*”應(yīng)用也行得通,不過我沒有試。把JS跟CSS寫在同一個文件特別適合第三方調(diào)用的那種,雖然文件大了一點,但能少了一半的請求數(shù),帥帥滴
當(dāng)然,這樣的格式寫起來一定很不爽,不過配合程序來讀原來已經(jīng)的,并處理一下就可以,這樣就可以保持原來文件也方便維護,輸出文件又省點請求,如果想的話,處理處理緩存,跟靜態(tài)文件差不多了。這里有份C#的,據(jù)說是官方滴,我的是PHP的,因為還沒寫緩存的機制就不拿出來丟人了,其實原理也很簡單,會編程的三兩下就搞定。
再其實,我是想找把多份CSS合并的方式,合成一個不難,可以是處理好各模塊化的分離同時能在客戶端緩存及方便程序調(diào)用才是難的,CSS又不像JS可以在客戶端異步調(diào)用,誰有好的方式介紹一下給我。
傳說中的測試
傳說中的測試者一號。如果你看到我有邊框跟顏色,那就是說CSS生效了。
傳說中滴JS測試者。如果你看到我,那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="傳說中滴JS測試者。如果你看到我,那<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 .
<!-- /*
window.onload=function(){
document.getElementById("test2").innerHTML="傳說中滴JS測試者。如果你看到我,那<strong>JS</strong>也生效了";
}
<!-- */
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}
CSS處理時會忽視掉<!--,這時JS部分只是CSS的注釋/* js */,而JS處理時把<!--轉(zhuǎn)成// 也就是JS的單行注釋,單行注釋會把后面的/*和*/干掉,同時也干掉了CSS,不廢話了,看演示的例子。
在網(wǎng)上運行時還要通過程序輸出個“*/*”的頭,不然MIME不對有的瀏覽器不干活。PHP的是這樣:
<?header('Content-type: */*');?>
理論上在服務(wù)器上指定某種后綴的MIME是“*/*”應(yīng)用也行得通,不過我沒有試。把JS跟CSS寫在同一個文件特別適合第三方調(diào)用的那種,雖然文件大了一點,但能少了一半的請求數(shù),帥帥滴
當(dāng)然,這樣的格式寫起來一定很不爽,不過配合程序來讀原來已經(jīng)的,并處理一下就可以,這樣就可以保持原來文件也方便維護,輸出文件又省點請求,如果想的話,處理處理緩存,跟靜態(tài)文件差不多了。這里有份C#的,據(jù)說是官方滴,我的是PHP的,因為還沒寫緩存的機制就不拿出來丟人了,其實原理也很簡單,會編程的三兩下就搞定。
再其實,我是想找把多份CSS合并的方式,合成一個不難,可以是處理好各模塊化的分離同時能在客戶端緩存及方便程序調(diào)用才是難的,CSS又不像JS可以在客戶端異步調(diào)用,誰有好的方式介紹一下給我。
傳說中的測試
傳說中的測試者一號。如果你看到我有邊框跟顏色,那就是說CSS生效了。
傳說中滴JS測試者。如果你看到我,那JS也生效了
復(fù)制代碼 代碼如下:
使用同一份文件: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="傳說中滴JS測試者。如果你看到我,那<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 .
相關(guān)文章
javascript用defineProperty實現(xiàn)簡單的雙向綁定方法
這篇文章主要介紹了javascript用defineProperty實現(xiàn)簡單的雙向綁定方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
網(wǎng)絡(luò)請求axios與fetch的區(qū)別及使用示例
Fetch和Axios是兩個常用的JavaScript庫,用于處理數(shù)據(jù)請求,下面這篇文章主要給大家介紹了關(guān)于網(wǎng)絡(luò)請求axios與fetch的區(qū)別及使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
JavaScript如何將時間戳轉(zhuǎn)化為年月日時分秒格式
這篇文章主要給大家介紹了關(guān)于JavaScript如何將時間戳轉(zhuǎn)化為年月日時分秒格式的相關(guān)資料,在前端的日常工作當(dāng)中,時間戳的使用也是不少的,有時后端返回給我們的數(shù)據(jù)是一個時間戳,我們需要轉(zhuǎn)換成年月日,時分秒的形式展示在頁面當(dāng)中,需要的朋友可以參考下2023-11-11

