>>>

一、工程目錄如何規劃？

通常我們會給自己的Web專案做一些目錄上的規劃，一般來說，我們會在webapp目錄下建立很多資料夾。用來存放不同業務的檔案，當遇到通用檔案時我們會專門新建一個common資料夾來儲存它們。此外還有js、img、css等等各類檔案。最後我們的目錄有可能是這個樣子的（如下圖：左邊）

左邊這種方式，顯然沒有對工程結構進行預先的合理規劃。屬於典型的打一槍換一個地方做派。路子很野！效率很高！但是不成體系，一旦專案做大了，或者參與人員多了就會暴露各種問題。

那麼我們在看一看右邊這種方式，它比左邊的好了一些，專門為資原始檔和公共檔案做了規劃。我相信一般情況下專案的目錄結構都趨向於這種結構。在不同的專案會有相似但是各自不同的結構。

二、以框架的眼光規劃工程目錄

區塊

通常一個頁面可以被切分為多個不同的小區塊，每個小區塊會按照業務進行劃分。相同功能的部分我們也會使用相同的區塊。例如：

這樣一來不同的頁面都是通過組合區塊的方式得以呈現，這樣做的好處是頁面中相同的部分可以抽象出來成為區塊。為了後面理解更加方便，簡單模擬一個電商網站的三個主要頁面：

這三個不同的頁面根據各自的功能都進行了區塊的劃分，那麼把眼光從區塊上在放大到頁面上。

佈局

可以看出，不同的頁面都有“Head”和“Foot”區塊，而且都是在相同的地方。通常實現這種邏輯的方式是我們在每個頁面中都新增相應的程式碼，但是這也實在是太low了。現在我們把這個共性也抽象出來。

、

有了這個“layout”就可以解決我們頁面之間共性的問題了，下面在舉一個複雜點的例子。layout可以輕鬆解決。

在這個複雜的佈局例子中，首先定義了一個全網通用佈局。然後根據市場不同定義了兩類模版，第一類layout 1，用來做市場頻道頁。而第二類layout 2，用來做垂直市場List搜尋頁。

這兩個佈局例子可以在：淘寶網上見到。

頁面

經過上面“區塊”“佈局”的抽象，似乎已經可以表述整個網站的面貌。接下來就是使用者真正可以看到的頁面了。為了避免頁面的路徑和前面我們定義的兩個元素混淆，再把所有頁面單獨放到一個目錄中。最後的佈局結構就變成了這個樣子的：

三、結束語

這樣一來感覺上，這套目錄就很清晰明瞭。

轉載於:https://my.oschina.net/ta8210/blog/550176