精選文章

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

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

 最近在學習網頁製作,看了很多人分享的文章都說,養成固定撰寫學習心得跟技術文章的習慣對於學習很有幫助,所以打算以後每一兩天就針對學習的進度做點心得記錄跟筆記的分享。下面就是最近的一些心得,因為是第一篇,所以心得跟想法的部分會長一點,以後的目標是簡潔的寫下重點就好,希望這樣能幫助我養成固定寫作的習慣。
 首先是學習的大方向,從前端網頁工程師的職業需求(可以參考這篇:前端工程師就業技能)還有網路上找到的資料,我目前列出了一些關鍵字,打算在近期把這些關鍵字弄懂(不管我原本覺得自己懂還是不懂),如果有必要的話就放進需要特別進修的列表裡,現在這些關鍵字包括:
  1. DRY (Don't Repeat Yourself)
  2. JavaScript (API, DOM)/ jQuery
  3. Bootstrap
  4. React.js/ Node.js/ Valnilla.js/ Angular.js
  5. PHP
  6. iFrame
  7. 前端開發框架
  8. GIT/ SVN/ GITHUB
  9. SEO
  10. 切版
  11. ES6
  12. CSS Sprite
  13. Base64 image
  14. Weebly
  15. 金流及線上付費設定
目前確定要特別進修的列表下面列的這些,以後應該還會陸陸續續增加,現在先簡單記一下學習的摘要:
  1. HTML + CSS3 + JavaScript (jQuery):這個組合是現在最新的網頁撰寫標準,是一個三層結構,HTML 負責處理內容,CSS 專職排版,JS 則專注處理前端的互動,全部採用模組化設計,不管是從設計還是維護的角度都比過去要方便得多。
    • 分開來看的話,HTML 的標籤語言結構並不難,我原本就懂的怎麼寫,所以學習 HTML 的主要重點在於搞懂 HTML5 新增標籤的意義以及新舊屬性的更動,都是屬於知識性的部分,只能慢慢累積經驗了。
    • CSS 雖然麻煩一點,不過結構化的設計並不難學,比較大的問題在於繼承,這點我過去比較沒有處理過,所以也還要累積經驗。除此之外,我也在思考與嘗試 CSS 最近加入的新功能,像 table、flexbox、calc()、variable 這些東西要怎麼樣更有效的應用在過去的網頁結構中。
    • JS 的部分分成原本的 JavaScript 跟衍生的 jQuery,JS 是變數模糊定義的物件導向語言,目前我把基礎的說明都看過了,DOM 的操作原理也搞懂了,基本其實就是樹狀節點的操作,我在德國的時候為了記錄孔洞的分支結構,曾經花了一陣子研究樹狀資料結構,不過實際上操作 DOM 只有跟著書上的範例跑過幾次,經驗幾乎等於沒有。不過因為 jQuery 太過流行,所以目前我打算以 jQuery 為核心來學習,jQuery 的選擇器跟事件監看功能相對 JS 來說要更優秀,操作 DOM 比 JS 要容易很多,對應 Ajax 的功能也更強,對網頁前端的支援很完整,所以才打算以 jQuery 主要的學習目標。
  2. RWD (Responsive Web Design):這個我算是有一點經驗,前陣子幫前老闆更新網頁,所以從這邊開始著手學習了,對於製作 RWD 網頁本身倒沒有問題,不過好的前端網頁工程師應該還要能兼顧更多除了尺寸上的不同,所以在這邊紀錄一下其他 RWD 應該關注的項目,之後有時間再來慢慢釐清:
    • 舊 IE 相容性;
    • 主流瀏覽器、版本的差異;
    • 螢幕尺寸 (Viewport);
    • HOVER 事件在觸控螢幕的應變問題;
    • 載入速度的影響因素;
    • 行動裝置的 landscape 觸發問題;
    • 尺寸的單位設定標準;
    • 輸入輔助;
    • 無障礙輔助。
  3. Bootstrap:這是個以 RWD 概念為核心設計的前端網頁框架,包含了 CSS 設定跟 JS 事件的支援,目前已經買了一本書,而且花了近十天照著書上的範例做出一些頁面,乍看沒有問題,不過其實我自己覺得在這個題目上陷入苦戰,因為跟學習新的程式語言一樣,其實學會基本語法之後,最重要的事情是在累積對於函式的的理解跟應用能力,在框架這邊,似乎所謂的學習其實就是要記下框架的排版條件、可用的元件、支援的 JS 的事件跟補充屬性以及套用的方法,可偏偏因為我前一本學習 RWD 的書是從零開始的,所以我現在已經習慣自己去解讀 CSS 條目來根據自身需求修改的模式,對於套用 Bootstrap 的模式反而很不習慣,不過這大概就是必須要解決的問題吧,以後學習其他框架的時候應該也會遇到,還是現在先花一點突破吧。
  4. PHP + MySQL:在我的理解裡面,後端程式泛用度最高就是 PHP,所以在前端學習到一定程度的時候,就會以 PHP 為下個階段的目標,MySQL 也是現在泛用性最高的中小型關聯式資料庫,我過去曾經研究過關聯式資料庫,所以在資料庫建置上應該沒有問題,所以 MySQL 的主要學習目標應該就是學會 SQL 語法跟實際建置資料庫。
  5. WebAPP (UI + UX):這個則是長期性目標,因為我覺得這應該會是未來幾年很熱門的題目,而且在尋找研究課題時發現,比起學習 iOS 或 Android 的 APP,WebAPP 應該可以應對更廣泛的使用範圍,免安裝、更新更容易、安全性也相對更高,所以打算以此為目前的最終學習目標。