10 mins read ‧ 2022/08/01 普

自訂jQuery代碼起手式

---

Javascript  “起手式”？

開始前我們要先講講寫 自訂 Javascript 的起手式

其實沒有起手式這個講法，只是我這些年寫了這麼多 code 的經驗法則

簡單講就是，讓你的程式更安全一點，比較不會突然壞掉

建議你在寫任何自定義的 Javascript 或 jQuery 以前

都用下方的 code 包起來

<script>
(function(){
    //你的自訂 javascript 程式碼
})()
</script>

 

為什麼要包起來？

因為不包起來，你的代碼就可能被“汙染”，最常見的就是變數汙染

學過 jQuery 的朋友們應該知道， jQuery 的縮寫是 $

用過 WordPress 的人應該也會知道， WordPress 內建預設引入 jQuery

你去你的網站檢查元素(F12) > 主控台，打個 $ 看看有沒有東西

在控制台打 $ 會得到  undefined

疑 🧐 ？難道我的網站沒有用 jQuery ？

不是的，只要你的網站是 WordPress 100% 絕對有使用 jQuery ( Headless WordPress 例外 )

你再試試看打 jQuery 有沒有東西

在控制台打 jQuery 會得到“一串東西”，就是 jQuery 物件，證明了網站還是有使用 jQuery

如果對物件概念不熟悉的朋友可以複習這篇

但還是有小小不同，上述文章講的主要是 php 物件，這邊我們遇到的是 Javascript 物件

但不用擔心，主要概念是相同的，只是寫法跟語法會有所不同

 

網路上有非常多的 Javascript Library ，有些庫剛好也是用 $ 來做為縮寫，如果你剛好也有使用到這類的庫，你的 $ 可能就不是 jQuery 了

這樣的話，你的代碼可能就會壞掉

可能是為了避免這樣的衝突，WordPress 官方在引入 jQuery 的時候，並不允許我們使用 $ 作為 jQuery 縮寫

 

所以我要怎麼在我網站上使用 jQuery ?

雖然你不能用 $ 但還是可以用 jQuery，因為 $ 是 jQuery 的縮寫而已

舉例來說，你可以試著把這個範例裡面的 $ 全部換成 jQuery 一樣還是可以作用

<script>
// 把所有的 $ 都換成 jQuery
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("#div1").fadeIn();
        jQuery("#div2").fadeIn("slow");
        jQuery("#div3").fadeIn(3000);
    });
});
</script>

那我直接寫這樣就行了吧！對吧…？

恩…其實我也這樣幹了很久，但不夠好

原因是，如果有人故意使用 jQuery 這個名子當作變數( 實務上我從沒遇過，會這樣做真的很故意 )，把變數替換掉，你的程式就會壞光光了

 

更好的寫法

更好的寫法是結合一開始的”起手式”，把所有的程式碼，用一個匿名函式”包起來”，這樣就可以避免變數汙染

再來把 jQuery 物件，傳進這個匿名函式，並且在這個匿名函式裡面定義 $ 就是 jQuery，這樣你就可以開心的使用 $ 了

<script>
(function($){
    //你的自訂 jQuery 或 javascript 程式碼
})(jQuery)
</script>

 

代碼解釋

這段代碼要分成幾個部分說明

 

更好的寫法 2.0

2022/08/01更新，感謝網友補充

<script>
(function($){
    $(window).load(function(){
        //你的自訂 jQuery 或 javascript 程式碼
    });
})(jQuery)
</script>

新手在寫 Javasscript 與 jQuery 很常踩的一個坑就是執行順序的坑

如果少了這段，有時候你的代碼沒有反應，其實是它找不到它選取的 DOM 元素

$(window).load 意思是，當你視窗的 DOM 元素完全載入後，再執行裡面的回調函式 function(){ //你的代碼 }