html5+css3中怎么樣制作header

這篇文章主要介紹html5+css3中怎么樣制作header，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

上次，我們形成了兩種header的布局，一種flexbox，一種float，最后與身邊做重構(gòu)的同事交流下來(lái)，選擇了float的布局。

事實(shí)上布局的選型不需要我關(guān)注，我的參與或者一些意見(jiàn)多數(shù)是自我提升，但要說(shuō)html結(jié)構(gòu)完全控制于csser的話就不一定了

在整個(gè)header組件的代碼過(guò)程中，我與重構(gòu)同事就一些地方發(fā)生了重復(fù)的交流，爭(zhēng)論，今天就header組件的布局以及功能實(shí)現(xiàn)，聊一聊js與css的配合

然后header組件本身是一個(gè)老組件，我們順便探討下，這類老組件應(yīng)該如何翻新比較合適。

最初的結(jié)構(gòu)

最開(kāi)始重構(gòu)的同事給了我一個(gè)已經(jīng)做好了的頁(yè)面：

我們針對(duì)其中一些小的體驗(yàn)上做了討論，并且知會(huì)到設(shè)計(jì)組，便改了，很順暢，然后我開(kāi)始了愉快的代碼，這是其中一塊HTML的結(jié)構(gòu)：

 <header class="cm-header" style="top: 50px;">
   <span class="fl cm-header-icon icon-back "></span>
   <span class="fr cm-header-btn">確認(rèn)</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>
   <h2 class="cm-page-title">
     頁(yè)面標(biāo)題</h2>
 </header>

這里除去h2標(biāo)簽中的文字不說(shuō)，因?yàn)槠渲锌赡鼙憩F(xiàn)的非常復(fù)雜，我們后面再說(shuō)，其中的按鈕有以下功能：

① 第二行：回退按鈕 
② 第三行：確認(rèn)

PS：左邊采用float布局所以第一個(gè)元素在最右邊

③ 第四行：home標(biāo)簽 
④ 第五行：三個(gè)點(diǎn)，點(diǎn)擊會(huì)出一個(gè)側(cè)邊欄

以上便是HTML的實(shí)現(xiàn)，但是對(duì)與程序員來(lái)說(shuō)，頭部除了按鈕（btn）以外就只有圖標(biāo)（icon），所以以上的結(jié)構(gòu)事實(shí)上js一般是不買賬的

Jser需要的結(jié)構(gòu)

與重構(gòu)同事交流下來(lái)，原因是這樣的：

① 因?yàn)榛赝吮容^特殊，所以多了一個(gè)樣式，具體什么我沒(méi)記住了 
② icon代表背景圖，icond代表CSS3畫(huà)的，CSS3畫(huà)的可擴(kuò)展性高，比如換顏色什么的 
③ ......

當(dāng)時(shí)雙方的討論還是比較激烈的，但是對(duì)icond全部變成icon，重構(gòu)同事不同意，于是也就作罷，經(jīng)過(guò)一輪討論，結(jié)構(gòu)變成了這樣：

<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">確認(rèn)</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>
   <h2 class="cm-page-title">
     頁(yè)面標(biāo)題</h2>
 </header>

做了很小的變化，將back的結(jié)構(gòu)與其它icon類型按鈕做了統(tǒng)一，于是我開(kāi)始了愉快的代碼

PS：注意，icond與icon類型的標(biāo)簽會(huì)不同程度的在header處出現(xiàn)，無(wú)法控制

結(jié)構(gòu)的問(wèn)題

因?yàn)楣镜膆eader一直便存在，我做的過(guò)程中必須考慮到兩個(gè)方面的問(wèn)題：

① 方便擴(kuò)展但是要做到接口兼容 
② 需要通過(guò)各個(gè)標(biāo)簽的tagname與Hybrid進(jìn)行聯(lián)調(diào)

也就是說(shuō)，每個(gè)標(biāo)簽叫什么名字，是已經(jīng)定死了的，甚至一些標(biāo)簽的回調(diào)也被限制了，我這里的數(shù)據(jù)結(jié)構(gòu)大概如下：

 {
 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('定制化');
     }
   }

