跳到主要内容

搭建工程目录

Web重构搭建工程目录,即是合理分布项目静态资源。

目录和文件名,只能是英文、数字和-字符组成,名称不宜过长和生涩,不加排序前缀,干扰阅读和查找文件名,层级不宜过深,这样便于后期维护调整,交付后端程序清晰明了。

组织目录和文件,处理好两个点:一是设计模式框架中类型,二是业务功能

页面型、内容型多页面项目

项目目录规划

  • 移动Web端 Project-H5
  • 微信端 Project-WeiXin
  • 桌面Web端 Project-PC
  • Android端 Project-Android
  • AndroidTV端 Project-AndroidTV
  • iOS端 Project-iOS
  • Linux端 Project-Linux
  • UWP端 Project-UWP
  • WP端 Project-WP

通用页面规划

  • 通用列表页
  • 通用详情页
  • 通用评论页
  • 通用图片列表页
  • 通用图片详情页
  • 通用视频列表页
  • 通用视频详情页

栏目/频道页面规划

  • 栏目-首页
  • 栏目-列表页
  • 栏目-详情页
  • 栏目-其它业务操作页面

用户中心页面规划

  • 账户相关
  • 个人资料相关
  • 业务相关
  • 积分等级
  • 设置

例:采用Gulp打包、SCSS预处理

+ project-a/
+ project-b/
+ project-c/
...
- project-x/
- dist/ (打包文件)
- css/
main.min.css
+ font/
+ img/
+ lib/
+ js/
index.html
about.html
archive.html
+ dev/ (开发预览,样式脚本都未合并或混合,方便调试)
- src/
+ font/ (Icon)
+ img/ (项目用图形图标)
- js/
+ common/ (内部编写公用模块脚本,打包成common.min.js单文件)
entry.js (入口文件,定义一个全局变量,项目所有脚本对象都挂在它名下,即类似声明一个命名空间,避免污染)
+ view/ (每个页面的脚本)
+ lib/ (第三方依赖,不可改动)
- page/ (页面,采用`gulp-file-include`从tpl引入模块)
index.html
about.html
archive.html
- scss/ (所有样式打包成main.min.css单文件)
+ component/ (组件类)
+ core/ (核心样式)
+ dependencies/ (第三方依赖)
+ mixins/ (混合器)
+ variables/ (全局样式变量)
_component.scss
_mixins.scss
_variables.scss
app.scss (全局样式)
- tpl/ (模块)
page-header.html
page-breadcrumb.html
page-footer.html
page-aside.html
page-meta.html
page-pendant.html
page-style.html
script-head.html
script-foot.html
site-topbar.html
site-footer.html
.gitignore (Gulp task 代码校验配置、Git 版本控制配置)
.babelrc
.csslintrc
.eslintignore
.eslintrc
.htmlhintrc
.jshintignore
.jshintrc
.scss-lint.yml
gulpfile.js (Gulp配置)
package.json (项目配置)

单页面:业务功能优先、类型其次的目录规划

一般使用设计模式框架 CLI 和打包工具实现

+ project-a/
+ project-b/
+ project-c/
...
- project-x/
- node_modules/
- dist/
- dev/
- src/
+ common/
+ feature-a/
+ feature-b/
+ feature-c/
...
- feature-x/
xxxx.js/ts
xxx.svg/png/jpg
xxx.css/scss
- index.html
- lint

更新日志:

  • 2015-07-15