より実践的な js メソッド_javascript スキル

この記事では、皆さんの指導と評価のために、私が日常生活で蓄積したより実践的な JS メソッドのいくつかを共有します。分割して紹介しようと思ったのですが、ちょっと蛇足になってしまいました。整理した結果、実際的な方法はそれほど多くありませんが、私がインターネットで見た中で非常に実用的だと思う方法がいくつかあるので、皆さんに議論してもらいたいと思います。

1. 前のページがない場合は、[戻る] をクリックして指定したページにジャンプします

まず第一に、顧客の要求に要件があります。WeChat に共有される単一ページ。[戻る] をクリックして Web サイトのホームページにジャンプします。

この期間中、この機能について、ページにジャンプするための「ホームページに戻る」ボタンを追加できないかについてお客様と議論しました。

ただし、この方法はすべてのページに適用できるわけではなく、この機能が必要な共有ページでは見た目を損なわずにアイコンを配置することはできません。だから私はドゥ・ニアンを追うしかなかった。ドゥニアンには限界機能も満載です。

それで、私自身の試みにより、次のコードができました:

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

次に、次のコードをページ準備完了イベントに追加します。

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);

特定の関数は、前にページが存在するかどうかを判断し、存在しない場合は、指定された Web サイトのリンク アドレスをステート (ここではホームページを使用します) に挿入し、popstate イベントをリッスンして、対応する関数を実行します。操作。

このコードにはまだ小さな問題がいくつかあるかもしれないので、誰かが議論して一緒に改善できるように投稿する予定です。

2. 便利なログ方法

ページをデバッグする際の console.log() の入力が少し長くなることに、誰もがすでにうんざりしていると思います。素早い入力のためにショートカット入力を使用する人もいます (例: cl と入力すると、コンパイル環境でコンソールがインテリジェントにポップアップします)。ただし、プロジェクトがリリースされると、削除し忘れた多くのデバッグ情報を消去するのは依然として困難です。そこで、この状況に具体的に対処する方法を簡単に書きました。

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. ブラウザの位置情報を取得します (モバイルをサポート)

受注した案件はモバイル端末向けにカスタマイズ・開発されているものが多く、現在地を特定するために必要な情報を利用することが多いです。

しかし、インターネット上の多くのインターフェースは、Baidu の API、WeChat の API などの外部 JS を参照する必要があります。

次に、外部 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があるかどうかを判定していましたが、ありませんでした。次に、モバイル側かどうかを判断します (プロジェクトは WeChat 側にあるため、WeChat 側でのみ検証しました)

次に、データ送信のために html5 が提供するインターフェイス パラメーターを呼び出し、Baidu から返された jsonp を処理します。私のプロジェクトでは所在地の都市情報を取得するだけでよいので、ここでは都市を取得する例を示します。

4. 文字列 の数値部分を取得します。

私はプロジェクト内の機能の実装のみを担当しているため、私が構築したページは多くありませんが、初心者の中にはタグの値を取得するのが難しい状況を作成する人もいます。

例:

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

このようなページでは、場合によっては 998 または 98 を内部に取得する必要があります。ちょっと面倒なことになってしまいます。

この状況は、以下に示す方法で簡単に解決できます

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

このメソッドは非常に短く、基本的に正規表現による照合を行います。数字以外の文字または小数点文字を空の文字列に置き換えます (実際には削除します)

このようにして返されたデータは、最終的に浮動小数点型への変換操作を実行したものです。これは、データの後処理を容易にするためです。たとえば、小数点以下 2 桁の保持、四捨五入などです。

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

ここでは、オブジェクトにカプセル化されている、私が書いたものではなくインターネット上でも見られるデバイス情報を判断する方法も共有します。

個人的にとても便利だと思うので、皆さんにもシェアさせていただきます。

文字列拡張メソッド -

文字列型データを追加するメソッドは次のとおりです。

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. 文字列の長さを 1 つ減らします

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

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