文章标签 ‘页面重构’ 的存档

• 页面重构中的模块化思维

  日期：2010.01.18 | 分类：网页重构, 设计制作 | 评论数：0

  “模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉也满口的“模块化”，只是你真的理解什么是“模块化”吗？

  什么是模块化？

  对“模块化”的解释，在 CNKI 中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。

  先看一下百度词条是怎么解释“ 模块化 ”的：

  模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体系结构中，模块是可组合、分解和更换的单元。

  相关的书籍也蛮多的，有兴趣的同学可以搜一下。需要强调一点，我们所借鉴的是一种思维的方式。

  页面制作为什么需要模块化？

  站点内容越来越多、代码越来越臃肿，渐渐影响到了客户端的体验（主要是打开速度），影响到了维护的效率。有什么方法可以解决这些问题呢？

  我们很容易就想到：减少代码冗余、提高代码重用率、图片压缩等等，而这些要如何实现呢？模块化思维可以解决，即可以有效减少代码冗余、提高代码重用率，更重要是可以支持到多人维护，降低维护成本。CSS写法较为灵活，容易产生代码的耦合，使用模块化也可以在一定程度上降低耦合度，对于BUG的定位也有帮助。所以，我们更应该在站点前期就重视并使用“模块化的思维”编写站点。

  我们之前经常提到的站点性能优化，有相当一部分也是“模块化”的内容，比如提高代码重用，提高开发效率等等，“模块化”的优点还有很多，我大概列了一下：

  * 提高代码重用率
  * 提高开发效率、减少沟通成本
  * 降低耦合
  * 降低发布风险
  * 减少Bug定位时间和Fix成本
  * 提高页面容错
  * 更好的实现快速迭代
  * 更好的支持灰度发布

  其中最重要的一点，我认为是“提高代码重用率”，这也是模块化最重要的特点之一。

  如何实现“模块化”？

  这里的主要问题是HTML与CSS的“模块化”，我们可以看下换肤的实现方法：

  * 同一类名，换文件（JS）
  * 同一文件，换类名（JS）

  由此可知HTML与CSS的接口实现：

  * CSS引入的三种方式
  * 类名

  为了更好的实现这种接口，需要有相关的（交互、设计、页面、开发）约定、规则、规范，比如：所有当前状态都使用同一个类名“nonce”，所有变灰的表现都使用原类名后加“_n”，Tab的实现方式等等。有了这些约定、规则、规范后，HTML代码就很容易可以实现模板化，统一接口规范。

  有两个误区需要先认清下：

  * 模块化后并不是就能被使用在任何位置（模块化后的代码段也是有适用的范围限制，需要一个提供接口规则的环境）
  * 模块化后并不是就不能再变更（模块化后的代码段可根据实际需要做修改）

  完全独立的模块放在同一项目中，由于项目有自己的表现、交互统一性，所以各模块间必定出现类似的部分，这些部分可以被提出来做为公共的定义，减少冗余，这时就会出现耦合的问题，完全不耦合是不可能的，因此模块化中很重要一点就是“适度的耦合”。有了公共定义，就得调整模块样式的实现方式了，而这种调整也会影响到“接口”的实现方式。

  由于本篇主要是讲模块化的思维方式，具体实现的细节留待以后的文章中探讨。

  感谢：tencent UED 分享！

• 你是一个职业的页面重构工作者吗？

  日期：2009.12.31 | 分类：网页重构, 设计制作 | 评论数：0

  做为一个专职的页面重构者， 我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。

  单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写 HTML 和 CSS ”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。

  跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：

  1. 结构完整，可通过标准验证
  2. 标签语义化，结构合理
  3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

  很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：

  设计稿的分析
  是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。

  对设计稿的分析能力可以划分成下面的几个阶段：

  1. 能分清设计稿中的公共与私有的部分
  2. 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）
  3. 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
  4. 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
  5. 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）

  上面这些都是在还没开始动手制作之前所要做的。

  切图
  是指将设计稿切成便于制作成页面的图片。

  很多人都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：

  1. 切成所需要的图片（如何将需要的部分切出来）
  2. 在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）
  3. 在2的基础上，规划切出来的图片（包括文件分布）
  4. 在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小）

  HTML和CSS的编写
  是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面

  这块是最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：

  1. 还原设计稿视觉效果，并通过标准验证（HTML）
  2. 在1的基础上，实现多浏览器的兼容（HTML）
  3. 在2的基础上，标签语义化（HTML）
  4. 在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）
  5. 在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）
  6. 在5的基础上，考虑到整站的样式分布（包括如何实现分布）
  7. 在6的基础上，样式写法的优化（包括技巧的应用）

  还有一点是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。

  如果你已经达到或超过4、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。

  为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。