该组件需要一个容器，这个容器标签应该位于ul之上，这个时候容器内部所装载的dom结构便可以不是ul而是其他什么结构了
其次，在手机上，我们可视项目在4S手机上不会超过5个，往往是4个，所以我们应该在其容器上设置类似overflow之类的可滚动属性
组件回归·最终结构
由上所述，基于其是继承至Layer的事实，我们可以形成这样的结构：
复制代码
<section class=”cui-pop cui-bubble-layer”>
<i class=”cui-pop-triangle”></i>
<div class=”cui-pop-head”>
</div>
<div class=”cui-pop-body”>
<ul>
<li data-index=”0″ data-flag=”c”>价格：￥35</li>
<li data-index=”1″ data-flag=”c”>评分：80</li>
<li data-index=”2″ data-flag=”c”>级别：5</li>
</ul>
</div>
<div class=”cui-pop-footer”>
</div>
</section>
这个也可以是我们整个弹出层类的基本结构，我们可以在此上做很多扩展，但是这里我们不扯太多，单就气泡组件做论述
就气泡组件，其结构是：
复制代码
<section class=”cui-pop cui-bubble-layer”>
<i class=”cui-pop-triangle”></i>
<div class=”cui-pop-body”>
<ul>
<li data-index=”0″ data-flag=”c”>价格：￥35</li>
<li data-index=”1″ data-flag=”c”>评分：80</li>
<li data-index=”2″ data-flag=”c”>级别：5</li>
</ul>
</div>
</section>
js层面的实现
这里仍然是采用的blade中的那一套继承机制，如果有不明白又有点兴趣的同学请移步：【blade的UI设计】理解前端MVC与分层思想
关于模板
因为我们这一部分的主题为重构相关，所以我们这里的关注点是CSS，我们首先生成我们的模板：
复制代码
<section class=”cui-pop <%=wrapperClass %> <%if(dir == ‘up’){ %> <%=upClass %> <% } else { %> <%=downClass %> <% } %>”>
<i class=”cui-pop-triangle”></i>
<div class=”cui-pop-body”>
<ul class=”cui-pop-list <%=itemStyleClass %>”>
<% for(var i = 0, len = data.length; i < len; i++) { %>
<% var itemData = data[i]; %>
<li data-index=”<%=i%>” data-flag=”c” class=”<% if(index == i){ %><%=curClass %><%} %>” >
<%if(typeof itemFn == ‘function’) { %><%=itemFn.call(itemData) %> <% } else { %><%=itemData.name%><%} %>
