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 相关文章推荐
js里的prototype使用示例
Nov 19 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
js实现弹框效果
Mar 24 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
asp.net和php的区别点总结
2019/10/10 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
python实现线程池的方法
2015/06/30 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
Python requests模块session代码实例
2020/04/14 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
一套C++笔试题面试题
2012/06/06 面试题
2015年119消防宣传日活动总结
2015/03/24 职场文书
我的1919观后感
2015/06/03 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
使用scrapy实现增量式爬取方式
2022/06/21 Python