已經找好工作近兩周了,入職基本上還算順利,自己兩年來的挑燈夜戰也算是有了收獲,於是這兩周基本上是按部就班的工作,沒有學習什么新技術。在上個公司的時候,同事在項目中使用angularJs,之前他也沒有接觸過angularJs,一邊學習一邊做項目,結果給項目團隊造成了很大的困擾。angularJS他研究的不透徹,在使用的過程中造成了很大的弊端,比如標簽閃爍,暴露出未解析的源代碼等。在商業的項目上嘗試使用新技術是十分危險的,輕則項目留坑,給維護留下巨大的安全隱患,重則項目流產,商業計划因此而毀於一旦,公司也許就應為某些程序員的擅做主張而錯失市場先機。
后來我為了給angularJS填坑,系統的學習了angularJS。看的是《用AngularJS開發下一代Web應用》。版本其實挺老的,書上的例子還是0.8的版本。現在已經更新到了3.0多了吧。沒有去仔細的查看過最新的版本。剛入職,領導為了讓我學習公司的框架,扔給我一個內部使用小項目,其實也不是特別小。只因為是內部使用的,而且是我一個人在做,所以在瀏覽器的兼容性和新技術的使用上面,就隨意了許多。我可以和同事們協商使用最新的瀏覽器,因此能夠避免很多新技術實踐中遇到的問題。下面就簡單的談一談我對AngularJS的一些理解,部分觀點如果不正確,希望各位網友指正。
1、為什么會誕生AngularJS:
這個問題看起來荒唐,其實是十分重要的。任何一種技術都不會空穴來風,白白的產生出來。技術的產生一定是為了解決某個實踐過程中遇到的問題。而通常大家所說的設計思想,則是解決此類問題的一個哲學原則。angularJS是為了解決前端工作代碼混亂的一種工作狀態。當初angularJS作者(Misko Hevery)為了開發一個Google Feedback項目,在項目中由於開發進度太慢,代碼太多混亂。於是作者在以前造的小輪子的基礎上重新設計了代碼,用到了項目中,將混亂的js代碼縮減到了1500行,改造后的輪子唄google重視,取名為angular。(關於具體詳細的過程請移步:http://www.iteye.com/magazines/121。或者自己網上查找)。
angularJS解決了什么問題:
1、HTML和js代碼混合在一起。
2、代碼的復用率太低,一個網站有三四個表單,那么每個地方的表單驗證要重寫。
3、多人協作的困難。
4、后端和前端的解耦度更高。
angularJS把后端那套MVC設計模式(或者稱之為代碼組織方式)帶到了前端,使得前端代碼規范起來,管理起來也更加方便。在view層里面,看不到任何操作頁面元素的代碼。angularJS的view層的目的就是為了簡單的呈現視圖。至於用戶和視圖的交互過程則有controller來控制。雖然我是后端開發,但是也不可避免的經常會使用js寫前端的一些邏輯。寫前端邏輯的時候,經常需要寫一會前端js然后寫后端的接口。這樣實際上增加了程序上下文切換的開銷,使得編程的效率變得底下。使用angular以后。我編寫前端的時候根本不關心后端的邏輯是怎么樣的,我可以很方便的虛擬出一些假數據,僅僅依靠這些數據,我就能進行一些最基本的功能測試,完成前端絕大部分工作。
如果換過多人開發,這樣的優勢就更明顯了。從前端用戶需求出發,定義出所需要的數據格式以及規范。前后端同時開工。前端共有N個頁面,可以抽象出多個Controller。分給多個人編寫,抽象出其中公共的部分作為service繼承使用。將頁面中的公共的html元素抽象成directive可以在多個頁面使用。(如分頁欄)。后端程序員的工作則更加具體明確,減少了和前端同學的溝通,使得溝通成本下降了。
其中更為一點值得注意的是,angularJS將View 和數據層分離開的獨特web構建方式,使得后端以前html與數據混合輸出的方式得到了改善。一次編寫代碼可以在多個地方使用,因為后端僅僅定義了接口,無論在何種設備上呈現網頁,只是view的樣式放生了變化,其數據實質並沒有發生變化。
2、view 和 data 分離。
這一部分,其實第一條已經寫了一部分。這主要得益於angular的路由(routeProvider)機制。借助一些擴展(如html2js),可以將后端的靜態資源完全的儲存到客戶端去。這樣說有些朋友可能沒有聽明白,這里舉一個小例子。比如我們以前去吃飯的時候,食堂的阿姨是將飯和菜打到盤子里遞給我們的。每個同學吃飯,阿姨都要做兩個動作,第一拿盤子,第二將飯菜盛到盤子里遞給我們。但是后來人太多了,阿姨想了個辦法。以后吃飯餐盤你們自己拿,我只負責打飯菜給你們。阿姨的工作只變成一個動作:將飯菜盛到盤子里遞給我們。
不知道朋友們看懂我這個小故事沒有。對應網頁開發,我們的盤子就是我們的html,飯菜就是我們真正需要的數據。一個新聞頁面用戶每次刷新的時候,都會更換新的新聞。對於用戶來講,真正有意義的數據是那些更新的信息,而不是為了美化和包裝這些數據的html。但是每次請求的時候這些東西還是返回給我們。第一個來說增加了網絡數據傳輸量。第二個來說客戶的響應速度可能會緩慢。
anguarlJS分別從服務端獲取到這些js和打包成js的html靜態資源。在頁面初始化的時候,獲取服務器端的數據,然后在客戶端將用戶需要的頁面組裝起來。
其實還有很多的優點,我只是一個初級的使用者,在以后的工作中,會有意的使用angularJS進行項目開發,充分的理解angularJS的前端設計思想。如果項目中不允許使用angularJS,那就要自己創建小項目學習了。
目前我寫angularJS還存在挺多的問題,比如:
1、寫代碼總是寫着寫着,忍不住使用JQuery和js的方式寫代碼。使得一個頁面中出現三種風格的代碼,特別難以維護。
2、目前不會使用service。沒有將公共的js代碼封裝成模塊的習慣。這個在以后的代碼中要有意加強。
3、在controller中使用Jquery操作DOM。這在angular中是不推薦甚至是不允許的。正確的做法應該是使用directive來編寫可復用的指令。
4、寫angularjs代碼太少。熟悉一個項目需要大量的項目代碼練手,我目前只能算是初步進入angularJS的大門。
希望各位angularJS的大神或者在github上有使用angularJS開發開源項目的能扔我一個鏈接,共同學習。
對angular的學習計划如下:
1、寫2-3個使用angularJS框架的項目。使用到angularJS的大部分功能。
2、回歸重溫犀牛書和高程,重新系統的學習js。
3、學習angularJS源碼。
五一假期轉眼即過,明天就要上班了。所以今晚早點睡覺嘍。