좀 더 실용적인 js 메소드_자바스크립트 기술

이 기사에서는 여러분의 지도와 평가를 위해 제가 일상 생활에서 축적한 보다 실용적인 js 방법 중 일부를 공유합니다. 부분적으로 소개하고 싶었지만 좀 불필요하다는 생각이 들었습니다. 정리한 후에는 실용적인 방법이 많지 않습니다. 당연히 인터넷에서 본 몇 가지 방법이 매우 실용적이라고 생각되어 모두가 논의할 수 있도록 여기에 게시하겠습니다.

1. 이전 페이지가 없을 경우 돌아가기를 클릭하면 해당 페이지로 이동합니다

우선, 고객 요구에 대한 요구 사항이 있습니다. 단일 페이지를 WeChat에 공유하고, 돌아가기를 클릭하면 웹사이트 홈페이지로 이동합니다.

이 기간 동안 이 기능을 페이지로 이동할 수 있는 홈페이지로 돌아가기 버튼을 추가할 수 있는지에 대해 고객과 논의했습니다.

하지만 이 방법을 모든 페이지에 적용할 수는 없으며, 이 기능이 필요한 공유 페이지에서는 미관에 영향을 주지 않고 아이콘을 배치할 수 없습니다. 그래서 저는 두니앙을 쫓아갈 수밖에 없었습니다. Du Niang에는 한계 기능도 가득합니다.

그래서 제가 직접 시도한 결과 다음과 같은 코드가 생겼습니다.

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

구체적인 기능은 이전에 페이지가 있는지 확인하는 것입니다. 없으면 지정된 웹사이트의 링크 주소를 상태(여기서는 홈페이지를 사용함)에 삽입한 후 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);
  }, {})
  }
}

이 코드는 실제 프로젝트에서 위치 정보 획득 여부를 확인해야 하기 때문에 페이지가 로드될 때마다 획득할 수 없기 때문에 쿠키를 사용하여 위치 정보를 저장하고 있습니다.

처음에는 현재 위치정보 쿠키가 있는지 판단했는데, 없었습니다. 그런 다음 모바일 측인지 확인합니다. (프로젝트가 위챗 측이기 때문에 위챗 측에서만 확인했습니다.)

그런 다음 데이터 전송을 위해 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);
 }

이 방법은 매우 짧으며 기본적으로 정규식을 통해 일치합니다. 숫자가 아닌 문자나 소수점 문자를 빈 문자열로 대체(실제로는 삭제)

이렇게 반환된 데이터는 우리가 원하는 숫자입니다. 데이터의 후처리를 용이하게 하기 위해 마침내 부동 소수점 유형으로 변환을 수행했습니다. 예를 들어 소수점 이하 두 자리 유지, 반올림 등이 있습니다.

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

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