Javascript实现前端简单的路由实例

更新时间：2016年09月11日 11:59:39 投稿：daisy

本文将使用javascript实现一个极其简单的路由实例。WEB开发中路由概念并不陌生，我们接触到的有前端路由和后端路由。后端路由在很多框架中是一个重要的模块,同样前端路由在单页面应用也很常见，它使得前端页面体验更流畅。

前言

前端路由在很多开源的js类库框架中都得到支持，如angularJS，Backbone，Reactjs等等。前端路由和后端路由原理一样，是让所有的交互和展现在一个页面运行以达到减少服务器请求，提高客户体验的目的，越来越多的网站特别是web应用都用到了前端路由。

HTML

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

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

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异步请求页面内容等功能。虽然这个实例非常简单，但实际上很多路由系统的根基都立于此，其他路由系统主要是对自身使用的框架机制进行配套及优化。好了，本文的内容到这就结束了，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

使用webpack搭建vue项目实现脚手架功能
这篇文章主要介绍了使用webpack搭建vue项目实现脚手架功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
javascript的创建多行字符串的7种方法
多行字符串的作用是用来提高源代码的可读性.尤其是当你处理预定义好的较长字符串时,把这种字符串分成多行书写更有助于提高代码的可读性和可维护性.在一些语言中,多行字符串还可以用来做代码注释. 大部分动态脚本语言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢?
2014-04-04
WebSocket的通信过程与实现方法详解
这篇文章主要给大家爱介绍了关于WebSocket的通信过程与实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧
2018-04-04
JavaScript Event学习第十章一些可替换的事件对
为了让我们的JavaScript驱动的页面对那些不能或者不想使用鼠标的用户也能很好的使用，我们对于像mouseover和click这样的事件做一些处理，同样的，对于非鼠标事件也同样的要我们的脚本执行。
2010-02-02
IE8 chrome中table隔行换色解决办法
今天把项目生成好后，发布到万维网上进行测试，发现table的隔行换色在IE8，chorem中不能正常显示。找了许多资料，CSS看样是不能解决，只能用JS来控制了
2010-07-07
微信小程序实现猜数字小游戏的实战过程
一起猜数字是微信一款休闲类小游戏,下面这篇文章主要给大家介绍了关于微信小程序实现猜数字小游戏的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-12-12
在JS中如何使用css变量详解
这篇文章主要给大家介绍了关于如何在JS中如何使用css变量以及export之javascript关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2021-09-09
使用JS实现导航切换时高亮显示的示例讲解
今天小编就为大家分享一篇使用JS实现导航切换时高亮显示的示例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
es5 类与es6中class的区别小结
这篇文章主要给大家介绍了关于es5 类与es6中class区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
一文带你理解JavaScript中的函数式编程
函数式编程是一种编程规范，也是一种对语言程序（比如JavaScript）本身能力的运用方式。本篇文章将从编程规范来介绍函数式编程的到底是一种什么样的规范，希望对大家有所帮助
2023-02-02