前端JS必用工具【js-tool-big-box】,验证是否是Unicode字符,获取一个字符串的字节长度,以及新增发送JSONP跨域请求的方法

js-tool-big-box,目前已经收集到了用户需求,希望可以添加一些公用方法,我觉得这很好,我们一起把这个前端通用工具做大一些,帮助更多的小伙伴少些util代码,更多的关注于自己的业务开发,真是不错。

目录

1 安装并引入

2  检测某个字符是不是Unicode字符

3  判断字符串的字节长度

4 发送JSONP跨域请求 


1 安装并引入

还是老样子,使用先安装,执行一下命令

npm i js-tool-big-box

这一小结,需要引入3个对外提供的对象,分别是ajaxBox stringBox 和 matchBox

import { matchBox, stringBox, ajaxBox } from 'js-tool-big-box';

2  检测某个字符是不是Unicode字符

比如我们需要输入一个字符,或者几个字符,不能输入太特殊的,但是一般的都可以输入。很简单,太特殊的展示起来会很麻烦嘛,对吧。但普通一些的,例如文字,字母,简单表情都是可以的。示例代码如下:

    const code1 = 'A';const code2 = '😶';const code3 = '🧚‍♂️';const code1Result = matchBox.checkUnicode(code1);const code2Result = matchBox.checkUnicode(code2);const code3Result = matchBox.checkUnicode(code3);console.log('A是不是一个Unicode character?', code1Result);console.log('😶是不是一个Unicode character?', code2Result);console.log('🧚‍♂️是不是一个Unicode character?', code3Result);

使用方法总结: 

方法名返回值入参
checkUnicodetrue或者false参数必填,需要判断的一个字符,如果需要多个可自行遍历字符串,或者后续提出需求,改进工具

3  判断字符串的字节长度

很多时候,一个字符串的length属性并不能得到字节长度,像汉字,表情啦,就不是所谓的长度了,所以这里需要一个字节长度的方法,示例代码如下:

    const str1 = 'Hello world!!!';const str2 = '我是The first one,😶 HaHa~';const str1ByteLength = stringBox.byteLength(str1);const str2ByteLength = stringBox.byteLength(str2);console.log('Hello world!!!的字节长度是:', str1ByteLength);console.log('我是The first one,😶 HaHa~:', str2ByteLength);

 

使用方法总结:

方法名返回值入参
byteLength字符串的字节长度第一个参数必填,表示需要判断的字符串

4 发送JSONP跨域请求 

jsonp跨域请求大家并不陌生,现实工作中也会经常遇到,需要的时候就写一个,放到utils目录下,这样太重复造车轮啦,我们现在终于有了共有方法。

再下面的示例代码中,我们本站的IP是localhost,端口是8080,请求服务端目标IP为127.0.0.1,端口为3000,正是属于跨域场景,示例代码如下:

ajaxBox.sendJSONP('http://127.0.0.1:3000/users/bar', 'callback', function(data){console.log('获取到的JSONP请求数据', data);
});

 

使用方法总结: 

方法名返回值入参
sendJSONP服务端数据

第一个参数必填,表示JSONP请求的url;

第二个参数必填,写入一个字符串,例如“callback”;

第三个参数必填,是一个回调函数,表示前端接收数据的回调方法

好啦,这一小节的新增功能就这3个,感谢小伙伴提供需求。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/8312.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python在测试领域常用的库和框架

Python 在测试领域可以进行基本的单元测试,集成测试,接口测试,UI自动化测试,性能测试等,可以根据具体的需求进行选择合适的工具包或框架来提升测试效率和质量。 以下是Python 在测试过程中会经常用到的库和框架&#…

Cmake中 makefiles 的作用

背景 传统意义上的 Makefiles 是用于自动化构建过程的文件,主要在 Unix-like 系统(如 Linux 和 macOS)上使用。Makefiles 定义了如何编译和链接程序,包括编译指令、源文件、目标文件、依赖关系和最终的可执行文件。Makefiles 是由…

EXCEL数据快速上传至SAP透明表

文章目录 前言一、案例介绍/笔者需求二、备份数据三、数据处理转化 a.EXCEL转为TXT注意事项 b.EXCEL转为TXT 四、ABAP结合内表更新数据至透明表 a.代码实现 b.断点TXT上传至内表 c.查看上传结果 五、总结 前言 这篇文章…

如何从多个文件夹内转移全部文件(忽略文件夹的结构)(进行复制)(再打包)

首先,需要用到的这个工具: 度娘网盘 提取码:qwu2 蓝奏云 提取码:2r1z 04文件夹里面有只有1个名称为"1"的文件夹,“1”里面有“2”,“2”有“3”,“3”有“4”,从“1”开…

暴力破解【1】

1.c/s架构暴力破解 1.1 c/s架构暴力破解前提条件 知道目标地址,端口,协议,无后端验证、用户名字典、密码字典 1.2 c/s架构暴力破解工具 hydra、bruter、medusa爆破 2.b/s架构暴力破解 2.1 无验证码绕过 不带验证码无测试次数的直接使…

VUE el-button指定图片背景

