多页面的标签支持 - 前台架构

单页面的方式，并不能充分的表达业务的丰富性，相反的是，限制了页面的展现内容。不同业务相关性不强的情况下，尽可能的支持多个页面的同时操作，保存页面操作结果以及状态，增强可操作的灵活性，多页面之间的关联性。

标签多页

传统前台框架，并没有考虑多页面的显示方式，指通过一个单页的重复加载或者不同页面的直接访问来完成页面内容的展现。但是，对于部分需要多页面协同操作，或者前台操作过程的需要多页的场景下，支持多页面共同存在成为需求。

多页面的支持，需要容器持有的同时，提供切换的方式成为一种必然的选择。通过切换的方式，可以实现不同或者相同页面之间的切换，实现多页面功能场景的实现。而切换的方式中，标签方式直观的体现，不同于菜单切换的方式，可以在原菜单作为功能模块的功能支持下，不至于混淆页面与模块功能，达到较好的融合效果。

标签多页实现的过程中，首先需要页面框架能够支持多标签功能样式，作为基础功能。通过样式的持之，可以通过具体的功能来实现标签切换的过程实现标签的激活状态以及页面显示的内容加载过程，同时未激活的标签页面处于的状态以及是否需要提供重新加载功能和删除标签的功能。

此外，标签页面可以组成标签组，标签组可以提供相关操作的功能。例如：全部删除，删除激活页右侧标签页等。

• 加载

标签页面加载的过程，需要完成标签页面新增的过程，包括标签以及页面样式。标签页面加载完成之后，可以根据标签页面作为基础，增加一些自定义的功能，比如重新加载，删除标签页面等，还可以提供标签页面批处理功能，比如批量删除等。

加载标签页面的过程，可以根据需求来验证当前标签页是否可以加载。比如，标签页的数量，加载标签页是否已经存在等规则，约束标签页面的加载过程。

引用代码，框架为JQuery作为基础，控件为Layer作为功能

...
/**
 * @param page 页面路径 不可为空 如./views/index.html
 * @param features 显示内容
 */
core.loadPage: function (page, feature){

    // 判断加载页面 , 不存在不进行标签页加载
    if (!page) return false;

    if ($('.page.nav-tab').length > 10) {
        core.alert(core.warning, "标签页加载过多");
        return false;
    }

    // 获取当前加载页面的索引
    var menuId = feature.attr("mid");

    // 判断加载页面是否存在 , 如果存在激活标签页面 , 其他标签页调整激活状态
    if ($("#homeNav .page.nav-tab a#tab_"+ menuId +"").length > 0 ) {

        var _tab = $("#tab_"+ menuId +"");
        var _tabPane = $("#"+ menuId +"");

        _tab.parent().siblings().removeClass("active");
        _tab.parent().addClass("active");
        _tabPane.siblings().removeClass("active");
        _tabPane.addClass("active");

        return false;
    }

    // 标签页面包括的各个元素 , 比如标签 , 加载页面 , 删除标签页面 , 重新加载标签页面
    var opearteTab = $("#homeNav > #operateTab");
    var deleteBtn = $('
');
    var refreshBtn = $('
');
    var tabLi = $('
');
    var taba = $('').html(feature.attr("menuText")).attr({
        "data-toggle": "tab",
        "href": "#'+ menuId,
        "id": "tab_" + menuId
    }).append(refreshBtn).append(deleteBtn);
    var tabPane = $('
').attr({
        'icon': feature.attr('icon'),
        'helpKey': feature.attr('helpKey'),
        'text': feature.attr("menuText"),
        'parentText': $(feature.parents('li').find('a:first')).attr("menuText")
    });

    var tabClose = $("#dropdown");

    // 其他页面设置为未激活状态
    $(".page.nav-tab").removeClass("active");
    $(".page.tab-pane").removeClass("active");

    opearteTab.before(tabLi.append(taba));
    $(".page.tab-content").append(tabPane);

    tabPane.load(page);

    // 删除功能 , 需要判断删除标签页面是否处于激活状态
    tabDel.on("click", function(){

        var _btn = $(this);
        var _tab = _btn.parents('li.page');

        var _pageId = _btn.parent("a").attr("href");
        var _page = $(_pageId);

        if(_tab.hasClass("active")){
            params['urlLoadParams'] = core.splitUrl(_tab.prev().attr('data-page'));

            _tab.prev('li.page').addClass('active');
            _page.prev('div.page').addClass('active');
        }

        _tab.remove();
        _page.remove();
    });

    // 
    taba.on("click", function(){
        tabClose.removeClass('show');
        params['urlLoadParams'] = core.splitUrl(page);
    });

    // 刷新功能
    refreshBtn.on("click", function(){
        var target = $($(this).parent().attr("href"));

        setTimeout(function(){
            tabPane.load(page);
            target.removeClass("tab-mask");
        }, 1200);
    });

},
...

• 切换

虽然多页面的标签方式来完成页面的加载过程，但存在场景需要在标签页面内完成不同页面的加载过程。所以，标签页面内切换加载不同的页面进行支持。

...
/**
* 加载页面 , 切换页面功能
* @param url 页面地址
* @param data 页面携带参数
* @param callback 成功回调
*/
core.switchPage: function (url, notTab, data, callback) {
    var container = $(".page.tab-pane.active").attr("id");
    $("#" + container).load(url, data, function (response, status, xhr) {
        callback && callback(response, status, xhr);
    });
},
...

• 获取元素

不同标签页面之间，可能存在相同属性的元素，获取元素的过程存在冲突的现象，导致问题发生。所以，利用一个独立获取激活状态标签页面中元素的方法进行提供。通过识别激活状态的标签页面来获取可见标签元素，避免获取到其他标签页面元素，对于使用者来说，与操作独立页面相同。

...
/**
 * 获取当前使用标签页面对应选择器内容的页面元素
 * @param selecter 选择器
 * @param contianer 指定元素内
 * @return 元素对象
 */
focusPage: function(selecter, contianer){
    if(!contianer){ return $('.page.tab-pane.active').find(selecter); }
    else { return $('.page.tab-pane.active').find(contianer).find(selecter); }
},
...

JQuery更多使用说明，参考JQuery官方网站。
LayUI（Layer）所有使用方式，参考LayUI官方网站，了解更多功能。