• 售前

  • 售后

热门帖子
入门百科

react实现欣赏器自动革新的示例代码

[复制链接]
阿德莱德探路者 显示全部楼层 发表于 2021-10-26 13:18:08 |阅读模式 打印 上一主题 下一主题
目录


  • 什么是前端路由?
  • 如何实现前端路由?

    • hash 实现
    • history 实现

  • 原生JS版前端路由实现

    • 基于 hash 实现
    • 基于 history 实现

  • React 版前端路由实现

    • 基于 hash 实现
    • 基于 history 实现

  • Vue 版本前端路由实现

    • 基于 hash 实现
    • 基于 history 实现

  • 小结
  • 参考
在单页应用云云流行的今天,曾经令人惊叹的前端路由已经成为各大框架的底子标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂。想要搞懂路由内部实现照旧有些困难的,但是如果只想相识路由实现基本原理照旧比较简单的。本文针对前端路由主流的实现方式 hash 和 history,提供了原生JS/React/Vue 共计六个版本供参考,每个版本的实现代码约 25~40 行左右(含空行)。

什么是前端路由?

路由的概念泉源于服务端,在服务端中路由形貌的是 URL 与处理函数之间的映射关系。
在 Web 前端单页应用 SPA(Single Page Application)中,路由形貌的是 URL 与 UI 之间的映射关系,这种映射是单向的,即 URL 变化引起 UI 更新(无需刷新页面)。

如何实现前端路由?

要实现前端路由,须要解决两个核心题目:
如何改变 URL 却不引起页面刷新?如何检测 URL 变化了?
下面分别使用 hash 和 history 两种实现方式回答上面的两个核心题目。

hash 实现

       
  • hash 是 URL 中 hash (
    1. #
    复制代码
    ) 及反面的那部门,常用作锚点在页面内举行导航,改变 URL 中的 hash 部门不会引起页面刷新   
  • 通过 hashchange 事件监听 URL 的变化,改变 URL 的方式只有这几种:通过欣赏器进步后退改变 URL、通过
    1. 标签改变 URL、通过wind
    复制代码
    ow.location改变URL,这几种环境改变 URL 都会触发 hashchange 事件

history 实现

       
  • history 提供了 pushState 和 replaceState 两个方法,这两个方法改变 URL 的 path 部门不会引起页面刷新   
  • history 提供雷同 hashchange 事件的 popstate 事件,但 popstate 事件有些不同:通过欣赏器进步后退改变 URL 时会触发 popstate 事件,通过
    1. pushState/replaceState
    复制代码
    或标签改变 URL 不会触发 popstate 事
    1. 件。好在我们可以拦截 pushState/r
    复制代码
    eplaceState的调用和标签的点击事件来检测 URL 变化,以是监听 URL 变化可以实现,只是没有 hashchange 那么方便。

原生JS版前端路由实现

基于上节讨论的两种实现方式,分别实现 hash 版本和 history 版本的路由,示例使用原生 HTML/JS 实现,不依靠任何框架。



基于 hash 实现

运行效果:

HTML 部门:
  1. <body>
  2.   <ul>
  3. ref="">    <!-- 定义路由 -->
  4.     <li><a href="#/home" rel="external nofollow" >home</a></li>
  5.     <li><a href="#/about" rel="external nofollow" >about</a></li>
  6. ref="">    <!-- 渲染路由对应的 UI -->
  7.     <div id="routeView"></div>
  8.   </ul>
  9. </body>
复制代码
JavaScript 部门:
  1. // 页面加载完不会触发 hashchange,这里主动触发一次 hashchange 事件
  2. window.addEventListener('DOMContentLoaded', onLoad)
  3. // 监听路由变化
  4. window.addEventListener('hashchange', onHashChange)
  5. // 路由视图
  6. var routerView = null
  7. function onLoad () {
  8.   routerView = document.querySelector('#routeView')
  9.   onHashChange()
  10. }
  11. // 路由变化时,根据路由渲染对应 UI
  12. function onHashChange () {
  13.   switch (location.hash) {
  14.     case '#/home':
  15.       routerView.innerHTML = 'Home'
  16.       return
  17.     case '#/about':
  18.       routerView.innerHTML = 'About'
  19.       return
  20.     default:
  21.       return
  22.   }
  23. }
复制代码


基于 history 实现

运行效果:

HTML 部门:
  1. <body>
  2.   <ul>
  3.     <li><a href='/home'>home</a></li>
  4.     <li><a href='/about'>about</a></li>
  5.     <div id="routeView"></div>
  6.   </ul>
  7. </body>
