前幾天剛剛把項(xiàng)目的組織結(jié)構(gòu)進(jìn)行了一次重構(gòu),這是前端項(xiàng)目至今第二次進(jìn)行組織結(jié)構(gòu)上大的變化,也是一個(gè)"folder by type"到"folder by feature"的過(guò)程.
 

成都創(chuàng)新互聯(lián)公司是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁(yè)美工、網(wǎng)站程序員、網(wǎng)頁(yè)設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營(yíng)銷(xiāo)人員及形象策劃。承接：成都網(wǎng)站制作、做網(wǎng)站、網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫(kù)開(kāi)發(fā),以高性?xún)r(jià)比制作企業(yè)網(wǎng)站、行業(yè)門(mén)戶(hù)平臺(tái)等全方位的服務(wù)。

為什么有這個(gè)過(guò)程?

因?yàn)楦杏X(jué)到項(xiàng)目的日益龐大,每次修改一個(gè)地方我可能要打開(kāi)三四個(gè)文件,比如說(shuō)一個(gè)頁(yè)面上的哪里要修改.那么首先是頁(yè)面的HTML,然后是Controller,Less,對(duì)應(yīng)接口的service文件等等.整個(gè)項(xiàng)目是我一手構(gòu)建的可能還不會(huì)出問(wèn)題,只是找的時(shí)候要回想一下對(duì)應(yīng)的文件,但是如果一個(gè)新的成員加入進(jìn)來(lái),不免就有些疏漏,因?yàn)樗埠茈y確定一個(gè)頁(yè)面上的局部變動(dòng),到底要涉及到哪些文件.

最開(kāi)始在項(xiàng)目剛剛構(gòu)建的時(shí)候,也就是只有一個(gè)頁(yè)面的,就開(kāi)始按照文件類(lèi)型進(jìn)行項(xiàng)目的組織.不過(guò)隨著項(xiàng)目的龐大,以及各方面其他的影響,逐漸,按照type進(jìn)行劃分已經(jīng)出現(xiàn)了職責(zé)不清晰的感覺(jué).

最開(kāi)始項(xiàng)目的結(jié)構(gòu)大概是這樣,太具體的有點(diǎn)記不清了,大概是這樣的:

 
 

  
  
-- 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 
 
 

基本結(jié)構(gòu)就是按照功能對(duì)Controller進(jìn)行劃分了,因?yàn)樽龅腁ngular SPA所以基本上一個(gè)Controller對(duì)應(yīng)一個(gè)子頁(yè)面,然后將所有的js以及l(fā)ess合并壓縮出來(lái),在index頁(yè)面加載.當(dāng)然其實(shí)還做了一些更細(xì)致的工作,這里只是說(shuō)一下項(xiàng)目的雛形.

接下來(lái)都做了哪些改變?

與其說(shuō)接下來(lái)做了哪些改變,不如說(shuō)一下有哪些東西促進(jìn)了我們要進(jìn)行改變.說(shuō)到這在岔開(kāi)一個(gè)話題,什么叫做穩(wěn)定良好的文件組織結(jié)構(gòu),一個(gè)我現(xiàn)在下的定義就是"健壯并包容".當(dāng)一個(gè)東西發(fā)生變化的時(shí)候,你當(dāng)前的組織結(jié)構(gòu)能夠以很小的代價(jià)去適應(yīng)新的變化,而不是整個(gè)項(xiàng)目大改特改,甚至牽連到代碼.

當(dāng)雛形完成后,項(xiàng)目日益增大,有兩個(gè)task進(jìn)入了要考慮的流程.一個(gè)是關(guān)于項(xiàng)目的自動(dòng)化構(gòu)建,包括是庫(kù)文件的管理,庫(kù)之間的依賴(lài)關(guān)系,代碼的壓縮合并等,還有靜態(tài)資源的版本號(hào),開(kāi)發(fā)模式和發(fā)布模式下不同代碼構(gòu)建等等.另一個(gè)問(wèn)題就是URL的設(shè)計(jì),怎么和文件的組織結(jié)構(gòu)保持高度統(tǒng)一.

這兩個(gè)問(wèn)題都比較雜,先說(shuō)URL的設(shè)計(jì)吧.

