ajax hash调用实例
$('[com-view]').on('click', function (e) {
// render($(this).data('view'));
// hashRoute.render($(this).data('view'));
view.render($(this).data('view'));
})
// 路由
var HashRoute = function HashRoute(params) {
var _self = this;
this.init = function () {
window.addEventListener('DOMContentLoaded', function () {
console.log('DOMContentLoaded');
})
$(document).ready(_self.setRoute);
// 1.直接更改浏览器地址,在最后面增加或改变#hash;
// 2.通过改变location.href 或 location.hash的值;
// 3.通过触发点击带锚点的链接;
// 4.浏览器前进后退可能导致hash的变化,前提是两个网页地址中的hash值不同
window.addEventListener('hashchange', _self.setRoute)
}
this.setRoute = function () {
var route = layui.router();
// layer.msg('只想弱弱提示<br>' + location.href);
// console.log(route.href);
if(route.href != undefined) {
route.href = route.href.substr(route.href.length - 1, 1) == '/' ? route.href + setter.entry : route.href;
}
ajaxModel.ajaxMethod({
url: setter.views + (route.href ? route.href : setter.entry) + setter.engine,
dataType: 'html',
successfn: function (e) {
$('.layadmin-tabsbody-item.layui-show').html(e);
},
errorfn: function (e) {
// e.status === 404 ? _self.render('tips/404') : _self.render('tips/error');
}
})
}
this.skip = function (path) {
location.hash = '#/${path}'
}
this.render = function (u) {
location.hash = _self.correctRouter(u);
}
this.correctRouter = function (e) {
return /^\//.test(e) || (e = "/" + e),
e.replace(/^(\/+)/, "/").replace(new RegExp("/" + setter.entry + "$"), "/");
}
};
// const hashRoute = new HashRoute()
// hashRoute.init();
参考
// 该写法为了满足多条件下的 CommonJs,Node.js, window,layui
(function (name, factory) {
// 检测上下文是否为AMD或者CMD
var hasDefine = typeof define === "function",
// 检查上下文环境是否为Node
hasExports = typeof module !== 'undefined' && module.exports,
hasLayui = this.layui && layui.define;
if (hasDefine) {
// AMD 环境或者 CMD环境
define(factory);
} else if (hasExports) {
// 定义为普通的Node模块
module.exports = factory();
} else if (hasLayui) {
layui.define(['jquery', 'ajaxModel', 'setter'], function (exports) {
exports('view', factory());
});
} else {
// window对象
this[name] = factory();
}
}
)('view', function () {
"use strict";
var $ = layui.jquery,
setter = layui.setter,
ajaxModel = layui.ajaxModel;
var _self = null;
var View = function View(params) {
_self = this;
};
View.prototype.init = function () {
window.addEventListener('DOMContentLoaded', function () {
console.log('DOMContentLoaded');
})
$(document).ready(_self.setRoute);
// 1.直接更改浏览器地址,在最后面增加或改变#hash;
// 2.通过改变location.href 或 location.hash的值;
// 3.通过触发点击带锚点的链接;
// 4.浏览器前进后退可能导致hash的变化,前提是两个网页地址中的hash值不同
window.addEventListener('hashchange', _self.setRoute)
}
View.prototype.setRoute = function () {
var route = layui.router();
// layer.msg('只想弱弱提示<br>' + location.href);
// console.log(route.href);
if (route.href != undefined) {
route.href = route.href.substr(route.href.length - 1, 1) == '/' ? route.href + setter.entry : route.href;
}
ajaxModel.ajaxMethod({
url: setter.views + (route.href ? route.href : setter.entry) + setter.engine,
dataType: 'html',
successfn: function (e) {
$('.layadmin-tabsbody-item.layui-show').html(e);
},
errorfn: function (e) {
// e.status === 404 ? _self.render('tips/404') : _self.render('tips/error');
}
})
}
View.prototype.skip = function (path) {
location.hash = '#/${path}'
}
View.prototype.render = function (u) {
location.hash = _self.correctRouter(u);
}
View.prototype.correctRouter = function (e) {
return /^\//.test(e) || (e = "/" + e),
e.replace(/^(\/+)/, "/").replace(new RegExp("/" + setter.entry + "$"), "/");
}
return new View(); // 返回构造
});
努力学习