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内容返回给浏览器。

上面说的是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

时间: 2015-02-01

JS实现简单路由器功能的方法

本文实例讲述了JS实现简单路由器功能的方法.分享给大家供大家参考.具体实现方法如下: var wawa = {}; wawa.Router = function(){ function Router(){ } Router.prototype.setup = function(routemap, defaultFunc){ var that = this, rule, func; this.routemap = []; this.defaultFunc = defaultFunc; for (v

js实现自定义路由

本文实现自定义路由,主要是事件hashchange的使用,然后根据我们的业务需求封装. 首先实现一个router的类,并实例化. function _router(config){ this.config = config ? config : {}; } _router.prototype = { event:function(str,callback){ var events = str.split(' '); for (var i in events) window.addEventLis

angular.js之路由的选择方法

在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西,但是仔细想想就可以发现,这种思想可以解决非常多的资源. 例如,假如有一个页面,需要显示1000种商品的信息,每个商品的表现形式各不相同(设他们有各自独立的css和js),那么一般来说,我们就需要准备1000张网页去加载这些信息.但是,使用这种模块化思想,我们就可以仅仅在后台设定1000个各不相同的

全面解析JavaScript的Backbone.js框架中的Router路由

Backbone 中的 Router 充当路由的作用,控制 URL 的走向,当在 URL 中使用 # 标签时生效. 定义 Router 至少需要一个 Router 和一个函数来映射特定的 URL,而且我们需要记住,在 Backbone 中,# 标签后的任意字符都会被 Router 接收并解释. 下面我们来定义一个 Router: <script> var AppRouter = Backbone.Router.extend({ routes: { "*actions": &

轻松创建nodejs服务器(4):路由

服务器需要根据不同的URL或请求来执行不一样的操作,我们可以通过路由来实现这个步骤. 第一步我们需要先解析出请求URL的路径,我们引入url模块. 我们来给onRequest()函数加上一些逻辑,用来找出浏览器请求的URL路径: 复制代码 代码如下: var http = require("http"); var url = require("url"); function start() {  function onRequest(request, respons

AngularJS 路由详解和简单实例

AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://r

Angularjs制作简单的路由功能demo

从官网下载了最新版本的Angularjs 版本号:1.3.15 做一个简单的路由功能demo 首页:index.html <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="./js/angular.min.js"></script> <scri

AngularJS 路由和模板实例及路由地址简化方法(必看)

最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰.更加具有可读性.更简洁.更具有维护性.但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angula

Vue.js路由组件vue-router使用方法详解

使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

nodejs中实现路由功能

初学Node,发现了与自己之前的观点完全不同的场面--你眼中的JavaScript,是干什么用的呢?特效?or 只是与客户端的交互?可以说,JavaScript最早是运行在浏览器中的,然而你要这样想,浏览器只是你提供了一个上下文(context),它定义了 使用JavaScript可以做什么,这里可以想成类似的一个企业,企业定义了你可以在这里做什么,但是并没有说太多关于JavaScript语言本身可 以做什么.事实上,作为一门完整的语言,JavaScript可以使用在不同的上下文中,体现出不同的

使用AngularJS对路由进行安全性处理的方法

 简介 自从出现以后,AngularJS已经被使用很长时间了. 它是一个用于开发单页应用(SPA)的javascript框架. 它有一些很好的特性,如双向绑定.指令等. 这篇文章主要介绍Angular路由安全性策略. 它是一个可用Angular开发实现的客户端安全性框架. 我已经对它进行了测试. 除了保证客户端路由安全性外,你也需要保证服务器端访问的安全性. 客户端安全性策略有助于减少对服务器进行额外的访问. 然而,如果一些人采用欺骗浏览器的手段访问服务器,那么服务器端安全性策略应当能够拒绝未授

AngularJS删除路由中的#符号的方法

最近做一个web应用,有个需求需要删除angular路由中的#号. 例如: http://example.com/ http://example.com/#/about http://example.com/#/contact 需要改成 http://example.com/ http://example.com/about http://example.com/contact 这个是angular默认自带的,所以想要删除需要配置一下: $locationProvider.html5Mode(t

AngularJS入门教程二:在路由中传递参数的方法分析

本文实例讲述了AngularJS在路由中传递参数的方法.分享给大家供大家参考,具体如下: 我们不仅可以在控制器中直接定义属性的值,比如: app.controller('listController',function($scope){ $scope.name="ROSE"; }); AngularJS还提供了传递参数的功能,目前我接触到的一种方式是从视图中传参: <!--首页html--> <li><a href="#/user/18"

AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)

本文实例讲述了AngularJS实现用户登录状态判断的方法.分享给大家供大家参考,具体如下: 使用AngularJS的单页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面. angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainController里增加一个路由事件侦听并判断,这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了 代码中的 $rootScope.user是登录后把用户信息放到了全局rootScope上

AngularJs ng-route路由详解及实例代码

前提 首先需要在页面引入angular和angular-route,注意要在angular-route之前引入angular <script src="../../bower_components/angular/angular.js"></script> <script src="../../bower_components/angular-route/angular-route.js"></script> 这主要是

详谈angularjs中路由页面强制更新的问题

有这么一个问题,在页面内路由页面跳转时,第一次跳入路由页面时是正常的,但是第二次会记住第一次时的状态,有时候并不想这样,想强制更新这个路由页面. 有一种方式就是使用 ui-sref-opts功能,我试了,结果不好使,不知道是哪里出的问题: <a class="item" ui-sref="page1({id:1})" ui-sref-opts="{reload:true, notify: true}"> 链接1</a> 在

AngularJS控制器controller正确的通信的方法

AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$ro

AngularJS读取JSON及XML文件的方法示例

本文实例讲述了AngularJS读取JSON及XML文件的方法.分享给大家供大家参考,具体如下: <!doctype html> <meta charset="UTF-8"> <html ng-app='routingDemoApp'> <head> <title>AJAX and promise</title> <link href="bootstrap.min.css" rel=&qu

AngularJS自定义指令之复制指令实现方法

本文实例讲述了AngularJS自定义指令之复制指令实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.c

AngularJS基于factory创建自定义服务的方法详解

本文实例讲述了AngularJS基于factory创建自定义服务的方法.分享给大家供大家参考,具体如下: 为什么要创建自定义服务? 很简单,不想让控制器显得过于"臃肿",而且服务可复用.针对性强,每个服务对应不同的功能. 这里介绍如何使用factory创建自定义服务,并且使用他. 例子1: <!--HTML--> <div ng-controller="showTheName"> <h1 ng-bind="name"