似乎只能通过css指定&#xff1f; 代码1 <el-button circleclass"stream0"click"switchToStream(0)" > </el-button> 代码2 <style>.stream0 {background-size: cover;background-image: url(~/assets/stream.png); } 如果要动态变…

QT 客户端软件开发

QT 是一种功能强大且灵活的跨平台应用程序开发框架&#xff0c;但也存在一些技术难点&#xff0c;需要开发者仔细考虑和克服。以下是一些常见的 QT 软件开发的技术难点。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. 跨平台兼容性…

如何优雅的实现浏览器多标签通讯

前言 开发过程中无法避免遇到需要进行多标签通讯的情况&#xff0c;例如&#xff1a; 管理员登陆后&#xff0c;其他打开标签的页面登陆状态要变更课堂页面只能打开一个&#xff0c;另一个则通知失效等等。。。场景 然而实现该功能&#xff0c;我们需要使用页面能共同持有的…

低价监测如何保证准确率

品牌做低价监测的目的&#xff0c;是为了管控渠道中的低价链接&#xff0c;最终是使这些低价不再影响渠道&#xff0c;使他们下架或者改价链接&#xff0c;所以监测结果的准确性&#xff0c;是会影响最终的治理范围和治理结果的&#xff0c;这就需要做到百分百的准确监测&#…

Volatile内存语义深度剖析:原理与实现机制

引言 内存模型是计算机领域中一个至关重要的概念&#xff0c;它涉及到程序如何在多个线程之间共享和访问数据。在多线程编程中&#xff0c;正确理解内存模型对于避免出现诸如数据竞争、死锁等问题至关重要。而volatile关键字则是Java语言中用来解决部分多线程并发访问问题的重…

通过 Java 操作 redis -- set 集合基本命令

关于 redis set 集合类型的相关命令推荐看Redis - Set 集合 要想通过 Java 操作 redis&#xff0c;首先要连接上 redis 服务器&#xff0c;推荐看通过 Java 操作 redis -- 连接 redis 本博客只介绍了一小部分常用的命令&#xff0c;其他的命令根据上面推荐的博客也能很简单的使…

详细解读性能测试指标(性能指标、CPU、内存、负载、磁盘)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 性能测试指标是衡量系统性能的评价标准&#xff0c;常用的系统性…

USB系列一:USB技术概念

在这里USB的历史就不赘述了&#xff0c;有兴趣可以自己去搜索。也省略掉USB接口的概述&#xff0c;这些都是一些飞技术性的常识性的知识&#xff0c;没必要浪费篇幅和文字来描述。 一、USB总线版本&#xff1a;&#xff08;从USB1.1说起&#xff09; 1、USB1.1 1998年9月23日…

使用Vue连接Mqtt实现主题的订阅及消息发布

效果如下&#xff1a; 直接贴代码&#xff0c;本地创建一个html文件将以下内容贴入即可 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, …

深度学习论文: SuperPoint: Self-Supervised Interest Point Detection and Description

深度学习论文: SuperPoint: Self-Supervised Interest Point Detection and Description SuperPoint: Self-Supervised Interest Point Detection and Description PDF: https://arxiv.org/pdf/1712.07629 PyTorch代码: https://github.com/shanglianlm0525/CvPytorch PyTorch代…

【话题】如何看待AI技术,以及AI技术的发展现状和未来趋势

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 背景一、引言二、AIGC技术的发展现状2.1、技术突破与成果2.2、应用领域的拓展2.3、市场规模的增长 三、AIGC技术的未来趋势3.1、技术融合与创新3.2、应用领域的深化3.3、…

FlatBuffers 与 ProtocolBuffers 的区别

背景 FlatBuffers 和 Protocol Buffers&#xff08;通常简称 Protobuf&#xff09;都是由 Google 开发的序列化协议&#xff0c;用于在不同的程序或网络间有效地传输和存储结构化数据。尽管它们的目标相似&#xff0c;但在设计和使用上有一些关键的区别。 FlatBuffers 直接访…

绿盟之旅——一段安全实习结束

去年&#xff0c;因为着急找实习&#xff0c;拿着简历就开始海投&#xff0c;当时想的是有人让我去就谢天谢地了&#xff0c;第一个约我面试的就是绿盟&#xff0c;也很顺利的通过了面试&#xff0c;当时让我选择在上海还是北京&#xff0c;我选择的是上海&#xff0c;因为学校…

不要和别人比,要和自己的过去比!才会有进步!

现在的人都喜欢拿自己去和别人比较&#xff0c;当然是和比你混得好的人比&#xff0c;比你弱的你也不会去比。比如这个朋友又换了一辆车&#xff0c;那个朋友又买了一套房&#xff0c;另一个朋友又加薪了等等&#xff0c;比来比去总觉得比不上别人。这样比较对自己很不好&#…

Python脚本批量造数据、跑定时任务协助测试

批量造数据 连接Mysql的信息 1 import pymysql 2 # 数据库连接信息 3 # 多个库要有多个conn 4 conn pymysql.connect( 5 host"主机", 6 user"用户名", 7 password"密码", 8 database"库名" 9 ) 10 conn1 pymysql.connect(…