如何为SPA创建普通的JS路由? [英] How to create a vanilla JS routing for SPA?

问题描述

我正在创建一个没有框架/工具/库的Web应用程序，所有的都是Vanilla JS.我正在以一种反应式"风格进行操作.

I'm creating a web app with no frameworks/tools/libraries, all Vanilla JS. I'm doing it in more of a 'React' style.

我想调用我的views/pages/dashboard.js中的视图，显示该视图并在用户单击仪表板导航链接时更改URL.这是导航栏: https://codepen.io/Aurelian/pen/EGJvZW .

I'd like to call a view that is in my views/pages/dashboard.js, display that view and change the URL when the user clicks the dashboard nav link. This is the navbar: https://codepen.io/Aurelian/pen/EGJvZW.

将子导航项集成到路由中也许很好.如果用户位于个人资料上的GitHub文件夹中，该怎么办呢?该如何在URL中显示呢?

Perhaps it'd be nice to integrate the sub-nav items into the routing. What if the user is in the GitHub folder on profile, how would I display that in the URL as well?

如何为此创建路由?

GitHub仓库为 https://github.com/AurelianSpodarec/JS_GitHub_Replica/tree/master/src/js

The GitHub repo is https://github.com/AurelianSpodarec/JS_GitHub_Replica/tree/master/src/js

这是我尝试过的:

document.addEventListener("DOMContentLoaded", function() {
    var Router = function (name, routes) {
        return {
            name: name,
            routes: routes
        }
    };
    var view = document.getElementsByClassName('main-container');
    var myRouter = new Router('myRouter', [
        {
            path: '/',
            name: "Dahsboard"
        },
        {
            path: '/todo',
            name: "To-Do"
        },
        {
            path: '/calendar',
            name: "Calendar"
        }
    ]);
    var currentPath = window.location.pathname;
    if (currentPath === '/') {
        view.innerHTML = "You are on the Dashboard";
        console.log(view);
    } else {
        view.innerHTML = "you are not";
    }
});

推荐答案