關(guān)于"好的URL設(shè)計(jì)"的定義有好幾條,可以自行百度,我不打算抄襲百度百科了.只談我認(rèn)為最重要的就是對(duì)用戶(hù)的友好,什么叫URL對(duì)用戶(hù)的友好呢?說(shuō)白了就是讓你的URL一看就懂,一猜一個(gè)準(zhǔn).我認(rèn)為這樣設(shè)計(jì)就可以了,可能你會(huì)說(shuō)了誰(shuí)會(huì)無(wú)聊到去記住URL地址呢,想要以后訪問(wèn)收藏一下就可以了.

這個(gè)我沒(méi)什么興趣去反駁,不過(guò)你怎么看不見(jiàn)百度或者淘寶的網(wǎng)站將地址設(shè)計(jì)為"www.baidu.com/hsakudhkajshdgjasgdjhsgfjhsagfjhsdgfjhasgfj786347823yuisbhdufy".

URL的語(yǔ)義化很大程度上表達(dá)了對(duì)用戶(hù)的友好.比如我現(xiàn)在"/restaurant","/restaurant/new","/restaurant/2","/restaurant/2/edit"這幾個(gè)URL對(duì)應(yīng)的頁(yè)面分別是：

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

很容易猜到不是嗎,將2改為其他對(duì)應(yīng)的id也能訪問(wèn)到指定的餐廳頁(yè)面.這個(gè)URL映射關(guān)系從結(jié)構(gòu)上說(shuō)就應(yīng)該與我們的文件夾結(jié)構(gòu)對(duì)應(yīng),也就是應(yīng)該有一個(gè)restaurant文件夾,然后里面有詳情,新建,編輯等頁(yè)面以及對(duì)應(yīng)的其他文件.所以基于良好的URL設(shè)計(jì),我們是需要一個(gè)符合語(yǔ)義的組織文件結(jié)構(gòu)的.

項(xiàng)目的自動(dòng)化構(gòu)建怎么牽扯到文件結(jié)構(gòu)?

每個(gè)小話題感覺(jué)都能引出一些詳細(xì)的深入的東西,項(xiàng)目自動(dòng)化構(gòu)建為了解決什么問(wèn)題?這個(gè)解決了很多問(wèn)題,但是對(duì)于一個(gè)Angular SPA來(lái)講主要有兩個(gè)需求.一個(gè)是將靜態(tài)資源合的整合,比如合并壓縮,發(fā)布時(shí)使用帶有版本號(hào)的靜態(tài)資源.另一個(gè)是開(kāi)發(fā)過(guò)程中的一些Less文件以及JS文件的重新編譯,頁(yè)面自動(dòng)刷新等.

簡(jiǎn)單說(shuō)一是為了發(fā)布,一是為了開(kāi)發(fā),為這兩個(gè)步驟更加便捷有序做出一些努力.

在上面的過(guò)程中,不管是開(kāi)發(fā)還是發(fā)布,都會(huì)生成很多build出來(lái)的文件,這也會(huì)影響到你對(duì)項(xiàng)目目錄和文件組織的調(diào)整.

新構(gòu)建好的項(xiàng)目結(jié)構(gòu)

每一次對(duì)于項(xiàng)目的修改都涉及到方方面面的東西,很繁雜,隨著項(xiàng)目的日益龐大,這種修改的成本也會(huì)越來(lái)越高,所以及早確定一個(gè)好的架構(gòu)是很迫切的.先給出當(dāng)期啊的結(jié)構(gòu):

        

      

大致說(shuō)一下現(xiàn)在怎么劃分的,因?yàn)槭荢PA所以肯定有一個(gè)index.html作為頁(yè)面的承載,app.js是angular的main文件,app.less是所有Less文件的入口.

components是angular的各個(gè)組件,包括common,services,directives,filters,router,run.js(這個(gè)主要是放置一些需要隨App一起啟動(dòng)運(yùn)行的代碼,例如插件初始化配置,以及類(lèi)似路由監(jiān)聽(tīng)處理事件等).

