前端项目目录如何组织
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端项目目录如何组织相关的知识,希望对你有一定的参考价值。
参考技术A 最近看了 antd pro 发现其项目的目录结构组织的不错。然后再按照自己的项目经验,对其项目的组织进行修改,现在总结下自己的想法。我们看下 antd pro 自己生成的目录结构
由于 antd pro 本身引用了 antd 的组件库,所以不存在自己写通用组件的步骤。但是有的时候我们自己项目会有自己写通用组件的需要。组件除了有通用组件,还会有业务组件。通用组件是粒度比较细且和业务无关的组件,譬如 Dropdown。而业务组件可能是你这个项目特有的,譬如工具栏,或者某种特殊的弹框。业务组件大多数情况是由(但不仅仅由)通用组件组成。业务组件是粒度比较粗的组件。所以这个时候我一般会把通用组件放在 components 目录下,而新建一个 widgets 目录放业务组件,这样分的比较清楚。不过通用组件和业务组件的划分边界并不是每次都能分的很清楚,有时是会相互转换的,如果实在觉得很难区分,那可以都放在 components 下。
src/models 目录放的是 dva model,如果你用 redux,那么这里大致可能对应的是 state 的概念,如果用 mobx 这里隐约对应的是 store 的概念。在我看来这些都不是 model,只能叫做状态(state)相关。我个人理解的 model 应该指的是领域对象也就是领域驱动设计(Domain-Driven Design)中的 domain object,类似于 java bean 的概念。所以我会把放在 models 下面的东西用一个新的目录存放,通常叫 stores,而 models 下面会放领域对象(domain object)。拿 todo list 为例,我会抽象出一个 TodoItem 的领域对象,其定义:
这个简单,通常项目都不会少了枚举值,这个时候我会单独新建一个 enums 的目录放项目所用到的所有枚举对象。当然,如果很少的话并入 common 目录也未尝不可。 这个时候 src 目录基本上会变成这样:
看上目录很多,这里我精简下,如果你的项目没有复杂的布局,没有可视化图形配置,没有复杂的路由且用了 react-router4,最后没有可配置主题那么基本的目录结构可以精简为:
如果项目前期设计做的好,抽象建模工作做的到位,其实你会发现,项目目录大致还可以分为两类:UI 相关和 UI 无关的。这个时候我会把 UI 相关的放到一个 app 的目录下,整个项目就会分成 MV(model,view) 的层次:
这么做的用意是当你的项目 UI 框架重构的时候可以只动 app 目录。从 redux 变到 mobx,也可以从 react 变成 angular。当然这层抽象不是必须的,只是我个人偏好,如果要重构通常也会整个项目重构。
以上就是我根据 antd pro 修改的,我认为比较通用的项目目录结构(这里没有提到测试相关)。
lemon oa前端页面——由user-base-list谈项目组织
content
user-base-list.jsp
中指定
<%pageContext.setAttribute("currentHeader", "user");%> // currentHeader值在/header/user.jsp中会被覆盖,在/header.jsp中起作用,
<%pageContext.setAttribute("currentMenu", "user");%> // 在/menu/user.jsp页面中会影响哪些accordion-body被收缩
主要布局是
<body>
<%@include file="/header/user.jsp"%>
<div class="row-fluid">
<%@include file="/menu/user.jsp"%> // 2个栅格
<!-- start of main -->
<section id="m-main" class="span10"> // 10个栅格
</section>
<!-- end of main -->
</div>
</body>
--------------------------------------------------------------------------------------------
header
/header/user.jsp中
<%pageContext.setAttribute("currentHeader", "scope");%>
<%@include file="/header.jsp"%>
/header.jsp中,主要定义页面头部,功能是导航菜单(首页,个人事务,统计报表,系统管理(下拉菜单)),用户管理(用户密码修改、用户退出)和未读消息三块
<ul class="nav">
<li class="divider-vertical"></li>
<li class="${currentHeader == ‘dashboard‘ ? ‘active‘ : ‘‘}"><a href="${scopePrefix}/dashboard/dashboard.do">首页</a></li>
<li class="${currentHeader == ‘bpm-workspace‘ ? ‘active‘ : ‘‘}"><a href="${scopePrefix}/bpm/workspace-home.do">个人事务</a></li>
<li class="${currentHeader == ‘report‘ ? ‘active‘ : ‘‘}"><a href="${scopePrefix}/report/chart-mostActiveProcess.do">统计报表</a></li>
<li class="dropdown ${currentHeader == ‘scope‘ ? ‘active‘ : ‘‘}">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">系统管理 <b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
可以看到currentHeader是如何起作用的。
未读消息就是一个跳转到<a href="${scopePrefix}/msg/msg-info-listReceived.do">的链接,
然后页面会定时刷新<i id="unreadMsg" class="badge"></i>,显示有几条未读消息(调用MsgResource类中的unreadCount()方法)
--------------------------------------------------------------------------------------------
menu
/menu/user.jsp是用户管理的菜单,
是在页面的左侧边,<aside id="m-sidebar" class="accordion span2" data-spy="affix" data-offset-top="100">,span2说明占2个栅格的宽度
主要是一个<div class="accordion-group">,然后下面有一个<footer id="m-footer" class="text-center">
在<div class="accordion-group">中有<div id="collapse-user" class="accordion-body collapse ${currentMenu == ‘user‘ ? ‘in‘ : ‘‘}">
然后在/lemon/webapp/s/bootstrap/3.2.0/css/bootstrap.css中有定义
.collapse {
display: none;
}
.collapse.in {
display: block;
}
以上是关于前端项目目录如何组织的主要内容,如果未能解决你的问题,请参考以下文章