用javascript来实现前端简单路由
WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由。后端路由在很多框架中是一个重要的模块,如Thinkphp,Wordpress中都应用了路由功能,它能够让请求的url地址变得更简洁。同样前端路由在单页面应用也很常见,它使得前端页面体验更流畅。
前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等。前端路由和后端路由原理一样,是让所有的交互和展现在一个页面运行以达到减少服务器请求,提高客户体验的目的,越来越多的网站特别是web应用都用到了前端路由。
本文将使用javascript实现一个极其简单的路由实例。
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异步请求页面内容等功能。虽然这个实例非常简单,但实际上很多路由系统的根基都立于此,其他路由系统主要是对自身使用的框架机制进行配套及优化。
/******************************************/
更多内容请查看 https://www.zhouyangla.com/?p=127
用javascript来实现前端简单路由的更多相关文章
- Javascript实现前端简单路由
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...
- echart封装,前端简单路由,图表设置自动化
https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...
- 不会JavaScript能混前端么?能拿到高薪么?
不会JavaScript能混前端么?能拿到高薪么? 答案是:很难! 为什么这么说呢,理由很简单 1)有很多企业不注重前端开发,当然也就不会给你高薪了,这样的企业以小企业居多. 他们一般对前端开发的认识 ...
- 用25行JavaScript语句实现一个简单的编译器
原文:https://www.iteye.com/news/32680 译者注:即使对于专业程序员来说,构造一个编译器也是颇具挑战性的任务,本文将会引导你抽丝剥茧,一探究竟! 我已经写了几篇与编程语言 ...
- vue.js路由vue-router(一)——简单路由基础
前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...
- thinkphp最简单路由
thinkphp最简单路由 一.总结 1.路由应用场景(前台要,后台不要):前台所有人都可以看,所以前台的话设置路由,后台的话并不是所有人都进去,所以不需要设置路由 2.模块分离来实现路由场景应用:前 ...
- 前端hash路由基本原理,及代码的基本实现
路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同. 早期的路由都是后端实现的,直接根据 url 来 reload 页面,页面变得越来越复杂服务器端压力变大,随着 ajax 的出现,页面实现非 ...
- 【原创】javascript模板引擎的简单实现
本来想把之前对artTemplate源码解析的注释放上来分享下,不过隔了一年,找不到了,只好把当时分析模板引擎原理后,自己尝试 写下的模板引擎与大家分享下,留个纪念,记得当时还对比了好几个模板引擎来着 ...
- JavaScript,一个超级简单的方法判断浏览器的内核前缀
先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断. 大家应该还记得JavaScript行内样式怎么写吧?(看来我是 ...
随机推荐
- git(命令行常用炒作)
Git常用操作 https://backlog.com/git-tutorial/cn/intro/intro1_1.html Git详解(思维导图) https://blog.csdn.net/hu ...
- js外部调用layui.use中的函数的写法
layui模块化的写法固然不错,但也有让人不适应的一些地方 外部调用函数的写法就让人不太舒服 需要在函数名前面加上window这个前缀,就不太舒服 补充:window前缀,是全局变量的声明方式 如下: ...
- Js--动态生成表格
<div> <h1>动态生成表格</h1> <div id="table1"> 行 ...
- How to enable AHCI on Windows7
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\msahci
- poj2112(网络流-最大流+二分)
题意:给你k个挤奶器,c头牛,每个挤奶器能放m头牛,问你奶牛需要走的最大距离最小是多少: 解题思路:因为最大距离最小,也就是求最小的距离满足所有牛都能到,所以我们先用floyd跑最短路,把所有点之间的 ...
- YUV格式与RGB格式
YUV420介绍: YUV420格式是指,每个像素都保留一个Y(亮度)分量,而在水平方向上,不是每行都取U和V分量,而是一行只取U分量,则其接着一行就只取V分量,以此重复(即4:2:0, 4:0:2, ...
- Civil 3D 二次开发 创建AutoCAD对象—— 00 ——
不积跬步无以至千里,不积小流无以成江海.虽然创建一条直线.添加一个图层这样的小程序没有什么实际意义(内部命令很简单就可以完成),但对于初学二次开发的您来说,这可是一大步,这一步跨出去,您就跨进了二次开 ...
- Spring 使用介绍(十三)—— Bean的生命周期
一.概述 Spring Bean的完整生命周期从创建Spring容器开始,直到最终Spring容器销毁Bean,生命周期时序图如下: 二.生命周期接口分类 Bean的生命周期经历了多个接口方法的调用, ...
- 第五十五天 css基础入门
一.引入css的三种方式 1.行间式 <div style="width: 100px; height: 100px; background-color: red">& ...
- Mysql partition by
一,看原表 select * from `user`; 二,查询同组年级最大的 select username ,SUBSTRING_INDEX( GROUP_CONCAT(age order by ...