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

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

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

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

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

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

我們針對(duì)其中一些小的體驗(yàn)上做了討論，并且知會(huì)到設(shè)計(jì)組，便改了，很順暢，然后我開始了愉快的代碼，這是其中一塊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>

<h1 class="cm-page-title">

頁面標(biāo)題</h1>

</header>

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

① 第二行：回退按鈕

② 第三行：確認(rèn)

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

③ 第四行：home標(biāo)簽

④ 第五行：三個(gè)點(diǎn)，點(diǎn)擊會(huì)出一個(gè)側(cè)邊欄

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

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

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

① 因?yàn)榛赝吮容^特殊，所以多了一個(gè)樣式，具體什么我沒記住了

② icon代表背景圖，icond代表CSS3畫的，CSS3畫的可擴(kuò)展性高，比如換顏色什么的

③ ......

當(dāng)時(shí)雙方的討論還是比較激烈的，但是對(duì)icond全部變成icon，重構(gòu)同事不同意，于是也就作罷，經(jīng)過一輪討論，結(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>

<h1 class="cm-page-title">

頁面標(biāo)題</h1>

</header>

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

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

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

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

① 方便擴(kuò)展但是要做到接口兼容

② 需要通過各個(gè)標(biāo)簽的tagname與Hybrid進(jìn)行聯(lián)調(diào)

也就是說，每個(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)在問題來了：我們并不知道某個(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ù)雜了起來，于是帶著這些考量再次找到了重構(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>

<h1 class="cm-page-title">

頁面標(biāo)題</h1>

</header>

不考慮h1中的樣式的話，搞定上面的代碼，對(duì)我們來說，真的是太簡單了?。。。?/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：從代碼著色來看，js中用到的left與Right是關(guān)鍵字，這個(gè)得處理...

定制化需求

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

① 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的假死問題

說白了，就是雖然標(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="<a href=">" 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è)代碼可以直接寫到初始化的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') { %>

<h1 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 %>

<%} %>

</h1>

<%} else if(item.tagname=='select'){ %>

<h1 class="cm-page-select-title js_<%=item.tagname %>" >

<%=item.value %>

</h1>

<%} else if(item.tagname=='tabs') { %>

<h1 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>

<% } %>

</h1>

<% } 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”的類，以方便事件綁定

老接口的兼容

之前便說了，該組件是一個(gè)老組件的翻新，于是各個(gè)業(yè)務(wù)團(tuán)隊(duì)已經(jīng)使用了，比如原來是這樣調(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ì)改?。?！然后被無情的噴了回來，于是做了接口兼容

翻新老組件，接口兼容是必須的，如果不是底層機(jī)制發(fā)生顛覆，而顛覆可以帶來顛覆性的成績，接口還是不建議改！

這里上面便是新接口的調(diào)用，下面是老接口的調(diào)用，效果如下：

更多信息請(qǐng)查看IT技術(shù)專欄