切页面和做模板（mustache）过程示例

作为前端工程师，切页面、做模板，是常见的工作过程。

1. 切页面；
2. 做模板，进行桩调试；
3. 与后台联调页面模板；
4. 应设计师要求改样式；

切页面

切页面，主要是和设计师打交道，要过他那一关；

• 设计师能在线查看页面效果；
  什么时候都可以看到；当然这个文件也是一直要维护的；
  这个页面内容应该是比较丰满的，以充分体现其设计思想，设计美感；
  这个文件是发布出去的；
  不论生产系统还是测试系统；
• 测试工程师也能透过这个页面了解页面需求的实现程度；

做模板

做模板，是将已经做好的页面进行拆分；假如拆分为两个文件，一个为容器，另一个是被 include 文件。
我们现在命名一个是 .ssi.html 文件，一个是 .mus.html 文件。
ssi 文件引用 php 来处理 mus 文件。
未来应当生成静态文件；

目录文件

任务	目录文件	链接
切页面	/html/one-detail.html	/one-detail.html
做模板 1	/html/one-detail.ssi.html	/one-detail.ssi.html?id=536
做模板 2	/tpl/one-detail.mus.html	由 one-detail.ssi.html 直接或间接使用

• one-detail 为 basename；
• ssi 和 mus 命名规则是一致的，具有美感；
  .ssi.html 和 .mus.html 是为了编辑器的语法着色方便而增加 .html 后缀的。
• ssi 文件引用 php 渲染 mus 文件；
  示例：``
  tpl 参数不必携带 .mus.html 这个后缀；
• 若采用静态文件方案，则链接为：
  /cms/maintenance/one-detail/536.html，536为id；
  /img/cms/maintenance/one-detail/536-featured-img.jpg；

有理想、有包容

切页面主要和视觉设计师打交道，切的好不好，其实要和设计师密切沟通。

有时设计师会时不时调整一下字号、间距、动画这些细节，一个像素都不要差，力争百分百复原设计稿。

我们知道，设计稿和页面毕竟是两个呈现系统，你使用 PS、AI 、Sketch 设计出来的东西，在浏览器上呈现出来的效果肯定是有细微差别的。

你看到的情况往往是这样的：

1. 设计师出设计稿；
2. 页面工程师根据设计稿切页面，百分百复原设计稿；
3. 设计师看浏览器页面效果不如意，回头调整设计稿；
4. 页面工程师根据调整后的新设计稿，修改页面样式；
5. 设计师重看浏览器页面效果，表示满意；

在这个过程中，我们可能会想既然肯定要调整，在第2步不需要百分百复原设计稿？

答案是：不一定。

如果你和设计师不仅有充分的信任，更有一致的审美观，一致的目光如炬的火眼金睛，那么在 技术上 是不需要百分百复原的（比如像素个数、色数等硬指标），因为你们在呈现效果上是百分百复原了（几乎不可能，因为每个人的显示器、浏览器肯定不一样）。

作为技术控，页面工程师应当做到丝毫不差，这叫 有理想，是必须要追求的；也应当学会协商、妥协，建立其充分的信任，获得充分的尊重，这叫 有包容；

我觉得我们既能做到有理想，又能做到有包容，因为我已经看到这样的情况在发生了。