正如我在评论中所说，监听 popstate 并使用井号(#)方法是在JS中进行路由的最简单方法.

As i said in the comments, listening for popstate and using the hashtag (#) method is the easiest way to do routing in JS.

这是路由器最裸露的骨头:

This is the most bare bones for a router:

//App area
var appArea = document.body.appendChild(document.createElement("div"));
//Registered routes
var routes = [
    {
        url: '', callback: function () {
            appArea.innerHTML = "<h1>Home</h1><a href=\"#todo\">To-Do</a><br/><a href=\"#calendar\">Calendar</a>";
        }
    }
];
//Routing function
function Routing() {
    var hash = window.location.hash.substr(1).replace(/\//ig, '/');
    //Default route is first registered route
    var route = routes[0];
    //Find matching route
    for (var index = 0; index < routes.length; index++) {
        var testRoute = routes[index];
        if (hash == testRoute.url) {
            route = testRoute;
        }
    }
    //Fire route
    route.callback();
}
//Listener
window.addEventListener('popstate', Routing);
//Initial call
setTimeout(Routing, 0);
//Add other routes
routes.push({ url: "todo", callback: function () { appArea.innerHTML = "<h1>To-Do</h1><a href=\"#\">Home</a><br/><a href=\"#calendar\">Calendar</a>"; } });
routes.push({ url: "calendar", callback: function () { appArea.innerHTML = "<h1>Calendar</h1><a href=\"#\">Home</a></br><a href=\"#todo\">To-Do</a>"; } });

现在，在任何实际环境中，您都需要可重用的DOM元素和作用域卸载函数，因此，上面的内容应该看起来像这样:

Now in any real context you would want reusable DOM elements and scope-unload functions so here is how the above should probably look:

// ## Class ## //
var Router = /** @class */ (function () {
    function Router() {
    }
    //Initializer function. Call this to change listening for window changes.
    Router.init = function () {
        //Remove previous event listener if set
        if (this.listener !== null) {
            window.removeEventListener('popstate', this.listener);
            this.listener = null;
        }
        //Set new listener for "popstate"
        this.listener = window.addEventListener('popstate', function () {
            //Callback to Route checker on window state change
            this.checkRoute.call(this);
        }.bind(this));
        //Call initial routing as soon as thread is available
        setTimeout(function () {
            this.checkRoute.call(this);
        }.bind(this), 0);
        return this;
    };
    //Adding a route to the list
    Router.addRoute = function (name, url, cb) {
        var route = this.routes.find(function (r) { return r.name === name; });
        url = url.replace(/\//ig, '/');
        if (route === void 0) {
            this.routes.push({
                callback: cb,
                name: name.toString().toLowerCase(),
                url: url
            });
        }
        else {
            route.callback = cb;
            route.url = url;
        }
        return this;
    };
    //Adding multiple routes to list
    Router.addRoutes = function (routes) {
        var _this = this;
        if (routes === void 0) { routes = []; }
        routes
            .forEach(function (route) {
            _this.addRoute(route.name, route.url, route.callback);
        });
        return this;
    };
    //Removing a route from the list by route name
    Router.removeRoute = function (name) {
        name = name.toString().toLowerCase();
        this.routes = this.routes
            .filter(function (route) {
            return route.name != name;
        });
        return this;
    };
    //Check which route to activate
    Router.checkRoute = function () {
        //Get hash
        var hash = window.location.hash.substr(1).replace(/\//ig, '/');
        //Default to first registered route. This should probably be your 404 page.
        var route = this.routes[0];
        //Check each route
        for (var routeIndex = 0; routeIndex < this.routes.length; routeIndex++) {
            var routeToTest = this.routes[routeIndex];
            if (routeToTest.url == hash) {
                route = routeToTest;
                break;
            }
        }
        //Run all destroy tasks
        this.scopeDestroyTasks
            .forEach(function (task) {
            task();
        });
        //Reset destroy task list
        this.scopeDestroyTasks = [];
        //Fire route callback
        route.callback.call(window);
    };
    //Register scope destroy tasks
    Router.onScopeDestroy = function (cb) {
        this.scopeDestroyTasks.push(cb);
        return this;
    };
    //Tasks to perform when view changes
    Router.scopeDestroyTasks = [];
    //Registered Routes
    Router.routes = [];
    //Listener handle for window events
    Router.listener = null;
    Router.scopeDestroyTaskID = 0;
    return Router;
}());
// ## Implementation ## //
//Router area
var appArea = document.body.appendChild(document.createElement("div"));
//Start router when content is loaded
document.addEventListener("DOMContentLoaded", function () {
    Router.init();
});
//Add dashboard route
Router.addRoute("dashboard", "", (function dashboardController() {
    //Scope specific elements
    var header = document.createElement("h1");
    header.textContent = "Dashboard";
    //Return initializer function
    return function initialize() {
        //Apply route
        appArea.appendChild(header);
        //Destroy elements on exit
        Router.onScopeDestroy(dashboardExitController);
    };
    //Unloading function
    function dashboardExitController() {
        appArea.removeChild(header);
    }
})());
//Add dashboard route
Router.addRoute("dashboard", "", (function dashboardController() {
    //Scope specific elements
    var header = document.createElement("h1");
    header.textContent = "Dashboard";
    var links = document.createElement("ol");
    links.innerHTML = "<li><a href=\"#todo\">To-Do</a></li><li><a href=\"#calendar\">Calendar</a></li>";
    //Return initializer function
    return function initialize() {
        //Apply route
        appArea.appendChild(header);
        appArea.appendChild(links);
        //Destroy elements on exit
        Router.onScopeDestroy(dashboardExitController);
    };
    //Unloading function
    function dashboardExitController() {
        appArea.removeChild(header);
        appArea.removeChild(links);
    }
})());
//Add other routes
Router.addRoutes([
    {
        name: "todo",
        url: "todo",
        callback: (function todoController() {
            //Scope specific elements
            var header = document.createElement("h1");
            header.textContent = "To-do";
            var links = document.createElement("ol");
            links.innerHTML = "<li><a href=\"#\">Dashboard</a></li><li><a href=\"#calendar\">Calendar</a></li>";
            //Return initializer function
            return function initialize() {
                //Apply route
                appArea.appendChild(header);
                appArea.appendChild(links);
                //Destroy elements on exit
                Router.onScopeDestroy(todoExitController);
            };
            //Unloading function
            function todoExitController() {
                appArea.removeChild(header);
                appArea.removeChild(links);
            }
        })()
    },
    {
        name: "calendar",
        url: "calendar",
        callback: (function calendarController() {
            //Scope specific elements
            var header = document.createElement("h1");
            header.textContent = "Calendar";
            var links = document.createElement("ol");
            links.innerHTML = "<li><a href=\"#\">Dashboard</a></li><li><a href=\"#todo\">To-Do</a></li>";
            //Return initializer function
            return function initialize() {
                //Apply route
                appArea.appendChild(header);
                appArea.appendChild(links);
                //Destroy elements on exit
                Router.onScopeDestroy(calendarExitController);
            };
            //Unloading function
            function calendarExitController() {
                appArea.removeChild(header);
                appArea.removeChild(links);
            }
        })()
    }
]);

这篇关于如何为SPA创建普通的JS路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！