可以看到，一個(gè)tagname一個(gè)按鈕，而現(xiàn)在問(wèn)題來(lái)了：我們并不知道某個(gè)tagname應(yīng)該是icon或者是icond 

但是根據(jù)是否存在value字段，我們是可以判斷其是否應(yīng)該具有i子標(biāo)簽，這個(gè)時(shí)候我們是怎么解決的呢？

建立tagname與classname的映射關(guān)系，比如：

 var map = {
   'home': 'icon',
   'list': 'icond'
 }

當(dāng)然，這種做法，自然十分讓人感到難受，如果小圖標(biāo)統(tǒng)一為icon，我在模板中可以統(tǒng)一如此代碼：

 <span class="cm-header-icon <%=dir %>  js_<%=item.tagname %>" >
   <% if(item.value) { %>
     <%=item.value %>
   <% } else { %>
     <i class="icon-<%=item.tagname %>"></i>
   <% } %>
 </span>

但是由于多了一個(gè)映射關(guān)系，我的代碼便不好看了，并且業(yè)務(wù)邏輯還變得復(fù)雜了起來(lái)，于是帶著這些考量再次找到了重構(gòu)同事，重構(gòu)同事也很明事理，馬上答應(yīng)改了：

 <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">確認(rèn)</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>
   <h2 class="cm-page-title">
     頁(yè)面標(biāo)題</h2>
 </header>

不考慮h2中的樣式的話，搞定上面的代碼，對(duì)我們來(lái)說(shuō)，真的是太簡(jiǎn)單了?。。。?/p>

 <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：從代碼著色來(lái)看，js中用到的left與Right是關(guān)鍵字，這個(gè)得處理...

定制化需求

可以看到，一個(gè)循環(huán)，我們便可以輕易的生成左邊和右邊的按鈕，但是馬上問(wèn)題來(lái)了，我們需要擴(kuò)展怎么辦，上面就會(huì)有以下問(wèn)題： 

① tel標(biāo)簽?zāi)J(rèn)是a標(biāo)簽，我們這里卻是span標(biāo)簽

<a href="tel:56973144" class="cm-header-btn fr js_tel "><i class="icon-tel"></i></a>

② back按鈕我們一般會(huì)做成a標(biāo)簽，用以解決javascript出錯(cuò)在Hybrid的假死問(wèn)題

說(shuō)白了，就是雖然標(biāo)簽按鈕應(yīng)該有統(tǒng)一的結(jié)構(gòu)，但是需要保留定制化的能力 
這里定制化的工作交給了各個(gè)標(biāo)簽的itemFn這個(gè)函數(shù)，他返回一個(gè)字符串，并且具有一定規(guī)則，這里取一個(gè)代碼片段：

 handleSpecialParam: function (data) {
   var k, i, len, item;
   for (k in data) {
     if (_.isArray(data[k])) {
       for (i = 0, len = data[k].length; i < len; i++) {
         item = data[k][i];
         if (this['customtHandle_' + item.tagname]) {
           this['customtHandle_' + item.tagname](data[k][i], k);
         } //if
       } //for
     } //if
   } //for
 },
 
 _getDir: function (dir) {
   var kv = { left: 'fl', right: 'fr' };
   return kv[dir];
 },
 
 //處理back的按鈕邏輯
 customtHandle_back: function (item, dir) {
   dir = this._getDir(dir);
   item.itemFn = function () {
     var str = '<a href="http://m.ctrip.com/html5/" class="cm-header-btn ' + dir + ' js_' + item.tagname + ' " >';
     if (item.value) {
       str += item.value + '</a>';
     } else {
       str += '<i class="icon-' + item.tagname + '"></i></a>';
     }
     return str;
   };
 },

當(dāng)發(fā)現(xiàn)某個(gè)按鈕不滿足需求或者有定制化需求時(shí)，便想辦法設(shè)置其itemFn即可，時(shí)候上這個(gè)代碼可以直接寫(xiě)到初始化的json串去

