Web项目,工程目录应该怎样规划?
Web项目,工程目录应该怎样规划?
哈库纳 发表于2年前
Web项目,工程目录应该怎样规划?
  • 发表于 2年前
  • 阅读 1045
  • 收藏 13
  • 点赞 1
  • 评论 5

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 接下面我们来说一说Web项目的目录结构。

一、工程目录如何规划?

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

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

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

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

区块

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

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

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

布局

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

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

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

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

页面

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

三、结束语

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

共有 人打赏支持
哈库纳
粉丝 929
博文 81
码字总数 149803
作品 4
评论 (5)
Cobbage
啊啊啊啊啊啊啊啊啊啊?
断崖逐梦
来我们公司做架构师吗
Smile月光
青木河

引用来自“断崖逐梦”的评论

来我们公司做架构师吗
哈哈哈,大哥太逗了
王爵nice
42 我也附带个小尾巴 https://github.com/biezhi/jb/blob/master/mvc/index.md
×
哈库纳
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: