2013年12月21日 星期六

AngularJS and jQuery 近期專案開發心得

最近好久沒寫文章了,因為這陣子遇到的事情太多太雜...,但是學到很多...,可是我沒有辦法一一記錄下來,...一時也提不起勁啊,這篇只好用一種當作日記的心情來寫寫了,請大家看看就好,不用太認真 xd,真的。

還有我不想跟大家筆戰,我只是分享一個專案同時使用 AngularJS 跟 jQuery 的感覺是什麼,是『AngularJS and jQuery』,而不是『AngularJS v.s jQuery』,更何況每個專案的體質本來就不同。



AngularJS  (logo來源)
前陣子社群非常活躍的一套 JavaScript Framework,我一直很想嘗試看看使用 AngularJS 是什麼感覺,但是我想一路走來的人都能理解,有時候寫玩具跟真正用在專案上是真的不太一樣的感覺 (當然自己的玩具也叫做專案xd),只是有客戶的苛求,比較能夠往更多地方鑽研,如果什麼事情都照著工程師的想法做,那當然做什麼都比較順,因為我們都知道,『怎麼做對自己比較方便,而且可以達到一樣的功能』,恩...有點離題了。

所以這次用在工作的專案上,因為專案的需求,會使用到較多的 Ajax 的 Request,來替換頁面上的內容,因為 AngularJS 順暢的 Data Binding 的特性,以及 View Template,因此感覺蠻適合使用 AngularJS 作為這次專案想用的 Framework,從學習怎麼用 $http 到串到專案的功能,大約不會超過4天。 (我必須說明這次真的有太多的時間花在學習 AngularJS 的架構)。

說實在的,如果我今天很熟練 AngularJS,我想時間開支不會超過4天,以開發速度來說,AngualarJS 真的是不錯的選擇,再加上我第一次認真用過MV* 架構的 Framework,寫起來程式碼真的有架構許多,說實在的,如果還有機會,我是一定會再使用 AngularJS,或是學習其他 Framework,工具雖然學不完,但是這些架構跟 Framework 的設計真的蠻值得學習。

不過從 jQuery 寫到 Angular,一定要完全忘記 DOM 這件事情,剛開始用 Angular 有點不習慣,動不動我就想要用 selector,但是... 真的,要學會『綁手綁腳』的使用 Angular,我現在也正在努力適應這件事。:)



jQuery
jQuery 算是我比較熟的,從大學在程式設計公司打工時就是寫 jQuery,中間從來沒換過,至於他的優,我就不再多介紹了,但是就以這次專案遇到的功能,我真的是蠻想捨棄 jQuery 的...,(因為覺得 AngularJS 的 Temlate 太好用了...),可是最後我還是把整個 AngularJS 改成 jQuery code 了,原因詳見下方轉折點。




轉折點
因為整個專案並不是公司自己開發的產品,因此要考慮到客戶想支援的瀏覽器程度,最後還是改用 jQuery 了,說實話心裡覺得有點杯具,3天內把整個之前用 Angular 寫好的功能改成用 jQuery 寫,還包含要不斷的測試。

  • 最大的問題是 IE 瀏覽器版本的支援

為了符合客戶的 IE 瀏覽器的支援性,我自己測試是 AngularJS 在 IE7 完全沒辦法(我怎麼找都沒找到解法,如果有歡迎告訴我,謝謝~),所有的表達式 {{expression }} 都會暴露在畫面上,並且也抓不到 Ajax 吐回來的資料,IE8 是有解法,就像官方網站上寫的那幾招。

還有一些 Angular 本來就很方便的功能,像是 $filter, $watch ...,使用 jQuery 全部要自己來,而且瀏覽器反應的速度真的有差。

遺憾的是,因為趕時程的關係,好像留下不少程式負債,總覺得不知道 jQuery 到底要怎麼寫,才會比較有架構,比較好讓人維護,這次很汗顏沒有寫的很好,而且我覺得我的 code 真的有夠『得體』(Dirty)。

好玩的是,平常沒有這麼多閒功夫,因為這次的教訓,一樣的功能用 jQuery 跟 AngularJS 各寫一次,真的很有感覺...。也算是長知識了。能夠靠專案學到這些,感覺也是挺過癮的。


2013年12月8日 星期日

[Node.js Web Framework] Sails 檔案目錄結構

上一篇 [Node.js Web Framework] Sails 介紹與安裝 提到,如何安裝 sails 。
這一篇會接續上一篇所建立的 sails 的 web 目錄做一些簡單的說明。

1. sails new newProject
2. cd newProject

上次第一個步驟我們使用 sails new 專案名稱,初始化一個新的專案,叫做 yourNewProjectName , 不過在今天這個範例我是把我的 project name 叫做 newProject。接著我們打開 (cd) 這個 newProject 資料夾。


2013年12月4日 星期三

[Node.js Web Framework] Sails 介紹與安裝

官網連結:sailsjs.org
Sails 是一套執行在 Node 環境下的 Web Framework,其實它主要提供的功能跟 Express 是蠻類似的,一樣具有 MVC 架構,快速架設等優點,如果你平常都使用 Express,不仿試試看 Sails。


Sails 的優勢
具有自動產生 RESTful JSON API 的功能(REST Blueprints)。預設的情況下,當你每次 gen (產生,我都用 gen 代表 generate) 一個 controller 的時候,都是預設產生 CRUD 的方法 (method),當然也可以自己客製化 controller 裡面所有的 method。

而且可以利用指令的方式就可以產生 controller 以及 model 的 files,有些人認為這種 scaffolding 的方式跟 ROR 很像,不過這個就讓有學過 ROR 的朋友來感覺看看了,因為我沒寫過 ROR。

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...