hash定義

hash這個(gè)玩意是地址欄上#及后面部分，代表網(wǎng)頁中的一個(gè)位置，#后面部分為位置標(biāo)識(shí)符。頁面打開后，會(huì)自動(dòng)滾動(dòng)到指定位置處。
位置標(biāo)識(shí)符 ，一是使用錨點(diǎn)，比如<a name="demo"></a>，二是使用id屬性，比如 <span id="demo" ></span>

帶hash的請(qǐng)求

當(dāng)打開http://www.example.com/#print服務(wù)器實(shí)際收到的請(qǐng)求地址是http://www.example.com/，是不帶hash值的。
那么你真想帶#字符咋辦，轉(zhuǎn)義啊， #轉(zhuǎn)義字符為%23。也許有人會(huì)說，我咋知道這個(gè)轉(zhuǎn)義啊，呵呵噠encodeURIComponent。

hashchange事件

從The HashChangeEvent interface可以看到hashchange事件的參數(shù)HashChangeEvent繼承了Event，僅僅多了兩個(gè)屬性

• oldURL 先前會(huì)話歷史記錄的URL
• newURL 當(dāng)前會(huì)話歷史記錄的URL
  簡(jiǎn)單的調(diào)用方式

window.onhashchange = function(e){console.log('old URL:', e.oldURL)console.log('new URL', e.newURL)}

hash | CAN I USE 上可以看到除了IE8一下和那個(gè)尷尬的Opera Mini,hashchange事件都是支持得很好。那么怎么做到兼容，用MDN的代碼做個(gè)引子

function(window) { if ("onhashchange" in window) { return; }var location = window.location,oldURL = location.href,oldHash = location.hash;setInterval(function() {var newURL = location.href, newHash = location.hash;if (newHash != oldHash && typeof window.onhashchange === "function") { window.onhashchange({type: "hashchange",oldURL: oldURL,newURL: newURL});oldURL = newURL;oldHash = newHash;}}, 100); }

hash history 簡(jiǎn)單版本實(shí)現(xiàn)

從上面可以得知，我們的實(shí)現(xiàn)思路就是監(jiān)聽hashchange事件，這里先拋開兼容性問題。
1 首先監(jiān)聽hashchange事件，定義個(gè)RouterManager函數(shù)

• bind(this)讓函數(shù)this指向RouterManager實(shí)例
• 取到oldURL和newURL，同時(shí)查找一下是否注冊(cè)，然后加載相關(guān)路由

function RouterManager(list, index) {if (!(this instanceof RouterManager)) {return new RouterManager(arguments)}this.list = {} || listthis.index = indexthis.pre = nullthis.current = nullwin.addEventListener('hashchange', function (ev) {var pre = ev.oldURL.split('#')[1],cur = ev.newURL.split('#')[1],preR = this.getByUrlOrName(pre),curR = this.getByUrlOrName(cur)this.loadWithRouter(curR, preR)}.bind(this))}

2 定義添加，刪除，加載，和初始化等方法

• add的時(shí)候，判斷是不是string, 如果是，重新構(gòu)造一個(gè)新的router實(shí)例配置
• load這里主要是用來還原直接輸入帶hash的地址，比如 http://ex.com/#music
• loadWithRouter是最終渲染的入口
• getByUrlOrName，你可以通過名字和path查找路由，name是方便日后擴(kuò)展
• setIndex設(shè)置默認(rèn)路由地址
• go, back, forward同history的方法
• init里面會(huì)檢測(cè)地址是不是帶hash，然后走不通的邏輯。history.replaceState這是因?yàn)?#xff0c;如果不這么做， http://ex.com/跳轉(zhuǎn)到http://ex.com/#/music會(huì)產(chǎn)生兩條歷史記錄，這是我們不期望的。

