把JS與CSS寫在同一個檔案裡

來源:互聯網
上載者:User

首先感謝比爾、感謝微軟、感謝MSDN,是他們讓我看到他們富有創意的一面,好了好了不廢話了。

我們經常把多個CSS或者多個JS並成一個,以節省請求,但是這樣最少還是要兩個。在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處理時把<!–轉成// 也就是JS的單行注釋,單行注釋會把後面的/*和*/幹掉,同時也幹掉了CSS,不廢話了,看示範的例子。

在網上運行時還要通過程式輸出個“*/*”的頭,不然MIME不對有的瀏覽器不幹活。PHP的是這樣:

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

理論上在伺服器上指定某種尾碼的MIME是“*/*”應用也行得通,不過我沒有試。把JS跟CSS寫在同一個檔案特別適合第三方調用的那種,雖然檔案大了一點,但能少了一半的請求數,帥帥滴。補充說明,直接這樣使用會是兩個200的,要節省還要涉及到伺服器配置,最少我還不知道單程式可以實現的。

當然,這樣的格式寫起來一定很不爽,不過配合程式來讀原來已經的,並處理一下就可以,這樣就可以保持原來檔案也方便維護,輸出檔案又省點請求,如果想的話,處理處理緩衝,跟靜態檔案差不多了。這裡有份C#的,據說是官方滴,我的是PHP的,因為還沒寫緩衝的機制就不拿出來丟人了,其實原理也很簡單,會編程的三兩下就搞定。

再其實,我是想找把多份CSS合并的方式,合成一個不難,可以是處理好各模組化的分離同時能在用戶端緩衝及方便程式調用才是難的,CSS又不像JS可以在用戶端非同步呼叫,誰有好的方式介紹一下給我。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.