本文解析前端路由原理，以 WordPress 后端路由为类比，介绍如何利用 director.js 通过 URL 哈希实现页面内路由分发。通过 Web QQ 桌面应用示例，展示 director.js 在客户端的路由注册与回调匹配，并探讨其对 SEO 的潜在影响及适用场景。
前端路由原理与 director.js 实现示例
对于从事后端开发的开发者而言，熟悉 Django 或 Express 等框架提供的服务器端路由功能并不陌生。国外广泛使用的博客系统 WordPress 也是路由实现的经典案例。那么，究竟什么是路由？下文将借助 WordPress 的案例进行简要说明。
了解 WordPress 重写规则的开发者都知道，实际上对 WordPress 安装目录下 index.php 的访问涵盖了绝大多数 URL 请求（服务器已存在的静态文件除外）。当固定链接模式设置为特定结构时，这种机制尤为明显，例如文章 URL 表现为 index.php?p=id，分类页面 URL 表现为 index.php?cat=id。
在此场景中，index.php 扮演了路由器的角色，具体逻辑可参考下图：
这意味着无论用户访问何种地址，所有请求最终都会重定向至 index.php。程序依据访问 URL 的特征，判断用户所需页面类型，进而向数据库发起查询，最终将 HTML 内容返回给浏览器。
前端路由概述
上述内容涉及 Web 后端路由，那么前端路由又是什么？目前前端路由技术应用极为广泛，众多开源 JS 类库均支持该功能，如 AngularJS、Ember.js 以及 director.js 等。前端路由与后端路由原理一致，旨在使所有交互与展示在同一页面内运行，从而减少服务器请求次数并提升用户体验。越来越多的网站，尤其是 Web 应用，均已采用前端路由技术。
director.js 路由实现示例
director.js 是一款纯粹的路由注册与解析器，它利用“#”符号组织不同的 URL 路径，在不刷新页面的前提下，根据 URL 路径匹配相应的回调方法。director.js 不仅适用于客户端，在基于 Node.js 的后端环境中，同样能够实现前述的后端路由功能。以下是一个前端路由实现的示例： 假设我们需要设计一个类似 Web QQ 的 Web 桌面应用，桌面上排列着多个小图标，每个图标代表一个功能应用，类似于电脑桌面。桌面上有一个“百度新闻”按钮，点击后在当前页面弹出窗口以查看新闻；另一个图标点击后可查看当前时间。以下是一个简单的示例代码：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://rawgit.com/flatiron/director/master/build/director.min.js"></script>
<style>
* {margin:0;padding:0}
body {width:100%;height:100%;background:#3d72b8}
#baidunews {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;}
#tweibo {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;}
</style>
</head>
<body>
<a href="#/baidunews" id="baidunews" title="百度新闻"></a>
<a href="#/time" id="tweibo" title="当前时间"></a>
<script>
//定义路由
var route = {
"/time":nowtime,
"/baidunews":[showframe,getbaidunew]
}
//初始化路由
var router = Router(route)
router.init();
//定义显示当前时间的回调函数
function nowtime(){
var now=new Date();
var y=now.getFullYear();
var m=now.getMonth()+1;
var d=now.getDate();
var h=now.getHours();
var mi=now.getMinutes();
var s=now.getSeconds();
alert("现在时间\n"+y+"年"+m+"月"+d+"日 "+h+"时"+mi+"分"+s+"秒");
}
//定义显示浏览器框架的函数
function showframe(){
var f=document.createElement("div");
f.style.width="985px";
f.style.height="500px";
f.style.position="absolute";
f.style.top="50px";
f.style.left="200px";
f.style.background="white";
f.style.border="2px solid #ccc";
//关闭按钮
var close=document.createElement("span");
close.style.position="absolute";
close.style.right="5px";
close.style.cursor="pointer";
close.style.marginRight="5px";
close.onclick=function(){
document.body.removeChild(f);
}
close.innerHTML="X";
//加载站外的iframe
var win=document.createElement("iframe");
win.id="myiframe";
win.frameBorder=0;
win.style.width="100%";
win.style.height="100%";
f.appendChild(close);
f.appendChild(win);
document.body.appendChild(f);
}
//定义加载百度新闻网页的函数
function getbaidunew(){
document.getElementById("myiframe").src="http://news.baidu.com/";
}
</script>
</body>
</html>
从上述代码可以看出，director.js 利用页面中的“#”符号进行路由转发。该示例仅展示了非常基础的功能，director.js 实际上能够支持更为复杂庞大的功能体系。它可以通过 Ajax 与服务器端数据进行交互，并能与其他 JS 类库共存，是 Web 应用开发中的有力工具。
SEO 影响分析
director.js 是否会影响 SEO？
客户端使用的 director.js 确实会对 SEO 产生影响，因为所有数据均集中在一个页面中，部分数据存储方式不利于搜索引擎蜘蛛的抓取。若需对 SEO 友好，则应构建“Web 页面”而非“Web 应用”，因此不推荐使用 director.js。
参考资料：director.js