您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

你要的几个JS实用工具函数(持续更新)

时间:2022-07-07 10:01:15  来源:  作者:马克-1949

今天,我们来总结下我们平常使用的工具函数,希望对大家有用。
1、封装fetch
源码:
/**
* 封装fetch函数,用Promise做回调
* @type {{get: (function(*=)), post: (function(*=, *=))}}
*/
const fetchUtil = {
get: (url) => {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'GET',
headers: {
'Content-Type': '
Application/x-www-form-urlencoded',
}
}).then((response) => response.json()).then(response => {
resolve(response);
}).catch(err => {
reject(new Error(err));
});
});
},
post: (url, params) => {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'POST',
headers: {
'Content-Type': '
application/x-www-form-urlencoded',
},
body: params
}).then((response) => response.json()).then(response => {
resolve(response);
}).catch(err => {
reject(new Error(err));
});
});
}
};
export default fetchUtil;
使用:
import Fetch from "../util/FetchUtil.js";
// post请求
post(){
let params = "";
params += "phone=" + "xxxxxx" + "&password="+"123456";
Fetch.post("
https://carvedu.com/api/user/sms", this.params)
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
}
// get请求
get() {
Fetch.get("
https://carvedu.com/api/courses")
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
}
2、判断浏览器环境
源码:
function getSystem(){
const mac = /mac/i,
linux = /linux/i,
win = /win/i;
const platform =
navigator.platform.toLowerCase();
if(mac.test(platform)){
return 'MAC';
} else if(win.test(platform)){
return 'WIN';
} else if(linux.test(platform)){
return 'Linux';
}
return undefined;
}
const browser = {
versions:function(){
let ret = 'xxSys';
const u = navigator.userAgent;
const isMobile = !!u.match(/AppleWebKit.*Mobile.*/),
IOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),
Android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
if(isMobile){
if(ios) return 'IOS';
if(android) return 'Android';
} else {
ret = getSystem() || ret;
}
return ret;
}(),
};
export default browser;
使用:
import browser from "../util/browers.js"
console.log(browser.versions);
3、计算时间差
源码:
let startTime = new Date().getTime();
export const start = (v) =>{
if(v==='reset'){
return startTime = new Date().getTime();
} else{
return startTime;
}
}
使用:
import {start} from "../util/Time.js"
click(){
let userTime = new Date().getTime()-start();
start('reset');
}
4、封装正则库
源码:
export default {
// 正则
regExp:()=>{
return {
mPattern :/^1[345789]d{9}$/, //手机号验证规则
cP : /^[1-9]d{5}(18|19|([23]d))d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$/, // 身份证验证规则
regCode : /^d{4}$/ //验证码规则
/*......*/
}
}
}
使用:
import regExp from '../util/regExp.js'
reg(){
var value ="" // 手机号码举例
console.log(regExp.regExp().mPattern.test(value));
},
 

。。。。。。。。。。。。。

作者:Vam的金豆之路

篇幅有限更多请见扩展链接:
http://www.mark-to-win.com/tutorial/50912.html



Tags:JS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
过去Web非常简单。URL 指向服务器,服务器将数据混合成 html,然后在浏览器上呈现该响应。围绕这种简单范式,诞生了各种Java框架,以前可能需要数月时间完成的一个应用程序基本功能,现在借助这些框架创建相对复杂的项目却只需...【详细内容】
2022-10-18  Tags: JS  点击:(8)  评论:(0)  加入收藏
简介在项目中,存在传递超大 json 数据的场景。直接传输超大 json 数据的话,有以下两个弊端 占用网络带宽,而有些云产品就是按照带宽来计费的,间接浪费了钱 传输数据大导致网络...【详细内容】
2022-10-10  Tags: JS  点击:(18)  评论:(0)  加入收藏
TroisJS 是一个基于 Three.js 的 vue3 三维可视化库,TroisJS对桌面和移动端都有良好的支持。使用 TroisJS 可以在网站上添加一个 3D 渲染器,并在你的 vue文件 的部分中使用...【详细内容】
2022-10-08  Tags: JS  点击:(40)  评论:(0)  加入收藏
在之前的的章节已经简单介绍了如何断言接口的响应值,在实际工作过程中,json 的响应内容往往十分复杂,面对复杂的 json 响应体,主要通过 JSONPath 解决。JSONPath 提供了强大的 J...【详细内容】
2022-10-05  Tags: JS  点击:(24)  评论:(0)  加入收藏
对于JS程序员,alert人人都会。相信很多人初学JS时,就是从写alert入手吧,起码我就是这样,写的第一行代码就是alert。alert真的如此简单吗?可以很简单,也可以很复杂,复杂到你认不出它...【详细内容】
2022-09-27  Tags: JS  点击:(20)  评论:(0)  加入收藏
开发的同学肯定会遇到过通过自带的终端curl请求接口时接口返回的数据格式总是混乱的,如下图这样:常规curl请求可以看到返回数据没有格式化输出看不出数据的层级结构,可以说是非...【详细内容】
2022-09-27  Tags: JS  点击:(28)  评论:(0)  加入收藏
今天给小伙伴们分享一个超赞的企业级Vue组件库Veui。 veui:百度前端团队基于 vue.js 构建的企业级应用UI组件库。star达到1k+,超70+组件。 https://github.com/ecomfe/veui...【详细内容】
2022-09-26  Tags: JS  点击:(48)  评论:(0)  加入收藏
一、引入Vue.js通过script标签引入vue.js,可以引入本地的js文件,也可以引入网络上的js文件。1、引入本地js文件 2、引入网络js文件 二、关闭Vue开发版本的productionTip提示...【详细内容】
2022-09-26  Tags: JS  点击:(39)  评论:(0)  加入收藏
大家好,我是Echa哥。 推荐一个轻量完备的开源前端框架:dagger.js:https://daggerjs.org 什么是 dagger.jsdagger.js 是一个基于 html 的描述式单页应用开发框架,通过在页面 DO...【详细内容】
2022-09-26  Tags: JS  点击:(34)  评论:(0)  加入收藏
众所周知,使用专业工具对JS代码进行混淆加密时,是要对代码进行语法、词法分析、运算加密,并进行AST(抽象语法树)重建的。代码量越大,加密过程运算也就越复杂,加密耗时也就越长。那...【详细内容】
2022-09-24  Tags: JS  点击:(28)  评论:(0)  加入收藏
▌简易百科推荐
前段时间有一个叫做“人类高质量男性”的视频火了,相信很多同学都刷到过。所以今天给大家分享下,什么叫做“人类高质量代码”,哈哈,开个玩笑。其实分享的都是一些自己平时总结的...【详细内容】
2022-10-11    慕课网  Tags:JavaScript   点击:(13)  评论:(0)  加入收藏
在之前的的章节已经简单介绍了如何断言接口的响应值,在实际工作过程中,json 的响应内容往往十分复杂,面对复杂的 json 响应体,主要通过 JSONPath 解决。JSONPath 提供了强大的 J...【详细内容】
2022-10-05  白橘透着黑  今日头条  Tags: json   点击:(24)  评论:(0)  加入收藏
对于JS程序员,alert人人都会。相信很多人初学JS时,就是从写alert入手吧,起码我就是这样,写的第一行代码就是alert。alert真的如此简单吗?可以很简单,也可以很复杂,复杂到你认不出它...【详细内容】
2022-09-27  JShaman  今日头条  Tags:JS   点击:(20)  评论:(0)  加入收藏
开发的同学肯定会遇到过通过自带的终端curl请求接口时接口返回的数据格式总是混乱的,如下图这样:常规curl请求可以看到返回数据没有格式化输出看不出数据的层级结构,可以说是非...【详细内容】
2022-09-27  寻丶  今日头条  Tags:json   点击:(28)  评论:(0)  加入收藏
众所周知,使用专业工具对JS代码进行混淆加密时,是要对代码进行语法、词法分析、运算加密,并进行AST(抽象语法树)重建的。代码量越大,加密过程运算也就越复杂,加密耗时也就越长。那...【详细内容】
2022-09-24  WangLiwen   网易号  Tags:JS   点击:(28)  评论:(0)  加入收藏
在创建 JavaScript 模块时,export 语句用于从模块中导出实时绑定的函数、对象或原始值,以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。...【详细内容】
2022-09-23  dirac    Tags:JavaScript   点击:(32)  评论:(0)  加入收藏
本文简要介绍了 Script Error 问题的来龙去脉,但也不局限于 Script Error,对于通用的系统性问题,应该找到系统性解决方案,进而治标治本。Script Error 原因与当前解法受浏览器同...【详细内容】
2022-09-23  开源中国     Tags:Script Error   点击:(24)  评论:(0)  加入收藏
本实例演示如何通过点击列表头来排序数据网格(DataGrid)。 数据网格(DataGrid)的所有列可以通过点击列表头来排序。您可以定义哪列可以排序。默认的,列是不能排序的,除非您设置 so...【详细内容】
2022-09-22  长城很长521    Tags:jQuery   点击:(28)  评论:(0)  加入收藏
自己动手,实现一个本地JS加密工具JS加密,是前后端JS程序员、小程序开发人员常用的功能。一般,进行JS代码加密时,都会使用在线的JS加密网站,比如众所周知的JShaman,就是个很优秀的J...【详细内容】
2022-09-21  WangLiwen     Tags:JS加密   点击:(17)  评论:(0)  加入收藏
一般浏览器先加载主页,再请求关联的js脚本文件。不管你把js代码嵌入在html中,还是独立保存为一个文件,都必须等待主页加载完成,js代码加载完成后才能执行。网上有人说把js代码放...【详细内容】
2022-09-19  Mutousoft  今日头条  Tags:js脚本   点击:(47)  评论:(0)  加入收藏
站内最新
站内热门
站内头条