前端文件架构规范

前端文件架构规范架构原则为保证前端页面在多人、多目录文件更改的情况下，防止页面混乱，设计人员、前端开发人员、后端开发人员等能清晰的分清前端文件目录结构，在建立项目目录架构的时候须进行功能及语义性的划分。目录结构1页面文件(html文件)1.1静态文件就统一放在html目录中，让参与开发的人员一目了然。1.2如果涉及到设备类型，如pcweb端（以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.html2资源文件(包含样式文件、js、图片等)2.1资源文件统一放在public目录下2.2静态资源应放在public/static目录中，一般是指框架文件、编辑器、插件等如:static/bootstrap/bootstrap3.0.2，static/jquery/jquery.1.11.min.js2.3如果分了设备类型，须建立设备目录，如果设备之间有共用资源，可建立common目录如：public/desktop、public/mobile、public/common2.4不同的应用应该拥有不同的目录，如public/mobile/home与public/pc/admin2.5应用下的资源目录结构应是：public/desktop/admin/css样式目录public/desktop/admin/js脚本目录public/desktop/admin/images图片目录public/desktop/admin/fonts字体目录这些目录除了images目录，文件相对较少，可不用额外建立目录;images目录下，全局图片直接放在images目录下，公用图片放在common目录下，其它非公用图片按照模块/页面名应建立相应的目录并放在该目录下3示例文件我们制作页面的时候经常会有用于展示的资源，比如图片、视频等，这些资源只是作为示例让后端开发人员方便处理数据填充，所以这部分资源放在public目录下的sample中比较合适。当然了，这里的目录也是分设备和应用的，文件名称最好是时间戳，方便后期管理。