什么是前端路由,简单的例子!

前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等。这篇文章主要和大家谈谈什么是前端路由,以及它的使用场景及优缺点!

1.什么是路由:简单举例说明,假如我们有一台提供 Web 服务的服务器的网络地址是:10.0.0.1,而该 Web 服务又提供了三个可供用户访问的页面,其页面 URI 分别是:

http://10.0.0.1/
http://10.0.0.1/about
http://10.0.0.1/concat

那么其路径就分别是 /,/about,/concat。当用户使用 http://10.0.0.1/about 来访问该页面时,Web 服务会接收到这个请求,然后会解析 URL 中的路径 /about,在 Web 服务的程序中,该路径对应着相应的处理逻辑,程序会把请求交给路径所对应的处理逻辑,这样就完成了一次「路由分发」,这个分发就是通过「路由」来完成的。

以前路由都是后台做的,通过用户请求的url导航到具体的html页面,前端路由就是通过配置js文件,把这个工作拿到前端来做。
简单的说,路由是根据不同的 url 地址展示不同的内容或页面

2.前端路由:前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的。在 HTML5 的 history API 出现之前,前端的路由都是通过 hash 来实现的,hash 能兼容低版本的浏览器。如果我们把上面例子中提到的 3 个页面用 hash 来实现的话,它的 URI 规则中需要带上 #。

1 http://10.0.0.1/
2 http://10.0.0.1/#/about
3 http://10.0.0.1/#/concat

Web 服务并不会解析 hash,也就是说 # 后的内容 Web 服务都会自动忽略,但是 JavaScript 是可以通过 window.location.hash 读取到的,读取到路径加以解析之后就可以响应不同路径的逻辑处理。

history 是 HTML5 才有的新 API,可以用来操作浏览器的 session history。基于 history 来实现的路由可以和最初的例子中提到的路径规则一样。

1 http://10.0.0.1/
2 http://10.0.0.1/about
3 http://10.0.0.1/concat

具体如何实现前端路由将在后面的文章中介绍。

3.前端路由的使用场景?
前端路由更多用在单页应用上, 也就是SPA, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由。

4.前端路由优缺点

优点:1.从性能和用户体验的层面来比较的话,后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。2.在某些场合中,用ajax请求,可以让页面无刷新,页面变了但Url没有变化,用户就不能复制到想要的地址,用前端路由做单页面网页就很好的解决了这个问题

缺点:使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存,

举个例子:

看下面DEMO,一目了然!

HTML:

 

<ul>  
    <li><a href="#/">首页</a></li>  
    <li><a href="#/product">产品</a></li>  
    <li><a href="#/server">服务</a></li>  
</ul> 
<div id="result"></div>

页面中有一个导航菜单ul,和一个div#result用来显示结果,当点击导航菜单时,#result中会显示不同的结果内容。

JAVASCRIPT:

前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示。

function Router(){ 
    this.routes = {}; 
    this.curUrl = ''; 
 
    this.route = function(path, callback){ 
        this.routes[path] = callback || function(){}; 
    }; 
 
    this.refresh = function(){ 
        this.curUrl = location.hash.slice(1) || '/'; 
        this.routes[this.curUrl](); 
    }; 
 
    this.init = function(){ 
        window.addEventListener('load', this.refresh.bind(this), false); 
        window.addEventListener('hashchange', this.refresh.bind(this), false); 
    } 
}

上面代码中路由系统Router对象实现,主要提供三个方法:

init 监听浏览器 url hash 更新事件。

route 存储路由更新时的回调到回调数组routes中,回调函数将负责对页面的更新。

refresh 执行当前url对应的回调函数,更新页面。

Router调用方式如下:点击触发 url 的 hash 改变,并对应地更新内容,运行后你会发现每次点击菜单时,#result中会变换背景色和内容。

var R = new Router(); 
R.init(); 
var res = document.getElementById('result'); 
 
R.route('/', function() { 
   res.style.background = 'blue'; 
   res.innerHTML = '这是首页'; 
}); 
R.route('/product', function() { 
   res.style.background = 'orange'; 
   res.innerHTML = '这是产品页'; 
}); 
R.route('/server', function() { 
   res.style.background = 'black'; 
   res.innerHTML = '这是服务页'; 
});

以上为一个前端路由的简单实现,实际应用中,应该对hash进行正则匹配处理,以满足大量url的应用,同时增加ajax异步请求页面内容等功能。虽然这个实例非常简单,但实际上很多路由系统的根基都立于此,其他路由系统主要是对自身使用的框架机制进行配套及优化。

转载自:

https://www.cnblogs.com/yuqing6/p/6731980.html

https://www.cnblogs.com/shoestrong/p/5895682.html


285 Clicks !

发表评论

电子邮件地址不会被公开。