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


Posted in Javascript onSeptember 11, 2016

前言

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

Javascript 相关文章推荐
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
JavaScript中return false的用法
Mar 12 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
详解vue表单——小白速看
Apr 08 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
JS访问对象两种方式区别解析
Aug 29 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 #Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 #Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 #Javascript
简单分析javascript中的函数
Sep 10 #Javascript
javascript数组常用方法汇总
Sep 10 #Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 #Javascript
Three.js快速入门教程
Sep 09 #Javascript
You might like
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
先进工作者申报材料
2014/12/23 职场文书
公司与个人合作协议书
2016/03/19 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