怀化网站建设哪家便宜,科技数码app排名,广告推广有哪些平台,为企业做网站电话开场白1. 前言 在之前整理BOM的五个对象时#xff0c;提到#xff1a;
location.hash发生改变后#xff0c;会触发hashchange事件#xff0c;且history栈中会增加一条记录#xff0c;但页面不会重新加载——实现HashRouter的关键history.pushState(state, , URL)执行后#xf…1. 前言 在之前整理BOM的五个对象时提到
location.hash发生改变后会触发hashchange事件且history栈中会增加一条记录但页面不会重新加载——实现HashRouter的关键history.pushState(state, , URL)执行后history栈中会增加一条记录但页面不会重新加载回退history.back()或history.go(-1)会触发popstate事件location.pathname发生改变——实现BrowserRouter的关键 本篇通过举例方式详细描述实现的过程。
2. HashRouter的原理
2.1 原理要点
通过a元素href属性修改URL的hash值或location.hash#/xxx修改或前进后退修改location.hash发生改变页面不会重新加载location.hash发生改变URL也会改变hash是URL的一部分新URL被推入history栈中location.hash发生改变会触发window的hashchange事件通过给window.onhashchange绑定事件处理函数监听hash变化根据hash值选择渲染的组件。
注根据hash值变化渲染组件不会影响hash原有作为锚点的功能锚点功能根据#后面字符串滚动到对应id的元素
2.2 示例源码
!DOCTYPE html
htmlheadmeta charsetUTF-8titleHash Router/title/headbodya href#/userGo user/aa href#/infoGo info/adiv idroot/div!-- div styleheight: 600px;/divdiv id/info/div --scriptlet root document.getElementById(root);window.onhashchange function(event) {if(window.location.hash #/user) {root.innerHTML label用户名input value小明 placeholderuser name//label;} else {root.innerHTML label年龄13岁/label;}}/script/body
/html
3. BrowserRouter的原理
3.1 原理要点
window不支持onpushstate事件需要为window构造onpushstate事件并绑定事件处理函数重写history.pushState保证执行history.pushState就会触发onpushstate事件可以为菜单项绑定click事件处理函数执行重写的history.pushState(state,title,url)修改URL执行重写的history.pushState页面不会重新加载但location.pathname发生改变并触发window的onpushstate事件通过window.onpushstate的事件处理函数监听pathname变化根据pathname值选择渲染的组件前进和后退会改变URL页面不会重新加载location.pathname发生改变并触发window的onpopstate事件通过window.onpopstate绑定的事件处理函数监听pathname变化根据pathname值选择渲染的组件。
3.2 示例源码
!DOCTYPE html
htmlheadmeta charsetUTF-8titleHash Router/title/headbodydiv idroot/divscriptlet root document.getElementById(root);window.onpushstate function(state, title, url) {console.dir({type: onpushstate, state, pathname: url});render(url);}// 修改history.pushState方法将window.onpushstate事件绑入bindPushstate(window.history);function bindPushstate(history) {let pushState history.pushState;history.pushState function(state, title, url) {if(typeof window.onpushstate function) {window.onpushstate(state, title, url);}return pushState.apply(history, arguments);}} window.onpopstate function(event) {const pathname window.location.pathname;console.dir({type: event.type, state: event.state,pathname});render(pathname);}function render(pathname) {if(pathname /user) {root.innerHTML label用户名input value小明 placeholderuser name//label;} else if(pathname /info) {root.innerHTML label年龄13岁/label;} else {root.innerHTML label需要填写个人信息/label;}}setTimeout(() {window.history.pushState({ page: 1 }, user, /user);}, 2000);setTimeout(() {window.history.pushState({ page: 2 }, info, /info);}, 4000);setTimeout(() {window.history.pushState({ page: 3 }, help, /help);}, 6000);/script/body
/html
4. 总结 再牛的建筑都离不开一块一块砖瓦学到很多高大上的框架和上层API时再回过头来看基础会更加深对框架和上层API的理解。
注以上如有不合理之处还请帮忙指出大家一起交流学习~
