TIPS-為網頁加掛CSS動態更新鈕

改用SCSS後,我在本機測試調整CSS的流程變成:瀏覽器F12開發者工具檢視CSS樣式 –> 回Visual Studio 2013調整SCSS –> SCSS存檔(VS2013編譯產生CSS)—> 瀏覽器重新載入網頁檢視修改結果。由於SPA(Single Page Application)專案每次載入後有一連串起始作業,只為了更新CSS重新載入HTML、重頭執行JavaScript嚴重拖慢開發節奏,做完動作要等半天才能看結果,對急驚風而言宛如酷刑,不另謀改善之道,遲早心臟病發。

Visual Studio 2013的BrowserLink功能強大,能將HTML、JavaScript及CSS修改後自動同步到瀏覽器,也支援靜態HTML檔,理論上適用SPA。或許是程式複雜,遇過幾次跟BrowserLink打架的經驗,反正原理不難,不如就動手做一顆動態更新CSS的小按鈕,順便享受DIY樂趣吧!

操所效果如上圖,在網頁右上方嵌入一個「更新CSS」小按鈕,按下使用JavaScript更改<link href="Content/style.css"> URL,在後方加上亂數Query String,強迫瀏覽器載入更新後的CSS,即可完成動態抽換CSS操作。程式範如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <link href="Content/style.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.1.1.js"></script>
</head>
<body>
    <div class="title">darkthread</div>
    <script>
        $(function () {
            var $btn = $("<button>更新CSS</button>");
            $btn
                .css({
                    position: "absolute", "z-index": 100,
                    top: "6px", right: "6px", fontSize: "9pt"
                })
                .on("click",
                function () {
                    document.getElementsByTagName("link")[0].href =
                        "Content/style.css?_=" + Math.random();
                })
                .appendTo("body");
        });
    </script>
</body>
</html>
歡迎推文分享:
Published 02 January 2015 06:54 PM 由 Jeffrey
Filed under:
Views: 6,907



意見

# dxjd4 said on 02 January, 2015 06:56 AM

firefox 可直接使用此外掛

addons.mozilla.org/.../css-reloader

不過作法相同 XD

# ak said on 04 January, 2015 02:53 PM

請教一下

像 www.lativ.com.tw 的 response time

為什麼可以這麼低 ( 5ms 左右)

因為我不是寫這個語言的 , 有點好奇

# Will 保哥 said on 05 January, 2015 02:37 AM

ak:

最簡單是用 Cache 就可以做到!

要整體提升的話,就很複雜了,可以調校的地方很多。

# Jeffrey said on 05 January, 2015 02:57 AM

to ak, 呵,Lativ網站效能調校的幕後推手Will保哥現身回覆!應該不會有比這個更權威的回答了~

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<January 2015>
SunMonTueWedThuFriSat
28293031123
45678910
11121314151617
18192021222324
25262728293031
1234567
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication