简单的基于hash和hashchange的前端路由

hash这个玩意是地址栏上#及后面部分，代表网页中的一个位置，#后面部分为位置标识符。页面打开后，会自动滚动到指定位置处。
位置标识符 ，一是使用锚点，比如<a></a>，二是使用id属性，比如 <span ></span>

带hash的请求

当打开服务器实际收到的请求地址是，是不带hash值的。
那么你真想带#字符咋办，转义啊， #转义字符为%23。也许有人会说，我咋知道这个转义啊，呵呵哒encodeURIComponent。

hashchange事件

从可以看到hashchange事件的参数HashChangeEvent继承了Event，仅仅多了两个属性

oldURL 先前会话历史记录的URL

newURL 当前会话历史记录的URL
简单的调用方式，
```js
window.onhashchange = function(e){
console.log('old URL:', e.oldURL)
console.log('new URL', e.newURL)
}

[hash | CAN I USE](https://caniuse.com/#search=hash) 上可以看到除了IE8一下和那个尴尬的Opera Mini,hashchange事件都是支持得很好。那么怎么做到兼容，用MDN的代码做个引子js
;(function(window) {

// exit if the browser implements that event
if ("onhashchange" in window) { return; }

var location = window.location,
oldURL = location.href,
oldHash = location.hash;

// check the location hash on a 100ms interval
setInterval(function() {
var newURL = location.href,
newHash = location.hash;

// if the hash has changed and a handler has been bound... if (newHash != oldHash && typeof window.onhashchange === "function") { // execute the handler window.onhashchange({ type: "hashchange", oldURL: oldURL, newURL: newURL }); oldURL = newURL; oldHash = newHash; }

}, 100);

})(window);
```

hash history 简单版本实现

从上面可以得知，我们的实现思路就是监听hashchange事件，这里先抛开兼容性问题。
1 首先监听hashchange事件，定义个RouterManager函数

bind(this)让函数this指向RouterManager实例

取到oldURL和newURL，同时查找一下是否注册，然后加载相关路由

function RouterManager(list, index) { if (!(this instanceof RouterManager)) { return new RouterManager(arguments) } this.list =http://www.likecs.com/ {} || list this.index =http://www.likecs.com/ index this.pre =http://www.likecs.com/ null this.current =http://www.likecs.com/ null win.addEventListener('hashchange', function (ev) { var pre =http://www.likecs.com/ ev.oldURL.split('#')[1], cur =http://www.likecs.com/ ev.newURL.split('#')[1], preR =http://www.likecs.com/ this.getByUrlOrName(pre), curR =http://www.likecs.com/ this.getByUrlOrName(cur) this.loadWithRouter(curR, preR) }.bind(this)) }