Web项目，工程目录应该怎样规划？

为什么80%的码农都做不了架构师？>>>   

一、工程目录如何规划？

    通常我们会给自己的Web项目做一些目录上的规划，一般来说，我们会在webapp目录下创建很多文件夹。用来存放不同业务的文件，当遇到通用文件时我们会专门新建一个common文件夹来保存它们。此外还有js、img、css等等各类文件。最后我们的目录有可能是这个样子的（如下图：左边）

    左边这种方式，显然没有对工程结构进行预先的合理规划。属于典型的打一枪换一个地方做派。路子很野！效率很高！但是不成体系，一旦项目做大了，或者参与人员多了就会暴露各种问题。

    那么我们在看一看右边这种方式，它比左边的好了一些，专门为资源文件和公共文件做了规划。我相信一般情况下项目的目录结构都趋向于这种结构。在不同的项目会有相似但是各自不同的结构。

二、以框架的眼光规划工程目录

区块

    通常一个页面可以被切分为多个不同的小区块，每个小区块会按照业务进行划分。相同功能的部分我们也会使用相同的区块。例如：

    这样一来不同的页面都是通过组合区块的方式得以呈现，这样做的好处是页面中相同的部分可以抽象出来成为区块。为了后面理解更加方便，简单模拟一个电商网站的三个主要页面：

    这三个不同的页面根据各自的功能都进行了区块的划分，那么把眼光从区块上在放大到页面上。

布局

    可以看出，不同的页面都有“Head”和“Foot”区块，而且都是在相同的地方。通常实现这种逻辑的方式是我们在每个页面中都添加相应的代码，但是这也实在是太low了。现在我们把这个共性也抽象出来。

、

有了这个“layout”就可以解决我们页面之间共性的问题了，下面在举一个复杂点的例子。layout可以轻松解决。

    在这个复杂的布局例子中，首先定义了一个全网通用布局。然后根据市场不同定义了两类模版，第一类layout 1，用来做市场频道页。而第二类layout 2，用来做垂直市场List搜索页。

这两个布局例子可以在：淘宝网上见到。

页面

    经过上面“区块”“布局”的抽象，似乎已经可以表述整个网站的面貌。接下来就是用户真正可以看到的页面了。为了避免页面的路径和前面我们定义的两个元素混淆，再把所有页面单独放到一个目录中。最后的布局结构就变成了这个样子的：

三、结束语

    这样一来感觉上，这套目录就很清晰明了。

转载于:https://my.oschina.net/ta8210/blog/550176