花樣百出的title

到title時(shí)，發(fā)現(xiàn)其表現(xiàn)便五花八門了，這個(gè)時(shí)候一般是根據(jù)不同的類型生成不同的HTML結(jié)構(gòu)，框架給默認(rèn)的幾個(gè)選項(xiàng)，不支持便自己定制itemFn

 <% item = center; %>
 <%if(typeof item.itemFn == 'function') { %>
   <%=item.itemFn() %>
 <%} else if(item.tagname=='title' ||  item.tagname=='subtitle') { %>
   <h2 class="cm-page-title js_<%=item.tagname %>" >
     <%if(typeof(item.value) == 'object' && item.title.value == 2) { %>
       <span class="cm-title-l"><%=item.value[0]%></span>
       <span class="cm-title-s"><%=item.value[1]%></span>
     <%} else { %>
       <%=item.value %>
     <%} %>
   </h2>
 <%} else if(item.tagname=='select'){ %>
   <h2 class="cm-page-select-title js_<%=item.tagname %>" >
     <%=item.value %>
   </h2>
 <%} else if(item.tagname=='tabs') { %>
   <h2 class="cm-page-tabs-title js_<%=item.tagname %>" >
     <%for(j = 0; j < item.data.items.length; j ++) { %>
       <span data-key="<%=item.data.items[j].id %>" class="<%if(item.data.index===j){ %>active<%} %>" ><%=item.data.items[j].name %></span>
     <% } %>
   </h2>
 <% } else{ %>
 
 <%} %>

事件綁定的實(shí)現(xiàn)

header組件本身繼承至Abstract.View這個(gè)類，所以只要設(shè)置

this.events = {}

便能以事件代理的方式將事件綁定至根元素，而header的事件一般就是click事件： 

 setEventsParam: function () {
   var item, data = this.datamodel.left.concat(this.datamodel.right).concat(this.datamodel.center);
 
   for (var i = 0, len = data.length; i < len; i++) {
     item = data[i];
     if (_.isFunction(item.callback)) {
       this.events['click .js_' + item.tagname] = $.proxy(item.callback, this.viewScope);
     }
   }
 },

這里有一個(gè)需要注意的點(diǎn)便是，事件綁定的鉤子便是我們的tagname，這個(gè)是唯一的，我們會(huì)為每個(gè)標(biāo)簽動(dòng)態(tài)生成“.js_tagname”的類，以方便事件綁定

老接口的兼容

之前便說(shuō)了，該組件是一個(gè)老組件的翻新，于是各個(gè)業(yè)務(wù)團(tuán)隊(duì)已經(jīng)使用了，比如原來(lái)是這樣調(diào)用的：

 this.header.set({
   title: '基本Header使用',
   subtitle: '中間副標(biāo)題',
   back: true,
   backtext: '取消',
   tel: { number: 1111 },
   home: true,
   search: true,
   btn: { title: "登錄", id: 'confirmBtn', classname: 'header_r' },
   events: {
     returnHandler: function () {
       console.log('back');
     },
     homeHandler: function (e) {
     }
   }
 });

而現(xiàn)在我們期望的調(diào)用方式是這樣的：

this.header.set({
  left: [],
  center: {},
  right: [
    { tagname: 'home', callback: function () { } },
    { tagname: 'tagname', value: 'value', data: {}, itemFn: function(){}, callback: function () { } }
  ]
});

這個(gè)時(shí)候我們應(yīng)該怎么做呢？當(dāng)然是不破不立，先破后立，當(dāng)然是要求業(yè)務(wù)團(tuán)隊(duì)改！?。∪缓蟊粺o(wú)情的噴了回來(lái)，于是做了接口兼容 
翻新老組件，接口兼容是必須的，如果不是底層機(jī)制發(fā)生顛覆，而顛覆可以帶來(lái)顛覆性的成績(jī)，接口還是不建議改！ 
這里上面便是新接口的調(diào)用，下面是老接口的調(diào)用，效果如下：

以上是“html5+css3中怎么樣制作header”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！