js项目中常用的方法汇总

做了很多项目,发现有很多公用的js方法可以总结出来,不同的项目却可以使用这些通用的方法去解决业务上面的问题;

时间常用方法和冷门方法

请参考timeUtil

获取去当前网址url
export function GetCurrentProjectUrl(pathname: string) {const location = window.location;return location.protocol + location.hostname + (location.port ? ':' + location.port : '') + '/#/' + pathname;
}
获取base URL
export function GetBaseURL(url) {return url.replace(/[?#].*$/, '')
}
URL参数转换为对象
export function GetURLParameters (url) {return url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(  (a, v) => (  (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a  ), {};  
}
检查一个元素是否包含另一个元素
export function elementContains (parent, child) { parent !== child && parent.contains(child);
}
格式化文件大小
export function FormatFileSize(size: number): string{if (size < 1024) {return size + 'B';} else if (size < 1024 * 1024) {return (size / 1024).toFixed(2) + 'KB';} else if (size < 1024 * 1024 * 1024) {return (size / (1024 * 1024)).toFixed(2) + 'MB';} else {return (size / (1024 * 1024 * 1024)).toFixed(2) + 'GB';}
}
url转blob
export function UrlToBlob(url: string) {return new Promise((resolve, reject) => {const xhr: any = new XMLHttpRequest();xhr.open('GET', url, true);xhr.responseType = 'blob';xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');xhr.onreadystatechange = function () {  if (xhr.readyState === 4) {  if (xhr.status === 200) {  resolve(xhr.response);} else {// 错误处理reject(xhr.statusText);};};};xhr.send();});
};
url转blob-拓展文件下载
import SaveAS from 'file-saver';
export function HandleUrlDownloadFile(filename: string, url: string){return new Promise((resolve, reject) => {UrlToBlob(url).then((blob: any) => {SaveAS(blob, filename || '下载文件');resolve(filename);}).catch(() => {AzMessages('error', '下载失败')reject();});})
};
base64toFile
export function Base64ToFile (dataurl: string, filename='截图') {let arr: any = dataurl.split(',');let mime = arr[0].match(/:(.*?);/)[1];let suffix = mime.split('/')[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], `${filename}.${suffix}`, {type: mime});
};
对象拷贝-lodash库
export function CloneDeep(obj: any) {return _.cloneDeep(obj);
};
判读网络情况
export function HandleNetworkSituation () { // 判断网络情况if (window.navigator.onLine === true) {return true} else {return false}
}
浮点数如果是整数返回整数否则返回浮点数
/* 这个方法比较冷门,有点贴业务了,之前做数据大屏的时候后台返回18.00, 18.12;图表显示的话,整数就显示18,所以写了个方法,说不定做大屏展示的同学会用到
*/
export function FloatPointToInteger (code: number): number {if (typeof code === 'number' && code % 1 === 0) {code = Math.ceil(code)}return code
}
数字转中文
export function convertToChinaNum(num) { // 数字下标变中文var arr1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']var arr2 = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿']if (!num || isNaN(num)) {return '零'}var english = num.toString().split('')var result = ''for (var i = 0; i < english.length; i++) {// 倒序排列设值var des_i = english.length - 1 - iresult = arr2[i] + resultvar arr1_index = english[des_i]result = arr1[arr1_index] + result}// 将【零千、零百】换成【零】 【十零】换成【十】result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十')// 合并中间多个零为一个零result = result.replace(/零+/g, '零')// 将【零亿】换成【亿】【零万】换成【万】result = result.replace(/零亿/g, '亿').replace(/零万/g, '万')// 将【亿万】换成【亿】result = result.replace(/亿万/g, '亿')// 移除末尾的零result = result.replace(/零+$/, '')// 将【零一十】换成【零十】// result = result.replace(/零一十/g, '零十');// 貌似正规读法是零一十// 将【一十】换成【十】result = result.replace(/^一十/g, '十')return result
}
获取选定的文本
export function getSelectedText () {return window.getSelection().toString();
}
文本复制到剪贴板
export function copyToClipboard (str) {  if (navigator && navigator.clipboard && navigator.clipboard.writeText)  return navigator.clipboard.writeText(str)  return Promise.reject('The Clipboard API is not available.')  
}
export function CopyToClipboard(text: string) {  return new Promise((resolve, reject) => {  if (window.navigator.clipboard) {  // 推荐方法,支持最新浏览器  navigator.clipboard.writeText(text).then(resolve, reject);  } else {  // 兼容不支持navigator.clipboard的浏览器  var textArea = document.createElement("textarea");  textArea.value = text;  document.body.appendChild(textArea);  textArea.select();  try {  var successful = document.execCommand('copy');  var msg = successful ? 'successful' : 'unsuccessful';  resolve(successful);  } catch (err) {  reject(err);  } finally {  document.body.removeChild(textArea);  }  }  });  
}

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

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

相关文章

PostgreSQL备份还原数据库

1.切换PostgreSQL bin目录 配置Postgresql环境变量后可以不用切换 pg_dump 、psql都在postgresql bin目录下&#xff0c;所以需要切换到bin目录执行命令 2.备份数据库 方式一 语法 pg_dump -h <ip> -U <pg_username> -p <port> -d <databaseName>…

一、c++代码中的安全风险-strlen

一、函数 strlen 在C语言中,strlen是一个函数,计算字符串长度,遇见 \0 停止。如果没有 \0 将在内存中一直寻找,直到寻找到了\0停止。所以strlen还是存在很大的风险的。而且参数必须是字符型指针(char*)。当数组名作为参数传入时,实际上数组就退化成指针了…

2023年第三届 “联想杯”全国高校程序设计在线邀请赛暨第五届上海理工大学程序设计竞赛(同步赛)

A-3的倍数 首先求出sum&#xff0c;如果sum为3的倍数&#xff0c;那么直接可以降序 如果sum%31&#xff0c;那么优先删除一个对3取模余1的数&#xff0c;如果没有则删除两个对3取模余2的数 如果sum%32&#xff0c;那么优先删除一个对3取模余2的数&#xff0c;如果没有则删除…

【软件工程】详细设计(二)

这里是详细设计文档的第二部分。前一部分点这里 4. 学生端模块详细设计 学生端模块主要由几个组件构成&#xff1a;学生登录界面&#xff0c;成绩查询界面等界面。因为学生端的功能相对来说比较单一&#xff0c;因此这里只给出两个最重要的功能。 图4.1 学生端模块流程图 4.…

软考高级架构师:性能评价方法概念和例题

一、AI 讲解 性能评价是衡量计算机系统或其组件在指定条件下执行预期任务的有效性的一种方式。性能评价的方法主要可以分为几种&#xff0c;每种方法都有其特点和适用场景。 性能评价方法 方法描述时钟频率法通过计算机的时钟频率来评估性能&#xff0c;时钟频率越高&#x…

大话设计模式之状态模式

状态模式是一种行为设计模式&#xff0c;它允许对象在其内部状态发生变化时改变其行为。在状态模式中&#xff0c;对象将其行为委托给当前状态对象&#xff0c;从而在不同的状态下执行不同的行为&#xff0c;而不必在对象自身的代码中包含大量的条件语句。 通常&#xff0c;状…

mysql 相关链接与子查询的练习,以及索引视图的简单概述

4月1日 索引与视图 一 销售查询问题复习链接和子查询 1&#xff09;子查询相关sql语句 -- 结果返回一个值 select 查询字段 from 表 where 字段 [ > < <>] (子查询的内容)-- 单列多行 select 查询字段 from 表 where 字段 in (子查询)-- 多列多行 select 查询字…

06 监听器

文章目录 SessionAttListenerDemo.javaSessionListenerDemo.javaProductController.java SessionAttListenerDemo.java package com.aistart.listener;import javax.servlet.ServletContext; import javax.servlet.annotation.WebListener; import javax.servlet.http.HttpSess…

Tensorboard使用教程

Pytorch(九) —— Tensorboard(当有了tensorboard日志文件怎么可视化它)(同时显示多个模型)(vscode的tensorboard)(TensorboardX)_tensorboard --logdir-CSDN博客文章浏览阅读9.7k次&#xff0c;点赞10次&#xff0c;收藏56次。tensorboard.pyfrom tensorboardX import Summary…

NVIDIA Jetson Xavier NX增加swap分区大小

NVIDIA Jetson Xavier NX增加swap分区大小 1. 输入jtop查看swap空间大小 2. 依次输入命令 #1&#xff09;新增swapfile文件大小自定义 sudo fallocate -l 6G /var/swapfile #2&#xff09;配置该文件的权限 sudo chmod 600 /var/swapfile #3&#xff09;建立交换分区 sudo m…

最大子数组和-动态规划

53. 最大子数组和 问题&#xff1a;最大子数组和&#xff0c;找出数组中具有最大和的连续子数组。 思路&#xff1a; 暴力解法&#xff1a;通过两重循环遍历&#xff0c;得到所有子数组和。时间和空间复杂度都为O(n^2): class Solution {public int maxSubArray(int[] nums…

RuntimeError: Error compiling objects for extension虚拟环境和系统环境——添加、删除、修改环境变量

前言&#xff1a;因为一个报错RuntimeError: Error compiling objects for extension 没有配置cl.exe环境变量&#xff0c;我的应用场景是需要搞定虚拟环境变量配置 RuntimeError: Error compiling objects for extension手把手带你解决&#xff08;超详细&#xff09;-CSDN博…

爬虫 红网时刻 获取当月指定关键词新闻 并存储到CSV文件

目标网站&#xff1a;红网 爬取目的&#xff1a;为了获取某一地区更全面的在红网已发布的宣传新闻稿&#xff0c;同时也让自己的工作更便捷 环境&#xff1a;Pycharm2021&#xff0c;Python3.10&#xff0c; 安装的包&#xff1a;requests&#xff0c;csv&#xff0c;bs4&…

如何在pgAdmin中用替换的值更新jsonb列?(二)

上一篇提到怎么替换jsonb&#xff0c;链接如下&#xff1a; 如何在pgAdmin中用替换的值更新jsonb列&#xff1f;-CSDN博客 那么当jsonb嵌套jsonb应该怎么替换呢&#xff1f;像这样&#xff0c;类型依然是jsonb&#xff0c;只不过嵌套一层&#xff0c;JsonData&#xff1a;&qu…

网络安全 | 什么是DDoS攻击?

关注WX&#xff1a;CodingTechWork DDoS-介绍 DoS&#xff1a;Denial of Service&#xff0c;拒绝服务。DDoS是通过大规模的网络流量使得正常流量不能访问受害者目标&#xff0c;是一种压垮性的网络攻击&#xff0c;而不是一种入侵手段。NTP网络时间协议&#xff0c;设备需要…

Springboot整合Milvus向量库

1. Milvus的Maven依赖&#xff0c; 配置如下 <dependency><groupId>io.milvus</groupId><artifactId>milvus-sdk-java</artifactId><version>2.3.4</version><exclusions><exclusion><artifactId>log4j-slf4j-imp…

百度语音识别

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、建号—获取试用KEY二、测试代码三、运行四、运行结果五、验证五、总结 一、建号—获取试用KEY https://console.bce.baidu.com/ai/#/ai/speech/overview/index…

Tomcat部署及安全加固

一、安装步骤 tomcat版本(8.5.81)&#xff1a; tar -zxvf apache-tomcat-8.5.81.tar.gz -C /app/ cd /app/ mv apache-tomcat-8.5.81/ tomcat/ chown -R webapp:app /app/tomcat二、安全加固 1. 禁止默认页面登录 rm -rf /app/tomcat/webapps mkdir -p /app/tomcat/webapps2…

阿里云python-SDK配置

OSS管理控制台 (aliyun.com) SDK地址 GitHub - aliyun/aliyun-oss-python-sdk: Aliyun OSS SDK for Python 下载文件并运行 python setup.py install oss2包配置完成。 上传、下载开发文档&#xff1a; Python SDK快速入门_对象存储(OSS)-阿里云帮助中心 (aliyun.com)

mybatis-plus-join,一个可以让mybatis-plus实现联表的插件

mybatis-plus-join mybatis-plus-join是mybatis plus的一个多表插件&#xff0c;上手简单&#xff0c;十分钟不到就能学会全部使用方式&#xff0c;只要会用mp就会用这个插件&#xff0c;仅仅依赖了lombok&#xff0c;而且是扩展mp的构造器并非更改原本的构造器&#xff0c;不会…