zoukankan      html  css  js  c++  java
  • 前端路由实现原理

    BOM对象;tips:为啥在这罗列下BOM,因为下面实现的两种路由模式中用到location、history中的属性和方法
    window对象,JS顶层对象,其他的BOM对象都是window对象的属性;
    document对象,文档对象;
    location对象,浏览器当前URL信息;
    navigator对象,浏览器本身信息;
    screen对象,客户端屏幕信息;
    history对象,浏览器访问历史信息;

    前端路由实现原理

    基础路由

    class BaseRouter {
      constructor(list){
        this.list = list
      }
      render(state){
        //要么找到路由对应的组件,要么配置的 * 代表404页面组件
        let ele = this.list.find( item => item.path === state );
        ele = ele ? ele : this.find( item => item.path === '*')
        //ELEMENT:就当成 let zjy = document.getElementById('zjy')这种DOM
        ELEMENT.innerText = ele.component
      }
    }

    hash模式

    class HashRouter extends BaseRouter {
      constructor(list){
        super(list)
        //history模式同理
        //初次加载配置跟路由的页面组件
        this.handler()
        //添加监听,加载组件页面
        window.addEventListener('hashchange',()=>{
          this.handler()
        },false)
      }
      handler(){
        this.render(this.getState())
      }
      getState(){
        const hash = location.hash
        return hash ? hash.splice('1') : '/'
      }
      push(path){
        location.hash = path
      }
      getUrl(path){
        const href = location.href
        const index = href.indexOf('#')
        const base = index >= 0 ? href.splice(index) : href
        return `${base}#${path}`
      }
      replace(path){
        location.replace(this.getUrl(path))
      }
      go(n){
        history.go(n)
      }
    }

    history模式

    class HistoryRouter extends BaseRouter {
      constructor(list){
        super(list)
        this.handler()
        window.addEventListener('popstate',()=>{
          this.handler()
        },false)
      }
      handler(){
        this.render(this.getState())
      }
      getState(){
        const path = location.pathname
        return path ? path : '/'
      }
      push(path){
        history.pushState(null,null,path)
        this.handler()
      }
      replace(path){
        history.replaceState(null,null,path)
        this.handler()
      }
      go(n){
        history.go(n)
      }
    }
    

      

  • 相关阅读:
    SharePoint服务器场环境安装升级补丁的详细步骤
    备注:常用Js脚本
    XMLHttpRequest对象使用示例
    TroubleShoot: SharePoint管理中心503错误,由于配置问题,无法加载模块 DLLowssvr.dll
    递归获取SharePoint文档库文件夹内的所有文件
    Datatable分页通用方法
    递归绑定树形菜单
    sharepoint发布站点匿名登陆访问不了文档库和表单库的解决办法
    Microsoft Office SharePoint Server 2007的文件目录结构
    Sharepoint母版页的应用
  • 原文地址:https://www.cnblogs.com/zhenjianyu/p/12965857.html
Copyright © 2011-2022 走看看