我的前端MVC之路


大約十幾個月前,了解到時下前端MVC之火爆,同事推薦我了解一下angular。當時也不是特別在意,只是稍稍閱讀了一遍官方文檔,並嘗試了文檔上的例子。其實當時也頗有震驚之感的,原來代碼還可以這么寫!看完之后,很興奮,也確實想在實際項目中運用一下,但可能我對它的理解不夠深入,真到了項目里不知如何下手。后來也就不了了之了。又過了不久,另一個同事推薦我了解一下backbone,我找了一份中文文檔來閱讀。在當時看來,我更喜歡backbone的代碼組織風格,有條不紊,比較好理解。同樣也手癢,想要找個實際項目試試手。但由於當時基本都是基於老代碼做更新維護,沒有實踐的機會。於是我的mvc之路便暫時擱淺了。
 
直到2014年3月換到了現在的公司,一切都可以重新來過了。新公司頭一件事是進一步研究seajs+spm,之前僅僅是用seajs,沒有配合其使用打包工具spm。
 
從2014年3月到4月底,我瘋狂地在網上查資料,學習的過程也是很坎坷,官方的文檔不夠全面,網上的資料還穿插着歷史的各種版本,很容易搞混API。由於跟官方的構建方案不大一樣,所以官方的教程行不通。后來我甚至直接通過旺旺聯系官方支付寶的spm維護人員,好消息是,他點到了其中一個關鍵配置,使得整個構建行的通,我之前的博客里也有提到他。再之后的一系列摸索,都順利的多了,非常感謝。后來通過與backbone配合,真正實現了我所設想的構建方案,並發布到了github上。
 
2014年4月底,來了一個電商類的新項目,正好是個機會拿我剛提煉出來的spm構建方案試試手。沒有經過實踐的東西始終還是會有缺陷的呀,進入到了實際項目,有許多問題就暴露出來了,經過不斷的摸索,基本都逐個擊破了。
 
電商項目告一段落后,另外一個平台類的項目接踵而至。這個項目的重量級更高,需要更加重視。此時我又開始考慮是否要使用Angular,查了很多資料,想起之前對Angular的了解,有一個阻斷我選擇它的觀點是,“Anagular不能與其他庫並存?!”(后來發現這是錯誤的觀點!有可能當時誤解了)那豈不是所有組件都要自己寫?!但是一方面又對很酷的編程體驗很是向往。最終考慮到瀏覽器兼容,放棄了Angular(對IE8及以下支持不好),選擇了Backbone。網上說,其實backbone提供的東西並不多,只是在代碼結構組織方面有一定積極的作用。在數據綁定,頁面渲染等方面都需要開發者自己搞定。於是在網上找是否有合適的基於backbone的框架可用。后來找到了marionette,跟着教程做了一個頁面,發現有各種layout,感覺用起來好累,也許是當初用錯了方法。
 
后來想起了arale組件庫,當初在支付寶的時候,用過一些組件,感覺蠻方便,而且arale也是以seajs為模塊加載器。我把widget進步一包裝作為我們的基類按需擴展,派生出了很多常用組件,而backbone僅僅作為業務單元的路由工具使用(想想有點對不起它- -)。在技術選型確定以后,以這套方案開發了幾個月后,越發覺得arale的基類很強大,兼具繼承,混入和AOP特性,而且代碼里發現很多backbone的影子。
 
之后來了一個手機端項目,相對簡單。正好大漠的《用AngularJS開發下一代web應用》看的差不多了,想來正好是個實踐的機會。試用了一下yo官網的generator-angular,很給力!這次嘗試給了我前所未有的編程體驗,一個字~爽!
 
generator-angular是一個用於生成angular工程腳手架的工具,包括初始化工程,和在開發過程中新建指定的模塊,比如可以根據指定名稱生成directive,controller,filter等。另外它還提供了一個完備的gruntfile構建流程,基本能夠應對很多項目類型,不過開發者可以根據自己需要進行更改,我就大大小小增刪改了很多流程,這個gruntfile對其他項目也具有很大的借鑒意義。
 
之后又有一個之前已經開發好的后台管理系統,我們決定把它用angular重構一遍。這個項目就復雜一些了,不過我還是繼續使用generator-angular
 
generator-angular引入的angular模塊都是angular官方的,很可能滿足不了業務需求,這時候需要我們自己找第三方的模塊,或者自己開發組件。我找到了angular-bootstrap作為基本組件庫,很好用,而且通過閱讀它的源代碼,我也了解了很多angular的原理。之后花了一些時間開了form組件和datagrid表格組件,過程確實比較艱難坎坷,指令的確是angular最難的部分。
 
隨着此項目的進行,業務需求越來越復雜,form組件和datagrid組件也越來越龐大臃腫,這還可以忍受。我看到controller里一大段一大段的配置對象代碼(比如200行的代碼,有120行是form組件和datagrid組件的配置代碼),着實有些不爽,而且對有些需求真的很難擴展。這是,倒是對當初不用組件開發的方式有點留戀了,優勢是思路簡單,復雜需求可以較方便的實現。但是手寫那么龐大的視圖(尤其是form),而且經常是重復或近似的代碼也挺無力。於是我終於下定決心想寫一個自己的generator,用“代碼寫代碼”,完成乏味的重復勞動,實有一種“返璞歸真”的趕腳!
 
花了一個多星期的時間,參照generator-angular,各種踩坑與摸索后,醞釀出了generator-ngstone(以我自己的外號命名- -),算是實現了我之前的想法,尤其是根據配置文件生成form代碼與datagrid代碼(包括view與controller)。下面這個是我的項目地址:
 
 
歡迎使用,歡迎關注,更歡迎提出寶貴意見!
 
這一路走來,也有一年的時間了,感覺自己還是有一番提升的,這一年沒有白過~
未來,HTML5應用會更加火爆,特別是微信SDK的發布,或許應該在這方面下點功夫了。
另外對iOS也是有一番興趣,尚未深入了解,不知以后的路會怎樣。
 
要過年了,給大家拜個早年!新年快樂!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM