文档章节

JavaScript实现前端路由

五大三粗
 五大三粗
发布于 2015/08/31 11:40
字数 451
阅读 4.1K
收藏 2

在单页面应用中,前端通常需要一套路由机制,这样当url发生变化时就可以做出一些处理,从而让页面显示不同的内容。Backbone及Angular里面内置的都有一套路由实现,但有时候可能并不想使用整个框架,只需要路由处理的部分,那么下面就来看一下如何用JavaScript实现前端路由。

html部分:

<div class="container"> <nav class="mainMenu"> <ul> <li><a href="#/">首页</a></li> <li><a href="#/page1">页面1</a></li> <li><a href="#/page2">页面2</a></li> <li><a href="#/page3">页面3</a></li> <li><a href="#/page4">页面4</a></li> </ul> </nav> <div class="content"></div> </div>

这里有几个带#号的锚链接,点击不同的锚链接url里会产生不同的hash,如#/page1、#/page2等,这个值可以通过location.hash获取。

同时,每次hash的变化我们还可以通过onhashchange事件来监听,然后做出相应的处理,下面就来看一下具体的实现:

Router处理的核心代码:

;(function () { function Router () {} Router.prototype.route = function ( path, callback ) { var url = location.hash.slice(1) || '/'; // 刷新时的处理 window.addEventListener('load', function () { if ( url == path ) { callback&&callback(); } }, false); // hash变化时的处理 window.addEventListener('hashchange', function () { url = location.hash.slice(1) || '/'; if ( url == path ) { callback&&callback(); } }, false); }; window.Router = new Router(); })();

Router注册,注册方式就是Router.route(path, callback)的格式:

var content = document.querySelectorAll('.content'); // 测试函数,这里可以放一些ajax处理之类的 function loadContent ( text ) { content[0].innerHTML = text; } // 注意:这里的path要和html里面锚链接对应 // 如:‘#/’对应‘/’, '#/page2'对应'/page2' Router.route('/', function () { loadContent('这是首页'); }); Router.route('/page1', function () { loadContent('这是页面1'); }); Router.route('/page2', function () { loadContent('这是页面2'); }); Router.route('/page3', function () { loadContent('这是页面3'); }); Router.route('/page4', function () { loadContent('这是页面4'); });

Ok,以上就是前端路由的简单实现,另外也可以使用History API来处理。

© 著作权归作者所有

五大三粗
粉丝 164
博文 2293
码字总数 4767276
作品 0
广州
程序员
私信 提问
加载中

评论(2)

村小小
代码都不缩进一下啊,完全无法看
JerryYux
JerryYux
这三行五颜六色的代码怎么展开?
谈谈对bankbonse.js的初步了解

相关下载链接:API:http://documentcloud.github.com/backbone/ bankbonse.js是一个基于就jquery的前端开发库, 是一个MVC模型库。 对于前端的大型项目开发来说,为了实现模块化,降低各个功能...

Noin
2013/03/31
84
0
最近的项目系列1——core整合SPA

1、前言   当前,前后端分离大行其道,我本人之前不少项目也是纯前后端分离,但总有些场景,春前后端分离整起来比较痛苦,比如我手头这个公众号项目吧,它涉及到第三方鉴权,第三方凭证,以...

GUOKUN
2019/11/19
0
0
MV* 框架 与 DOM操作为主 JS库 的案例对比

最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库 与 MV* 框架的对比 案例(MV* 框架 与 DOM操作 JS库 实例对比) 购物车页面 JS业务逻辑(忽略 Ajax请求...

子凡
2019/09/29
0
0
基于adminlte的后台管理系统开发

前言 现在的大前端技术来势凶猛,Vue&React&Angular三足鼎立,让我们这些后端开发人员瑟瑟发抖。为了开发一个内部使用的管理系统需要去学习Node&Webpack等各种新概念,况且我们的系统并没有那...

gongxufan
2018/06/21
0
0
weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术
2018/05/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算一个数的数位之和

计算一个数的数位之和 例如:128 :1+2+8 = 11 public int numSum(int num) { int sum = 0; do { sum += num % 10; } while ((num = num / 10) > 0); return sum;......

SongAlone
16分钟前
55
0
什么是专用字节,虚拟字节,工作集?

我试图使用perfmon Windows实用程序来调试进程中的内存泄漏。 这就是perfmon解释这些术语的方式: Working Set是此过程的工作集的当前大小(以字节为单位)。 工作集是过程中线程最近触及的一...

技术盛宴
51分钟前
52
0
创建重复N次的单个项目的列表

我想创建一系列长度不一的列表。 每个列表将包含相同的元件e ,重复n次(其中n列表=长度)。 如何创建列表,而不为每个列表使用列表[e for number in xrange(n)] ? #1楼 在Python中创建重复...

javail
今天
78
0
为什么图片反复压缩后普遍会变绿,而不是其他颜色?

作者:Lion Yang 链接:https://www.zhihu.com/question/29355920/answer/119088684 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 业余版概要:安卓的...

shzwork
今天
47
0
每天AC系列(二):最接近的三数之和

1 题目 leetcode第16题,给定一个数组与一个目标数,找出数组中其中的三个数,这三个数的和要与目标数最接近。 2 暴力 按惯例先来一次O(n3)的暴力: int temp = nums[0]+nums[1]+nums[2];fo...

Blueeeeeee
今天
46
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部