结构
全局变量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函数：
- 将原始的DOM作为
$template。 - 使用组件的
wrapperTamplate生成$wrapper。 - 将
$template包裹在$wrapper中的.bpc-origin中。 - 将
$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被隐藏了，无需触发）。
