一些實(shí)用性較高的js方法

更新時(shí)間：2016年04月19日 15:11:38 作者：Cydiacen

這篇文章主要為大家分享了一些實(shí)用性較高的js方法，方便大家開(kāi)發(fā)時(shí)使用，感興趣的小伙伴們可以參考一下

本文分享下自己平時(shí)積累的一些實(shí)用性較高的js方法，供大家指點(diǎn)和評(píng)價(jià)。本想分篇介紹，發(fā)現(xiàn)有點(diǎn)畫(huà)蛇添足。整理了下也沒(méi)多少拿得出手的方法，自然有一些是網(wǎng)上看到的個(gè)人覺(jué)得很有實(shí)用性的方法，在這里一起貼出來(lái)供大家探討。

1、點(diǎn)擊返回若沒(méi)有之前頁(yè)面則跳轉(zhuǎn)到規(guī)定頁(yè)面

　　首先是客戶(hù)需求中要求——單個(gè)分享到微信的頁(yè)面，點(diǎn)擊返回可以跳轉(zhuǎn)到網(wǎng)站首頁(yè)。

　　期間這個(gè)功能有和客戶(hù)探討過(guò)，能否在頁(yè)面中添加回到首頁(yè)按鈕進(jìn)行跳轉(zhuǎn)。

　　可是這種方式無(wú)法作用到每個(gè)頁(yè)面，并且指明需要該功能的分享頁(yè)面沒(méi)有可以放得下一個(gè)圖標(biāo)，又不影響美觀的地方了。于是，本人只好是尋求度娘。度娘上也盡是一些打著擦邊球的功能。

　　所以通過(guò)自己的嘗試有了以下代碼：

//返回之前沒(méi)頁(yè)面則返回首頁(yè)
function pushHistory() {
  //獲取瀏覽器歷史記錄棧中的記錄個(gè)數(shù)
  //由于頁(yè)面加載的時(shí)候就會(huì)將當(dāng)前頁(yè)面壓入棧中 所以判斷是否小于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", "");
  }
}

再將下面這段代碼加入頁(yè)面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);

具體功能就是判斷之前是否有頁(yè)面，若沒(méi)有就將制定網(wǎng)站的鏈接地址插入state（這里用的是首頁(yè)），然后再監(jiān)聽(tīng)popstate事件，進(jìn)行相應(yīng)功能的操作。

這段代碼可能還有一些小問(wèn)題，所以打算是貼出來(lái)有人可以一起探討和完善。

2、便捷log方法

　　相信大家頁(yè)面調(diào)試的時(shí)候早已經(jīng)厭煩了console.log()略顯啰嗦的敲打長(zhǎng)度。有些人可能會(huì)使用快捷輸入進(jìn)行快速輸入(如：輸入cl編譯環(huán)境智能跳出console)。不過(guò)在等到項(xiàng)目發(fā)布的時(shí)候看到許多忘記刪掉的調(diào)試信息，還是會(huì)難以清除。所以本人干脆寫(xiě)了個(gè)方法用來(lái)專(zhuān)門(mén)處理這種情況。

function lll() {
  //全局變量_debug用來(lái)控制調(diào)試信息開(kāi)關(guān)
  if (_debug) {
    var arr = [];
    //arguments是方法的參數(shù)集合 這樣做是為了不限制參數(shù)的個(gè)數(shù)，方便調(diào)試
    for (_item in arguments) {
      //由于個(gè)人習(xí)慣字符串信息就顯示在一行里所以對(duì)字符串進(jìn)行了篩選拼接
      if (typeof _item == "String") {
        arr.push(_item)
      } else {
        console.log(_item)
      }
    }
    if(arr.length>0)console.log(arr.join(','))
  }
}

　　其實(shí)還有點(diǎn)不滿(mǎn)意的就是沒(méi)辦法自動(dòng)獲取到參數(shù)的名字不然就可以這樣使用：　　

var a = 123, b = 333, obj = { name: "name", content: "..." }
 lll(a, b, obj)//調(diào)試信息為： a:123,b:123
        //obj:
        //{ name: "name", content: "..." }

　　看起來(lái)是不是就更加明白點(diǎn)了？

3、獲取瀏覽器定位信息（支持移動(dòng)端）

　　接到很多的項(xiàng)目都是移動(dòng)端定制開(kāi)發(fā)的，所以經(jīng)常會(huì)用到需要定位當(dāng)前地點(diǎn)的信息。

　　可是網(wǎng)上很多的接口都是需要引用一段外部js的比如百度的api，微信的api等等。

　　我接下來(lái)介紹一種不需要引用外部js，只需要向外部API鏈接提交參數(shù)就可以獲取定位的方法：

if (getCookie('position') == "") {

    if (navigator.userAgent.indexOf("MicroMessenger") > -1) {//判斷是否是微信端，具體視情況而定
      navigator.geolocation.getCurrentPosition(function getPositionSuccess(position) {
        //通過(guò)html5的navigator.geolocation接口 獲取瀏覽器的當(dāng)前定位 （移動(dòng)端最準(zhǔn)確，PC會(huì)有較大偏差）
        var lat = position.coords.latitude;//獲取過(guò)來(lái)的當(dāng)前緯度
        var lng = position.coords.longitude;//獲取過(guò)來(lái)的當(dāng)前經(jīng)度
        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",//將經(jīng)緯度通過(guò)地址欄參數(shù)的形式 傳給百度提供的api
          beforeSend: function () {
            //由于這段過(guò)程需要些時(shí)間 所以最好頁(yè)面上有加載提示
            iosload()//本人寫(xiě)的頁(yè)面加載動(dòng)畫(huà)
          },
          data: {},
          dataType: "jsonp",//由于是跨域傳輸 所以需要以jsonp的形式進(jìn)行傳輸
          jsonpCallback: "renderReverse",//類(lèi)似跨域傳輸?shù)臉?biāo)識(shí) 需要接收方和傳輸方做好統(tǒng)一
          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);
  }, {})
  }
}

這段代碼是本人實(shí)際項(xiàng)目中的一段代碼，由于需要判斷是否已經(jīng)獲取到定位信息，不能每次頁(yè)面加載都進(jìn)行一次獲取所以我用Cookie將定位信息保存了起來(lái)

剛開(kāi)始的時(shí)候判斷是否有當(dāng)前的定位信息cookie，沒(méi)有。再判斷是否是在移動(dòng)端（因?yàn)轫?xiàng)目是微信端的，所以我這里只是做了微信端的驗(yàn)證）

然后再調(diào)用html5提供的接口參數(shù) 進(jìn)行數(shù)據(jù)傳輸，將百度返回過(guò)來(lái)的jsonp進(jìn)行處理。由于我項(xiàng)目里只需要獲取定位的城市信息所以這里只是舉了獲取城市的例子。

4、獲取字符串?dāng)?shù)值部分

　　因?yàn)轫?xiàng)目上我只負(fù)責(zé)功能的實(shí)現(xiàn)，所以很多頁(yè)面并不是我自己搭的，但是又會(huì)有些生手來(lái)搭出一些很不好獲取標(biāo)簽內(nèi)的數(shù)值的情況。

　　比如：

<div>原價(jià)998現(xiàn)在只要
  <a>99.8!</a>
 </div>

像這種頁(yè)面，有時(shí)候要獲取里面的998或者98。就會(huì)變的有點(diǎn)麻煩。

通過(guò)我下面提供的方法，可以很方便的解決這種情況

 function getNum(text) {
   var value = text.replace(/[^(0-9).]/ig, "");
   return parseFloat(value);
 }

這段方法很簡(jiǎn)短，實(shí)質(zhì)上就是通過(guò)正則去匹配。將非數(shù)字或者小數(shù)點(diǎn)的字符替換成空的字符串（實(shí)際上就是刪除）

