[browser location和history] 简单实现了个路由

今天看了1下前面写的,好像缺乏交流性,周末再来弄吧 -0-

今天看了browser 的 location 和 history

location属性

 1 //    //location.hash 性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）
 2 //    console.log(location.host);     //获得location的端口
 3 //        //或www.xxx.com止            //[[设置或返回]]当前 URL 的主机名称和端口号
 4 //
 5 //    console.log(location.hostname); //返回服务域名
 6 //        //www.xxx.com:80            //[[设置或返回]]当前 URL 的主机名
 7 //
 8 //    console.log(location.href);     //返回该页面的url
 9 //        //www.xxx.com:              //[[设置或返回]]当前显示的文档的完整 URL
10 //        //location.href = 'baidu.com'; 调用改变当前url
11 //
12 //    console.log(location.port);     //端口:后的内容
13 //        //"8080"                    //[[设置或返回]]或返回当前 URL 的端口部分
14 //
15 //    console.log(location.protocol); //http://[[设置或返回]]当前 URL 的协议
16 //
17 //    console.log(location.search);   //?后的内容
18 //        //有待研究吧,没效果           //[[设置或返回]]当前 URL 的查询部分（问号 ? 之后的部分）
19 //        //我猜这个功能可能可以了解用户的网内轨迹
20 //
21 //    //decodeURIComponent() 对编码后的 URI 进行解码：
22 //    //就1个转码函数,转的码的作用有待研究

 

Location方法

 1 //    //location.assign()
 2 //    window.location = "www.baidu.com"  直接改变当前url    //效果一样
 3 //    location.href = "www.baidu.com";
 4 //    location.assign('www.baidu.com');
 5 //
 6 //    //location.replace
 7 //    //不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录
 8 //    setTimeout(function(){
 9 //        console.log(1);
10 //        location.replace("baidu.com")//p209 阻止用户返回上1页面
11 //    },1000)
12 //
13 //      //str.replace必须两个参数,这里的 replace 是 location 的方法
14 //    var str = "abcdefghijklnm";
15 //    console.log(str.replace("abcd",''));
16 //
17 //    //location.reload()             //这个方法会一直load,慎用
18 //    location.reload();            //重新加载,有可能是从缓存中加载
19 //    location.reload(true);        //重新加载,从服务器重新加载
20 //
21 //    setTimeout(function(){
22 //        location.reload();
23 //          //并且reload()调用之后的代码可能也不会执行,网络原因系统资源等因素,
24 //          //最好放在最后一行
25 //        return false;             //没效果
26 //    },5000)
27 //    个人认为这个真没必要用,reload()是会把整个文档从新加载
28 //
29 //    若需要部分组件定时更新数据,用ajax就好
30 //    这是写的简单定时更新数据

 

 

//history

 

1 //    history.go(-1);             //后退
2 //    history.go(1);              //前进1页
3 //    history.go(2);              //前进2页
4 //
5 //    history.go("baidu.con");    //跳转到最近的baidu.com页面
6 
7     //history.back();           //后退一页;
8     //history.forward();        //前进一页;
9     //hiseory.length;           //下标0开始第1页

 

 简单理由封装

参考:http://blog.csdn.net/sunxinty/article/details/52586556
作者:SunxHome

 1     function Router(){
 2         this.routes = {};
 3         this.currentUrl = '';
 4     };
 5     Router.prototype.route = function(path,callback){
 6         this.routes[path] = callback || function(){};
 7     };
 8     Router.prototype.refresh = function(){
 9         this.currentUrl = location.hash.slice(1) || '/';
10         this.routes[this.currentUrl]();
11     };
12     Router.prototype.init = function(){
13         window.addEventListener('load',this.refresh.bind(this),false);
14         window.addEventListener('hashchange',this.refresh.bind(this),false)
15     };
16 
17     window.Router = new Router();
18     window.router.init();