歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

AngularJS 項目構建中的組織結構

前幾天剛剛把項目的組織結構進行了一次重構,這是前端項目至今第二次進行組織結構上大的變化,也是一個"folder by type"到"folder by feature"的過程.

為什麼有這個過程? 

因為感覺到項目的日益龐大,每次修改一個地方我可能要打開三四個文件,比如說一個頁面上的哪裡要修改.那麼首先是頁面的HTML,然後是Controller,Less,對應接口的service文件等等.整個項目是我一手構建的可能還不會出問題,只是找的時候要回想一下對應的文件,但是如果一個新的成員加入進來,不免就有些疏漏,因為他也很難確定一個頁面上的局部變動,到底要涉及到哪些文件. 

最開始在項目剛剛構建的時候,也就是只有一個頁面的,就開始按照文件類型進行項目的組織.不過隨著項目的龐大,以及各方面其他的影響,逐漸,按照type進行劃分已經出現了職責不清晰的感覺. 

希望你喜歡,並分享我的工作~帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

最開始項目的結構大概是這樣,太具體的有點記不清了,大概是這樣的: 

-- static
  -- js
    -- app.js
    -- routers.js
    -- services.js
    -- directive.js
    -- filter.js
    -- controllers
      -- userController.js
      -- someModule.js
  -- less
    -- index.less
    -- user.less
    -- someModule.less
  -- build
    -- all.2014090901.js
    -- all.2014090901.css
-- templtes
  -- index.html
  -- user.html

基本結構就是按照功能對Controller進行劃分了,因為做的Angular SPA所以基本上一個Controller對應一個子頁面,然後將所有的js以及less合並壓縮出來,在index頁面加載.當然其實還做了一些更細致的工作,這裡只是說一下項目的雛形.

接下來都做了哪些改變?

與其說接下來做了哪些改變,不如說一下有哪些東西促進了我們要進行改變.說到這在岔開一個話題,什麼叫做穩定良好的文件組織結構,一個我現在下的定義就是"健壯並包容".當一個東西發生變化的時候,你當前的組織結構能夠以很小的代價去適應新的變化,而不是整個項目大改特改,甚至牽連到代碼.

當雛形完成後,項目日益增大,有兩個task進入了要考慮的流程.一個是關於項目的自動化構建,包括是庫文件的管理,庫之間的依賴關系,代碼的壓縮合並等,還有靜態資源的版本號,開發模式和發布模式下不同代碼構建等等.另一個問題就是URL的設計,怎麼和文件的組織結構保持高度統一.

這兩個問題都比較雜,先說URL的設計吧.

關於"好的URL設計"的定義有好幾條,可以自行百度,我不打算抄襲百度百科了.只談我認為最重要的就是對用戶的友好,什麼叫URL對用戶的友好呢?說白了就是讓你的URL一看就懂,一猜一個准.我認為這樣設計就可以了,可能你會說了誰會無聊到去記住URL地址呢,想要以後訪問收藏一下就可以了.

這個我沒什麼興趣去反駁,不過你怎麼看不見百度或者淘寶的網站將地址設計為"www.baidu.com/hsakudhkajshdgjasgdjhsgfjhsagfjhsdgfjhasgfj786347823yuisbhdufy".

URL的語義化很大程度上表達了對用戶的友好.比如我現在"/restaurant","/restaurant/new","/restaurant/2","/restaurant/2/edit"這幾個URL對應的頁面分別是:

餐廳頁面(列表數據),新建餐廳頁面,餐廳id為2的餐廳頁面,餐廳id為2的餐廳編輯頁面.

很容易猜到不是嗎,將2改為其他對應的id也能訪問到指定的餐廳頁面.這個URL映射關系從結構上說就應該與我們的文件夾結構對應,也就是應該有一個restaurant文件夾,然後裡面有詳情,新建,編輯等頁面以及對應的其他文件.所以基於良好的URL設計,我們是需要一個符合語義的組織文件結構的.

項目的自動化構建怎麼牽扯到文件結構?

每個小話題感覺都能引出一些詳細的深入的東西,項目自動化構建為了解決什麼問題?這個解決了很多問題,但是對於一個Angular SPA來講主要有兩個需求.一個是將靜態資源合的整合,比如合並壓縮,發布時使用帶有版本號的靜態資源.另一個是開發過程中的一些Less文件以及JS文件的重新編譯,頁面自動刷新等.

簡單說一是為了發布,一是為了開發,為這兩個步驟更加便捷有序做出一些努力.

在上面的過程中,不管是開發還是發布,都會生成很多build出來的文件,這也會影響到你對項目目錄和文件組織的調整.

更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2014-09/107366p2.htm

Copyright © Linux教程網 All Rights Reserved