一次複雜的Mega Menu設計實現

Mega Menu作為一種導航UI元素，在越來越多的大型應用中得到使用，尤其是當功能模組頁面很多，Mega Menu提供給使用者更豐富的上下文資訊，友好一致的導航體驗。

這次的設計跟傳統Mega Menu不太一樣，它不是為一個單體應用設計Mega Menu，而是爲了適應很多個原來獨立的產品以suite的形式提供給客戶的產品策略。當前實際的狀態是提供單獨的landing page，每個應用對應著一個連結，每個單獨的產品都保持自己的導航選單，同時新增返回landing page的選單，造成了在應用之間切換的體驗對客戶很不友好。現在要求在suite層面上提供一個Mega Menu的實現，提供統一功能的UI介面，比如使用者資訊，搜尋，登入，通知，同時允許各個應用可以一定程度上可以擴充套件Mega Menu的UI和功能，比如應用可以在指定區域，左，中，右去新增選單項並設定相應的功能；可以提供自己的dropdown區域的UI實現；保持原來的UI行為，比如搜尋，在不同的應用上下文顯示正確的搜索結果；最後，要求對各個應用的程式碼儘可能少的侵入，各個應用可以用最小的精力去完成整合。

1. 首先從分離UI展現和行為入手，設計下面類似的數據結構用於UI展現

var items = [
  { icon: 'fa fa-bars', id: 'Products', type:'pusher',items:[
      { text: 'ProductA', id: 'ProductAId' },
      { text: 'ProductB', id: 'ProductBId' }
  ] },
  { text: 'item1', id: '1' },
  { text: 'item2', id: '2' },
  { text: 'item3', id: '3' },
  {
    text: 'item4', id: '4', type: 'dropdown', items: [
      { text: 'item4-1', id: '4-1' },
      { text: 'item4-2', id: '4-2' },
      { text: 'item4-3', id: '4-3' },
      { text: 'item4-4', id: '4-4' },
      { text: 'item4-5', id: '4-5' }
    ]
  },
  { text: 'item5', id: '5' },
  { text: 'item6', id: 'customizeddropdown', type:'dropdown' },

  {
    text: 'User', type: 'dropdown', id:'user', items: [
      { text: 'Logout', id: 'logout' }
    ],
    location: 'right'
  },
  {
    text: 'Settings',
    id: 'settings',
    icon: 'fa fa-cogs',
    location: 'right'
  }
];

2. 暴露以下事件來實現UI外觀和行為的定製，event listener的實現可以直接用nodejs的events.EventEmitter

megaMenu.addListener(MegaMenu.Events.ITEM_RENDERING_EVENT, function(id,itemContainer){
  console.log('item id=' + id + ' is rendering in ' + itemContainer);
}); 

megaMenu.addListener(MegaMenu.Events.ITEM_EXPANDING_EVENT, function(id, expendingContainer) {
  console.log('item id=' + id + ' is expanding in ' + expendingContainer);
});

megaMenu.addListener(MegaMenu.Events.ITEM_CLICKED_EVENT, function(id) {
  console.log('item id=' + id + ' is clicked');
});

3. 典型的產品整合

var megaMenu = new MegaMenu(items);
megaMenu.addListener(...);
megaMenu.renderAt(domElement);

最後，其實我是一個典型的後端Java程式設計師，所以你看，架構設計這個事，其實跟前後端關係不大。