构建可复用的前端组件模型

 

1. Web UI的差异性
   • 界面风格，设计团队决定了产品的界面风格，导致UI在视觉上会有差异
   • HTML结构，制作团队决定了页面的HTML结构，导致UI在界面渲染上有差异
   • 互联网领域相对于传统软件行业，Web UI的差异性尤其突出
2. 传统UI组件
   • 功能复用，通过组件继承、抽象一些行为，实现功能复用，在继承与抽象行为之间，更多的使用了继承
   • 界面复用，使用模版技术渲染界面，实现界面复用
   • 缺点
     • 继承太深，父类的任何改变都有可能会影响子类的行为，对象关系复杂，使用的时候不够轻便
     • DOM结构单一，无法适应互联网Web产品的差异性
   • 传统UI组件的缺点，导致UI不能很灵活、方便的应用于互联网Web产品中，而在传统软件行业恰恰相反
   • 这也是为什么在互联网领域，jQuery类型的类库比Ext更加受欢迎的一个原因
3. 组件复用的层次
   • 代码复用
     • 将一些可复用的代码拷贝到新程序中
   • 设计复用
     • 使用现有设计文档，在新系统中重新实现，把一个设计应用于到多个具体实现
   • 需求复用
     • 独立于具体应用，开发一些可复用的组件
   • 传统UI组件更多的是需求复用，在互联网领域使用传统UI组件，受到的限制较多，对于多个产品之前的复用，就显得吃力
   • 组件模型属于代码复用，组件模型作为一个第三方类库存在，适合于多个产品之间复用。需要使用时则将类库引入，组件模型不会受到具体的产品需求和设计的影响
4. 面向对象的代码复用
   • 前面说到了传统UI的继承，也讲到了组件模型的复用，对象代码级别的复用来说，面向对象能够使代码在最大程度上复用
   • 下面就有必要探讨一下面向对象代码复用的几种方式
   • 类的继承
     • 白盒复用，弊端，子类对父类的实现细节是可见
   • 类装饰器
     • 也是白盒复用，弊端，和类继承一样，除了子类对父类实现细节可见之外，还会产生更多的对象，是对象关系更复杂
   • 对象的组合
     • 黑盒复用，和类继承正好相反，使用者对被组合的对象实现细节不可见
   • 组件模型强调通过对象组合的方式，构建适应产品的UI组件，使代码能够最大程度的复用
   • 黑盒的组件模型，对于开发者意味着，学习成本低，开发效率高
5. 组件模型提取方法
   • 如何从产品需求中提取组件模型呢？
     • 发现组件，从产品需求、界面中发现可用组件
     • 寻找共同性，分析组件之间的共通性，抽象组件模型的接口
     • 分离界面渲染与行为，将组件行为抽象到模型中
6. 实例
   • 计时器模型
   • 
   • 
   • 面板切换模型
   • 
   • 
   • 
7. 参考资料
   • 构建前端UI组件的新思路
   • 组件技术之一：组件技术基本理论