2009年9月28日 星期一

25 項絕妙的小技巧提昇你的 jQuery 技術


1.利用Google Code的hosting載入jQuery函式庫。
這是一定要的。

2.無所不在的 Cheat Sheet
印出來貼在牆壁上,墊桌面,或者是設定成桌布都很實用。

3.將所有的 script 壓縮起來
嗯,連css也一起吧。

4.利用FireBug的console功能來進行開發
相信每個網頁開發人員都應該必備。
還有個東西叫做 FIreQuery。

5.利用快取的方式,盡可能的減少不必要的物件產生
平常頁面上物件不多可能感受不出來,不過50個,100個,1000個的時候就慢慢感受的出差異了。*重要的觀念!

6.盡可能將DOM物件產生的行為減到最低
雖然說 jQuery 提供了很多方便的DOM操作行為,但是相對的效能上要付出代價。
有些時候利用字串串接的方式效能可以稍微提昇。雖然看起來程式碼不是那麼的漂亮。
最後再利用html()存入。

7.將所有元素集結在一個元素後,在進行DOM insertion
這是個蠻神奇的情況,但是相當有用!
利用字串串接方式將1000個<li />元素,塞入<ul />之中,然後再用html()存入,速度竟然快了50倍!太神奇了!*重要!

8.盡可能利用 ID 取代 class
因為 getElementByID 是瀏覽器建立的原生操作功能,相對的 class 查詢必須透過整個DOM物件樹從頭到尾走訪一次,然後一一做比對,效能馬上就看出來了。
*重要!

9.設定選擇子操作的環境
先找出你要查詢的物件的總集合,然後再針對他進行子項目的查詢。
我想到的情境是,利用 id 找出一個清單,接著在找尋裡面其他的 id/class 物件,這樣就不需要從頭到尾找一次。
*重要

10. 正確的使用chaining
jQuery最吸引人的項目之一。

11.正確的使用animate
jQuery最吸引人的項目之二。

12.試著了解事件的分配
jQuery最吸引人的項目之三。
範例提到一次對某個元素項目設定click事件,接著利用$(e.target)的方式來進行操作,可以省卻對整個元素樹分配事件的步驟。
*重要!

13.利用 class 來記錄狀態
利用對 class 的新增/刪除來改變元素的狀態/外觀。ex. toggle();
但是如果要存取資訊相關的有別的方法。

14.利用 data() 來記錄狀態
jQuery 實作了一個 data(),可以對於某個物件進行存取資訊的操作。

15.製作你自己的DOM選擇器的
利用jQuery你可以自己定義出需要的選擇器,理論上應該很方便,但是我還蠻少用到的...

16.將你的HTML看起來更佳流線型,在頁面載入之後再變更。
主要是讓頁面的 markup 不會太混亂,減少頁面下載的時間(如果資料量多的話)。
不過要看情況使用就是了。

17.懶人載入法,為了速度跟SEO考量
類似上面的方法,只是他是利用AJAX的方式載入一個頁面的資訊,一樣讓頁面的 markup 看起來比較漂亮,但是代價是會有額外的 http request 送出,一樣要看情況使用。
又,現在search engine碰到AJAX載入的頁面會認得了嗎?

18.使用 jQuery 的公用函式
jQuery 內建了一些核心函式以及公用函式,有現成就直接用不用自己拼拼湊湊了。

19.當 jQuery 跟其他的 javascript framework 一起使用的時候,利用 noConflict() 來將 jQuery 物件改名字
var $j = jQuery.noConflict();
$j('body').hide();

p.s.另一方面使用(function($){})(jQuery);
可以避免$被覆寫,但是就無法使用其他 framework。

20.如何知道圖片已經載入了?
蠻 tricky 的小技巧
$('img').attr('src','image.jpg').load(function(){
alert('image loaded');});
在 img 元素使用 load() ,然後提供一個 callback function。

21.新的比較好
新版本的 jQuery 會根據新的功能,標準,瀏覽器,一起提昇速度。理論上是這樣的。

22.如何檢查元素是否已經存在
if( $('div').length) {}
就是檢查他的元素長度。

23.增加 JS class 到你的 HTML 標籤當中
這也是蠻 tricky 的,當你需要某個功能只有在 Javascript 啟動的時候出現/消失就很實用了。

24.回傳 false == preventDefault() ?

25.$(document).ready() 的縮寫
$(function(){});


參考來源: Improve your jQuery – 25 excellent tips | Listelog (在「Google 網頁註解」中檢視)


2009年9月23日 星期三

Handcrafted CSS (Video Part)

前一陣子入手的 Handcrafted CSS + DVD,最近趁有空的時間來閱讀。

Handcrafted CSS的作者是知名的網頁設計人員,也是著名的 Bulletproof web design的作者。

DVD的影片的內容是作者歸納出幾項打造 BulletProf 網頁的教戰守則。
  1. 拿掉圖片會發生什麼情況?
    • 是否拿掉圖片後還可以保有頁面的整體性,可讀性
  2. 網站應該要在每個瀏覽器上看起來一樣嘛?
    • NO
  3. 讓文字設定是一個有彈性的基準點。
    • 使用 font-size 的關鍵字或者是用 em,%當做單位。
    • body { font-size: 62.5% }
    1. Use the DIG DUG Text test
      • 試著將頁面上的文字做縮放,看看是否還可以閱讀
    2. 接受 Box
      • 試著對box進行一些裝飾跟美化
    3. Use "Progressive Enrichment"
      • 利用text-shadow, box-shadow, transition, rgba
      • 快速prototyping
      1. 重複使用/回收
        • 重複使用你的圖片
        • 在設計你的區塊的時候想到日後的可重複使用性
        1. 掌握 float
          • easyclear的方式 clearfix:after { content: ".";display:block; height:0;visibility:hidden; clear:both;}
          • clearfix isn't semantic. Try group
          • ie6 * html .group { height: 1%; }
          • ie7 *:first-child+html .group { min-height: 1px; }
          • ie8 support content generate.
          1. 10秒鐘的可用性測試
            • 將你的css關閉來檢查你的頁面,看看他的語意結構是否依舊可以閱讀。
            • 雖然這個方法不是很科學,但是可以隨時加到你的工作流程當中。
            1. 驗證
              • 驗證你的CSS跟HTML可以減少你跟不知名的css問題搏鬥。
            以上就是DVD中提到的guideline,如果可以在你自己的專案中使用到,相信你的網站應該也是 Bulletproof等級囉。

            整片DVD製作的蠻用心的,還搭配了作者自己彈奏的ukelulu。

            書本的進度追趕中...