本文分享下自己平时积累的一些实用性较高的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); }, {}) } }