前端路由使用示例的director.js实现

做过后端开发，特别是使用过类似Django或者express熟悉的服务器端路由功能，国外流行的博客系统wordpress也是一个非常经典的路由实现案例。那么，路线是什么？我们通过wordpress简单说一下。

懂wordpress重写规则的人都知道，其实任何url访问都是基于wordpress安装目录中的index.php(服务器上已经存在的文件的访问除外)，很明显当wordpress的固定链接是模式设置的时候，比如一篇文章的url是index.php？P=id，分类页面的url是index.php吗？cat=id .

这里，index.php充当路由器，请看下图：

也就是说，无论您访问什么地址，所有请求最终都将被重定向到index.php。程序会根据被访问的url的特征来决定你需要哪种类型的页面，然后对数据库进行查询，最后将html内容返回给浏览器。

不过，前端路由是什么？其实现在前端路由技术应用比较广泛，很多开源的js类库都支持前端路由，比如angularJS、ember.js、director.js等等。前端路由的原理和后端路由一样，都是让所有的交互和演示在一个页面上运行，减少服务器请求，提升客户体验。越来越多的网站，尤其是web应用，使用前端路由。

Director.js是最纯粹的路由注册/解析器，不用刷新页面，用“#”符号组织不同的URL路径，根据不同的URL路径匹配不同的回调方法。Director.js不仅可以应用在客户端，也可以应用在使用node.js的后台，可以实现上述的后端路由功能。看下面关于前端路由实现的例子，有必要设计一个类似web QQ的web桌面应用。桌面上有很多小图标，每个小图标都是一个功能应用，类似于电脑桌面。桌面上有一个百度新闻按钮。点击它在当前页面弹出一个窗口查看百度新闻，另一个图标查看当前时间。下面是一个简单的例子：

！DOCTYPE HTMl HTMl lang=' en ' hearta charset=' UTF-8 '脚本src=' http :https://raw git。com/扁铁/导演/大师/打造/导演。量滴js '/脚本样式* { margin 33600划水：0 }车身{宽度：100%;高度：100%;背景： # 3d 72b 8 } # baidunews { width :40 px；高度：40 px背景：url(' ./du。png ')不重复；显示：块；余量：50px} # tweibo {宽度：40px高度：40 px背景：url(' ./du。png ')不重复；显示：块；margin :50 px }/style/head body a href=' #/baidunews ' id=' baidunews ' title='百度新闻/a a href=' #/time ' id=' tweibo ' title='当前时间/JavaScript/定义路由var route={ '/time':nowtime，'/baidunews':[showframe，getbaidunew] } //初始化路由var路由器=路由器(路由)路由器。init()；//定义显示当前时间的回调函数函数now time(){ var now=new Date()；var y=现在。getfull year()；var m=现在。get month()1；var d=现在。getdate()；var h=现在。gethours()；var mi=现在。getminutes()；var s=现在。getseconds()；警报('现在时间\n' y '年m月d日h时米分s秒');} //定义显示浏览器框架的函数函数show frame(){ var f=文档。创建元素(' div ')；风格。宽度=' 985 px风格。高度=' 500像素'；' f.style.position='绝对；风格。top=' 50px风格。左侧=' 200 px风格。背景='白色'；风格。边框=' 2px实心# CCC '；//关闭按钮var close=文档。创建元素(“span”)；close.style.position="绝对";很接近。风格。right=' 5pxclose.style.cursor="指针";很接近。风格。右边距=' 5px很接近。onclick=function(){ document。尸体。删除子级(f)；} close.innerHTML=' X//加载站外的iframe var win=文档。创建元素(“iframe”)；win.id=' myiframewin。框架边框=0；赢了。风格。宽度=' 100% '；赢了。风格。高度=' 100% '；f.appendChild(关闭);f . append child(win)；文件。尸体。append child(f)；} //定义加载百度新闻网页的函数函数getbaidunew(){ document。getelementbyid(' myiframe ').src=' http :http://新闻。百度。com/'；}/脚本/正文/html从上面的代码可以看出，director.js利用页面中的"#"进行路由转发。上面的例子只是一个非常简单的实例，director.js能够实现更加复杂、庞大的功能，它可以通过创建交互式、快速动态网页应用的网页开发技术和服务端数据交互，可以和其它射流研究…类库并存，是一个网应用开发利器。

director.js对搜索引擎优化有影响吗？

客户端的director.js对搜索引擎优化有影响，因为数据所有数据只在一个页面，有些数据的存储方式不利于搜索引擎蜘蛛的抓取，如果你需要对搜索引擎优化友好，说明你需要构造的是一个"网页页面"而不是"网页应用",不推荐使用director.js。

参考资料：director.js