location实战url解析，navigator实战验证浏览器

本次分享主要就是两个案例，补充上篇《javaScript之Location,Navigator,History》实战应用的。

案例一，url传参

location实战url解析，对于url解析，需求不同，处理方式也不一样，本案例解析url传递参数，并获取url传递的参数：

`

    var url = 'http://www.baidu.com?pageType=news&pageNum=1'    // 需要解析的url
		function queryUrl (url) {
	    	var objUrl = {};    // 声明一个对象，存储解析出来的值，最后用来一并返回
	    	var urlData = url.split('?')[1];    //获取url参数部分
	    	if (urlData) {   // 判断获取的部分是否有字符串
	    		var urlArr = urlData.split('&');    // 使用split再次拆分为数组
	    		for (var i = 0, len = urlArr.length; i < len; i++) {
	    			var curArr = urlArr[i].split('=');  // 再次拆分
	    			objUrl[curArr[0]] = curArr[1]   // 存储
	    		}
	    		return objUrl   // 返回解析结果
	    	}    	
	    }
	console.log(queryUrl (url)) // { pageType: "news", pageNum: "1" }

`本案例的核心，主要是应用了字符串的split方法，通过split把url字符串进行拆分

案例二，验证浏览器

在日常开发中，检测当前的浏览器环境是十分必要的，因为我们需要在不同的环境或者平台做不同的处理操作，特别是在移动端开发，android和ios的验证更为重要，因为h5的页面本来就是运行在移动端的浏览器里，那么如何验证呢，请看分享案例代码：

`

var browser={
	    versions:function(){
	    var u = window.navigator.userAgent; // 通过navigator.userAgent获取当前浏览器的信息
	    return {
	        trident: u.indexOf('Trident') > -1, //IE内核
	        presto: u.indexOf('Presto') > -1, //opera内核
	        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
	        gecko: u.indexOf('Firefox') > -1, //火狐内核
	        mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
	        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
	        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
	        iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者安卓QQ浏览器
	        iPad: u.indexOf('iPad') > -1, //是否为iPad
	        webApp: u.indexOf('Safari') == -1 ,//是否为web应用程序，没有头部与底部
	        weixin: u.indexOf('MicroMessenger') == -1 //是否为微信浏览器
	        };
	    }()
	}
	
	console.log(browser.versions.trident, 'IE')     // 
	console.log(browser.versions.webKit, 'goole')   //
	console.log(browser.versions.android, 'android')    //
	console.log(browser.versions.gecko, '火狐') //
	console.log(browser.versions.mobile, '是否为移动端')    //
	console.log(browser.versions.iPhone, 'iphone')  //
	console.log(browser.versions.android, 'android')    //

`

本案例的核心思想就是使用字符串方法indexOf去索引浏览器的信息里是否包含有某个关键字符,在检测字符串串里是否包含某个字符，使用的方式有很多，比如es6的字符串方法有includes(),也可以定义正则去验证，这里不在过多讨论。

结语

本次分享主要目的是为了补充上一篇的《javaScript之Location,Navigator,History》实战应用，以便深入理解和应用。喜欢的同学帮点个赞，万分感谢。