這樣返回過(guò)來(lái)的數(shù)據(jù)就是我們想要的數(shù)字，我最后又進(jìn)行了一次轉(zhuǎn)換為浮點(diǎn)型的操作，這是為了方便將數(shù)據(jù)進(jìn)行后期處理。比如保留兩位小數(shù)，四舍五入等等。

5、獲取設(shè)備信息

//#region 獲取設(shè)備信息

var browser = {
  versions: function () {
    var u = navigator.userAgent, app = navigator.appVersion;
    return {
      trident: u.indexOf('Trident') > -1, //IE內(nèi)核
      presto: u.indexOf('Presto') > -1, //opera內(nèi)核
      webKit: u.indexOf('AppleWebKit') > -1, //蘋(píng)果、谷歌內(nèi)核
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐內(nèi)核
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動(dòng)終端
      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應(yīng)該程序，沒(méi)有頭部與底部
      weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
      qq: u.match(/\sQQ/i) == " qq" //是否QQ
    };
  }(),
  language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

//實(shí)際使用的時(shí)候如下：
if (browser.versions.webKit) {
  //為蘋(píng)果 谷歌內(nèi)核執(zhí)行的代碼...
}

//#endregion

這里也是分享一個(gè)不是我寫(xiě)的也是在網(wǎng)上看到的一個(gè)封裝成對(duì)象的判斷設(shè)備信息的方式。

個(gè)人覺(jué)得很好用，于是也拿來(lái)跟大家分享一下。

字符串?dāng)U展方法——以下介紹的都是對(duì)String類(lèi)型數(shù)據(jù)進(jìn)行附加的方法

1.將字符串超出指定長(zhǎng)度部分隱藏

/*
將字符串以指定長(zhǎng)度顯示，多余部分以省略號(hào)顯示（len--顯示長(zhǎng)度
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;
}

注釋已經(jīng)夠簡(jiǎn)單明了了。不理解的可以留言，博主看到一定回復(fù)。

2.將字符串長(zhǎng)度減一

//長(zhǎng)度減一
 String.prototype.delLast = function () {
   return this.substring(0, this.length - 1)
 }

有些人可能會(huì)覺(jué)得這個(gè)方法有點(diǎn)脫褲子放屁的嫌疑，其實(shí)真正的項(xiàng)目中會(huì)經(jīng)常需要這個(gè)操作。

與其寫(xiě)一段長(zhǎng)長(zhǎng)的substring 不如咱們寫(xiě)個(gè)方法將代碼精簡(jiǎn)，并且在碼代碼的時(shí)候也很方便直接在對(duì)應(yīng)的字符串后面輕輕一點(diǎn)，選擇delLast就行。

一句話(huà)，用過(guò)都說(shuō)好！

3.將數(shù)字型字符串補(bǔ)全指定長(zhǎng)度

//給數(shù)字型字符串固定指定長(zhǎng)度
String.prototype.addZero = function (n) {
  var num = this
  var len = num.toString().length;
  while (len < n) {
    num = '0' + num;
    len++;
  }
  return num;
}

看注釋可能有點(diǎn)不理解其實(shí)就是加入這個(gè)字符串是 "2"，通過(guò)這個(gè)擴(kuò)展方法可以這么操作 "2".addZero(2)

那么返回過(guò)來(lái)的就是"02"這樣的字符串。

用過(guò)都說(shuō)好！

4.將數(shù)據(jù)庫(kù)DateTime類(lèi)型轉(zhuǎn)換為Date

 String.prototype.DTD = function () {
   return new Date(Date.parse(this.toString().replace(/-/g, "/")))
 }

5.用戶(hù)昵稱(chēng)省略　

//用戶(hù)昵稱(chēng)省略
 String.prototype.telHide = function () {
   var name = this
   return name.substr(0, 1) + "****" + name.substring(name.length - 1, name.length)
 }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: