番外篇二--模拟手写一个BrowserHistory库

384 阅读1分钟

前端渣渣也只有模拟的份,这个库是类比react的history来实现的。

<!--既然是个库(实验库),我们要也把他导处去!-->
export default function creatBrowserHistory() {
    const globalHistory = window.history;
    let listeners = [];
    let initLocation = {
        pathname = window.locaton.pathname,
        // 用来保存李对象上的状态这就是为什么浏览器刷新之后还是会看到当前页面的状态。
        state: globalHistory.state
    };
    function createHref(location) {
        return `${location.protocol}${location.host}${location.pathname}${location.search}${location.hash}`
    }
    // 更新history对象里的action,location,length,并触发发布
    function setState(state) {
        Object.assign(history, state);
        history.length = glonalHistroy.length;
        listeners.forEach(listener=> listener);
    }
    function listen(listener) {
        listeners.push(listener);
    }
    function push(path, state) {
        const action = 'PUSH',
        const location = { path, state };
        globalHistory.pushState(state, null, path);
        setState({action, location});
    }
    function replace(path, state) {
        const action = 'REPLACE';
        const location = {state, path };
        globalHistory.pushState(state, null, path);
        setState({action, location});
    }
    function go(n) {
        globalHistory.go(n)
    }
    function goBack() {
        globalHistory.go(-1)
    }
    function goForward() {
        globalHistory.go(1)
    }
    let isBlock;
    function block(prompt) {
        isBlock = prompt
    }
    let history = {
        length: globalHistory.length,
        action: 'POP',
        location: initialLocation,
        createHref,
        listen,
        push,
        replace,
        go,
        goBack,
        goForward,
        block
    }
    return history;
}