前端文件架构规范.pdfVIP

前端文件架构规范 架构原则 为保证前端页面在多人、多目录文件更改的情况下，防止页面混 乱，设计人员、 前端开发人员、后端开发人员等能清晰的分清前端文 件目录结构，在建立项目目录架构的时候须进行功能及语义性的划 分。 目录结构 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 中比较合适。当然了， 这里的目录也是分设备和应用的，文件名称最好是时间戳，方便 后期管理。