复制代码
JavaScript 部门:
  1. // 页面加载完不会触发 hashchange,这里主动触发一次 hashchange 事件
  2. window.addEventListener('DOMContentLoaded', onLoad)
  3. // 监听路由变化
  4. window.addEventListener('popstate', onPopState)
  5. // 路由视图
  6. var routerView = null
  7. function onLoad () {
  8.   routerView = document.querySelector('#routeView')
  9.   onPopState()
  10. href="">  // 拦截 <a> 标签点击事件默认行为, 点击时使用 pushState 修改 URL并更新手动 UI,从而实现点击链接更新 URL 和 UI 的效果。
  11.   var linkList = document.querySelectorAll('a[href]')
  12.   linkList.forEach(el => el.addEventListener('click', function (e) {
  13.     e.preventDefault()
  14.     history.pushState(null, '', el.getAttribute('href'))
  15.     onPopState()
  16.   }))
  17. }
  18. // 路由变化时,根据路由渲染对应 UI
  19. function onPopState () {
  20.   switch (location.pathname) {
  21.     case '/home':
  22.       routerView.innerHTML = 'Home'
  23.       return
  24.     case '/about':
  25.       routerView.innerHTML = 'About'
  26.       return
  27.     default:
  28.       return
  29.   }
  30. }
复制代码
React 版前端路由实现

基于 hash 实现

运行效果:

使用方式和 react-router 雷同:
  1.   <BrowserRouter>
  2.     <ul>
  3.       <li>
  4.         <Link to="/home">home</Link>
  5.       </li>
  6.       <li>
  7.         <Link to="/about">about</Link>
  8.       </li>
  9.     </ul>
  10.     <Route path="/home" render={() => <h2>Home</h2>} />
  11.     <Route path="/about" render={() => <h2>About</h2>} />
  12.   </BrowserRouter>
复制代码
BrowserRouter 实现
  1. export default class BrowserRouter extends React.Component {
  2.   state = {
  3.     currentPath: utils.extractHashPath(window.location.href)
  4.   };
  5.   onHashChange = e => {
  6.     const currentPath = utils.extractHashPath(e.newURL);
  7.     console.log("onHashChange:", currentPath);
  8.     this.setState({ currentPath });
  9.   };
  10.   componentDidMount() {
  11.     window.addEventListener("hashchange", this.onHashChange);
  12.   }
  13.   componentWillUnmount() {
  14.     window.removeEventListener("hashchange", this.onHashChange);
  15.   }
  16.   render() {
  17.     return (
  18.       <RouteContext.Provider value={{currentPath: this.state.currentPath}}>
  19.         {this.props.children}
  20.       </RouteContext.Provider>
  21.     );
  22.   }
  23. }
复制代码
Route 实现
  1. export default ({ path, render }) => (
  2.   <RouteContext.Consumer>
  3.     {({currentPath}) => currentPath === path && render()}
  4.   </RouteContext.Consumer>
  5. );
复制代码
Link 实现
  1. export default ({ to, ...props }) => <a {...props} href={"#" + to} />;
复制代码
基于 history 实现

运行效果:

使用方式和 react-router 雷同:
  1.   <HistoryRouter>
  2.     <ul>
  3.       <li>
  4.         <Link to="/home">home</Link>
  5.       </li>
  6.       <li>
  7.         <Link to="/about">about</Link>
  8.       </li>
  9.     </ul>
  10.     <Route path="/home" render={() => <h2>Home</h2>} />
  11.     <Route path="/about" render={() => <h2>About</h2>} />
  12.   </HistoryRouter>
复制代码
HistoryRouter 实现
  1. export default class HistoryRouter extends React.Component {
  2.   state = {
  3.     currentPath: utils.extractUrlPath(window.location.href)
  4.   };
  5.   onPopState = e => {
  6.     const currentPath = utils.extractUrlPath(window.location.href);
  7.     console.log("onPopState:", currentPath);
  8.     this.setState({ currentPath });
  9.   };
  10.   componentDidMount() {
  11.     window.addEventListener("popstate", this.onPopState);
  12.   }
  13.   componentWillUnmount() {
  14.     window.removeEventListener("popstate", this.onPopState);
  15.   }
  16.   render() {
  17.     return (
  18.       <RouteContext.Provider value={{currentPath: this.state.currentPath, onPopState: this.onPopState}}>
  19.         {this.props.children}
  20.       </RouteContext.Provider>
  21.     );
  22.   }
  23. }
复制代码
Route 实现
  1. export default ({ path, render }) => (
  2.   <RouteContext.Consumer>
  3.     {({currentPath}) => currentPath === path && render()}
  4.   </RouteContext.Consumer>
  5. );
复制代码
Link 实现
  1. export default ({ to, ...props }) => (
  2.   <RouteContext.Consumer>
  3.     {({ onPopState }) => (
  4.       <a
  5.         href=""
  6.         {...props}
  7.         onClick={e => {
  8.           e.preventDefault();
  9.           window.history.pushState(null, "", to);
  10.           onPopState();
  11.         }}
  12.       />
  13.     )}
  14.   </RouteContext.Consumer>
  15. );
复制代码
Vue 版本前端路由实现

基于 hash 实现

运行效果:

使用方式和 vue-router 雷同(vue-router 通过插件机制注入路由,但是如许隐蔽了实现细节,为了保持代码直观,这里没有使用 Vue 插件封装):
  1.     <div>
  2.       <ul>
  3.         <li><router-link to="/home">home</router-link></li>
  4.         <li><router-link to="/about">about</router-link></li>
  5.       </ul>
  6.       <router-view></router-view>
  7.     </div>
  8. const routes = {
  9.   '/home': {
  10.     template: '<h2>Home</h2>'
  11.   },
  12.   '/about': {
  13.     template: '<h2>About</h2>'
  14.   }
  15. }
  16. const app = new Vue({
  17.   el: '.vue.hash',
  18.   components: {
  19.     'router-view': RouterView,
  20.     'router-link': RouterLink
  21.   },
  22.   beforeCreate () {
  23.     this.$routes = routes
  24.   }
  25. })
