<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=”icond-list”></i></span>
<h1 class=”cm-page-title”>
页面标题</h1>
</header>
做了很小的变化，将back的结构与其它icon类型按钮做了统一，于是我开始了愉快的代码
PS：注意，icond与icon类型的标签会不同程度的在header处出现，无法控制
结构的问题
因为公司的header一直便存在，我做的过程中必须考虑到两个方面的问题：
① 方便扩展但是要做到接口兼容
② 需要通过各个标签的tagname与Hybrid进行联调
也就是说，每个标签叫什么名字，是已经定死了的，甚至一些标签的回调也被限制了，我这里的数据结构大概如下：
复制代码
{
left: [],
center: [],
right: [
{
‘tagname’: ‘home’, callback: function () {
console.log(‘返回’);
}
},
{ ‘tagname’: ‘search’ },
{
‘tagname’: ‘list’, callback: function (e) {
//……
}
},
{ ‘tagname’: ‘tel’, ‘number’: ‘56973144’ },
{
‘tagname’: ‘commit’, ‘value’: ‘登录’, callback: function () {
console.log(‘登录’);
}
},
{
‘tagname’: ‘custom’, ‘value’: ‘定制化’,
itemFn: function () {
return ‘<span class=”cm-header-btn fr js_custom”>定制化</span>’;
},
callback: function () {
console.log(‘定制化’);
}
}
]
可以看到，一个tagname一个按钮，而现在问题来了：我们并不知道某个tagname应该是icon或者是icond
但是根据是否存在value字段，我们是可以判断其是否应该具有i子标签，这个时候我们是怎么解决的呢？
建立tagname与classname的映射关系，比如：
复制代码
var map = {
‘home’: ‘icon’,
‘list’: ‘icond’
}
当然，这种做法，自然十分让人感到难受，如果小图标统一为icon，我在模板中可以统一如此代码：
复制代码
<span class=”cm-header-icon <%=dir %> js_<%=item.tagname %>” >
<% if(item.value) { %>
<%=item.value %>
<% } else { %>
<i class=”icon-<%=item.tagname %>”></i>
