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


Posted in Javascript onFebruary 03, 2015

做过后端开发,尤其是使用过类似Django或者express对服务器端的路由功能应该都比较熟悉,国外流行的博客系统wordpress也是非常经典的路由实现案例。那么,究竟什么的路由呢,下面通过wordpress来简单讲一下。

理解wordpress重写规则的的都是知道,实际上任何一条url的访问都是基于wordpress安装目录下的index.php(除了服务器上已经存在文件的访问),当wordpress的固定链接是模式设置是会很明显,例如文章的url是index.php?p=id,分类页面的url是index.php?cat=id。

在这里,index.php就充当了路由器的功能,请看下图:

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

也就是说,不管你访问的是什么地址,所有的请求最终都会重定向到index.php,程序会根据访问url的特征,确定你需要的是哪个类型的页面,然后向数据库作出查询,最终把html内容返回给浏览器。

上面说的是web后端路由,那么前端的路由是什么呢?实际上现在前端路由技术应用非常广泛,有很多开源的js类库都支持前端路由,如angularJS,ember.js, director.js等等。前端路由和后端路由原理一样,是让所有的交互和展现在一个页面运行以达到减少服务器请求,提高客户体验的目的,越来越多的网站特别是web应用都用到了前端路由。

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应用开发利器。

director.js对SEO有影响吗?

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

参考资料:director.js

Javascript 相关文章推荐
基于jQuery的动态表格插件
Mar 28 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
原生js实现放大镜效果
Jan 11 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
vue中的provide/inject的学习使用
May 09 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
js与jquery回车提交的方法
Feb 03 #Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 #Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 #Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 #Javascript
jQuery内部原理和实现方式浅析
Feb 03 #Javascript
jQuery中extend函数的实现原理详解
Feb 03 #Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 #Javascript
You might like
php递归列出所有文件和目录的代码
2008/09/10 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python单元测试简单示例
2018/07/03 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
平面设计的岗位职责
2013/11/08 职场文书
应届大学生的推荐信
2013/11/20 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
大学新闻系自荐书
2014/05/31 职场文书
服务理念口号
2014/06/11 职场文书
白莲教口号
2014/06/18 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript