Quelques compétences js METHODS_Javascript plus pratiques

Cet article partage certaines des méthodes js les plus pratiques que j'ai accumulées dans ma vie quotidienne pour vous guider et vous évaluer. Je voulais le présenter par parties, mais j'ai trouvé que c'était un peu superflu. Après avoir fait le tri, il n'y a pas beaucoup de méthodes pratiques. Naturellement, il y a certaines méthodes que j'ai vues sur Internet et que je pense être très pratiques. Je les publierai ici pour que tout le monde puisse en discuter.

1. Cliquez sur Retour pour accéder à la page spécifiée s'il n'y a pas de page précédente

Tout d'abord, il y a une exigence dans la demande du client : une seule page partagée sur WeChat, cliquez sur Retour pour accéder à la page d'accueil du site Web.

Durant cette période, nous avons discuté de cette fonction avec nos clients, si nous pouvions ajouter un bouton de retour à la page d'accueil pour accéder à la page.

Cependant, cette méthode ne peut pas être appliquée à chaque page, et la page de partage qui nécessite cette fonction ne peut pas placer une icône sans affecter l'esthétique. Je n’avais donc pas d’autre choix que de poursuivre Du Niang. Du Niang regorge également de fonctions marginales.

Ainsi, grâce à mes propres tentatives, j'ai le code suivant :

//返回之前没页面则返回首页
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", "");
  }
}

Ajoutez ensuite le code suivant à l'événement page 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);

La fonction spécifique est de déterminer s'il y a une page avant. Sinon, insérez l'adresse du lien du site Web spécifié dans l'état (la page d'accueil est utilisée ici), puis écoutez l'événement popstate et exécutez la fonction correspondante. opérations.

Ce code peut encore présenter quelques problèmes mineurs, j'ai donc l'intention de le publier afin que quelqu'un puisse en discuter et l'améliorer ensemble.

2. Méthode de journalisation pratique

Je crois que tout le monde est déjà fatigué de la longueur de frappe légèrement longue de console.log() lors du débogage de la page. Certaines personnes peuvent utiliser la saisie par raccourci pour une saisie rapide (par exemple : entrez cl pour afficher intelligemment la console dans l'environnement de compilation). Cependant, lorsque le projet sera publié, il sera encore difficile d'effacer de nombreuses informations de débogage que j'ai oublié de supprimer. J'ai donc simplement écrit une méthode pour gérer spécifiquement cette situation.

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(','))
  }
}

En fait, ce qui me mécontente un peu c'est qu'il n'y a pas de moyen d'obtenir automatiquement le nom du paramètre, sinon il peut être utilisé comme ceci :

var a = 123, b = 333, obj = { name: "name", content: "..." }
 lll(a, b, obj)//调试信息为： a:123,b:123
        //obj:
        //{ name: "name", content: "..." }

Cela vous paraît plus clair ?

3. Obtenir des informations de positionnement du navigateur (prend en charge les appareils mobiles)

De nombreux projets reçus sont personnalisés et développés pour les terminaux mobiles, de sorte que les informations nécessaires à la localisation de l'emplacement actuel sont souvent utilisées.

Mais de nombreuses interfaces sur Internet doivent référencer un élément de js externe, comme l'API de Baidu, l'API de WeChat, etc.

Ensuite, je présenterai une méthode qui ne nécessite pas de référencer des js externes, mais nécessite uniquement de soumettre des paramètres au lien API externe pour obtenir le positionnement :

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);
  }, {})
  }
}

Ce code est un morceau de code dans mon projet actuel. Comme j'ai besoin de déterminer si les informations de positionnement ont été obtenues, je ne peux pas les obtenir à chaque chargement de la page, j'utilise donc Cookie pour enregistrer les informations de positionnement

Au début, il a été jugé s'il existait un cookie d'informations de positionnement actuel, mais il n'y en avait pas. Déterminez ensuite s'il est du côté mobile (car le projet est du côté WeChat, donc je ne l'ai vérifié que du côté WeChat)

Appelez ensuite les paramètres d'interface fournis par html5 pour la transmission des données et traitez le jsonp renvoyé par Baidu. Puisque j'ai seulement besoin d'obtenir les informations de localisation de la ville dans mon projet, voici juste un exemple d'obtention de la ville.

4. Récupérez la partie numérique de la chaîne

Comme je suis uniquement responsable de l'implémentation des fonctions dans le projet, de nombreuses pages ne sont pas construites par moi, mais certains novices créeront des situations où il est difficile d'obtenir les valeurs​​dans les balises.

Par exemple :

<div>原价998现在只要
  <a>99.8!</a>
 </div>

Pour des pages comme celle-ci, vous devez parfois insérer le 998 ou le 98. Cela deviendra un peu gênant.

Cette situation peut être facilement résolue par la méthode que je propose ci-dessous

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

Cette méthode est très courte et consiste essentiellement à faire correspondre via des expressions régulières. Remplacez les caractères non numériques ou décimaux par des chaînes vides (en fait, supprimez-les)

Les données renvoyées de cette manière sont le nombre que nous voulons. J'ai finalement effectué une opération de conversion en type virgule flottante afin de faciliter le post-traitement des données. Par exemple, conserver deux décimales, arrondir, etc.

5. Obtenir des informations sur l'appareil

//#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

Ici, je partage également une façon de juger les informations sur l'appareil qui sont encapsulées dans un objet et qui n'ont pas été écrites par moi mais également vues sur Internet.

Personnellement, je pense que c'est très utile, je vais donc le partager avec tout le monde.

Méthodes d'extension de chaîne - Les méthodes suivantes permettent d'ajouter des Données de type chaîne

1. Masquer la partie de la chaîne qui dépasse la longueur spécifiée

/*
将字符串以指定长度显示，多余部分以省略号显示（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;
}

Les annotations sont assez simples et claires. Si vous ne comprenez pas, vous pouvez laisser un message et le blogueur vous répondra certainement après l'avoir vu.

2. Diminuez la longueur de la chaîne d'un

//长度减一
 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)
 }

以上就是本文的全部内容，希望对大家的学习有所帮助。