js-设计模式-命令模式-路由跳转

最新推荐文章于 2024-05-04 14:53:30 发布

道甚夷

最新推荐文章于 2024-05-04 14:53:30 发布

阅读量229

点赞数

分类专栏：设计模式文章标签： javascript 设计模式命令模式

本文链接：https://blog.csdn.net/junjiahuang/article/details/126645121

版权

设计模式专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文介绍了前端路由的两种常见模式——History模式和Hash模式，并通过一个简单的JavaScript示例展示了如何使用命令模式来实现这两种路由。在History模式中，路由改变不会在URL中显示#符号，而Hash模式则会在URL中显示#及其后的路径。通过监听窗口的事件，可以实现实时响应URL变化并执行相应的页面操作。文章还提供了启动这两种模式的方法，以及如何为不同链接设置路由回调函数。

摘要由CSDN通过智能技术生成

路由跳转是很典型的命令模式，设计者不知道开发者需要什么路径（请求的接收者），路径对应的页面是什么（被请求的操作），所以设计者提供路由命令给开发者去设置，从而分离路径和跳转页面两个对象。

温馨提示：

npm 安装 http-server
使用http-server开启服务跑history模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <h3>history 路由</h3>
    <a href="/">首页</a>
    <a href="/list">用户列表</a>
    <a href="/my">关于我们</a>
    <a href="">其他</a>
  </div>

  <div>
    <h3>hash 路由</h3>
    <a href="#">首页</a>
    <a href="#list">用户列表</a>
    <a href="#my">关于我们</a>
    <a href="">其他</a>
  </div>
  
  <script>
    
    const Router = {
      base: {
        routes: [],
        route(path, cb) {
          this.routes[path] = cb || function() {}
        }
      },
      history: {
        go(path) {
          if(!Object.keys(this.routes).includes(path)) path = '/' 
          window.history.pushState({path}, null, path)
          this.routes[path]()
        }
      },
      hash:{
        startListenEvent() {
          window.addEventListener('load', this.refresh.bind(this))
          window.addEventListener('hashchange', this.refresh.bind(this))
        },
        refresh() {
          const path = `/${window.location.hash.slice(1)||''}`
          this.routes[path]()
        },
      },
      start(mode) {
        let router = Object.assign(this[mode], this.base)
        if(mode === 'hash') {
          router.startListenEvent()
        }
        return router
      }
    }

    // history
    let router = Router.start('history')
    router.route('/', () => console.log('首页'))
    router.route('/my', () => console.log('我的'))
    router.route('/list', () => console.log('列表'))
    console.log(router.routes)
    
    document.querySelectorAll('a').forEach(el => {
      el.addEventListener('click', function(e) {
        let href = e.target.getAttribute('href')
        router.go(href)
        e.preventDefault()
      })
    })
    
    // hash
    let router2 = Router.start('history')
    router2.route('#', () => console.log('首页hash'))
    router2.route('#list', () => console.log('列表hash'))
    router2.route('#my', () => console.log('我的hash'))



  </script>    
</body>
</html>