← на главную
ПостыТеги

Vanilla JS роутер за 40 ~~секунд~~ строк

export class Router {
    constructor({
        root,
        routes
    }) {
        this.root = root || '/';
        this.routes = routes || [];
        this.listen();
    }

    removeCornerSlashes = (path) =>
        path.toString()
        .replace(/\/$/, '')
        .replace(/^\//, '');

    getFragment() {
        let fragment = this.removeCornerSlashes(decodeURI(window.location.pathname + window.location.search));
        fragment = fragment.replace(/\?(.*)$/, '');
        fragment = this.root !== '/' ? fragment.replace(this.root, '') : fragment;
        return this.removeCornerSlashes(fragment);
    }

    navigate(path = '') {
        window.history.pushState(null, null, this.root + this.removeCornerSlashes(path));
    }

    listen() {
        clearInterval(this.interval);
        this.interval = setInterval(this.interval.bind(this), 50);
    }

    interval() {
        if (this.current === this.getFragment()) return;
        this.current = this.getFragment();
        this.routes.some(route => {
            const match = this.current.match(route.path);
            if (match) {
                match.shift();
                route.callback.apply({}, match);
                return match;
            }
            return false;
        });
    }
}
router.js

Применение

window['router'] = new Router({
    root: '/',
    routes: {
        path: /feed\/(.*)/,
        callback: (id) => {},
    },
    {
        path: '',
        callback: () => {}
    }
});


window['router'].navigate('feed/2');
main.js

UPD 18.12.2019: Я переехал на 11ty и генерацию статики, поэтому данный код больше не используется.

Пока никто не ответил 🥺. Если у тебя есть ответ — пришли мне вебменшен!