mui開發注意事項
Mui HTML5開發框架
mui是一個高性能的HTML5開發框架，從UI到效率，都在極力追求原生體驗；這個框架自身有一些規則，剛接觸的同學不很熟悉，特總結本文；想了解mui更詳細的信息，請訪問mui官網。
DOM結構
關於mui頁面的dom，你需要知道如下規則：
固定欄靠前
所謂的固定欄，也就是帶有.mui-bar（類選擇器）屬性的節點，都是基於fixed定位的元素；常見組件包括：頂部導航欄（.mui-bar-nav）、底部工具條(.mui-bar-footer)、底部選項卡（.mui-bar-tab）;這些元素使用時需遵循一個規則：放在mui-content元素之前，即使是底部工具條和底部選項卡，也要放在.mui-content之前，否則固定欄會遮住部分主內容；
### 一切內容都要包裹在mui-content中
除了固定欄之外，其它內容都要包裹在.mui-content中，否則就有可能被固定欄遮罩，原因：固定欄基於Fixed定位，不受流式布局限制，普通內容依然會從top:0的位置開始布局，這樣就會被固定欄遮罩，mui為了解決這個問題，定義了如下css代碼：
.mui-bar-nav ~ .mui-content {
padding-top: 44px;
}
.mui-bar-footer ~ .mui-content {
padding-bottom: 44px;
}
.mui-bar-tab ~ .mui-content {
padding-bottom: 50px;
}
你當然可以通過自定義CSS的方式實現如上類似效果，但為了使用簡便，
建議將除固定欄之外的所有內容，全部放在.mui-content中。
始終為button按鈕添加type屬性
若button按鈕沒有type屬性，瀏覽器默認按照type=submit邏輯處理，這樣若將沒有type的button放在form表單中，點擊按鈕就會執行form表單提交，頁面就會刷新，用戶體驗極差。
窗口管理
頁面初始化：必須執行mui.init方法
mui在頁面初始化時，初始化了很多參數配置，比如：按鍵監聽、手勢監聽等，因此mui頁面都必須調用一次mui.init()方法；
頁面跳轉：拋棄href跳轉
當瀏覽器加載一個新頁面時，若頁面DOM尚未渲染完畢，頁面會先顯示空白，然后等DOM渲染完畢后，再顯示具體內容，這是WEB瀏覽器技術無法逾越的體驗障礙；為解決這個問題，建議使用
[mui.openWindow方法](http://dcloudio.github.io/mui/javascript/#openwindow)打開一個新的webview，mui會自動監聽新頁面的loaded事件，若加載完畢，再自動顯示新頁面；擴展閱讀：
hello mui中的無等待窗體切換是如何實現的
提示HTML5的性能體驗系列之一 避免切頁白屏
頁面關閉：勿重復監聽backbutton
mui框架自動封裝了頁面關閉邏輯，若希望自定義返回邏輯（例如編輯頁面的返回，需用戶確認放棄草稿后再執行返回邏輯），則需要重寫mui.back方法，切勿簡單通過addEventListener添加backbutton監聽，因為addEventListener只會增加新的執行程序，mui默認封裝的監聽執行邏輯依然會繼續執行，因此若僅addEventListener添加用戶確認框，則用戶即使選擇了取消，也會繼續關閉窗口。
手勢操作
點擊：忘記click
快速響應是mobile App實現的重中之重，研究表明，當延遲超過100毫秒，用戶就能感受到界面的卡頓，然而手機瀏覽器的click點擊存在300毫秒延遲（至於為何會延遲，及300毫秒的來龍去脈，請自行谷百），mui為了解決這個問題，封裝了tap事件，因此在任何點擊的時候，請忘記click及onclick操作，統統使用如下代碼：
element.addEventListener('tap',function(){
//點擊響應邏輯
});