如何为SPA创建普通的JS路由？

Question

我正在创建一个没有框架/工具/库的Web应用程序。为什么？没关系

所有Vanilla JS。我正在做更多的“反应”风格。我想知道，当用户单击仪表板导航链接时，如何调用我的views / pages / dashboard.js中的视图并显示该视图？

也许是子导航项。如果用户位于个人资料上的github文件夹中，该如何在网址中显示呢？

如何为此创建路由？我已阅读了观看过的YouTube视频的文章，但似乎无法在此处实现。

这是GitHUb仓库：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";
    }
});

当用户单击导航上的项目时，显示加载视图。因此，这是导航栏：https://codepen.io/Aurelian/pen/EGJvZW，我想加载正确的视图并更改url。

Answer 1

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

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

//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元素和作用域卸载函数，因此，上面的内容应如下所示：

// ## 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);
            }
        })()
    }
]);

Answer 2

制作普通 SPA 至少有两种基本方法。

哈希路由器

该策略是向 window.onhashchange 添加一个侦听器（或侦听 hashchange 事件），每当 URL 中的哈希值从 https://www.example.com/#/foo 更改为 {{1 }}。可以解析window.location.hash字符串确定路由并注入相关内容。

https://www.example.com/#/bar

历史 API

现代方法使用 History API，这对用户来说更自然，因为 URL 中不涉及哈希字符。

我使用的策略是为所有同域链接点击添加一个事件监听器。侦听器使用目标 URL 调用 window.history.pushState。

使用 popstate 事件捕获“返回”浏览器事件，该事件解析 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div id="app"></div> <script> const nav = `<a href="/#/">Home</a> | <a href="/#/about">About</a> | <a href="/#/contact">Contact</a>`; const routes = { "": `<h1>Home</h1>${nav}<p>Welcome home!</p>`, "about": `<h1>About</h1>${nav}<p>This is a tiny SPA</p>`, }; const render = path => { document.querySelector("#app") .innerHTML = routes[path.replace(/^#\//, "")] || `<h1>404</h1>${nav}`; }; window.onhashchange = evt => render(window.location.hash); render(window.location.hash); </script> </body> </html> 以调用正确的路由。

window.location.href

以上示例尽可能少。我在 Glitch 上有一个功能更全面的概念证明，它添加了基于组件的系统和模块。

如果您想处理更复杂的路线，route-parser 包可以节省一些车轮改造。

Answer 3

您可以使用navigo或通过看看别人在做什么来进行头脑风暴。

远离React / Angular的另一种选择是使用sapper，您可以对there中的框架进行真正的揭示性比较。

我认为路由器应该是通用的，不仅显示/隐藏应用程序的现有部分，而且还向服务器发送请求并接收Ajax响应以包含页面；这样，对/eshop/phones/samsung的请求应发出ajax请求，并在诸如<div id="eshop">之类的节点上包含html代码。这样我们就需要：

1）一个阻止所有clicks并重新格式化浏览器路径和

的网址处理程序

2）回调，该怎么做

仅此而已！

SEO是通过将完全相同的url与实际缓存的页面映射来实现的；此类url是路由器处理某些内容的一个子集，如上面所述，会导致动态构建页面。

从网络机器人的角度来看，动态构建的页面需要运行js代码，路由器+支持代码（该机器人可以运行js，但即使这样，路径也只是从转换为路径，因此无法用于索引编制，但应可用于书签！）。

现在，您在路由器顶部具有 SEO +书签功能，这很难从Angular说起（这太复杂了，以至于当一个应用程序完成时，您不知道如何重用）它到另一个项目！）。

最终，这样的路由器将一台服务器映射为一个服务器，用于缓存的页面的URL +动态构建的页面部分的URL，它是最小的，并且将SPA和服务器呈现的页面结合在一起。