web admin框架的异步加载设计

j360-admin

https://github.com/xuminwlt/j360-admin

工程结构

参考j360admin.js

触发机制

菜单触发

<a href="views/dashboard">工作台</a>

其他超链接

<a href="#views/dashboard">工作台</a>

JS触发

<a href="javascript:loadRootUrl('views/dashboard')">工作台</a>

或者

<a href="void(0)" id="dashboard">工作台</a>

$("#dashboard").click(function(e){
    loadRootUrl('views/dashboard')；
    e.preventDefault();
})

添加触发引擎

// all links with hash tags are ignored
$(document).on('click', '#side-menu a[href="#"]', function(e) {
    e.preventDefault();
});

$(document).on('click', '#side-menu a[href!="#"]', function(e) {
    e.preventDefault();
    $this = $(e.currentTarget);

    // if parent is not active then get hash, or else page is assumed to be loaded
    if (!$this.parent().hasClass("active") && !$this.attr('target')) {
        window.location.hash = $this.attr('href');
    }
});

// fire links with targets on different window
$(document).on('click', '#side-menu a[target="_blank"]', function(e) {
    e.preventDefault();
    $this = $(e.currentTarget);
    window.open($this.attr('href'));
});

先贴代码：关键之处，当发生url变化时，不触发浏览器同步加载，使用自定义的函数checkURL处理url的hash change

// DO on hash change
$(window).on('hashchange', function() {
    checkURL();
});

checkURL：检查URL是否满足跳转条件（分别对URI和param各自分开处理）

//use when url not changed and param must change then use this tag
var nonReloadUrlTag = "non-reload=true";

function checkURL() {
    if(!location.hash){
        url = "";
    }else{
        //get the url by removing the hash
        url = location.hash.replace(/^#/, '');
    }
    var ajax_container = $("#container");
    // Do this if url exists (for page refresh, etc...)
    if (url) {
        //if has non-reload then url changed,but page non-reload
        if(url.indexOf(nonReloadUrlTag) != -1){
            if(preHash != ""){
                var cHash = url;
                if(url.indexOf("?")!=-1){
                    var vHash = preHash.split("?");
                    cHash = vHash[0];
                }
                if(preHash == cHash){
                    return ;
                }
            }
        }else{
            //empty the preHash.
            preHash = "";
        }
        // remove all active class
        $('#side-menu li.active').removeClass("active");
        // match the url and add the active class
        $('#side-menu li:has(a[href="' + url + '"])').addClass("active");
        title = ($('#side-menu a[href="' + url + '"]').attr('title'))

        // change page title from global var
        document.title = (title || document.title);
        //console.log("page title: " + document.title);

        // parse url to jquery
        loadURL(url, ajax_container);
    } else {
        // grab the first URL from nav
        var defaultLink = $('#side-menu > li:first-child > a[href!="#"]');
        if(!defaultLink.length){
            defaultLink = $('#side-menu ul > li:first-child > a[href!="#"]');
        }
        //update hash
        window.location.hash = defaultLink.attr('href');

    }

}

loadURL：异步加载页面的片断进行局部更新

function loadURL(url, ajax_container) {
    //console.log(ajax_container)
    $.ajax({
        type : "GET",
        url : url,
        dataType : 'html',
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        cache : false, // (warning: this will cause a timestamp and will call the request twice)
        beforeSend : function() {
            // cog placed
            ajax_container.html('<h1><i class="fa fa-cog fa-spin"></i> 加载中...</h1>');
            if (ajax_container[0] == $("#container")[0]) {
                drawBreadCrumb();
                // update title with breadcrumb...
                document.title = _title + " - " + $(".breadcrumb li:last-child").text();
                // scroll up
                $("html, body").animate({
                    scrollTop : 0
                }, "fast");
            } else {
                ajax_container.animate({
                    scrollTop : 0
                }, "fast");
            }
        },
        complete: function(){
         // Handle the complete event
         
         },
        success : function(data) {
            // cog replaced here...

            ajax_container.css({
                opacity : '0.0'
            }).html(data).delay(50).animate({
                opacity : '1.0'
            }, 300);

        },
        error : function(xhr, ajaxOptions, thrownError) {
            ajax_container.html('<h4 style="margin-top:10px; display:block; text-align:left"><i class="fa fa-warning txt-color-orangeDark"></i> 错误 404! 页面没找到！</h4>');
        },
        async : true
    });
    //console.log("ajax request sent");
}

//load the root content by url
var preHash = "";
function loadRootUrl(url){
    getPreHashUrl();
    window.location.hash = url;
}
function getPreHashUrl(){
    if(!location.hash){
        preHash = "";
    }else{
        //get the url by removing the hash
        preHash = location.hash.replace(/^#/, '');
    }
    if(preHash.indexOf("?")!=-1){
        var vHash = preHash.split("?");
        preHash = vHash[0];
    }
}

loadRootUrl：通过JS执行打到页面的局部加载