Sistema de rutas solo con Javascript

Publicada el por

Router simple con Javascript

He creado una pequeña librería para poder crear rutas y poder cargar html y/o templates.

El sistema es muy sencillo pero permite tener un sistema de rutas sin tener que usar ningún framework.

Tienes el código directamente o puedes bajarte el código desde su Github y puedes probar el sistema de rutas en Javascript desde aquí

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Router nativo</title>
</head>

<body>
    <main>

    </main>
    <ul>
        <li><a href="#list">List</a></li>
        <li><a href="#edit">Edit</a></li>
        <li><a href="#templateA">TemplateA</a></li>
        <li><a href="#templateB">TemplateB</a></li>
    </ul>
    <data-route-view></data-route-view>
    <template id="list">
        <h1>LISTADO</h1>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </template>
    <template id="edit">
        <h1>LISTADO</h1>
        <ul>
            <li><input type="text" value="A"></li>
            <li><input type="text" value="B"></li>
            <li><input type="text" value="C"></li>
            <li><input type="text" value="D"></li>
        </ul>
    </template>

    <script src="./simpleRotuer.js"></script>
    <script>
        window.onload = function() {
            window.router.init([{
                path: "/list",
                view: "<h1>Listado</h1>"
            }, {
                path: "/edit",
                view: "<h1>Edición</h1>"
            }, {
                path: "/templateA",
                view: "#list"
            }, {
                path: "/templateB",
                view: "#edit"
            }]);
        };
    </script>
</body>

</html>

simpleRouter.js

window.router = ((win, doc) => {
    if ("onhashchange" in window) {
        let configRouter = {
            supportTemplate: false,
            route: []
        };
        const errors = {
            notSupportTemplates: "NO TIENES SOPORTE PARA TEMPLATE, USA HTML DIRECTAMENTE EN LA PROPIEDAD 'VIEW'",
            notPathConfigure: "COMPRUEBA QUE ESTÁ DEFINIA LA RUTA Y/O LA PROPIEDAD 'PATH' DENTRO DE LA CONFIGURACIÓN DE RUTAS"
        };
        const info = {
            loadTemplate: "CARGANDO TEMPLATE",
            loadHTML: "CARGANDO HTML",
            routerOK: "DEFINIDO ROUTER DENTRO DE WINDOW"
        };
        let setSupportTemplate = estado => configRouter.supportTemplate = estado;
        let loadView = () => doc.querySelector("data-route-view");
        let renderTemplate = (template, dest) => {
            let clone = doc.importNode(doc.querySelector(template).content, true);
            dest.appendChild(clone);
        };
        let render = (type, destino, contenido) => {
            if (type.toUpperCase() === "TEMPLATE") {
                cleanRouterView();
                renderTemplate(destino, contenido);
            }
            if (type.toUpperCase() === "HTML") {
                cleanRouterView();
                contenido.innerHTML = destino;
            }
        };
        let cleanRouterView = () => doc.querySelector("data-route-view").innerHTML = "";
        let init = (rutas) => {
            configRouter.route = rutas;
            win.addEventListener("hashchange", () => {
                let _notDefinedPath = true;
                for (_index in configRouter.route) {
                    if (location.hash.replace("#", "/") === configRouter.route[_index].path) {
                        _notDefinedPath = true;
                        let _view = loadView();
                        if (configRouter.route[_index].view.indexOf("#") >= 0) {
                            if (!configRouter.supportTemplate) {
                                console.log(errors.notSupportTemplates);
                                return false;
                            }
                            render("TEMPLATE", configRouter.route[_index].view, _view);
                        } else {
                            render("HTML", configRouter.route[_index].view, _view);
                        }
                        return false;
                    }
                }
                if (!_notDefinedPath) {
                    console.log(errors.notPathConfigure);
                }
            });
            console.log(info.routerOK);
        };
        return {
            init: function (rutas) {
                if ('content' in document.createElement('template')) {
                    console.log("TIENES SOPORTE PARA TEMPLATE");
                    setSupportTemplate(true);
                } else {
                    console.log("NO TIENES SOPORTE PARA TEMPLATE");
                    setSupportTemplate(false);
                }
                init(rutas);
            }
        }
    } else {
        console.log("NO TIENES SOPORTE PARA EL EVENTO HASHCHANGE");
    }
})(window, document);