一些实用性较高的js方法
作者:Cydiacen 发布时间:2024-04-29 13:37:40
本文分享下自己平时积累的一些实用性较高的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)
}


猜你喜欢
- OpenCV的imread不能读取中文路径问题import numpy as npimport cv2cv_img = cv2.imdeco
- 俗话说,“工欲善其事,必先利其器”。对于前端开发工程师来说,基于Firefox丰富的Web开发辅助插件无疑就是最好的利器。下面就与大家分享2
- 测试:IE6、IE7、FF3.014突发奇想的效果,主要突出构思,效果还比较粗糙,好好创意一下,应该可以引申出一些比较有新意的图片切换效果。
- 这篇文章主要介绍了python使用enumerate获取迭代元素下标,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习
- 这篇文章主要介绍了简单了解python字符串前面加r,u的含义,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- 一、旧式的字符串格式化% 操作符参考以下示例:>>> name = "Eric">>>
- 本文实例讲述了使用Flask-Cache缓存实现给Flask提速的方法。分享给大家供大家参考,具体如下:Django里面可以很方便的应用缓存
- 一、什么是数据库事务数据库事务( transaction)是访问并可能操作各种数据项的一个数据库操作序列,这些操作要么全部执行,要么全部不执
- 我们不可能直接通过node命令来管理远程站点,这样无法保证网站的可持续运行。我们用Forever来解决这个问题,它可以将NodeJS应用以后
- 1.概述pyecharts 是百度开源的,适用于数据可视化的工具,配置灵活,展示图表相对美观,顺滑。2.安装python3环境下的安装:pi
- 2008年,对于JavaScript来说是非常振奋人心的一年,很多高人加入到JavaScript和Web开发的阵营中来,浏览器厂商在技术上互
- 数模比赛中,常常需要对数据进行处理和分析,但
- 本文实例讲述了Python基于time模块求程序运行时间的方法。分享给大家供大家参考,具体如下:要记录程序的运行时间可以利用Unix系统中,
- 当一个页面上有一百个表单项,你是怎么获取上面的值勤的?这是一段简单的代码,你试试这段代码,试过后,欢迎留言说一下你的想法?index.asp
- ①. vscode的常用快捷键列表1.注释:a) 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/b) 取消单行注释:[ctrl+
- 本文实例为大家分享了python实现矩阵打印的具体代码,供大家参考,具体内容如下之前面试嵌入式软件的一道题,用c实现矩阵打印,考场上并没有写
- 一、JSON.stringify介绍JSON.stringify() 方法将一个 JavaScript 对象或值转换为
- 利用python的递归来执行求和、计数、求最大元素的方法简直溜到爆,这里粘贴一下代码:列表的递归求和:def sum(list): if l
- Python2.6 开始,新增了一种格式化字符串的函数 str.format(),它增强了字符串格式化的功能。基本语法是通过 {} 和 :
- Python异步编程之Asyncio1. 协程简介1.1 协程的含义及实现方法协程(Coroutine),也可以被称为微线程,是一种用户态内