结构

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

Component 组件

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

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

以select为例，原始html为：

<select class="bpc-select">
  <option value="1">China</option>
  <option value="2">USA</option>
  <option value="3">Japan</option>
  <option value="4">France</option>
</select>

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

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

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

<span class="bpcr-select-wrapper">
  <div class="bpc-origin">
    <select class="bpc-select" bpc-rendered="">
      <option value="1" selected>A</option>
      <option value="2">B</option>
      <option value="3">C</option>
      <option value="4">D</option>
    </select>
  </div>
  <span class="bpcr-select-value"><span>B</span><i class="iconfont icon-down"></i></span>
  <div class="bpcr-select-drop">
    <div class="bpcr-select-option selected" bpc-value="1">A</div>
    <div class="bpcr-select-option" bpc-value="2">B</div>
    <div class="bpcr-select-option" bpc-value="3" disabled="">C</div>
    <div class="bpcr-select-option" bpc-value="4">D</div>
  </div>
</span>

Plugin 插件

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

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

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

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