通过hash实现前端路由
router.js
- //构造函数
- function Router() {
- this.routes = {};
- this.currentUrl = '';
- }
- Router.prototype.route = function(path, callback) {
- this.routes[path] = callback || function(){};//给不同的hash设置不同的回调函数
- };
- Router.prototype.refresh = function() {
- //console.log(location.hash.slice(1));//获取到相应的hash值
- this.currentUrl = location.hash.slice(1) || '/';//如果存在hash值则获取到,否则设置hash值为/
- // console.log(this.currentUrl);
- this.routes[this.currentUrl]();//根据当前的hash值来调用相对应的回调函数
- };
- Router.prototype.init = function() {
- window.addEventListener('load', this.refresh.bind(this), false);
- window.addEventListener('hashchange', this.refresh.bind(this), false);
- }
- //给window对象挂载属性
- window.Router = new Router();
- window.Router.init();
html:
- <div class="index">
- <a href="#/upload">上传图片</a>
- </div>
- <div class="upload_page" style="display:none">
- <h2>上传图片</h2>
- </div>
- //前端路由
- Router.route('/', function() {
- $('.upload_page').hide();
- $('.index').show();
- });
- Router.route('/upload', function() {
- $('.index').hide();
- $('.upload_page').show();
- });
通过hash实现前端路由的更多相关文章
- javascript基础修炼(6)——前端路由的基本原理
[造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方 ...
- 简单的基于hash和hashchange的前端路由
hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...
- 前端路由两种模式:hash、history
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- 前端路由以及浏览器回退,hash & history & location
一.前言 其实不止一次想监听浏览器的回退方法,比如 在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页 H5 有背景音乐的,跳页就得重新放,体 ...
- 前端路由的两种模式: hash 模式和 history 模式
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- 【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- 前端路由的两种模式:hash(#)模式和history模式(转)
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- 前端路由hash、history原理及简单的实践下
阅读目录 一:什么是路由?前端有哪些路由?他们有哪些特性? 二:如何实现简单的hash路由? 三:如何实现简单的history路由? 四:hash和history路由一起实现 回到顶部 一:什么是路由 ...
- 前端路由原理之 hash 模式和 history 模式
什么是路由? 个人理解路由就是浏览器 URL 和页面内容的一种映射关系. 比如你看到我这篇博客,博客的链接是一个 URL,而 URL 对应的就是我这篇博客的网页内容,这二者之间的映射关系就是路由. 其 ...
随机推荐
- python从入门到实践-9章类
#!/user/bin/env python# -*- coding:utf-8 -*- # 类名采用的是驼峰命名法,即将类名中每个单词的首字母大写,而不使用下划线.# 对于每个类,都应紧跟在类定义后 ...
- ava怎样将"1413863429"字符串转换成datetime格式
.....一般来说应该是一个 毫秒数 String str ="1413863429"; Long timeLong = Long.parseLong(str); SimpleDa ...
- APP测试工具与技术
AndroidDevTools Android Dev Tools官网地址:www.androiddevtools.cn 收集整理Android开发所需的Android SDK.开发中用到的工具.An ...
- js 动态生成背景图 GeoPattern
以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> ...
- [Swift]LeetCode269. 外星人词典 $ Alien Dictionary
There is a new alien language which uses the latin alphabet. However, the order among letters are un ...
- WebWorker与WebSocket实现前端消息总线
Web Worker让JS有了多线程的能力,可以将复杂耗时的操作都交付给Worker线程处理.WebSocket让web端与服务端维持一个有效的长连接,实现服务端主动推送数据.将二者一结合,业务系统信 ...
- Nginx 动静分离与负载均衡的实现
一.前提 企业中,随着用户的增长,数据量也几乎成几何增长,数据越来越大,随之也就出现了各种应用的瓶颈问题. 问题出现了,我们就得想办法解决,一般网站环境,均会使用LAMP或者LNMP,而我们对于网站环 ...
- 微信公众号的开发 Senparc.Weixin.dll使用
项目需要,做个微信公众号,之前从未做过,前期挺懵的,再次记录一下,一切困难都是纸老虎(哈哈) 服务号是公司申请的微信公共账号,订阅号是个人申请的.建议开发者自己申请一个测试账号,方便使用,但是测试账号 ...
- 使用vue-cli搭建vue项目
1.安装node环境,然后在命令行输入node -v 和npm -v 查看版本号 2.在正式开始项目之前我们先介绍一下vue-cli,vue-cli是一个脚手架工具,vue-cli是帮助我们写好vue ...
- 8.Flask-Script
Flask-script的作用是可以通过命令行的形式操作flask.安装方式:pip install flask-script 1.1.command装饰器 (1)创建manage.py from f ...