前端路由笔记

栏目: JavaScript · 发布时间: 5年前

内容简介:前端路由的实现本质:检测URL变化,获取url地址,解析url匹配页面;检测URL变化有两种方式: hash,HTML5 History

前端路由的实现本质:检测URL变化,获取url地址,解析url匹配页面;

检测URL变化有两种方式: hash,HTML5 History

  1. HTML5 History
    history.pushState 和 history.replaceState这两个api都分别接收三个参数:状态对象,标题, url (此url地址不支持跨域,跨域会报错)
    这两个API都会操作浏览器的历史记录,并不引起浏览器的刷新,pushState会增加一条新的历史记录,replaceState会替换当前的历史记录;
    popstate事件,需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮,或者在Javascript代码中调用3.back()。
    原理在点击某个路由时执行pushState,在操作浏览器时执行popstate;
  2. hash location.hash
    window.location修改hash至不会引起页面刷新,而是当作新页面加到历史记录中。hash值变化会触发hashchange事件。
Function Router(){
    this.currentUrl = '';
    this.routes = {};
}

Router.prototype.route = function(url, callback){
    this.routes[url] = callback || function(){}
}

Router.prototype.refresh = function(){
    this.currentUrl = location.hash.slice(1) || '/';
    this.routes[this.currentUrl]();
}

Router.prototype.init = function(){
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
}
//使用
var $target = $('#target');
var route = new Router();
route.init();
route.route('/', $target.html('this is index page!!') );
route.route('/page1', $target.html('this is page1!!'));

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ActionScript 3.0精彩范例词典

ActionScript 3.0精彩范例词典

杨东昱 编 / 2008-5 / 59.00元

《ActionScript 3.0精彩范例词典》列出了最常用的ActionScript语法,并附有详细的程序代码范例,不但教您如何使用、修改ActionScript代码,而且还以实际范例和图解,说明每项语法还能呈现哪些动画效果和功能,对学习ActipScript有所帮助。读者在阅读《ActionScript 3.0精彩范例词典》之后,将能开发出属于自己的ActionScript程序与FLASH动画......一起来看看 《ActionScript 3.0精彩范例词典》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具