一些实用性较高的js方法
本文分享下自己平时积累的一些实用性较高的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()略显啰嗦的敲打长度。有些人可能会使用快捷输入进行快速输入(如:输入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) }
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了node.js如何操作MySQL数据库,帮助大家更好的进行web开发,感兴趣的朋友可以了解下...2020-10-29
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了js实现文本框输入文字个数限制代码,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,如何限制,请看本文...2015-12-27
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06