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来实现前端简单路由的更多相关文章

  1. Javascript实现前端简单路由

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...

  2. echart封装,前端简单路由,图表设置自动化

    https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...

  3. 不会JavaScript能混前端么?能拿到高薪么?

    不会JavaScript能混前端么?能拿到高薪么? 答案是:很难! 为什么这么说呢,理由很简单 1)有很多企业不注重前端开发,当然也就不会给你高薪了,这样的企业以小企业居多. 他们一般对前端开发的认识 ...

  4. 用25行JavaScript语句实现一个简单的编译器

    原文:https://www.iteye.com/news/32680 译者注:即使对于专业程序员来说,构造一个编译器也是颇具挑战性的任务,本文将会引导你抽丝剥茧,一探究竟! 我已经写了几篇与编程语言 ...

  5. vue.js路由vue-router(一)——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

  6. thinkphp最简单路由

    thinkphp最简单路由 一.总结 1.路由应用场景(前台要,后台不要):前台所有人都可以看,所以前台的话设置路由,后台的话并不是所有人都进去,所以不需要设置路由 2.模块分离来实现路由场景应用:前 ...

  7. 前端hash路由基本原理,及代码的基本实现

    路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同. 早期的路由都是后端实现的,直接根据 url 来 reload 页面,页面变得越来越复杂服务器端压力变大,随着 ajax 的出现,页面实现非 ...

  8. 【原创】javascript模板引擎的简单实现

    本来想把之前对artTemplate源码解析的注释放上来分享下,不过隔了一年,找不到了,只好把当时分析模板引擎原理后,自己尝试 写下的模板引擎与大家分享下,留个纪念,记得当时还对比了好几个模板引擎来着 ...

  9. JavaScript,一个超级简单的方法判断浏览器的内核前缀

    先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断. 大家应该还记得JavaScript行内样式怎么写吧?(看来我是 ...

随机推荐

  1. mysql 分库分表备份脚本

    #!/bin/bash USER=root #用户 PASSWORD=123456 #密码 MYSQL_PATH=127.0.0.1 #地址 MYSQL_BIN=/bin/mysql MYSQL_DU ...

  2. 设计模式笔记:开闭原则(OCP,The Open-Closed Principle)

    1. 开闭原则概述 开闭原则(OCP,The Open-Closed Principle)两个主要特征: (1)对扩展开放(open for extension):模块的行为的可以扩展的,当应用的需求 ...

  3. django mysql数据库使用自己的User

    由于我需要的User模型与django自带的User有所不同,所以需要定义自己的User Model,这里记录一下方法,适用于django 1.5+. 因为使用自己的后台,放弃django的管理后台, ...

  4. QTP 自动化测试--点滴 等待

    1 使用wait()语句:wait(10) 等待10秒后继续执行 Window("驷惠WIN系列[汽车4S连锁管理软件] 6.").Window("应付帐款明细查询&qu ...

  5. SQL Server与SQL Server Express的区别

    SQL Server Express 2005(以下简称 SQLExpress) 是由微软公司开发的 SQL Server 2005(以下简称 SQL2005)的缩减版,这个版本是免费的,它继承了 S ...

  6. JavaScript简单简介

    JavaScript,男,web页面的一种脚本编程语言,1955年诞生,妻子为HTML,魔法能力是将静态页面(经过与用户交互与相应)转变为动态页面. 刚进入浏览器市场(魔界)的时候,也就是js1.0岁 ...

  7. 原子变量与CAS算法(二)

    一.锁机制存在的问题 (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度延时,引起性能问题. (2)一个线程持有锁会导致其它所有需要此锁的线程挂起. (3)如果一个优先级高的线程等待一个 ...

  8. 排列组合n选m算法

    找10组合算法,非递归 http://blog.csdn.net/sdhongjun/article/details/51475302

  9. codeforces570C

    Replacement CodeForces - 570C 话说很久很久以前,孙悟空被压在了山下,很无聊.于是他找了一个只包含小写字母和字符"." 的字符串. 由于他比较无聊,他就 ...

  10. .net core 2.0 数据访问-迁移

    将用于进行迁移的 Entity Framework Core NuGet包 添加到`.csproj`文件 <ItemGroup> <DotNetCliToolReference In ...