用Amaze UI实现Ajax页面局部刷新
2015年5月10日
作为小博的第一篇博文，还是得认真一点。
最近一直都在研究怎样用好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，我这里就不贴了。
除非注明，麦麦小家文章均为原创，转载请以链接形式标明本文地址。