對於angularJS的一點思考

已經找好工做近兩週了，入職基本上還算順利，本身兩年來的挑燈夜戰也算是有了收穫，因而這兩週基本上是循序漸進的工做，沒有學習什麼新技術。在上個公司的時候，同事在項目中使用angularJs，以前他也沒有接觸過angularJs，一邊學習一邊作項目，結果給項目團隊形成了很大的困擾。angularJS他研究的不透徹，在使用的過程當中形成了很大的弊端，好比標籤閃爍，暴露出未解析的源代碼等。在商業的項目上嘗試使用新技術是十分危險的，輕則項目留坑，給維護留下巨大的安全隱患，重則項目流產，商業計劃所以而毀於一旦，公司也許就應爲某些程序員的擅作主張而錯失市場先機。

後來我爲了給angularJS填坑，系統的學習了angularJS。看的是《用AngularJS開發下一代Web應用》。版本其實挺老的，書上的例子仍是0.8的版本。如今已經更新到了3.0多了吧。沒有去仔細的查看過最新的版本。剛入職，領導爲了讓我學習公司的框架，扔給我一個內部使用小項目，其實也不是特別小。只由於是內部使用的，並且是我一我的在作，因此在瀏覽器的兼容性和新技術的使用上面，就隨意了許多。我能夠和同事們協商使用最新的瀏覽器，所以可以避免不少新技術實踐中遇到的問題。下面就簡單的談一談我對AngularJS的一些理解，部分觀點若是不正確，但願各位網友指正。

---

 

一、爲何會誕生AngularJS：

這個問題看起來荒唐，實際上是十分重要的。任何一種技術都不會空穴來風，白白的產生出來。技術的產生必定是爲了解決某個實踐過程當中遇到的問題。而一般你們所說的設計思想，則是解決此類問題的一個哲學原則。angularJS是爲了解決前端工做代碼混亂的一種工做狀態。當初angularJS做者（Misko Hevery）爲了開發一個Google Feedback項目，在項目中因爲開發進度太慢，代碼太多混亂。因而做者在之前造的小輪子的基礎上從新設計了代碼，用到了項目中，將混亂的js代碼縮減到了1500行，改造後的輪子唄google重視，取名爲angular。（關於具體詳細的過程請移步：http://www.iteye.com/magazines/121。或者本身網上查找）。

      angularJS解決了什麼問題：

一、HTML和js代碼混合在一塊兒。

二、代碼的複用率過低，一個網站有三四個表單，那麼每一個地方的表單驗證要重寫。

三、多人協做的困難。

四、後端和前端的解耦度更高。

angularJS把後端那套MVC設計模式（或者稱之爲代碼組織方式）帶到了前端，使得前端代碼規範起來，管理起來也更加方便。在view層裏面，看不到任何操做頁面元素的代碼。angularJS的view層的目的就是爲了簡單的呈現視圖。至於用戶和視圖的交互過程則有controller來控制。雖然我是後端開發，可是也不可避免的常常會使用js寫前端的一些邏輯。寫前端邏輯的時候，常常須要寫一會前端js而後寫後端的接口。這樣實際上增長了程序上下文切換的開銷，使得編程的效率變得底下。使用angular之後。我編寫前端的時候根本不關心後端的邏輯是怎麼樣的，我能夠很方便的虛擬出一些假數據，僅僅依靠這些數據，我就能進行一些最基本的功能測試，完成前端絕大部分工做。

若是換過多人開發，這樣的優點就更明顯了。從前端用戶需求出發，定義出所須要的數據格式以及規範。先後端同時開工。前端共有N個頁面，能夠抽象出多個Controller。分給多我的編寫，抽象出其中公共的部分做爲service繼承使用。將頁面中的公共的html元素抽象成directive能夠在多個頁面使用。（如分頁欄）。後端程序員的工做則更加具體明確，減小了和前端同窗的溝通，使得溝通成本降低了。

其中更爲一點值得注意的是，angularJS將View 和數據層分離開的獨特web構建方式，使得後端之前html與數據混合輸出的方式獲得了改善。一次編寫代碼能夠在多個地方使用，由於後端僅僅定義了接口，不管在何種設備上呈現網頁，只是view的樣式放生了變化，其數據實質並無發生變化。

 

二、view 和 data  分離。

這一部分，其實第一條已經寫了一部分。這主要得益於angular的路由（routeProvider）機制。藉助一些擴展（如html2js），能夠將後端的靜態資源徹底的儲存到客戶端去。這樣說有些朋友可能沒有聽明白，這裏舉一個小例子。好比咱們之前去吃飯的時候，食堂的阿姨是將飯和菜打到盤子裏遞給咱們的。每一個同窗吃飯，阿姨都要作兩個動做，第一拿盤子，第二將飯菜盛到盤子裏遞給咱們。可是後來人太多了，阿姨想了個辦法。之後吃飯餐盤大家本身拿，我只負責打飯菜給大家。阿姨的工做只變成一個動做：將飯菜盛到盤子裏遞給咱們。

不知道朋友們看懂我這個小故事沒有。對應網頁開發，咱們的盤子就是咱們的html，飯菜就是咱們真正須要的數據。一個新聞頁面用戶每次刷新的時候，都會更換新的新聞。對於用戶來說，真正有意義的數據是那些更新的信息，而不是爲了美化和包裝這些數據的html。可是每次請求的時候這些東西仍是返回給咱們。第一個來講增長了網絡數據傳輸量。第二個來講客戶的響應速度可能會緩慢。

anguarlJS分別從服務端獲取到這些js和打包成js的html靜態資源。在頁面初始化的時候，獲取服務器端的數據，而後在客戶端將用戶須要的頁面組裝起來。

 

其實還有不少的優勢，我只是一個初級的使用者，在之後的工做中，會有意的使用angularJS進行項目開發，充分的理解angularJS的前端設計思想。若是項目中不容許使用angularJS，那就要本身建立小項目學習了。

目前我寫angularJS還存在挺多的問題，好比：

一、寫代碼老是寫着寫着，忍不住使用JQuery和js的方式寫代碼。使得一個頁面中出現三種風格的代碼，特別難以維護。

二、目前不會使用service。沒有將公共的js代碼封裝成模塊的習慣。這個在之後的代碼中要有意增強。

三、在controller中使用Jquery操做DOM。這在angular中是不推薦甚至是不容許的。正確的作法應該是使用directive來編寫可複用的指令。

四、寫angularjs代碼太少。熟悉一個項目須要大量的項目代碼練手，我目前只能算是初步進入angularJS的大門。

但願各位angularJS的大神或者在github上有使用angularJS開發開源項目的能扔我一個連接，共同窗習。

對angular的學習計劃以下：

一、寫2-3個使用angularJS框架的項目。使用到angularJS的大部分功能。

二、迴歸重溫犀牛書和高程，從新系統的學習js。

三、學習angularJS源碼。

---

 

 

五一假期轉眼即過，明天就要上班了。因此今晚早點睡覺嘍。