【发布时间】：2011-04-22 10:59:44
【问题描述】：
您好，我正在用 Javascript 开发自己的路由器 api。它基于#FregmentIdentifiers (document.location.hash) 进行路由。
api 已经完成了，但我仍在处理 backbuttom 事件。每当按下 backbuttom 并且 hash 发生了变化，并且之前被看到过，旧的内容就会被恢复。
您知道保存和恢复所有内容的方法吗？
我的问题是，如果我保存和恢复 document.body.innerHTML 只恢复标记而不恢复事件，例如谷歌地图停止工作。 我试图克隆 document.body 或 document.documentElement 但 javascript 要么告诉我该字段没有设置器，要么我的克隆无效。
编辑：
为了弄清楚我所做的一切，我决定发布我当前的代码。 该问题针对标有 //TODO 注释的部分。
function Router(){
var that = this;
var router = this;
var executionObservers = [];
that.routes = [];
this.registerRoute = function(route){
that.routes.push(route);
};
var history = null;
this.init = function(){
var i;
var identifier = document.location.hash;
history = new History();
history.start();
if(identifier.length > 0){
identifier = identifier.substring(1,identifier.length);
for(i = 0; i< that.routes.length; i++){
var route = that.routes[i];
if(route.contains(identifier)){
route.getAction(identifier)(route.getParams(identifier));
return true;
}
}
}
return false;
};
this.executed = function (identifier){
var i;
for(i=0; i<executionObservers.length; i++){
executionObservers[i](identifier);
}
document.location.hash = identifier;
};
this.addExecutionObserver = function(observer){
executionObservers.push(observer);
};
function History(){
var history = [];
var timeout = 200;
var lastAddedHash = null;
var loop = function(callback){
var hash = window.location.hash;
window.setTimeout(
function(){
if(window.location.hash!=hash){
hash = window.location.hash;
callback(hash);
}
loop(callback);
},
timeout
);
};
this.add = function(hash){
lastAddedHash = hash;
window.setTimeout(addCallback(hash), timeout);
};
addCallback = function(hash){
return function(){
var i;
var found = false;
for(i =0; i< history.length&&!found; i++){
if(history[i][1] == hash){
found = true;
//TODO create backup
//history[i][0] =
}
}
if(!found){history.push(new Array(document.documentElement.cloneNode(true),hash));}
}
}
this.setTimeout = function(micoseconds){
timeout = microseconds;
};
started = false;
this.start = function(){
if(!started){
started = true;
loop(function(hash){
var i;
if(lastAddedHash!=null&&hash!=lastAddedHash){
for(i =0; i<history.length; i++){
if(history[i][1] == hash){
//TODO restore from backup
document.location.reload();
}
}
}
});
}
};
router.addExecutionObserver(this.add);
}
}
Router.instance = null;
Router.getInstance = function(){
if(Router.instance === null ){
Router.instance = new Router();
}
return Router.instance;
};
/**
* @param getParams = function(identifier)
* @param getIdentifier = function(params)
* @param contains = function(identifier)
*/
function Route(action, getParams, getIdentifier, contains){
var that = this;
var router = Router.getInstance();
this.contains = contains;
this.getParams = getParams;
this.getAction = function(){
return action;
}
this.reExecute = function(identifier){
action(getParams(identifier));
};
this.execute = function(params){
action(params);
this.executed(params);
}
this.executed = function(params){
router.executed('#' + getIdentifier(params));
};
this.register = function(){
router.registerRoute(this);
};
}
function PrefixedRouterConfig(prefix,paramRegexes){
this.contains = function(identifier){
var regex = "^" + prefix;
for(var i=0;i<paramRegexes.length;i++){
regex+="_"+paramRegexes[i];
}
regex +="$";
var match = identifier.match(regex);
return match != null && (typeof match) == 'object' && (match[0] == identifier);
};
this.getIdentifier = function(params){
ret = prefix;
for(var i=0;i<params.length;i++){
ret+="_"+params[i];
}
return ret;
};
this.getParams = function(identifier){
var regex = "^" + prefix;
for(var i=0;i<paramRegexes.length;i++){
regex+="_("+paramRegexes[i]+")";
}
regex +="$";
var matches = identifier.match(regex);
var ret = [];
for(var i=1;i<matches.length;i++){
ret.push(matches[i]);
}
return ret;
};
}
我的 api 的示例用法如下所示：
config = new PrefixedRouterConfig('show_map',new Array("\\d+", "-?\\d+(?:\\.\\d+)?", "-?\\d+(?:\\.\\d+)?"));
var ROUTE_SHOW_MAP = new Route(
function(params){
var zoom = params[0];
var lat = params[1];
var lng = params[2];
MyGmapInterface.preparePage(-1);
addTabSelectedCallback(MyGmapInterface.tabLoaded);
addTabClosedCallback(MyGmapInterface.tabClosed);
MyGmapInterface.tabsLoaded = true;
MyGmapInterface.myMap = new MyMap(lat,lng,zoom,MyGmapInterface.getMapContainer(),MyGmapInterface.notCompatible);
MyGmapInterface.addNewCamMarkers(MyGmapInterface.loadCams());
MyGmapInterface.initListeners();
tabSelected(TAB_LEFT);
},
config.getParams,
config.getIdentifier,
config.contains
);
ROUTE_SHOW_MAP.register();
在包含所有 Javascript 文件（可能注册路由）之后，我调用 Router.getInstance().init();
当我在某处（手动）执行存在路由的 ajax 请求时，我调用 ROUTE_NAME.executed() 来设置片段标识符并将其注册到历史记录中。
此外，我有一个观察者，它更新一些用于直接翻译的链接，每当位置哈希被执行（）更改时
【问题讨论】：
-
好的，我已经开始赏金了。 50+ 对于给我这个问题的答案的人，显示工作代码。目前我正在通过简单的重新加载来解决处理后退按钮事件，但我更喜欢从历史中恢复。这意味着，标记和事件也可以被存储和恢复。我只需要这里的存储和恢复逻辑。事件处理已经完成。或者你会说重新加载处理它会更好吗？问候和感谢。
-
你的赏金是浪费时间，你想做的事情既非常困难又毫无意义。浏览器本身处理缓存的历史页面，而不是来自网站的“代码”。您可以使用 PHP 恢复前一页，并传入一个包含您希望在该页上设置的历史参数的对象。老实说，基于片段标识符构建的“路由器 api”听起来很可怕和史前，你应该重新投入一些时间来学习现代网络实践。
-
我拥有的是 javascript 代码，它是每个 ajax 请求的唯一片段标识符。通过片段标识符，完整的页面是可恢复的。但是现在返回按钮在没有重新加载的情况下不起作用。
-
@tokam 我要说的是，这是错误的。我理解你试图完成什么，我只是不明白你为什么不必要地试图重新发明轮子。总体目标是什么？你想实现什么？为什么？
-
听哈希变化就够了吗？对此有 JS 解决方案：benalman.com/projects/jquery-bbq-plugin
标签： javascript html javascript-events