专栏名称: __ihhu
前段
目录
相关文章推荐
前端早读课  ·  【3456期】7种在 JavaScript ... ·  17 小时前  
前端大全  ·  从 DeepSeek 看25年前端的一个小趋势 ·  3 天前  
前端大全  ·  10年了,开发人员仍然不明白 ... ·  2 天前  
前端早读课  ·  【第3455期】快手主站前端工程化探索:Gu ... ·  2 天前  
51好读  ›  专栏  ›  __ihhu

JavaScript系列——探索history源码之hashHistory的实现

__ihhu  · 掘金  · 前端  · 2018-01-02 01:57

正文

history简介

我们不探寻它的历史,只关注技术,通常有2种history,分别是hashHistory和browserHistory,本文带领大家从零开始实现一个hashHistory。

hashHistory:'#/home'
browserHistory: '/home'

下面的实现方案是根据官方history源码来分析的,你可以下载 hashHistory源码 结合本文学习。

实现方案

1、创建createHashHistory函数

const createHashHistory = () => { 
    const history = {}
    return history
}
export default createHashHistory

2、先要了解history对象长什么样,接着,我们一个个去实现它

history = {
    length: 1, //Number
    action: "POP", //String
    location: {}, //Object
    createHref, //函数
    push, //函数
    replace, //函数
    go, //函数
    goBack, //函数
    goForward, //函数
    listen //函数
}

3、实现length
在window下面有一个history对象,可以用来获取length。

const globalHistory = window.history
history = {
    length: globalHistory.length
}

4、action默认为POP,它还可能是PUSH或者REPLACE。我们不在这一步实现它,等下面实现push和replace的时候再来实现。

5、实现location
location对象包含下面几个key,这里能用到的是pathname。history.location和window.location是不一样的,history.location是window.location的精简版。你可以在浏览器控制台打印window.location看一下完整的location对象。

location = {
    hash:"",
    pathname:"/",
    search:"",
    state:undefined
}

定义一个getDOMLocation函数,用来获取封装后的location。

const decodePath = path =>
  path.charAt(0) === "/" ? path : "/" + path

const getHashPath = () => {
    //如果url存在#,则去掉#,返回路径
    //比如:"http://localhost:8080/#/",返回'/'
    const href = window.location.href
    const hashIndex = href.indexOf("#")
    return hashIndex === -1 ? "" : href.substring(hashIndex + 1)
}

const getDOMLocation = () => {
    //getHashPath截取url的路由,如果存在#,则去掉#
    let path = decodePath(getHashPath())     
    //创建location
    return createLocation(path)
}

这一步的核心就是createLocation()的实现。但是,它不复杂,只是代码有点长,如果要了解,请看源码 createLocation

6、实现createHref
你可能没有用过history.createHref(),它用来创建一个hash路由,也就是'#/'或者'#/home'这类的。

const createPath = location => {
  const { pathname, search, hash } = location
  let path = pathname || "/"
  if (search && search !== "?")
    path += search.charAt(0) === "?" ? search : `?${search}`
  if (hash && hash !== "#") path += hash.charAt(0) === "#" ? hash : `#${hash}`
  return path
}

const createHref = location =>
    "#" + encodePath(createPath(location))

7、实现push方法
我们在使用push的时候,通常是history.push('/home')这种形式,不需要自己加#。
push实现的原理:判断push传入的路由和当前url的路由是否一样,如果一样,则不更新路由,否则就更新路由。

//更新history对象的值,length、location和action
const setState = nextState => {
    Object.assign(history, nextState)    
    history.length = globalHistory.length        
    transitionManager.notifyListeners(history.location, history.action)
}
//notifyListeners函数用来通知history的更新
 const notifyListeners = (...args) => {
    listeners.forEach(listener => listener(...args))
  }
//更新路由
const pushHashPath = path => (window.location.hash = path)

//push核心代码
const push = (path, state) => {
    //更新action为'PUSH'
    const action = "PUSH"
    //更新location对象
    const location = createLocation(
       path,
       undefined,
       undefined,
       history.location
    )   
    //更新路由前的确认操作,confirmTransitionTo函数内部会处理好路由切换的状态判断,如果ok,则执行最后一个参数,它是回调函数。
    transitionManager.confirmTransitionTo(
       location,
       action,
       getUserConfirmation,
       ok => {
           //如果不符合路由切换的条件,就不更新路由
           if (!ok) return               
           //获取location中的路径pathname,比如'/home'
           const path = createPath(location)
           const encodedPath = encodePath(path)
           //比较当前的url中的路由和push函数传入的路由是否相同,不相同则hashChanged为true。
           const hashChanged = getHashPath() !== encodedPath          
           if (hashChanged) {
               //路由允许更新
               ignorePath = path
               //更新路由
               pushHashPath(encodedPath)              
               const prevIndex = allPaths.lastIndexOf(createPath(history.location))
               const nextPaths = allPaths.slice(0, prevIndex === -1 ? 0 : prevIndex + 1)                    
               nextPaths.push(path)
               allPaths = nextPaths     
               //setState更新history对象。               
               setState({ action, location })
          } else {
              //push的路由和当前路由一样,会发出一个警告“Hash history cannot PUSH the same path; a new entry will not be added to the history stack”
              setState()
          }
       }
    )
}

8、实现replace
replace和push都能更新路由,但是replace是更新当前路由,而push是增加一个历史记录。

//更新路由
const replaceHashPath = path => {
    const hashIndex = window.location.href.indexOf("#")   
    window.location.replace(
        window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + "#" + path
    )
}
    //replace核心代码
    const replace = (path, state) => {
        const action = "REPLACE"
        const location = createLocation(
            path,
            undefined,
            undefined,
            history.location
        )      
        transitionManager.confirmTransitionTo(
            location,
            action,
            getUserConfirmation,
            ok => {
                if (!ok) return              
                const path = createPath(location)
                const encodedPath = encodePath(path)
                const hashChanged = getHashPath() !== encodedPath  
                //到这里为止,前面的代码和push函数的实现都是一样的
                             
                if (hashChanged) {
                    ignorePath = path
                    //更新路由
                    replaceHashPath(encodedPath)
                }                
                const prevIndex = allPaths.indexOf(createPath(history.location))                
                if (prevIndex !== -1) allPaths[prevIndex] = path               
                setState({ action, location })
            }
        )
    }

9、实现go







请到「今天看啥」查看全文