RouterManager.prototype = {add: function (router, callback) {if (typeof router === 'string') {router = {path: router,name: router,callback: callback}}this.list[router.name || router.path] = router},remove: function (name) {delete this.list[name]},get: function (name) {return this.getByUrlOrName(name)},load: function (name) {if (!name) {name = location.hash.slice(1)}var r = this.getByUrlOrName(name)this.loadWithRouter(r, null)},loadWithRouter(cur, pre) {if (cur && cur.callback) {this.pre = this.current || curcur.callback(cur, pre)this.current = cur} else {this.NOTFOUND('未找到相關(guān)路由')}},getByUrlOrName: function (nameOrUrl) {var r = this.list[nameOrUrl]if (!r) {r = Object.values(this.list).find(rt => rt.name === nameOrUrl || rt.path === nameOrUrl)}return r},setIndex: function (nameOrUrl) {this.indexRouter = this.getByUrlOrName(nameOrUrl)},go: function (num) {win.history.go(num)},back: function () {win.history.back()},forward: function () {win.history.forward()},init: function () {// 直接輸入是帶hash的地址，還原if (win.location.hash) {/* 模擬事件var ev = document.createEvent('Event')ev.initEvent('hashchange', true, true)ev.oldURL = ev.newURL = location.hrefwin.dispatchEvent(ev) */this.load()} else if (this.indexRouter) { // 是不帶hash的地址，跳轉(zhuǎn)到指定的首頁if ('replaceState' in win.history) {// 替換地址win.history.replaceState(null, null, win.location.href + '#' + this.indexRouter.path)} else {win.location.hash = this.indexRouter.path}}}}

3 公布函數(shù)

RouterManager.prototype.use = RouterManager.prototype.addwin.Router = RouterManager

4 頁面怎么配置，簡(jiǎn)單的利用a標(biāo)簽href

<ul><li><li><a href="#/m1">菜單1</a></li><ul><li><a href="#/m11">菜單11</a></li><li><a href="#/m12">菜單12</a></li></ul></li><li><a href="#/m2">菜單2</a></li><li><a href="#/m3">菜單3</a></li> </ul>

5 注冊(cè)，當(dāng)然你也可以通過選擇器批量注冊(cè)

var router = new Router() router.NOTFOUND = function (msg) {content.innerHTML = msg } router.use('/m1', function (r) {req(r.path.slice(1)) }) router.use('/m11', function (r) {req(r.path.slice(1)) }) router.use('/m12', function (r) {req(r.path.slice(1)) }) router.use('/m2', function (r) {req(r.path.slice(1)) }) router.use('/m3', function (r) {req(r.path.slice(1)) }) router.setIndex('/m1') router.init()

為了方便演示，定義req，ajax方法，模擬ajax請(qǐng)求

function req(url) {ajax(url, function (res) {content.innerHTML = res}) }function ajax(id, callback) {callback({'m1': '菜單1的主區(qū)域內(nèi)容','m11': '菜單11的主區(qū)域內(nèi)容','m12': '菜單12的主區(qū)域內(nèi)容','m2': '菜單2的主區(qū)域內(nèi)容','m3': '菜單3的主區(qū)域內(nèi)容'}[id] || '404 Not Found!') }

6 demo地址

hash-Router1.0

7 源碼地址
簡(jiǎn)單的前端hash路由

8 下一步
這就成了最簡(jiǎn)單最基本的路由了。讓然還有很多要考慮，比如如下

動(dòng)態(tài)路由匹配

嵌套路由

重定向和別名

錯(cuò)誤捕捉

生命周期鉤子

等等等

hash | CAN I USE
The HashChangeEvent interface
onhashchange | MDN
window.location.hash 使用說明
JS單頁面應(yīng)用實(shí)現(xiàn)前端路由（hash）
Ajax保留瀏覽器歷史的兩種解決方案（Hash&Pjax）
理解瀏覽器的歷史記錄
理解瀏覽器歷史記錄（2）-hashchange、pushState
Web開發(fā)中 前端路由 實(shí)現(xiàn)的幾種方式和適用場(chǎng)景
自己動(dòng)手寫一個(gè)前端路由插件
vue-router
react-router

總結(jié)

以上是生活随笔為你收集整理的简单的基于hash和hashchange的前端路由的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。