.header.set({ 5 left: [ 6 { tagname: 'back', 9 value: '回退', lefticon: 'back', 13 callback: function () { } 14 } 15 ], 16 right: [ 17 { tagname: 'search', 20 callback: function () { } 21 }, { 24 tagname: 'me', icon: 'hotel/me.png', 27 callback: function () { } 28 } 29 ], 30 title: 'title', title: ['title', 'subtitle'], title: { 36 value: 'title', righticon: 'down', callback: function () { } 43 } 44 });

因为Header左边一般来说只有一个按钮，所以其对象可以使用这种形式：

1 this.header.set({ 2 back: function () { }, 3 title: '' 4 }); .header.set({ 7 left: [{ 8 tagname: 'back', 9 callback: function(){} 10 }], 11 title: '', 12 });

为完成Native端的实现，这里会新增两个接口，向Native注册事件，以及注销事件：

1 var registerHybridCallback = function (ns, name, callback) { 2 if(!window.Hybrid[ns]) window.Hybrid[ns] = {}; 3 window.Hybrid[ns][name] = callback; 4 }; unRegisterHybridCallback = function (ns) { 7 if(!window.Hybrid[ns]) return; 8 delete window.Hybrid[ns]; 9 };

Native Header组件的实现：

1 define([], function () { 2 'use strict'; _.inherit({ 5 6 propertys: function () { .left = []; 9 this.right = []; 10 this.title = {}; 11 this.view = null; .hybridEventFlag = 'Header_Event'; 14 15 }, set: function (opts) { 19 if (!opts) return; left = []; 22 var right = []; 23 var title = {}; 24 var tmp = {}; (opts.back) { 28 tmp = { tagname: 'back' }; 29 if (typeof opts.back == 'string') tmp.value = opts.back; (typeof opts.back == 'function') tmp.callback = opts.back; (typeof opts.back == 'object') _.extend(tmp, opts.back); 32 left.push(tmp); 33 } else { 34 if (opts.left) left = opts.left; 35 } (typeof opts.right == 'object' && opts.right.length) right = opts.right (typeof opts.title == 'string') { 41 title.title = opts.title; 42 } else if (_.isArray(opts.title) && opts.title.length > 1) { 43 title.title = opts.title[0]; 44 title.subtitle = opts.title[1]; 45 } else if (typeof opts.title == 'object') { 46 _.extend(title, opts.title); 47 } .left = left; 50 this.right = right; 51 this.title = title; 52 this.view = opts.view; .registerEvents(); 55 56 _.requestHybrid({ 57 tagname: 'updateheader', 58 param: { 59 left: this.left, 60 right: this.right, 61 title: this.title 62 } 63 }); 64 65 }, registerEvents: function () { 69 _.unRegisterHybridCallback(this.hybridEventFlag); 70 this._addEvent(this.left); 71 this._addEvent(this.right); 72 this._addEvent(this.title); 73 }, 74 75 _addEvent: function (data) { 76 if (!_.isArray(data)) data = [data]; 77 var i, len, tmp, fn, tagname; 78 var t = 'header_' + (new Date().getTime()); (i = 0, len = data.length; i < len; i++) { 81 tmp = data[i]; 82 tagname = tmp.tagname || ''; 83 if (tmp.callback) { 84 fn = $.proxy(tmp.callback, this.view); 85 tmp.callback = t; 86 _.registerHeaderCallback(this.hybridEventFlag, t + '_' + tagname, fn); 87 } 88 } 89 }, show: function () { 93 _.requestHybrid({ 94 tagname: 'showheader' 95 }); 96 }, hide: function () { 100 _.requestHybrid({ 101 tagname: 'hideheader', 102 param: { 103 animate: true 104 } 105 }); 106 }, update: function (title) { 110 _.requestHybrid({ 111 tagname: 'updateheadertitle', 112 param: { 113 title: 'aaaaa' 114 } 115 }); 116 }, 117 118 initialize: function () { 119 this.propertys(); 120 } 121 }); 122 123 });