通过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();
    });
    
时间: 2024-10-12 10:05:00

通过hash实现前端路由的相关文章

自己动手写一个前端路由插件

在单页应用上,前端路由并不陌生.单页应用是指在浏览器中运行的应用,在使用期间页面不会重新加载.       基本原理:以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生改变时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示.       基于hash的前端路由优点是:能兼容低版本的浏览器. history 是 HTML5 才有的新 API,可以用来操作浏览器的 session history (会话历史). 

javascript基础修炼(6)——前端路由的基本原理

[造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方代码的时候,就会明白这样做的价值,总有一天,你也将有能力写出大师级的代码. 一. 前端路由 现代前端开发中最流行的页面模型,莫过于SPA单页应用架构.单页面应用指的是应用只有一个主页面,通过动态替换DOM内容并同步修改url地址,来模拟多页应用的效果,切换页面的功能直接由前台脚本来完成,而不是由后端

实现前端路由

在单页应用上,前端路由并不陌生.单页应用是指在浏览器中运行的应用,在使用期间页面不会重新加载.       基本原理:以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生改变时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示.       基于hash的前端路由优点是:能兼容低版本的浏览器. history 是 HTML5 才有的新 API,可以用来操作浏览器的 session history (会话历史). 

前端路由模式hash和history

hash模式hash模式的原理是依据window对象的onhashchange事件进行监听,它的特点是:虽然hash路径出现在URL中,但是不会出现在HTTP请求中,对后端完全没有影响,因此改变hash值不会重新加载页面. window.onhashchange = function(e){ console.log(e); } 打印出来的结果可以通过location.hash获得浏览器url路径中的#部分内容,上图是#bvc,如果想获取#后面的内容可通过location.hash.slice(1

前端路由hash、history原理

本文参考https://www.cnblogs.com/tugenhua0707/p/10859214.html 先来看下后端路由的实现方式: 1. 浏览器向服务器发出请求.2. 服务器监听到80端口,如果有请求过来,那么就解析url地址.3. 服务器根据客户端的路由配置,然后就返回相应的信息(比如html字符串.json数据或图片等).4. 浏览器根据数据包的 Content-Type来决定如何解析数据. 缺点: 每次路由切换的时候都需要去刷新页面,然后发出ajax请求,然后将请求数据返回回来

利用JS实现前端路由

在以前的web程序中,路由字眼只出现在后台中.但是随着SPA单页面程序的发展,便出现了前端路由一说.单页面顾名思义就是一个网站只有一个html页面,但是点击不同的导航显示不同的内容,对应的url也会发生变化,这就是前端路由做的事.也就是通过JS实时检测url的变化,从而改变显示的内容. 目前很多前端框架都有接口去实现路由,比如vuejs的vue-route等.我们可以利用原生的hashchange事件来模拟一个简单的路由. 实例的html代码: Document index news about

Web开发中 前端路由 实现的几种方式和适用场景

浅析Web开发中前端路由实现的几种方式 主题 Web开发 故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因- 叙事体故事讲完,

原生JS实现一个简单的前端路由(原理)

说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例, 当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示. 直接看代码或许更直观. 1 function Router() { 2 this.routes = {}; 3 this.currentUrl = ''; 4 } 5 Router.prototype.route = function(path, callback) {

浅析Web开发中前端路由实现的几种方式

故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因… 叙事体故事讲完,进入正题.首先,我们知道传统而经典的Web开发中,服务器端