精選文章

[前端學習筆記] 雜記 2017-07-12

[前端學習筆記] jQuery 練習

 前陣子抓了兩本書來做 jQuery 的練習,在 20 天內寫了大約 4500 行相關的程式碼,其實如果目標是專業的工程師,這個速度還是有點太慢,不過作為 JS 跟 jQuery 的初學者,我是覺得目前這個進度算是還不錯了。

 這個階段中,我的練習以 jQuery 的實作為主,雖然 JS 的經驗不多,而且 OOP 經驗也很淺,可是還是在這段練習裡實實在在地感覺到 jQuery 的好用之處,也難怪會變成全世界最受歡迎的 JS 函式庫。

 使用 jQuery 首先最直接感受到的就是選擇器的好用之處,採用跟 CSS 完全相同篩選邏輯的選擇器讓人非常容易上手,不過有個小缺點就是選擇器的輸入跟字串都一樣是用單引號( ’ ’ ),所以稍微不專心就很容易把選擇器打錯,這邊少打一個點、那邊少打一個井號之類的,不過一陣子之後,在除錯的時候就知道要先檢查這個點,所以後來即便有錯誤也可以很快就找出來。

 再來就是對 DOM 的操作相當方便,基本的 DOM 物件插入、搬動、移除等都很方便,不用像撰寫 JS,所有細節都要自己處理,對於 CSS 的變更、標籤屬性的新增也都無比方便,再加上豐富的特效資源、官方的一些預設元件,實在是前端工程師的福音。

 換一個方面來講,目前我在練習中遇到幾個問題。第一就是程式排版邏輯,這點大概是我自己獨有的問題,因為我寫程式的時候有個怪僻,就是程式的排列要按照我的使用習慣來排,如果沒有的話我還是可以看得懂,不過閱讀、撰寫速度都會差很多,然而我過去雖然寫過全 OOP 的 Ruby,可是多半都是跟著書上的教學寫一點小程式而已,動輒兩三百行的 OOP 程式我是沒什麼經驗的,所以練習的前半段花了不少時間在調整排版跟適應,特別是 OOP 裡把物件寫在最前面的格式,真的讓我在前幾天碰了不少壁,還好寫到最後就慢慢習慣了。

 第二則是 jQuery 好用是好用,不過偶爾也會遇到一些限制,像是 jQuery 雖然對於自訂物件的支援很好,可是對於內建物建的支援就不怎麼樣,所以遇到視窗尺寸調整或是頁面載入之類的物件等等,就時常會遇到 JS 跟 jQuery 寫法混雜的情況,讓我再查詢的時候兜了很大的圈子,也讓我考慮之後要回過頭去惡補一下 JS 的預設物件寫法。

 第三則是事件監控造成的非線性執行順序,雖然我過去在寫 LabVIEW 的時候已經習慣了事件監控的寫法,不過回到一般文書式由上到下的程式寫法的時候,還是會被線性執行的習慣給搞混,一值到現在才慢慢搞懂,反正事件監控就是非線性執行,如果事件監控出現在 each 或是其他事件監控裡面,把它當成是多重監控條件就好了。

 第四則是 this 的用法,當物件目標很明顯的時候,this 確實很好用,不用寫一大堆有的沒的就可以直接指定物件目標,可是當遇到物件目標不明顯的時候,比如循環執行函式或視窗物件之類的,this 的標的就變得很模糊,最麻煩的是,上網查到的訊息還往往不一定是對的,看來還是得要去搞一份官方文件來讀一讀才能解決。

  jQuery 練習到這邊先到一個小段落,接下來打算要設定一個自己的網頁,然後在製作過程中實作看看,才能驗證學的搆不夠紮實,此外也有幾個小目標要續深入學習:
  1. 解決之前練習中發現的小問題
  2. 熟悉 JS 的視窗物件
  3. 搞清楚 this 的用法
  4. 更加熟悉 jQuery 跟 JS 的各種方法

 最後是一點心得,我其實一直都很清楚自己做事的一些怪癖,最重要的一點就是我無法一心多用,一旦我專心要投入一件事情的時候,視野就會變得很窄,所以一陣子一陣子就要把自己的視點往後拉,用寬廣一點的視野重新看待現狀,這次的 jQuery 練習也是,一頭栽進去以後,又連續二十多天沒寫筆記,這樣實在是很不好。