將 jQuery 與 CSS 樣式抽離,可以讓程式碼的維護更方便
舉一個輪播套件nivo為例,它的id是slider
是如何去觸發它的輪播效果的呢?
是來自於在all.js寫了這段程式碼來啟動(綠色箭頭處,直接指定id=“slider”)
比較建議的作法
但會比較建議,
假如想要載入 jQuery 的第三方插件,或者是有自己寫的 jQuery 語法,要寫任何 jQuery 效果前,都在 class 多加上一個【有前綴詞「jq-」的class名稱】,用這個class名稱專門來寫jQuery效果
因此就像這樣,用「.jq-nivo」來觸發jQuery效果
自己命名的 class 名稱(例如下面範例中的 .cart),就單純負責我自己設計的 css 網頁樣式就好了。
這樣做的好處是:
- 方便管理,維護更方便
- 「樣式的class」不會跟 jQ 綁在一起,把「css 樣式」和 「jQ動畫效果」給抽離
舉例:
一個網站有二、三十頁,其中許多頁的商品區塊(div)都會套用同一個 class 名稱(例如上圖中的 <div class="cart">
)
⭐️ 有些頁面的圖片需要套用 jQuery 效果 --> 就加上有前綴詞的class名稱 .jq-cart
⭐️ 不需要套用 jQuery 效果的圖片 --> 就不需加上 .jq-cart
(在all.js中,就用 .jq-cart
來寫效果)
這樣就非常方便!