复制代码
router-view 实现:
  1. <template>
  2.   <component :is="routeView" />
  3. </template>
  4. <script>
  5. import utils from '~/utils.js'
  6. export default {
  7.   data () {
  8.     return {
  9.       routeView: null
  10.     }
  11.   },
  12.   created () {
  13.     this.boundHashChange = this.onHashChange.bind(this)
  14.   },
  15.   beforeMount () {
  16.     window.addEventListener('hashchange', this.boundHashChange)
  17.   },
  18.   mounted () {
  19.     this.onHashChange()
  20.   },
  21.   beforeDestroy() {
  22.     window.removeEventListener('hashchange', this.boundHashChange)
  23.   },
  24.   methods: {
  25.     onHashChange () {
  26.       const path = utils.extractHashPath(window.location.href)
  27.       this.routeView = this.$root.$routes[path] || null
  28.       console.log('vue:hashchange:', path)
  29.     }
  30.   }
  31. }
  32. </script>
复制代码
router-link 实现:
  1. <template>
  2.   <a @click.prevent="onClick" href=''><slot></slot></a>
  3. </template>
  4. <script>
  5. export default {
  6.   props: {
  7.     to: String
  8.   },
  9.   methods: {
  10.     onClick () {
  11.       window.location.hash = '#' + this.to
  12.     }
  13.   }
  14. }
  15. </script>
复制代码
基于 history 实现

运行效果:

使用方式和 vue-router 雷同:
  1.     <div>
  2.       <ul>
  3.         <li><router-link to="/home">home</router-link></li>
  4.         <li><router-link to="/about">about</router-link></li>
  5.       </ul>
  6.       <router-view></router-view>
  7.     </div>
  8. const routes = {
  9.   '/home': {
  10.     template: '<h2>Home</h2>'
  11.   },
  12.   '/about': {
  13.     template: '<h2>About</h2>'
  14.   }
  15. }
  16. const app = new Vue({
  17.   el: '.vue.history',
  18.   components: {
  19.     'router-view': RouterView,
  20.     'router-link': RouterLink
  21.   },
  22.   created () {
  23.     this.$routes = routes
  24.     this.boundPopState = this.onPopState.bind(this)
  25.   },
  26.   beforeMount () {
  27.     window.addEventListener('popstate', this.boundPopState)
  28.   },
  29.   beforeDestroy () {
  30.     window.removeEventListener('popstate', this.boundPopState)
  31.   },
  32.   methods: {
  33.     onPopState (...args) {
  34.       this.$emit('popstate', ...args)
  35.     }
  36.   }
  37. })
复制代码
router-view 实现:
  1. <template>
  2.   <component :is="routeView" />
  3. </template>
  4. <script>
  5. import utils from '~/utils.js'
  6. export default {
  7.   data () {
  8.     return {
  9.       routeView: null
  10.     }
  11.   },
  12.   created () {
  13.     this.boundPopState = this.onPopState.bind(this)
  14.   },
  15.   beforeMount () {
  16.     this.$root.$on('popstate', this.boundPopState)
  17.   },
  18.   beforeDestroy() {
  19.     this.$root.$off('popstate', this.boundPopState)
  20.   },
  21.   methods: {
  22.     onPopState (e) {
  23.       const path = utils.extractUrlPath(window.location.href)
  24.       this.routeView = this.$root.$routes[path] || null
  25.       console.log('[Vue] popstate:', path)
  26.     }
  27.   }
  28. }
  29. </script>
复制代码
router-link 实现:
  1. <template>
  2.   <a @click.prevent="onClick" href=''><slot></slot></a>
  3. </template>
  4. <script>
  5. export default {
  6.   props: {
  7.     to: String
  8.   },
  9.   methods: {
  10.     onClick () {
  11.       history.pushState(null, '', this.to)
  12.       this.$root.$emit('popstate')
  13.     }
  14.   }
  15. }
  16. </script>
复制代码
小结

前端路由的核心实现原理很简单,但是联合详细框架后,框架增加了很多特性,如动态路由、路由参数、路由动画等等,这些导致路由实现变的复杂。本文去粗取精只针对前端路由最核心部门的实现举行分析,并基于 hash 和 history 两种模式,分别提供原生JS/React/Vue 三种实现,共计六个实现版本供参考,希望对你有所资助。
全部的示例的代码放在 Github 堆栈:https://github.com/whinc/web-router-principle

参考

详解单页面路由的几种实现原理
单页面应用路由实现原理:以 React-Router 为例
到此这篇关于react实现欣赏器主动刷新的示例代码的文章就介绍到这了,更多相干react 欣赏器主动刷新内容请搜索脚本之家从前的文章或继续欣赏下面的相干文章希望大家以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作