封裝html代碼塊到js函數中

有時候想把公共的html封裝起來，怎么處理呢？
好多頁面都用到，不可能每個頁面都寫，這樣就會有冗余，並且不好統一處理。

那就用js來重構html吧。
代碼案例如下：

<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item" tapmode onclick="openWinPro('menu_mall')">
        <i class="aui-iconfont aui-icon-home"></i>
        <div class="aui-bar-tab-label">雲店</div>
    </div>
    <div class="aui-bar-tab-item  aui-active" tapmode>
        <i class="aui-iconfont aui-icon-comment"></i>
        <div class="aui-bar-tab-label">消息</div>
    </div>
    <div class="aui-bar-tab-item " tapmode onclick="openWinPro('menu_find')">
        <i class="aui-iconfont aui-icon-like"></i>
        <div class="aui-bar-tab-label">發現</div>
    </div>
    <div class="aui-bar-tab-item" tapmode onclick="openWinPro('menu_enterment')">
        <i class="aui-iconfont aui-icon-video"></i>
        <div class="aui-bar-tab-label">娛樂</div>
    </div>
    <div class="aui-bar-tab-item" tapmode onclick="openWinPro('menu_mine')">
        <i class="aui-iconfont aui-icon-my"></i>
        <div class="aui-bar-tab-label">我的</div>
    </div>
</footer>

處理成js

function showMainMenu(active_name) {
    // var active_name = arguments[0] ? arguments[0] : 'menu_mall'; // 定義默認值
    active_name     = active_name || 'menu_mall';                   // 定義默認值
    var footerHtml = '';
    footerHtml    += '<footer class="aui-bar aui-bar-tab" id="footer">';
    if (active_name == 'menu_mall') {
        footerHtml    += '  <div class="aui-bar-tab-item aui-active" tapmode>';
        footerHtml    += '      <i class="aui-iconfont aui-icon-home"></i>';
        footerHtml    += '      <div class="aui-bar-tab-label">雲店</div>';
        footerHtml    += '  </div>';
    } else {
        footerHtml    += '  <div class="aui-bar-tab-item" tapmode onclick="openWinPro(\'menu_mall\')">';
        footerHtml    += '      <i class="aui-iconfont aui-icon-home"></i>';
        footerHtml    += '      <div class="aui-bar-tab-label">雲店</div>';
        footerHtml    += '  </div>';
    }

    if (active_name == 'menu_msg') {
        footerHtml    += '  <div class="aui-bar-tab-item aui-active" tapmode>';
        footerHtml    += '      <i class="aui-iconfont aui-icon-comment"></i>';
        footerHtml    += '      <div class="aui-bar-tab-label">消息</div>';
        footerHtml    += '  </div>';
    } else {
        footerHtml    += '  <div class="aui-bar-tab-item" tapmode onclick="openWinPro(\'menu_msg\')">';
        footerHtml    += '      <i class="aui-iconfont aui-icon-comment"></i>';
        footerHtml    += '      <div class="aui-bar-tab-label">消息</div>';
        footerHtml    += '  </div>';
    }

    if (active_name == 'menu_find') {
        footerHtml    += '  <div class="aui-bar-tab-item aui-active" tapmode>';
        footerHtml    += '      <i class="aui-iconfont aui-icon-like"></i>';
        footerHtml    += '      <div class="aui-bar-tab-label">發現</div>';
        footerHtml    += '  </div>';
    } else {
        footerHtml    += '  <div class="aui-bar-tab-item" tapmode onclick="openWinPro(\'menu_find\')">';
        footerHtml    += '      <i class="aui-iconfont aui-icon-like"></i>';
        footerHtml    += '      <div class="aui-bar-tab-label">發現</div>';
        footerHtml    += '  </div>';
    }

    if (active_name == 'menu_enterment') {
        footerHtml    += '  <div class="aui-bar-tab-item aui-active" tapmode >';
        footerHtml    += '      <i class="aui-iconfont aui-icon-video"></i>';
        footerHtml    += '      <div class="aui-bar-tab-label">娛樂</div>';
        footerHtml    += '  </div>';
    } else {
        footerHtml    += '  <div class="aui-bar-tab-item" tapmode onclick="openWinPro(\'menu_enterment\')">';
        footerHtml    += '      <i class="aui-iconfont aui-icon-video"></i>';
        footerHtml    += '      <div class="aui-bar-tab-label">娛樂</div>';
        footerHtml    += '  </div>';
    }

    if (active_name == 'menu_mine') {
        footerHtml    += '  <div class="aui-bar-tab-item aui-active" tapmode>';
        footerHtml    += '      <i class="aui-iconfont aui-icon-my"></i>';
        footerHtml    += '      <div class="aui-bar-tab-label">我的</div>';
        footerHtml    += '  </div>';
    } else {
        footerHtml    += '  <div class="aui-bar-tab-item" tapmode onclick="openWinPro(\'menu_mine\')">';
        footerHtml    += '      <i class="aui-iconfont aui-icon-my"></i>';
        footerHtml    += '      <div class="aui-bar-tab-label">我的</div>';
        footerHtml    += '  </div>';
    }



    footerHtml    += '</footer>';
    // $('body').append(footerHtml);
    $api.append($api.dom('body'),footerHtml);
}

注意保持間距和美觀性，利於后期維護。

調用很簡單，用到的頁面，直接調用函數showMainMenu()即可。

效果等同於每個頁面都寫一遍html。

原html中的單引號，加一個下划線處理一下就可以了。