开头总要有点废话

  今天想了下,还是分享下自己平时积累的一些实用性较高的js方法,供大家指点和评价。本想分篇介绍,发现有点画蛇添足。整理了下也没多少拿得出手的方法,自然有一些是网上看到的个人觉得很有实用性的方法,在这里一起贴出来供大家探讨。


代码和介绍

点击返回若没有之前页面则跳转到规定页面

  首先是客户需求中要求——单个分享到微信的页面,点击返回可以跳转到网站首页。

  期间这个功能有和客户探讨过,能否在页面中添加回到首页按钮进行跳转。

  可是这种方式无法作用到每个页面,并且指明需要该功能的分享页面没有可以放得下一个图标,又不影响美观的地方了。于是,本人只好是寻求度娘。度娘上也尽是一些打着擦边球的功能。

  所以通过自己的尝试 有了以下代码:

 1 //返回之前没页面则返回首页
 2 function pushHistory() {
 3     //获取浏览器历史记录栈中的记录个数
 4     //由于页面加载的时候就会将当前页面压入栈中 所以判断是否小于2
 5     if (history.length < 2) {
 6         var state = {
 7             title: "index",
 8             url: getHttpPrefix + "index.html"
 9         };
10         window.history.pushState(state, "index", getHttpPrefix + "index.html");
11         state = {
12             title: "index",
13             url: ""
14         };
15         window.history.pushState(state, "index", "");
16     }
17 }

再将下面这段代码加入页面ready事件中:

 1 setTimeout(function () {
 2         pushHistory()
 3         window.addEventListener("popstate", function (e) { 5             if (window.history.state !=null&&window.history.state.url != "") {
 6                 location.href = window.history.state.url
 7             }
 8
 9         });
10     }, 300);

具体功能就是判断之前是否有页面,若没有就将制定网站的链接地址插入state(这里用的是首页),然后再监听popstate事件,进行相应功能的操作。

这段代码可能还有一些小问题,所以打算是贴出来有人可以一起探讨和完善。

便捷log方法

  相信大家页面调试的时候早已经厌烦了console.log()略显啰嗦的敲打长度。有些人可能会使用快捷输入进行快速输入(如:输入cl编译环境智能跳出console)。不过在等到项目发布的时候 看到许多忘记删掉的调试信息,还是会难以清除。所以本人干脆写了个方法 用来专门处理这种情况。

 1 function lll() {
 2     //全局变量_debug用来控制调试信息开关
 3     if (_debug) {
 4         var arr = [];
 5         //arguments是方法的参数集合 这样做是为了不限制参数的个数,方便调试
 6         for (_item in arguments) {
 7             //由于个人习惯字符串信息就显示在一行里所以对字符串进行了筛选拼接
 8             if (typeof _item == "String") {
 9                 arr.push(_item)
10             } else {
11                 console.log(_item)
12             }
13         }
14         if(arr.length>0)console.log(arr.join(','))
15     }
16 }

  其实还有点不满意的就是 没办法自动获取到参数的名字不然就可以这样使用:

  

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

  看起来是不是就更加明白点了?

获取浏览器定位信息(支持移动端)

  接到很多的项目都是移动端定制开发的,所以经常会用到需要定位当前地点的信息。

  可是网上很多的接口都是需要引用一段外部js的比如百度的api,微信的api等等。

  我接下来介绍一种不需要引用外部js,只需要向外部API链接提交参数就可以获取定位的方法:

  

 1     if (getCookie('position') == "") {
 2
 3         if (navigator.userAgent.indexOf("MicroMessenger") > -1) {//判断是否是微信端,具体视情况而定
 4             navigator.geolocation.getCurrentPosition(function getPositionSuccess(position) {
 5                 //通过html5的navigator.geolocation接口 获取浏览器的当前定位 (移动端最准确,PC会有较大偏差)
 6                 var lat = position.coords.latitude;//获取过来的当前纬度
 7                 var lng = position.coords.longitude;//获取过来的当前经度
 8                 var arr = []
 9                 arr.push(lng)
10                 arr.push(lat)
11                 //alert(position)
12                 $.ajax({
13                     type: "GET",
14                     url: "http://api.map.baidu.com/geocoder/v2/?ak=oM55dVWVwLUU7shkz7uY8M6E&callback=renderReverse&location=" + lat + "," + lng + "&output=json&pois=1",//将经纬度通过地址栏参数的形式 传给百度提供的api
15                     beforeSend: function () {
16                         //由于这段过程需要些时间 所以最好页面上有加载提示
17                         iosload()//本人写的页面加载动画
18                     },
19                     data: {},
20                     dataType: "jsonp",//由于是跨域传输 所以需要以jsonp的形式进行传输
21                     jsonpCallback: "renderReverse",//类似跨域传输的标识 需要接收方和传输方做好统一
22                     success: function (data) {
23                         ios.hide();
24                         //alert(data)
25                         $("#myposition").html("我在:" + data.result.addressComponent.city)
26                         setCookie("position", data.result.addressComponent.city, 24 * 60 * 30)
27                     }
28                 })
29
30     }, function (error) {
31         //alert(error.message);
32     }, {})
33     }
34 }

这段代码是本人实际项目中的一段代码,由于需要判断是否已经获取到定位信息,不能每次页面加载都进行一次获取 所以我用Cookie将定位信息保存了起来

刚开始的时候判断是否有当前的定位信息cookie,没有。再判断是否是在移动端(因为项目是微信端的,所以我这里只是做了微信端的验证)

然后再调用html5提供的接口参数 进行数据传输,将百度返回过来的jsonp进行处理。由于我项目里只需要获取定位的城市信息 所以这里只是举了获取城市的例子。

如果需要其他更加精确的信息 可以访问百度的相应接口文档。

http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding

获取字符串数值部分

  因为项目上我只负责功能的实现,所以很多页面并不是我自己搭的,但是 又会有些生手来搭出一些很不好获取标签内的数值的情况。

  比如:

  

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

像这种页面,有时候要获取里面的998或者98。就会变的有点麻烦。

通过我下面提供的方法,可以很方便的解决这种情况

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

这段方法很简短,实质上就是通过正则去匹配。将非数字或者小数点的字符替换成空的字符串(实际上就是删除)

这样返回过来的数据就是我们想要的数字,我最后又进行了一次转换为浮点型的操作,这是为了方便将数据进行后期处理。比如保留两位小数,四舍五入 等等。

获取设备信息

 1 //#region 获取设备信息
 2
 3 var browser = {
 4     versions: function () {
 5         var u = navigator.userAgent, app = navigator.appVersion;
 6         return {
 7             trident: u.indexOf('Trident') > -1, //IE内核
 8             presto: u.indexOf('Presto') > -1, //opera内核
 9             webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
10             gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
11             mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
12             ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
13             android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
14             iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
15             iPad: u.indexOf('iPad') > -1, //是否iPad
16             webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
17             weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
18             qq: u.match(/\sQQ/i) == " qq" //是否QQ
19         };
20     }(),
21     language: (navigator.browserLanguage || navigator.language).toLowerCase()
22 }
23
24 //实际使用的时候如下:
25 if (browser.versions.webKit) {
26     //为苹果 谷歌内核执行的代码...
27 }
28
29 //#endregion

这里也是分享一个不是我写的 也是在网上看到的一个封装成对象的判断设备信息的方式。

个人觉得很好用,于是也拿来跟大家分享一下。

字符串扩展方法——以下介绍的都是对String类型数据进行附加的方法

1.将字符串超出指定长度部分隐藏

 1 /*
 2 将字符串以指定长度显示,多余部分以省略号显示(len--显示长度
 3 defaultStr--若字符串为空显示的字符串)
 4 */
 5 String.prototype.splitString = function (len, defaultStr) {
 6     var result = "";
 7     var str = this.toString()
 8     if (str) {
 9         str = str.trim()
10         if (str.length > len) {
11             result = str.substring(0, len) + "...";
12         }
13         else {
14             result = str;
15         }
16     }
17     else {
18         result = defaultStr;
19     }
20     return result;
21 }

注释已经够简单明了了。不理解的可以留言,博主看到一定回复。

2.将字符串长度减一

1 //长度减一
2 String.prototype.delLast = function () {
3     return this.substring(0, this.length - 1)
4 }

有些人可能会觉得 这个方法有点脱裤子放屁的嫌疑,其实真正的项目中 会经常需要这个操作。

与其写一段长长的substring 不如咱们写个方法将代码精简,并且在码代码的时候 也很方便 直接在对应的字符串后面 轻轻一点,选择delLast就行。

一句话,用过都说好!

3.将数字型字符串补全指定长度

 1 //给数字型字符串固定指定长度
 2 String.prototype.addZero = function (n) {
 3     var num = this
 4     var len = num.toString().length;
 5     while (len < n) {
 6         num = '0' + num;
 7         len++;
 8     }
 9     return num;
10 }

看注释可能有点不理解 其实就是加入这个字符串是 "2",通过这个扩展方法 可以这么操作 "2".addZero(2)

那么返回过来的就是"02"这样的字符串。

用过都说好!

4.将数据库DateTime类型转换为Date

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

5.用户昵称省略 

1 //用户昵称省略
2 String.prototype.telHide = function () {
3     var name = this
4     return name.substr(0, 1) + "****" + name.substring(name.length - 1, name.length)
5 }

转载于:https://www.cnblogs.com/cydiacen/articles/Cydiacen_article_1.html

