BitRabbit Passport UI Develop

结构

全局变量BPC是用户的入口，主要用到的是render方法。
库内部除去BPC入口，主要分为2种类component和plugin。

Component 组件

大部分具备DOM结构的，需要JS参与的UI都将作为组件存在。

通常，组件主要结构是有作为依托的$template，作为呈现的$wrapper。

以select为例，原始html为：

  China
  USA
  Japan
  France

当库监测到bpc-select这个类时，将生成SelectComponent并触发render函数：

1. 将原始的DOM作为$template。
2. 使用组件的wrapperTamplate生成$wrapper。
3. 将$template包裹在$wrapper中的.bpc-origin中。
4. 将$wrapper替换$template。

最后，上面的html经过渲染会变成：

  

    
      A
      B
      C
      D
    
  
  B
  

    
A
    
B
    
C
    
D
  

Plugin 插件

有一些功能，不依赖DOM来产生，例如tooltip，这部分以插件的形式存在，即我们需要的不是DOM，而是附着在DOM上的某些属性产生的副作用。

每个插件都拥有两个方法init和componentRendered。跟组件不同的是，页面上每一个UI被渲染，就将实例化一个组件。而插件在初始化之后永远只有一个。

init函数在BPC第一次调用render时被调用一次。以TooltipPlugin为例，在init时在全局绑定了一些函数，当拥有bpc-tooltip属性的元素被hover时，将调用函数。

componentRendered函数将在BPC每一次实例化一个组件时，传入这个函数，用来做后续处理。在bpc-tooltip中，这类复杂组件若有$template，则将被去除bpc-tooltip（因为template被隐藏了，无需触发）。