封装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中的单引号，加一个下划线处理一下就可以了。

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/6378619.html如需转载请自行联系原作者