星期三, 6月 06, 2012

jQuery 教學 - 如何匯入 jQuery

Photobucket

見樹也見林~

不論從臉書Facebook、Google搜尋網頁一直到Yahoo奇摩,



綜觀全球各個網頁,如果你展開查看他們的原始碼,將會發現他們的結構如下:

Photobucket

html很有趣的一點,即是他使用人體結構來分類,簡單的區分為,
頭(head)和身體(body)。


  • 頭(head)

一般我們都會將CSS網頁樣式(決定網頁色彩、字形大小...等)和jQuery (決定網頁行為模式,如:選單是否要有彈跳展開效果)等,會將他放置在html的頭(head)裡面。


  • 身體(body)

而身體(body)的部分,我們則會放置html 網頁結構(決定廣告欄位要放哪邊、
登入表單要放哪邊...等)。



初淺複習一下對html 網頁結構之後,
我們回來看一下我們的主題「如何匯入 jQuery」。

你可以一股腦地將 jQuery程式碼,往「html 網頁結構圖」黑色區塊那部分丟,
也可以將jQuery程式碼隨意丟棄在body標籤裡面的任何一個角落。

可是這樣好嗎???

KT這邊的建議是:「不好!!!」

因為這樣的話,在未來維護(maintain)上,只有"痛苦"兩個字。
那時你可能會哭天喊地,叫爸叫媽說:「這程式誰寫的亂七八糟。#%$%#」
髒話可能隨口而出。何必呢???

當然公司如果比較有規模,
可能就會有架構師規劃或小主管(Leader),
review檢查你的程式碼,可能就不會犯下此錯誤。

所以為了未來維護方便可以快樂下班,我們就學一下「如何匯入 jQuery」。

我們以「 jQuery 教學 - 第一支程式 Hello World」,來看:

Photobucket

目前運行的部分即是寫在html裡頭,目前因為程式只有一行,
所以還不看不出來這樣的寫法的優劣,
可是當運行程式碼多如毛時,如果不提出分類,維護就是件麻煩事。

所以我們將此行程式提出,改以載入的方式來進行。
在jQuery資料夾新增一個項目,
Photobucket

選擇JScript檔,並定義新的名稱為「HelloAlert.js」,後按下新增即可。
Photobucket

在「HelloAlert.js」裡,空白處輸入: alert("Hello world!");

回到 「HelloWorld.htm」,註解掉原本直接運行的程式碼,改採匯入運行方式。

所以要匯入我們剛寫好的 jQuery檔。

 
 
  
     


未來不論jQuery 行為模式程式碼多複雜,
在html裡只會有一條簡單的匯入jQuery 的程式碼,
讓行為跟外觀定義程式碼分離,這是很多大師級人物一再提倡的理念。

這樣理論上就算大功告成。

但如果再龜毛一點,自定義的 「HelloAlert.js」,
裡面應該用函數的方式將他包起來,
並等待DOM完全載入後才執行(使用ready來確認)。

如:
$(document).ready(function () {
    alert("Hello world!");
});



範例程式碼下載:


附帶一提:
jQuery 的程式,到底何時載入才是最佳時機,
通常大家都將 jQuery 程式碼在head裡載入,
且使用 ready 函數來確保DOM表已完全載入,
但根據研究 ,jQuery 或 JavaScript,放在body標籤的最底端,
也就是body 結束標籤前,執行效能最好。
在 「jQuery in action」 1.2.2 節和 「jQuery cookbook」 1.3節裡,
兩本書裡都有討論此議題,且都建議 jQuery 程式碼放在body標籤的最底端最好,
供你參考。


相關文章:
jQuery 教學目錄

2 則留言 :

  1. 原本 .js 裡面只有 alert("Hello world!"); 按F5會有出現 Hello world!

    但是把 .js 裡面的內容改成

    $(document).ready(function () {
    alert("Hello world!");
    });

    同樣再按 F5 結果什麼都沒跑出來

    請問是怎麼回事呢?

    回覆刪除
  2. 我用這樣也是沒東西

    $(function() {
    alert("Hello world!");
    });

    回覆刪除

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。

關閉廣告 [X]