js基础(杂记)

1、路由变换
（1）使用hash
获取url中的hash：http://www.bbbb.com#hashstr

`window.location.hash //#hashstr`

*   1

改变hash：

`window.location.hash = "#hahah";
// 变成http://www.bbbb.com#hahah`

*   1
*   2

最重要的是hashchange事件，通过这个事件来写页面跳转等的业务逻辑，每当url的hash改变都会触发这个事件

window.addEventListener("hashchange", function() {
    // 获取hash值
    var hash = window.location.hash;

    // 根据获取的hash做相应的操作
    . . .
});

(2)HTML5 history api
history.pushState([data], [title], [url])
history.replaceState([data], [title], [url])

1. 第一个参数用来传递我们需要的数据，当页面的状态发生变化时我们可以接收到该数据。如用户点击浏览器的后退和向前按钮。需要注意的是在Firefox中只允许传递最多640K的数据。
2. 第二个参数title是一个字符串，不过截止到目前，几乎所有的浏览器都忽略该参数。
3. 最后一个参数是我们想要替换的URL。

window.onpopstate事件
popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由`history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的`state属性包含了这个历史记录条目的state对象的一个拷贝.

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}