前端文件架构规范

前端文件架构规范

架构原则

为保证前端页面在多人、多目录文件更改的情况下，防止页面混乱，设计人员、前端开发人员、后端开发人员等能清晰的分清前端文件目录结构，在建立项目目录架构的时候须进行功能及语义性的划分。

目录结构

1页面文件(html文件)

1.1静态文件就统一放在html目录中，让参与开发的人员一目了

然。

1.2如果涉及到设备类型，如pc web端（以desktop命名）、mobile

移动web端、android端、ios端，根据不同类型的设备而制

作的适配页面，须放在类型目录下，目录名以设备类型命名

(android与ios可统一为app)

1.3页面文件应使用.html后缀结尾，名称以小写字母与中划或下

划线组合。

1.4静态的html页面应专门建立目录：

项目->设备->应用->模块->页面

例如1:project/desktop/home/index/index.html，即project项目

/pc端/home应用/index模块/index页面

例如2:project/mobile/home/article/list.html，即project项目/

移动web端/home应用/文章模块/list页面

例如3:project/app/admin/product/detail.html，即project项目/

移动应用/admin应用/product模块/detail页面

如果模块与页面难以划分，可用模块与页面名的组合

如：project/ app/admin/product-detail.html

2资源文件(包含样式文件、js、图片等)

2.1资源文件统一放在public目录下

2.2静态资源应放在public/static目录中，一般是指框架文件、编

辑器、插件等

如:static/bootstrap/bootstrap3.0.2，

static/jquery/jquery.1.11.min.js

2.3如果分了设备类型，须建立设备目录，如果设备之间有共用

资源，可建立common目录

如：public/desktop、public/mobile、public/common

2.4不同的应用应该拥有不同的目录，

如public/mobile /home与public/pc /admin

2.5应用下的资源目录结构应是：

public/desktop /admin/css样式目录

public/desktop/admin/js脚本目录

public/desktop/admin/images图片目录

public/desktop /admin/fonts字体目录

这些目录除了images目录，文件相对较少，可不用额外建立目录;images目录下，全局图片直接放在images目录下，公用图片放在common目录下，其它非公用图片按照模块/页面名应建立相应的目录并放在该目录下

3示例文件

我们制作页面的时候经常会有用于展示的资源，比如图片、视频等，这些资源只是作为示例让后端开发人员方便处理数据填充，所以这部分资源放在public目录下的sample中比较合适。当然了，这里的目录也是分设备和应用的，文件名称最好是时间戳，方便后期管理。