作为小博的第一篇博文,还是得认真一点。

最近一直都在研究怎样用好AmazeUI这一个国产的HTML5前端框架。因为一个项目需要Ajax页面局部刷新,但AmazeUI没有相关的例程或者说插件。所以就自己动手做一个。

伸手党欢迎Fork一下这个项目:https://gitcafe.com/mypayne/amazeui-ajax-page

想知道怎么做出来的?请听我慢慢道来~

前期准备

Ajax页面局部刷新是什么鬼?

AJAX局部刷新 可以说是个老物。是前端汪们从 全页刷新 开辟出来的新天地。

无非就是借助AJAX把该展示的页面下载下来,然后在浏览器中渲染。这个过程不需要刷新网页。看上去行云流水一般。适用于管理后台等等不需要太多SEO优化的网站。

怎么知道我要访问哪个页面?

也不是说国际通用方法,只能说通常的解决方法是使用window.location.hash 。说白了就是页面的标签值,也就是经常看到的“XXX.html#happy”中的”#happy”。

我们可以直接用 window.location.hash 把hash取出来,也可以通过它本身或者a标签的href设置一个新的hash值。这样就解决这个问题。

大概怎样规划这个插件?

用法

定义一个叫“ajaxPage”的“类”,通过 var page = new ajaxPage($) 创建它的实例,然后 page.init(config) 初始化它。需要通过JavaScript更改页面的时候“ajaxPage.changeAJAXPage(hash)”更改。

That’s all。

所以重点都在config怎么写。

功能

  • 可以捕获Hash改变,并且AJAX局部刷新页面(基本)
  • 可以针对不同的Hash值作出不同的反应,如重定义、调用当前页Div作为展示
  • 自定义需要访问的AJAX页面的地址
  • 配合AmazeUI的折叠菜单作出切换页面时菜单也跟随切换的效果
  • 预留捕捉Hash更改的事件让开发者深度开发

动手

这个小插件只需要一个.js文件就可以完成。

根据我们的前期规划,1小时左右就可以完成。

下面就是成果:

/**
 * ajaxPage
 * @param $ jQuery
 */
function ajaxPage($){
    //默认配置
    var defaultConfig = {
        target: '#ajax-content', //默认展示Ajax页面的层
        indexHash: 'index', //默认的首页
        pages: {}, //各页面的配置信息
        splitExpression: /-/g, //分割页面地址
        clearParams: true, //获取页面地址时是否去除query参数
        event_collapse: true, //是否根据页面改变折叠面板的按钮样式
        ajax_root: '', //Ajax页面的根目录
        plugin_class_name: '.am-plugin-collapse', //本插件控制样式区域的ClassName
        format: null, //Ajax页面地址后缀
        error_div: '#error_page_unloaded', //发生错误后提示的页面

        on: {//事件
            changeHash: function(hashStr, url){
            } //更改页面后触发
        }
    };
    var config = {};

    /**
     * 初始化插件
     * @param _config AjaxPage配置
     */
    this.init = function(_config){
        this.setConfig(_config);

        //初始化配置
        for(var key in defaultConfig){
            if(config[key] === undefined){
                config[key] = defaultConfig[key];
            }
        }

        //初始化页面
        if(!window.location.hash) {
            this.changeAJAXPage(config.indexHash);
        }else{
            this.loadContent();//确保刷新后正常加载
        }

    };

    /**
     * 配置
     * @param _config
     */
    this.setConfig = function(_config){
        if(_config) config = _config;
    };

    /**
     * 设置单个配置
     * @param key
     * @param value
     */
    this.setConfigS = function(key, value){
        if(key) config[key] = value;
    };

    /**
     * 载入页面
     */
    this.loadContent = function(){
        var hashStr = window.location.hash.toString().replace("#", "");//获取页面值

        var name = hashStr;
        var paramLoc = hashStr.indexOf('?');
        if(config.clearParams){
            if(paramLoc!=-1) name = name.substring(0, paramLoc);
        }

        var url = hashStr;
        if(config.pages[name] && config.pages[name].redirect){
            url = config.pages[name].redirect;
        }else{
            if(config.splitExpression) url = hashStr.replace(config.splitExpression, "/");//分割
        }
        if(config.format) {
            if(paramLoc !== -1){
                url = url.replace('?', config.format + '?');
            }else{
                url += config.format;
            }
        }

        if(config.event_collapse){
            $(config.plugin_class_name + ' li a').removeClass('am-active');
            $(config.plugin_class_name + ' .collapse-menu').removeClass('am-in');
        }

        if(config.pages[name] && config.pages[name].bind) name = config.pages[name].bind;

        if(config.event_collapse){
            var $btn = $(config.plugin_class_name + " [href='#" + name + "']");
            $btn.addClass('am-active');
            $btn.parent().parent().addClass('am-in');
        }

        if(config.pages[name] && config.pages[name].toDiv){
            $(config.target).html($(config.pages[name].toDiv).html());

            url = '#toDiv: ' + config.pages[name].toDiv;
        }else{
            $(config.target).load(config.ajax_root + url, function(res, status){
                if(status == "error"){
                    if(config.error_div) $(config.target).html($(config.error_div).html());
                }
            });
        }


        if(config.on && config.on.changeHash) return config.on.changeHash(hashStr, url);
    };

    /**
     * 跳转到指定页面
     * @param hash
     */
    this.changeAJAXPage = function(hash){
        window.location.hash = '#' + hash.toString();
    };

    window.onhashchange = this.loadContent;//绑定hash改变事件
}

ajaxPage.changeAJAXPage = function(uri){
    window.location.hash = '#' + uri.toString();
};

每个参数代表什么意思?请参考项目的Readme,我这里就不贴了。

除非注明,麦麦小家文章均为原创,转载请以链接形式标明本文地址。

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)

本文地址:https://blog.micblo.com/2015/05/10/用Amaze-UI实现Ajax页面局部刷新/