本文分享下自己平时积累的一些实用性较高的js方法,供大家指点和评价。本想分篇介绍,发现有点画蛇添足。整理了下也没多少拿得出手的方法,自然有一些是网上看到的个人觉得很有实用性的方法,在这里一起贴出来供大家探讨。
1、点击返回若没有之前页面则跳转到规定页面
首先是客户需求中要求——单个分享到微信的页面,点击返回可以跳转到网站首页。
期间这个功能有和客户探讨过,能否在页面中添加回到首页按钮进行跳转。
可是这种方式无法作用到每个页面,并且指明需要该功能的分享页面没有可以放得下一个图标,又不影响美观的地方了。于是,本人只好是寻求度娘。度娘上也尽是一些打着擦边球的功能。
所以通过自己的尝试 有了以下代码:
});
},300);
具体功能就是判断之前是否有页面,若没有就将制定网站的链接地址插入state(这里用的是首页),然后再监听popstate事件,进行相应功能的操作。
这段代码可能还有一些小问题,所以打算是贴出来有人可以一起探讨和完善。
2、便捷log方法
相信大家页面调试的时候早已经厌烦了console.log()略显啰嗦的敲打长度。有些人可能会使用快捷输入进行快速输入(如:输入cl编译环境智能跳出console)。不过在等到项目发布的时候 看到许多忘记删掉的调试信息,还是会难以清除。所以本人干脆写了个方法 用来专门处理这种情况。
其实还有点不满意的就是 没办法自动获取到参数的名字不然就可以这样使用:
看起来是不是就更加明白点了?
3、获取浏览器定位信息(支持移动端)
接到很多的项目都是移动端定制开发的,所以经常会用到需要定位当前地点的信息。
可是网上很多的接口都是需要引用一段外部js的比如百度的api,微信的api等等。
我接下来介绍一种不需要引用外部js,只需要向外部API链接提交参数就可以获取定位的方法:
if (navigator.userAgent.indexOf("MicroMessenger") > -1) {//判断是否是微信端,具体视情况而定
navigator.geolocation.getCurrentPosition(function getPositionSuccess(position) {
//通过html5的navigator.geolocation接口 <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>浏览器的当前定位 (移动端最准确,PC会有较大偏差)
var lat = position.coords.latitude;//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>过来的当前纬度
var lng = position.coords.longitude;//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>过来的当前经度
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",//将经纬度通过地址栏参数的形式 传给<a href="https://www.jb51.cc/tag/baidu/" target="_blank" class="keywords">百度</a>提供的api
beforeSend: function () {
//由于这段过程需要些时间 所以最好<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>上有加载<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>
iosload()//本人写的<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>加载动画
},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、获取字符串数值部分
因为项目上我只负责功能的实现,所以很多页面并不是我自己搭的,但是 又会有些生手来搭出一些很不好获取标签内的数值的情况。
比如: