一些实用性较高的js方法


Posted in Javascript onApril 19, 2016

本文分享下自己平时积累的一些实用性较高的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()略显??碌那么虺ざ取S行┤丝赡芑崾褂每旖菔淙虢?锌焖偈淙?如:输入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)
 }

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

Javascript 相关文章推荐
javascript闭包的理解和实例
Aug 12 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 #Javascript
JavaScript中创建对象的模式汇总
Apr 19 #Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 #Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 #Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 #Javascript
html5+javascript实现简单上传的注意细节
Apr 18 #Javascript
jQuery的内容过滤选择器学习教程
Apr 18 #Javascript
You might like
深入解析php中的foreach函数
2013/08/31 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python删除某个字符
2018/03/19 Python
利用Python优雅的登录校园网
2020/10/21 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
党员自我评价分享
2013/12/13 职场文书
班主任工作经验材料
2014/02/02 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
高中军训的心得体会
2014/09/01 职场文书
体育教师教学随笔
2015/08/15 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
JAVA springCloud项目搭建流程
2022/05/11 Java/Android