前端结构 の 调整新建议

根据 前端开发 の 一致性和复用性，前些日子做了部分调整；根据调整过程中的实际使用效果，结合当前新的认知，今天提出调整新建议。

wph 工程建议

├── global/
│ 　└── XLS-eXpanded-standard-Leaf-Structure/
├── m/src/ 手机站点
└── www/src/ PC 站点
　　├── about/
　　│ 　├── css/
　　│ 　│ 　└── index.inc.css
　　│ 　├── html/
　　│ 　│ 　├── about-us-t.html
　　│ 　│ 　└── contact-us-t.html
　　│ 　└── js/
　　│ 　　 └── index.inc.js
　　├── choose-guide/
　　│ 　└── XLS-eXpanded-standard-Leaf-Structure/
　　├── common/
　　│ 　└── XLS-eXpanded-standard-Leaf-Structure/
　　├── customer/
　　├── font/
　　├── hour24/
　　├── maintenance/
　　├── manager/
　　├── supplier/
　　│ 　├── second-level-module/
　　│ 　│ 　└── XLS-eXpanded-standard-Leaf-Structure/
　　│ 　└── XLS-eXpanded-standard-Leaf-Structure/
　　└── XLS-eXpanded-standard-Leaf-Structure/

模块和子模块说明

1. about，choose-guide， customer，这些都是模块；
2. 子模块建议最多3级；
3. 每个目录下的文件目录数建议不超过5-11个；

标准目录（XLS-eXpanded-standard-Leaf-Structure）

├── css/
├── html/
│ 　└── index.html
├── img/
├── js/
└── tpl/

目录说明

• global/ （全局）
• common/ （公共）
  common 只在站点目录下出现，不在模块和子模块中出现，避免命名干扰；
• font/ （字体）
  font 目录仅在站点根目录下有；
• css | sass/ （样式）
• html （页面）
  在发布时，html 目录不会在实际的 URL 中出现；
• img/ （图片）
• js/ （JavaScript）
• tpl/ （模板：包括 .html，.ejs.html，.mus.html）
  命名规则有约定比较好；
  这个目录下只有和用户交互的那些文件才可能需要对外发布，否则一般仅在构建时使用；
• XLS-eXpanded-standard-Leaf-Structure/
  对于展开的标准叶子结构，若目录下没有文件，自然该目录就不会存在；
• 文件命名问题
  1. 对外发布的：.css，.js，.html，.ejs.html，.mus.html；
  2. 用于被 include 的：
  .inc.css，.inc.js，.inc.html，.inc.ejs.html，.inc.mus.html；
  这几类文件仅在构建时使用；
• URL PATH 路径 和 @@include 引用的文件目录存在简单变换映射关系，并不一致；

css 和 js 直接嵌入式（about 示例）

即：将 css 和 js 直接嵌入 html 页面。
目前 about 模块只有 2 个页面，各有一个简单的 css 和 js 文件。
├── css
│　 └── index.inc.css
├── html
│　 ├── about-us-t.html
│　 └── contact-us-t.html
└── js
　　└── index.inc.js

// 在 /html/*.html 页面内：

...

上述代码示例在 .html 中使用 css 和 js 的方式，就是嵌入式；两个页面都分别嵌入了，请注意相对路径；

路径设置 和 过渡问题

1. 未来一般以 /src/ 为 gulp-file-include 的基准目录（basepath）；
2. 在 @@ include 中，请使用文件目录的相对路径；
3. 在链接中，请使用相对于当前站点根目录的绝对路径；
   当前站点链接以 "/" 开始，外链则使用完整 URL；主要是为了防止爬虫或者 Web Link Validator 检查时出错；
   注：属于标准目录的哪些关键字在发布时会调整；
4. 当前的目录结构 和 gulp-file-include 相关的 basepath：
   - 处理 html 页面的 include basepath：/src/partials/；
   - 处理 css 的 include basepath：/src/css/partials/；
   - 处理 js 的 include basepath：在 datajs 工程下处理；
5. /src/partials 目录下的 .html 文件
   这些文件是被 include 的文件，一般都是 HTML 片段，不会发布出去；
   将逐步剥离到各个 common 和 各个模块下的 tpl 目录下；

css 和 js 合并引入方式

• css；
  前期可继续全部合并发布在 global.css 中，没有单独发布的其他 css 文件，原来 /css/partials 下的文件要调整到各个模块的 css 目录下；
  在 global.css 中，请这样 include css 文件：@@include('../../about/css/index.inc.css')；
• js 类同 css；

/html/*.html 的 include 方法

在 /html/ 各目录下的 *.html 文件中，请这样 include tpl 下的 HTML 片段文件：@@include('../about/tpl/index.html')；

img 的处理

• /$module/$submodule/img/example.png；
  发布和引用：/img/$module/$submodule/example.png；
• 目前图片格式为：(.(png|jpg|gif))；
  绝大部分文件 png 格式；很少部分 jpg 和 gif，比如大文件 jpg，而 gif 小动画；
• 图片约定
  文件名：全小写字母，中划线分隔，少用数字；
  看起来有含义、有意义 的图片名称有利于排查问题、促进复用。
  red-bubble.png，supplier-avatar.png, down-arrow.png；
  
  

  看起来有含义、有意义的图片名称有利于促进复用；使用 icon1/icon2/icon3来命名就很难有美感；

提出建议所参考的几个方面

---

业务设计

• 用户：客户、供应商（工程商）、管理员；
• 我们产品属于垂直电商领域，提供在线服务；
• 页面内容和版块设计的变化是渐进的，根据市场反馈逐步快速调整；
• 用户数量并不很大，除了在推广期间，要考虑潜在客户的超常流量外，大部分时间，不需要过度关注网站压力。

部署

• 按版本部署
  在 Nginx 上设置规则；目的：为了解决大版本缓存；
• 按分支开发
  每个模块一个分支；即：可支持模块上下线；

代码

• 可理解、可复用；
• 持续测试、持续集成、持续部署；
• 结构良好、代码整洁、风格一致；

过程

• 开发基本理念：敏捷开发；
• 主要按照功能模块进行分工；
• 切页面和数据JS两个主要阶段；

---