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》實戰應用，以便深刻理解和應用。喜歡的同窗幫點個贊，萬分感謝。