這篇文章主要為大家分享了一些實用性較高的js方法，方便大家開發時使用，感興趣的小伙伴們可以參考一下
本文分享下自己平時積累的一些實用性較高的js方法，供大家指點和評價。本想分篇介紹，發現有點畫蛇添足。整理了下也沒多少拿得出手的方法，自然有一些是網上看到的個人覺得很有實用性的方法，在這里一起貼出來供大家探討。
1、點擊返回若沒有之前頁面則跳轉到規定頁面
首先是客戶需求中要求——單個分享到微信的頁面，點擊返回可以跳轉到網站首頁。
期間這個功能有和客戶探討過，能否在頁面中添加回到首頁按鈕進行跳轉。
可是這種方式無法作用到每個頁面，并且指明需要該功能的分享頁面沒有可以放得下一個圖標，又不影響美觀的地方了。于是，本人只好是尋求度娘。度娘上也盡是一些打著擦邊球的功能。
所以通過自己的嘗試 有了以下代碼：
//返回之前沒頁面則返回首頁
function pushHistory() {
//獲取瀏覽器歷史記錄棧中的記錄個數
//由于頁面加載的時候就會將當前頁面壓入棧中 所以判斷是否小于2
if (history.length < 2) {
var state = {
title: "index",
url: getHttpPrefix + "index.html"
};
window.history.pushState(state, "index", getHttpPrefix + "index.html");
state = {
title: "index",
url: ""
};
window.history.pushState(state, "index", "");
}
}
再將下面這段代碼加入頁面ready事件中：
setTimeout(function () {
pushHistory()
window.addEventListener("popstate", function (e) { 5 if (window.history.state !=null&&window.history.state.url != "") {
location.href = window.history.state.url
}
});
}, 300);
具體功能就是判斷之前是否有頁面，若沒有就將制定網站的鏈接地址插入state（這里用的是首頁），然后再監聽popstate事件，進行相應功能的操作。
這段代碼可能還有一些小問題，所以打算是貼出來有人可以一起探討和完善。
2、便捷log方法
相信大家頁面調試的時候早已經厭煩了console.log()略顯啰嗦的敲打長度。有些人可能會使用快捷輸入進行快速輸入(如：輸入cl編譯環境智能跳出console)。不過在等到項目發布的時候 看到許多忘記刪掉的調試信息，還是會難以清除。所以本人干脆寫了個方法 用來專門處理這種情況。
function lll() {
//全局變量_debug用來控制調試信息開關
if (_debug) {
var arr = [];
//arguments是方法的參數集合 這樣做是為了不限制參數的個數，方便調試
for (_item in arguments) {
//由于個人習慣字符串信息就顯示在一行里所以對字符串進行了篩選拼接
if (typeof _item == "String") {
arr.push(_item)
} else {
console.log(_item)
}
}
if(arr.length>0)console.log(arr.join(','))
}
}
其實還有點不滿意的就是 沒辦法自動獲取到參數的名字不然就可以這樣使用：
var a = 123, b = 333, obj = { name: "name", content: "..." }
lll(a, b, obj)//調試信息為： a:123,b:123
//obj:
//{ name: "name", content: "..." }
看起來是不是就更加明白點了？
3、獲取瀏覽器定位信息（支持移動端）
接到很多的項目都是移動端定制開發的，所以經常會用到需要定位當前地點的信息。
可是網上很多的接口都是需要引用一段外部js的比如百度的api，微信的api等等。
我接下來介紹一種不需要引用外部js，只需要向外部API鏈接提交參數就可以獲取定位的方法：
if (getCookie('position') == "") {
if (navigator.userAgent.indexOf("MicroMessenger") > -1) {//判斷是否是微信端，具體視情況而定
navigator.geolocation.getCurrentPosition(function getPositionSuccess(position) {
//通過html5的navigator.geolocation接口 獲取瀏覽器的當前定位 （移動端最準確，PC會有較大偏差）
var lat = position.coords.latitude;//獲取過來的當前緯度
var lng = position.coords.longitude;//獲取過來的當前經度
var arr = []
arr.push(lng)
arr.push(lat)
//alert(position)
$.ajax({
type: "GET",
url: "http://api.map.baidu.com/geocoder/v2/?ak=oM55dVWVwLUU7shkz7uY8M6E&callback=renderReverse&location=" + lat + "," + lng + "&output=json&pois=1",//將經緯度通過地址欄參數的形式 傳給百度提供的api
beforeSend: function () {
//由于這段過程需要些時間 所以最好頁面上有加載提示
iosload()//本人寫的頁面加載動畫
},
data: {},
dataType: "jsonp",//由于是跨域傳輸 所以需要以jsonp的形式進行傳輸
jsonpCallback: "renderReverse",//類似跨域傳輸的標識 需要接收方和傳輸方做好統一
success: function (data) {
ios.hide();
//alert(data)
$("#myposition").html("我在：" + data.result.addressComponent.city)
setCookie("position", data.result.addressComponent.city, 24 * 60 * 30)
}
})
}, function (error) {
//alert(error.message);
}, {})
}
}
這段代碼是本人實際項目中的一段代碼，由于需要判斷是否已經獲取到定位信息，不能每次頁面加載都進行一次獲取 所以我用Cookie將定位信息保存了起來
剛開始的時候判斷是否有當前的定位信息cookie，沒有。再判斷是否是在移動端（因為項目是微信端的，所以我這里只是做了微信端的驗證）
然后再調用html5提供的接口參數 進行數據傳輸，將百度返回過來的jsonp進行處理。由于我項目里只需要獲取定位的城市信息 所以這里只是舉了獲取城市的例子。
4、獲取字符串數值部分
因為項目上我只負責功能的實現，所以很多頁面并不是我自己搭的，但是 又會有些生手來搭出一些很不好獲取標簽內的數值的情況。
比如：
<div>原價998現在只要
<a>99.8!</a>
</div>
像這種頁面，有時候要獲取里面的998或者98。就會變的有點麻煩。
通過我下面提供的方法，可以很方便的解決這種情況
function getNum(text) {
var value = text.replace(/[^(0-9).]/ig, "");
return parseFloat(value);
}
這段方法很簡短，實質上就是通過正則去匹配。將非數字或者小數點的字符替換成空的字符串（實際上就是刪除）
這樣返回過來的數據就是我們想要的數字，我最后又進行了一次轉換為浮點型的操作，這是為了方便將數據進行后期處理。比如保留兩位小數，四舍五入 等等。
5、獲取設備信息
//#region 獲取設備信息
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE內核
presto: u.indexOf('Presto') > -1, //opera內核
webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐內核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
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, //是否為iPhone或者QQHD瀏覽器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web應該程序，沒有頭部與底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
//實際使用的時候如下：
if (browser.versions.webKit) {
//為蘋果 谷歌內核執行的代碼...
}
//#endregion
這里也是分享一個不是我寫的 也是在網上看到的一個封裝成對象的判斷設備信息的方式。
個人覺得很好用，于是也拿來跟大家分享一下。
字符串擴展方法——以下介紹的都是對String類型數據進行附加的方法
1.將字符串超出指定長度部分隱藏
/*
將字符串以指定長度顯示，多余部分以省略號顯示（len--顯示長度
defaultStr--若字符串為空顯示的字符串）
*/
String.prototype.splitString = function (len, defaultStr) {
var result = "";
var str = this.toString()
if (str) {
str = str.trim()
if (str.length > len) {
result = str.substring(0, len) + "...";
}
else {
result = str;
}
}
else {
result = defaultStr;
}
return result;
}
注釋已經夠簡單明了了。不理解的可以留言，博主看到一定回復。
2.將字符串長度減一
//長度減一
String.prototype.delLast = function () {
return this.substring(0, this.length - 1)
}
有些人可能會覺得 這個方法有點脫褲子放屁的嫌疑，其實真正的項目中 會經常需要這個操作。
與其寫一段長長的substring 不如咱們寫個方法將代碼精簡，并且在碼代碼的時候 也很方便 直接在對應的字符串后面 輕輕一點，選擇delLast就行。
一句話，用過都說好！
3.將數字型字符串補全指定長度
//給數字型字符串固定指定長度
String.prototype.addZero = function (n) {
var num = this
var len = num.toString().length;
while (len < n) {
num = '0' + num;
len++;
}
return num;
}
看注釋可能有點不理解 其實就是加入這個字符串是 "2"，通過這個擴展方法 可以這么操作 "2".addZero(2)
那么返回過來的就是"02"這樣的字符串。
用過都說好！
4.將數據庫DateTime類型轉換為Date
String.prototype.DTD = function () {
return new Date(Date.parse(this.toString().replace(/-/g, "/")))
}
5.用戶昵稱省略
//用戶昵稱省略
String.prototype.telHide = function () {
var name = this
return name.substr(0, 1) + "****" + name.substring(name.length - 1, name.length)
}
以上就是本文的全部內容，希望對大家的學習有所幫助。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
