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

 

  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. 实例
    • 计时器模型
    • 构建可复用的前端组件模型_第1张图片
    • 构建可复用的前端组件模型_第2张图片构建可复用的前端组件模型_第3张图片
    • 面板切换模型
    • 构建可复用的前端组件模型_第4张图片
    • 构建可复用的前端组件模型_第5张图片
    • 构建可复用的前端组件模型_第6张图片
  7. 参考资料
    • 构建前端UI组件的新思路
    • 组件技术之一:组件技术基本理论

 

你可能感兴趣的:(JavaScript)