原生 js前端路由系统实现4之低版本ie兼容性

经测试ie7 上面不支持onhashchange事件，导致本路由解析失效。解决办法使用定时器监听url的变化然后触发hashchange

src目录下新建文件 1-ieadaptor-all.js 此文件经过build.js会在js目录下生成ieadaptor.js文件(build.js在上一遍有介绍)

!function(){
	var appv=window.navigator.appVersion;
	if(appv.indexOf(‘MSIE 7‘)===-1&&appv.indexOf(‘MSIE 6‘)===-1)return;
	var lurl=window.location.href;
	window.setInterval(function(){
		var curl=window.location.href;
		if(lurl==curl)return;
		lurl=curl;
		if(window.onhashchange)window.onhashchange();
	},500);
}();

以上代码地址 https://git.oschina.net/diqye/route.js

时间： 2024-10-13 06:16:24

原生 js前端路由系统实现4之低版本ie兼容性的相关文章

原生 js前端路由系统实现2之代码可读性和可扩展性

前一篇尝试着实现了前端路由的部分功能原生 js前端路由系统实现1 代码可读性影响代码可读和易于理解的因素 1 代码规范 2缩进空格 3减少函数嵌套层次 4函数单一职责 5.... 以上这些顶多只能在外观上面看起来清晰(也不一定真的清晰),但随着代码量的增大代码依然非常难读和易于理解如果给你几十行代码,程序员通过琢磨也能短时间搞清楚,如果给你上万行代码即便技术大牛也得花大量的时间去阅读和调试才能看懂影响代码可读性的主要原因是代码的多少以下是上次实现路由的代码去掉兼容AMD等库

原生 js前端路由系统实现1

在看了百度手机小说网站源码之后突然兴起想自己实现一个基于网页hash技术的路由系统源码我放到oscgit上面了地址: https://git.oschina.net/diqye/route.js 适用场景: 局部刷新页面通过ajax局部刷新页面会有一个问题就是分享url或者刷新页面时不能记录当前网页的状态前端路由可解决这个问题期望的路由: 1 当访问网页 http://localhost/index.html 或者 http://localhost/index.ht

原生 js前端路由系统实现3之代码构建工具和 querystring功能

构建目前前端构建工具流行的是 grunk.js 功能是大而全,但往往大而全的东西为了多样性需要做额外的配置我还是想要有一个专门为自己特性项目而生构建工具我不想加载第三方的node模块,也不想写配置 ,想要的功能也很简单只是根据文件名字进行合并 build.js 名字规则: a-b-c.js 或者 a-b-c.txt a代表文件合并的顺序(这个顺序跟文件显示的顺序一致) 第一固定为0 最后固定为e b代表合并后的文件名字 c代表自己的文件名字以下代码会寻找当前目录下src目录中的

原生JS判断手机系统

点击图片,判断手机操作系统,根据手机系统跳转不同链接. function imgHref(){ var userAgent = navigator.userAgent; var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; //android终端 var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //io

原生js 获取路由参数

方法一//获取url参数function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURI(r[2]); return null; }va

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

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

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

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

深入理解 react-router 路由系统

范洪春在 web 应用开发中,路由系统是不可或缺的一部分. 在浏览器当前的 URL 发生变化时,路由系统会做出一些响应,用来保证用户界面与 URL 的同步. 随着单页应用时代的到来,为之服务的前端路由系统也相继出现了. 有一些独立的第三方路由系统,比如 director,代码库也比较轻量. 当然,主流的前端框架也都有自己的路由,比如 Backbone.Ember.Angular.React 等等. 那 react-router 相对于其他路由系统又针对 React 做了哪些优化呢? 它是如何利

原生JS实现一个简单的前端路由（原理）

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

原生 js前端路由系统实现4之 低版本ie兼容性

原生 js前端路由系统实现4之 低版本ie兼容性的相关文章

原生 js前端路由系统实现4之低版本ie兼容性

原生 js前端路由系统实现4之低版本ie兼容性的相关文章