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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 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读取XML值的代码(推荐)
2011/01/01 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
input按钮的事件处理大全
2010/12/10 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
javascript基础知识
2016/06/07 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python基础教程之Hello World!
2014/08/29 Python
Python socket编程实例详解
2015/05/27 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
python opencv实现图像边缘检测
2019/04/29 Python
python画微信表情符的实例代码
2019/10/09 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
副护士长竞聘演讲稿
2014/04/30 职场文书
派出所所长先进事迹
2014/05/19 职场文书
五一劳动节慰问信
2015/02/14 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
个人思想政治总结
2015/03/05 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
Python echarts实现数据可视化实例详解
2022/03/03 Python