一個(gè)子頁(yè)面按照功能模塊劃分在modules中,對(duì)應(yīng)的Controller的JS文件,Less的CSS文件都在一個(gè)文件夾內(nèi).

build目中的內(nèi)容全部是生成的,我使用了Bower和Gulp搭配使用,自動(dòng)化構(gòu)建項(xiàng)目.

這樣目錄結(jié)構(gòu)就清晰了,公共的部分被單獨(dú)劃在一起,每個(gè)頁(yè)面對(duì)應(yīng)的相關(guān)文件被組織在一起,然后按照功能安排進(jìn)行劃分.這樣在維護(hù)的時(shí)候就能很容易找到要修改的相關(guān)文件.同事日常開(kāi)發(fā)和項(xiàng)目發(fā)布都是用build中的文件,里面有兩套不同的文件對(duì)應(yīng)開(kāi)發(fā)和發(fā)布。

這樣感覺(jué)整個(gè)項(xiàng)目都清爽多了.

項(xiàng)目構(gòu)建之路豈止于此

因?yàn)槠藓芏鄸|西還是沒(méi)法一起交代清楚,比如Controller的職責(zé)劃分,services的結(jié)構(gòu),以及Bower和Gulp如何配合進(jìn)行完整的項(xiàng)目構(gòu)建.這些過(guò)后可能會(huì)在Github上留一套架子,有興趣的可以留言。

雖然感覺(jué)很多東西沒(méi)說(shuō)明白,不過(guò)關(guān)于組織結(jié)構(gòu)的事兒,大概也就是這些了.只是項(xiàng)目的構(gòu)建之路漫漫而修遠(yuǎn),***還有點(diǎn)心得和大家分享一下。

項(xiàng)目的構(gòu)建做到現(xiàn)在只能說(shuō)完成了初級(jí)的一步,如果稍微好點(diǎn)說(shuō),算是中級(jí)吧.那么理所應(yīng)當(dāng)該有個(gè)高級(jí)或者說(shuō)***目標(biāo).angular是一套框架而不是庫(kù),這就給了我們很多發(fā)揮的空間,從現(xiàn)在的情況來(lái)看,還有那些不足需要改進(jìn)的東西,我總結(jié)了一些點(diǎn),當(dāng)然這些點(diǎn)對(duì)大多數(shù)項(xiàng)目可用：

各部分之間的耦合度,是否做到深度解耦。

Controller的職責(zé)是不是過(guò)大,不單單是業(yè)務(wù),很多亂七八糟的東西都丟到Controller中,導(dǎo)致形成了'super controller'。

一些公共的東西是不是沒(méi)有抽取出來(lái),還在重復(fù)copy代碼。

MVVC的概念,是不是發(fā)覺(jué)自己在angular中沒(méi)有M的概念。

用面向?qū)ο蟮乃枷肟纯醇軜?gòu)和代碼,有沒(méi)有做到職責(zé)單一,開(kāi)放閉合.

其實(shí)還有很多東西需要改進(jìn),我也一直在慢慢組織.可以說(shuō),一套搭的比較完善的架子有兩個(gè)最為突出的特性.其一就是結(jié)構(gòu)清晰維護(hù)方便,因?yàn)槊總€(gè)部分職責(zé)單一,對(duì)修改閉合,對(duì)擴(kuò)這開(kāi)發(fā).另一個(gè)特性就是開(kāi)發(fā)效率極高,大量的內(nèi)容被抽象出來(lái),做成公共的組件,70%的代碼已經(jīng)被寫(xiě)完了,只要寫(xiě)業(yè)務(wù)那部分即可。

如果說(shuō)還有一個(gè)很重要的原因去讓我們孜孜不倦的完善架構(gòu),就是為了不在項(xiàng)目日益龐大的時(shí)候無(wú)法有效的維護(hù),個(gè)人感覺(jué)這是最主要的一點(diǎn),就是通過(guò)清晰的代碼和結(jié)構(gòu),降低維護(hù)的成本。

原文出自：http://my.oschina.net/blogshi/blog/322883

分享標(biāo)題：Angular項(xiàng)目構(gòu)建中的組織結(jié)構(gòu)
本文路徑：http://m.5511xx.com/article/cddgejd.html