分享几个个人经常用到的js方法相关推荐

  1. php 使用css乱码,分享CSS字符编码引起乱码快速解决的方法

    下面小编就为大家带来一篇分享CSS字符编码引起乱码快速解决的方法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 乱码引起的CSS失效原理: 由于一个中文是两个字符组成, ...

  2. mac 如何查看anaconda的路径_Mac OS如何直接查看gif图片?分享MAC直接查看gif图片的三种方法...

    想必许多刚入手Mac的用户在浏览GIF图片文件时,会发现Mac不能直接打开GIF,因此有的用户为了方便查看还特意去下载了GIF的图片查看器,其实在Mac中有多种能够直接打开GIF的方法,用户无需任何第 ...

  3. dnf服务器未响应win7,win7dnf未响应怎么解决|分享win7系统dnf总是未响应的解决方法...

    收到反馈win7dnf未响应怎么解决|分享win7系统dnf总是未响应的解决方法,相信dnf的忠实用户们一定会遇到dnf未响应的问题吧,有些小伙伴们还是经常性的会遇到这种问题,就来求助小编给出解决方法 ...

  4. python怎么模拟浏览器交互_干货分享:python爬虫模拟浏览器的两种方法实例分析(赶紧收藏)...

    今天为大家带来的内容是:干货分享:python爬虫模拟浏览器的两种方法实例分析(赶紧收藏) 文章主要介绍了python爬虫模拟浏览器的两种方法,结合实例形式分析了Python爬虫模拟浏览器的两种常见操 ...

  5. 分享套接字数据包序列化与反序列化方法

    分享套接字数据包序列化与反序列化方法 " 简单说一下,本文不涉及Socket的连接.数据接收,只是对数据包(byte[])的序列化和反序列化方法的封装介绍. 本文目录 本文背景 一般操作 本 ...

  6. 微信分享功能问题-描述内容换行,导致js加载失败

    jsContent内容存在换行符,导致js处理失败, 解决办法,在后台接口中替换'/r/n'为空,并截取前30位 weiXinJsSdk.setSharcontent(StringUtils.isNo ...

  7. “限时分享“ 本地80个小游戏 HTML+CSS+JS源码分享

    开源项目集合 1. "限时分享" 本地80个小游戏 HTML+CSS+JS源码分享 2. "限时分享" 别错过了,最全的微信小程序源码收集分享 里面有80款小游 ...

  8. 如何给html文件夹密码,怎样给文件夹加上密码_分享两种给文件夹设密码的方法...

    现在大家习惯把重要的文件或比较隐私的文件存放在电脑上,出于安全考虑,大家会选择给文件夹设密码.但是问题来了,怎样给文件夹加密码呢?估计大多数的人都还不太清楚该怎么设置吧,别着急,这里小编分享两种给文件 ...

  9. 微信公众号开发 自定义分享 从前台到Java后台 调用微信JS接口分享朋友圈

    20180811写在前面的话 有很多人遇到问题之后问我,结果大多数是因为配置问题,所以请详细阅读前面的配置步骤. 20181016注意事项 收到反馈,之前写的接口即将废弃,源代码中的js接口需要修改, ...

最新文章

  1. 创建和存储 cookie
  2. 【转】【UNITY3D 游戏开发之五】Google-protobuf与FlatBuffers数据的序列化和反序列化...
  3. java、前端、php、asp.net开发资源分享(视频教程,源码,项目)
  4. Hibernate 的Set、List、Map集合操作(添加,修改,查询)
  5. 华为mate40计算机,原来拍摄还能这么玩?华为Mate40 Pro连接电脑+耳机,Vlog输出分分钟...
  6. SUBMIT 的使用方法
  7. CTF-不一样的凯撒密码
  8. jstorm 读取mysql_jstorm运维经验转载
  9. 【转载】Makefile教程
  10. mysql系列之6--------使用第三方工具-percona来备份mysql和恢复
  11. java 多个项目间事物_Java-web-多个独立项目之间相互调用实践
  12. 高德地图纠偏 php,驾车轨迹纠偏-轨迹纠偏-示例中心-JS API 示例 | 高德地图API
  13. kettle执行结果面板步骤度量(一)——转换
  14. c语言足球管理系统,如足球一般优美的C语言
  15. 如何自定义火狐背景_在Firefox中自定义菜单
  16. 招聘渠道超全汇总,最适合你的是哪一类?
  17. 重装Office后打开Powerpoint和excel提示找不到VCRUNTIME140_1.dll的解决办法(亲测成功,简单有效)
  18. opencv计算图像的水平投影和垂直投影
  19. 新C++(3):内存管理
  20. 20180316 三对角矩阵

热门文章

  1. jsp连接Sql Server 2000数据库
  2. 报错:mysqldump‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
  3. ES6学习(七)—Set 和 Map 数据结构
  4. 银行不放款可以换银行贷款吗?
  5. 放假为什么要借周末呢?
  6. 女儿还有三个月就高考了,最近压力大,特别敏感,容易发火怎么办?
  7. 年轻人,被领导骂是怎样一种感觉?
  8. 很多人把红薯当成减肥餐,吃红薯到底是增肥还是减肥?
  9. 科比退役时间什么时候
  10. 农村人深加工红薯,一招增值数倍,机器一条龙操作省人力