<% } %>
</span>
但是由于多了一个映射关系，我的代码便不好看了，并且业务逻辑还变得复杂了起来，于是带着这些考量再次找到了重构同事，重构同事也很明事理，马上答应改了：
复制代码
<header class=”cm-header” style=”top: 50px;”>
<span class=”fl cm-header-icon”><i class=”icon-back”></i></span>
<span class=”fr cm-header-btn”>确认</span>
<span class=”fr cm-header-icon”><i class=”icon-home”></i></span>
<span class=”fr cm-header-icon”><i class=”icon-list”></i></span>
<h1 class=”cm-page-title”>
页面标题</h1>
</header>
不考虑h1中的样式的话，搞定上面的代码，对我们来说，真的是太简单了啊！！！
复制代码
<header class=”cm-header”>
<%
var i = 0, len = 0, j = 0, keyagain = 0;
var left = left;
var right = right.reverse();
var item = null;
var dir;
var btnObj = null;
%>
<%for(keyagain=0; keyagain < 2; keyagain++) { %>
<%
if(keyagain == 0) { dir = ‘fl’; btnObj = left; } else { dir = ‘fr’; btnObj = right; }
%>
<% for(i = 0, len = btnObj.length; i < len; i++) { %>
<% item = btnObj[i]; %>
<%if(typeof item.itemFn == ‘function’) { %>
<%=item.itemFn() %>
<%} else { %>
<span class=”cm-header-icon <%=dir %> js_<%=item.tagname %>” >
<% if(item.value) { %>
<%=item.value %>
<% } else { %>
<i class=”icon-<%=item.tagname %>”></i>
<% } %>
</span>
<%} %>
<%} %>
<%} %>
</header>
PS：从代码着色来看，js中用到的left与Right是关键字，这个得处理…
定制化需求
可以看到，一个循环，我们便可以轻易的生成左边和右边的按钮，但是马上问题来了，我们需要扩展怎么办，上面就会有以下问题：
① tel标签默认是a标签，我们这里却是span标签
复制代码
<a href=”tel:56973144″ class=”cm-header-btn fr js_tel “><i class=”icon-tel”></i></a>
② back按钮我们一般会做成a标签，用以解决javascript出错在Hybrid的假死问题
说白了，就是虽然标签按钮应该有统一的结构，但是需要保留定制化的能力
这里定制化的工作交给了各个标签的itemFn这个函数，他返回一个字符串，并且具有一定规则，这里取一个代码片段：
