以目前的前端比較紅的幾個 Lib/Framework,你可能很常聽到以下幾個選擇:
1. React (這...不用我說了吧XD)
2. Angular 2 (但是,正式版還未 release,快要了.. XD)
3. Vue.js
關於 React 的關鍵字,你要想到 Component (View 的組件化), Virtual DOM, Flux (單向數據流概念)等等。它是 Facebook 建立,一個 JavaScript 的 Library。React 現在用的人蠻多的,不過對我自己而言,要看專案性質。目前我個人比較介意的是 ES6 要轉 ES5 的問題,覺得囉唆XD,若不是整個團隊都在使用 React,其實他的學習曲線以及周邊開發配備 (像 Webpack...),我個人覺得都要花時間適應...,另一個就是,上網找一些問題的解法,可能有新舊寫法的差別,你要有自己轉換的能力。
Angular 2,完全不同於 Angular 1 的做法 (但你現在已經可以找到很多教學文摟!),只是開發 ng2 有三種方式,TypeScript, Dart, JavaScript,這個也只能觀望未來的開發者是用什麼來寫了...。我現在還沒有深入的研究的意思,主要是工作也還沒用到,不過當年 Angular 1 出來的時候,很多公司都採用 Angular 1,不知道這些維持用 Angular 1的專案,未來會怎麼走..我也是挺好奇的。
那 Vue 呢?! 其實有在寫 Laravel 的人都知道,他也出來好一陣子了,不知道這樣說會不會有冒犯到 vue 的意思,我自己覺得 vue 蠻像 Angular 的,但是他輕量很多,拔掉一些很繞口的專有名詞之物,如 "相依性注入",vue 把事情變得簡單很多,也支援雙向綁定 (Two-Way Data Binding,只不過 vue 預設是以單向綁定,)。我最近開始用他只是因為快。而且很多用法跟 ng 非常類似,如:
(左 angular 1) (右 vue)
- ng-repeat => v-for, v-repeat
- ng-class => v-bind:class
- ng-if => v-if
- ng-show => v-show
如果你沒有學過 Angular 也沒有關係,過去你有曾經使用 jQuery 發送 ajax 取得 json 資料,然後 for loop 這包 json,不斷地組成 html 字串,最後在塞到畫面的經驗嗎? 那麼我真的建議你可以看看 vue 的 list rendering,你只要發送 api,把資料更新到 vue 的 data 裡面去,接著準備要被重複顯示的 html 區塊,在裡面下好 v-for,這些簡單神奇的事情就會發生了,如果可以的話,就不用再自己組奇怪的 html 字串了。這只是一個比較簡單的開始 XD
所以,說好的學習資源呢?! 說真的我覺得官網寫的很清楚。若你不喜歡看英文可以看中文版。
- https://vuejsdevelopers.com/ 大推!
- https://github.com/vuejs/awesome-vue awesome vue 整理出很多 vue 的工具, 套件, UI 組件,你可以從這裡開始逛。
- 新手向:Vue 2.0 的建议学习顺序
- https://vuejs.org/guide/index.html vue 官網的 getting started。
- https://gist.github.com/hashrock/f575928d0e109ace9ad0 vuejs.md 初心者用資料
- http://www.slideshare.net/coulix/vuejs-testing 一個 unit test 的 vue slide.
- https://github.com/vuejs/vue-devtools Chrome extension,用於開發 vue 時用的工具
- https://cn.vuejs.org/guide/comparison.html Vue 與其他框架的比較,你一定要看看!
後記
我切入 vue 的時間點其實有點怪,因為我不想 maintan 一些用 jQuery 字串組出來的 dom 再 append 到某個大的 div上這種做法(沒有要怪到誰的意思,專案本身就有歷史包袱),再者也沒有 data binding,如果要 ajax 拿一次新的資料,等於要在呼叫某個可以組出這堆 div 字串的 function,然後再做一樣的事情。
我用 vue 重寫某部分功能不需要半天的時間,而且 HTML 結構維持在 HTML 檔 (聽起來也是很合理...,只差我要不要把某部分拆出來變成 vue 的 component),init 一個 vue 並不會跟 jQuery 有任何衝突,只需要把 vue.min.js 下載下來。只是在 maintain 之間,要 Regressive Enhancement,我的目標是希望把 jQuery 很多需要 ajax 後的事情都搬到 vue 去...。 中途會有一些 jQuery 會需要更新 vue 裡面的資料的這種互相溝通的情況,倒也算是一段陣痛期... ,總是會需要經過這一段的,誰都希望專案好 maintain 一點 QQ。
大大是用 vuejs 2 嗎 ?
回覆刪除不是耶 :P
刪除