Question

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

示例配置：

的根/ index.html中
的根/ TPL / home.html做为
的根/ 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();

所需的网址类型：

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/

网址的部分是：

http - 协议
（默认端口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。 Capisce？

Answer 2

您可能会对frontexpress感兴趣。

我的图书馆修复了你的情况，如下所示：

// Front-end application
const app = frontexpress();

const homeMiddleware = (req, res) => {
  document.querySelector('#view').innerHTML = '<p>This is content of home page</p>';
}

app.get('/', homeMiddleware);

app.get('/home', homeMiddleware);

app.get('/about', (req, res) => {
  document.querySelector('#view').innerHTML = '<p>This is the content of the about page </p>';
});

显然，您可以从服务器获取模板文件。 #view将如下所示：

document.querySelector('#view').innerHTML = res.responseText;

此gist

中的更详细示例

Answer 3

您的请求类似于您尝试执行的操作是将“路径+文件”（“/tpl/about.html”）添加到基本网址（“www.myhost.com”）。如果是这种情况，那么您需要从当前文档中动态提取主机名，然后将新URL附加到现有基础。您可以通过在javascript中执行以下命令来获取现有主机名：

var _location = document.location.toString();
var serverNameIndex = _location.indexOf('/', _location.indexOf('://') + 3);
var serverName = _location.substring(0, serverNameIndex) + '/';

这将返回一个字符串，如：“http://www.myhost.com/”，您现在可以将新网址附加到该字符串。所有这些都可以在发送到服务器之前在javascript中完成。
如果您只需要服务器名称，而不使用前导http或https，则将最后一行更改为：

var serverName = _location.substring(_location.indexOf('://') + 3, serverNameIndex) + '/';

让我们稍微破解你的代码：

       function loading() {

“location.hash”是根据最近点击的网址设置的（www.myhost.home /＃about）。一个基本问题是，这是你想要的动作，还是你想从html中为onClick操作传递一个值？对您来说，这似乎是一种更有效的方法。

            var a = $.inArray(location.hash, routes),
                template = urls[a];

var a将被设置为-1或“routes.hash”在“routes”数组中的位置。如果route.hash在路由中不存在，那么a == - 1并且脚本将失败，因为你正在设置template = urls [-1]。你可能想将设置模板移到“else”语句中。

           if (a === -1) {
                location.hash = root;
                $("#view").load(urls[0]);
            }
            else {yada yada yada
            }

您可以在html中使用类似于：

的序列

<a onclick="loading('#about')">Go to About Page</a>

创建模板url-routing脚本

3 个答案: