搭建工程目录

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          (项目配置)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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

一般使用设计模式框架 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

更新日志:

  • 2015-07-15

(本篇结束)

CC BY-NC-ND 4.0

Last Updated: 2021/7/10下午8:54:57
Contributors: xianghongai