模块稳固性原则。我常常问新人一个问题，"你感觉怎样体现你写的代码质量高，比一般人好？"，年夜大都人会答复遵守语义化，减小不需要的嵌套，代码尽可能精简。语义化和代码精简当然是评价质量的一个重要方面，可是我认为，代码是否斟酌到数据遍历的公道性，是否斟酌到dom节点的可操作性，是否斟酌到因扩大造成的抗破坏行，更能体现一个页面构建工程师的水平。

模块自适应性原则。指的是任何一个模块，都尽可能实现宽度和高度的自适应，非特殊情况不要设置模块的宽高，采纳这种原则制作出的模块具有很好的即插即用功能，是高效完成页面拼合工作的重要前提。试想如果每个模块都定义了宽度，那么在不合的布局上你就必须重新定义每个模块的宽高或边距等属性来适应当前布局。

Margin-bottom原则。一般情况下，网页的布局都是从上到下的流式布局（多栏布局也可以当作各栏内的流式布局），所以，我们可以为每个模块统一预设margin-bottom，达到统一间距的目的，避免呈现有些模块设置上边距、有些模块设置下边距的情况产生。（左右间距通常是由布局框架的样式设置）

在制订好团队的合作规范、遵守的原则后，其实不代表你便可以完全按你的思路启开工作，团队配合是多向的，除团队内部，其他团队的支持也是不成或缺的，所以还需要以下两个前置条件：

设计必须严格遵循栅格化。模块是自力的，但最终模块仍是嵌套在布局中，因为我们的最终产出物是完整的静态页面，如何将分手的模块在最短的时间内，拼成一个适合设计师意图和产品要求的页面？栅格化是快捷的保障，在一个严格依照栅格化设计的布局框架中，工程师只需要设置好布局框架样式和分栏的内外间距，后续的工作只需要把该页面所使用的模块嵌套进来，再挪用对应模块的样式，由于模块的自适应性，在所有模块准备充分的情况下，通常一个页面的拼合只需要几分钟的时间。

产品、设计与交互的规范统一。通常在项目的某个阶段，产品和设计在模块上的统一是比较容易的，但如果在同一个项目的不合阶段，尤其是在不合项目之间或不合产品之间要达到规范统一，就不是一件简单的事情。当规范统一性呈现问题时，致使模块化只停留在某个项目阶段，每次添加新功能、增加新内容都需要增加全新的模块样式，移植性和复用性年夜打折扣，无法阐扬应有的效果。当然，产品是延续改变和创新的，我们不克不及要求一个产品永远依照某个规范来进行设计，但我们仍是应该配合努力寻求阶段性双赢的解决方案。在微博，颠末各方长时间的努力，特别是交互设计对产品功能组件的统一，构建的WDL规范库对我们的模块化提供了很年夜帮忙。

按照实际情况来看，要达到所有满足的条件往往不是一帆风顺的，特别是第二个条件的达成。可是退一步来讲，即便不克不及使模块化在每个项目、每个产品中持久稳定的阐扬它的最年夜能量，至少可以在每一次项目任务中取得模块化给团队带来的效率提升。

如果颠末年夜家的努力，在所有条件都满足，并且模块化工作体例能在团队顺利展开的情况下，我们依然可能会遇到各色各样的问题，一个无法避免的问题就是，产品功能升级引起的模块转变，这时候是修改原有的模块仍是另起一个新的模块？二是模块的划分水平，有些时候从模块的显现和功能划分都比较模糊，有些时候对某些内容是否划为公用样式仍是模块、仍是页面独有内容都是见仁见智的；三是模块的分类，采纳何种体例分类便于查找？近似这些问题还有很多，在不合的项目和形势下，需要具体问题具体阐发，阐扬团队的智慧，寻找最公道的应对方案。

虽然在实施过程中可能会遇到各类问题和团队配合之间的阻力，可是当你逐渐适应这种模块化团队构建的工作体例时，你会爱上它！而当你的团队高效地完成每个工作的时候，人们也会爱上你的团队！

文章来历：微博UDC