上次，我们形成了两种header的布局，一种flexbox，一种float，最后与身边做重构的同事交流下来，选择了float的布局。
事实上布局的选型不需要我关注，我的参与或者一些意见多数是自我提升，但要说html结构完全控制于csser的话就不一定了
在整个header组件的代码过程中，我与重构同事就一些地方发生了重复的交流，争论，今天就header组件的布局以及功能实现，聊一聊js与css的配合
然后header组件本身是一个老组件，我们顺便探讨下，这类老组件应该如何翻新比较合适。
最初的结构
最开始重构的同事给了我一个已经做好了的页面：
我们针对其中一些小的体验上做了讨论，并且知会到设计组，便改了，很顺畅，然后我开始了愉快的代码，这是其中一块HTML的结构：
这里除去h1标签中的文字不说，因为其中可能表现的非常复杂，我们后面再说，其中的按钮有以下功能：
① 第二行：回退按钮
② 第三行：确认
PS：左边采用float布局所以第一个元素在最右边
③ 第四行：home标签
④ 第五行：三个点，点击会出一个侧边栏
以上便是HTML的实现，但是对与程序员来说，头部除了按钮（btn）以外就只有图标（icon），所以以上的结构事实上js一般是不买账的
Jser需要的结构
与重构同事交流下来，原因是这样的：
① 因为回退比较特殊，所以多了一个样式，具体什么我没记住了
② icon代表背景图，icond代表CSS3画的，CSS3画的可扩展性高，比如换颜色什么的
③ ......
当时双方的讨论还是比较激烈的，但是对icond全部变成icon，重构同事不同意，于是也就作罢，经过一轮讨论，结构变成了这样：
做了很小的变化，将back的结构与其它icon类型按钮做了统一，于是我开始了愉快的代码
PS：注意，icond与icon类型的标签会不同程度的在header处出现，无法控制
结构的问题
因为公司的header一直便存在，我做的过程中必须考虑到两个方面的问题：
① 方便扩展但是要做到接口兼容
② 需要通过各个标签的tagname与Hybrid进行联调
也就是说，每个标签叫什么名字，是已经定死了的，甚至一些标签的回调也被限制了，我这里的数据结构大概如下：
可以看到，一个tagname一个按钮，而现在问题来了：我们并不知道某个tagname应该是icon或者是icond
但是根据是否存在value字段，我们是可以判断其是否应该具有i子标签，这个时候我们是怎么解决的呢？
建立tagname与classname的映射关系，比如：
当然，这种做法，自然十分让人感到难受，如果小图标统一为icon，我在模板中可以统一如此代码：
但是由于多了一个映射关系，我的代码便不好看了，并且业务逻辑还变得复杂了起来，于是带着这些考量再次找到了重构同事，重构同事也很明事理，马上答应改了：
不考虑h1中的样式的话，搞定上面的代码，对我们来说，真的是太简单了啊！！！