javascript - 创建模板 url 路由脚本

Question

我想尽可能地使用 javascript 创建一个 url-routing 脚本，但也在代码中接受 jQuery。 js 文件必须相应地更改 url 路径(尽管我使用 location.hash 而不是 location.pathname)和具有 view id(来自外部文件)的 div 的内容。

示例配置:

• root/index.html
• root/tpl/home.html
• root/tpl/about.html

home.html 内容:

<p>This is content of home page</p>

about.html 内容:

<p>This is the content of the about page </p>

到目前为止我做了什么:

'use strict';
var Router = {
root: '/',
routes: [],
urls: [],
titles: [],
navigate: function() {
    location.hash = this.root;
    return this;
},
add: function(thePath, theUrl, theTitle) {
    this.routes.push(thePath);
    this.urls.push(theUrl);
    this.titles.push(theTitle);
},
loading: function() {
    this.navigate();
    var r = this.routes;
    var u = this.urls;
    window.onload = function() {
        $("#view").load("tpl/home.html");
    };
    window.onhashchange = function() {
        for (var i = 0; i < r.length; i++) {
            if (location.hash == r[i]) {
                $("#view").load(u[i]);
            }
        }
    };
}
};
Router.add("#/home", "tpl/home.html", "Home Page");
Router.add("#/about", "tpl/about.html", "About Page");
Router.loading();

所需的 url 类型:

http://mywebsite.com/
http://mywebsite.com/about

我知道有足够多的库可以进行路由，例如 AngularJS 和 Crossroad，我想知道如何做到这一点。

Answer 1

要使此 URL 有效 - http://mywebsite.com/about - 您需要一个知道如何路由此请求的服务器。由于实际文件名为 about.html，您的服务器必须知道如何处理无扩展名的 URL。

通常，服务器使用文件扩展名作为提供内容的线索。例如，如果它看到 file.php，它知道使用 PHP 组件，对于 .aspx，它知道使用 ASP.NET 组件，对于 。 htm 或 .html 它知道以纯 HTML 响应(并且通常提供文件而不是处理文件)。您的服务器必须有一些规则来处理任何请求，无论它是否有扩展名，但如果没有扩展名，您需要为该请求提供明确的路由规则。

JavaScript 进行路由的能力是有限的，因为它要求用户已经在您的网站上。如果您解析 URL 参数或使用散列并将它们用于路由，您可以做一些有趣的事情，但这仍然需要从您的站点请求页面作为第一步。

例如:当您向服务器发出此请求时，服务器已经在执行某种级别的“无扩展路由”:

http://mywebsite.com/

URL 的组成部分是:

• http - 协议(protocol)
• (隐含端口 80，因为它是默认的 HTTP 端口)
• mywebsite.com - 域 AKA 主机
• /路径

服务器看到 / 并使用 IIS 所谓的“默认文档”(我认为 apache 称之为“默认索引”或“默认页面”)。在这种情况下，服务器已配置为返回一个文件，例如“index.html”或“default.htm”。因此，当您请求 http://mywebsite.com/ 时，您实际上可能会得到相当于 http://mywebsite.com/index.html

的内容

当服务器看到 http://mywebsite.com/about 时，它可能首先查找名为 about 的文件夹，然后查找名为 about，但由于您的文件实际上名为 about.html 并且位于不同的文件夹中 (/tpl) 服务器需要一些帮助知道如何将 http://mywebsite.com/about 翻译成适当的请求——对你来说就是 http://mywebsite.com/#/about 所以它请求路由页面(假设它是 Web 应用程序根文件夹中的默认文档)，以便浏览器可以解析和执行执行路由的 JavaScript。资本？