itorr / q.js

炒鸡轻量的前端单页路由框架

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

只判断了key的长度, 没有对key做校验

blqw opened this issue · comments

        Q.reg("login", function () {
            console.log("1")
        });
        Q.reg("xxx", function () {
            console.log("xxx")
        });
        Q.init({
            index: 'login'/* 首页地址 */
        });

地址是 #@xxx 依然会生效, 实际上只判断了key的长度, 没有对key做校验

我的理解是 key 不等于 ! 的时候 应该按照实际的锚记来处理

通过 hash 接管路由之后,hash 作为 hash 的锚点功能就已经是无法使用,如果在特殊情况按照锚点处理 hash,就意味着 路由和 view 脱节,路由在这时也就失去意义了

if (!location.hash.startsWith("#" + key)) return;
Q.hash = hash = location.hash.substring(key.length + 1) || index;

我尝试修改了一下 原本的锚记依然可以使用

唔,按照我上面的理解,不推荐在把 hash 绑到路由上之后再做锚点支持。

如果这时候还想支持锚点,可能类似这样实现好些?

document.body.onclick=function(e){
	var 
	target=e.target;
	if(target.tagName=='A'){
		var ids=target.getAttribute('href').match(/#(.+)$/i);
		if(ids){
			ids=ids[1];
			var 
			dom;
			try{
				dom=document.querySelector('#'+ids);
			}catch(e){
				
			}

			if(dom){
				scrollTo(0,dom.offsetTop);
				e.preventDefault();
			}
		}
	}
}

既然用了 try catch 就干脆一点🤣

document.body.onclick=function(e){
	var 
	target=e.target;
	if(target.tagName=='A')
		try{
			var 
			dom=document.querySelector(target.getAttribute('href'));
			scrollTo(0,dom.offsetTop);
			e.preventDefault();
		}catch(e){}
}

不需要写这么多, 只要直接return 浏览器会处理
key 既然设置 ! 我用@ $ % & 都可以 这显然是不合理的

我理解你的关注点,我推荐的方法会保持 hash 和 view 的一致性,你的方法会导致 hash 和 view 脱节

key 的设置对于路由本身 需要关注的部分只有长度,hash 作为路由的前提 就意味着不存在 hash 不作为路由的其他情况。在设置了 ! 前提下 @ $ % & 开头的 hash 本身就不是推荐的 url 格式,这是开发需要注意的、而不是轮子本身去关注