JavaScript
关注
分享
扫一扫
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
爱宇阳
遇见你，是我幸运的开始!
展开
-
v-model 绑定 v-for 循环会报错问题
报错信息：报错信息明确指出，v-model直接绑定到了v-for迭代别名上。在Vue中，当使用v-for进行列表渲染时，item是作为每次迭代的临时变量存在的，它类似于函数内部的局部变量。因此，对这个临时变量（别名）的任何修改都不会反映到原始的数据源数组或对象中。原创 2024-12-06 18:02:20 · 838 阅读 · 0 评论 -
JS工具函数 数字转为中文数字和大写金额
数字转中文数字示例2. 数字转为中文大写金额数字转大写金额示例转载 2022-07-14 10:26:54 · 1061 阅读 · 0 评论 -
JS树形结构数据，根据子节点数据获取所有父节点数据
省市区多维数组通过value=130628 获取到 ["河北省", "保定市", "高阳县"]函数调用这样就可以根据子节点数据获取所有父节点数据啦原创 2022-07-14 09:58:51 · 5809 阅读 · 4 评论 -
uni-app 接口封装实现过期重新登录再重新请求业务接口
小程序中实现token过期重新登录再重新请求业务接口该方法用于小程序token两个小时后过期，重新获取token再请求接口1、新建一个封装请求接口文件，命名为request.js(我在utils文件夹下建request.js)，代码如下：2、使用方法，与utils文件夹同级建一个新的文件夹api，在api文件夹下新建index.js文件，代码如下 3、再在api文件夹下新建一个js(banner.js)文件，用于引入index.js写的接口，代码如下 4、在页面中使用，代码如下：...转载 2022-06-22 20:20:19 · 1812 阅读 · 0 评论 -
uniapp视频试看功能
前端监听视频播放进度,在试看结束后做一些操作HTMLJavaScript转载 2022-06-22 20:06:29 · 930 阅读 · 0 评论 -
判断当前时间戳是否在指定时间段内
当前时间戳是否在指定时间段内，返回结果 none:无效，start:开始，end:结束，in:在内/** * 对比时间戳 * @param s {String|Number} 开始时间戳 * @param e {String|Number} 结束时间戳 * @returns {String} 返回结果 none:无效，start:开始，end:结束，in:在内 */export function onJudgmentTime(s, e) { const now = Math.roun.原创 2022-05-19 16:17:27 · 3189 阅读 · 0 评论 -
文档预览：在浏览器中预览查看 Office 文档
您的网站或博客上是否有希望读者查看的 Office 文档，即使他们没有安装 Office？您愿意在下载之前查看文档吗？要为您的观众提供更好的体验，请尝试使用 Office Web 查看器。什么是 Office Web 查看器？它是一种创建 Office Web 查看器链接的服务。Office Web 查看器链接可在浏览器中打开原本会下载的 Word、PowerPoint 或 Excel 文件。您可以轻松地将下载链接转换为 Office Web 查看器链接以在您的网站或博客中使用（例如，食谱、照片原创 2022-04-07 10:45:47 · 3188 阅读 · 2 评论 -
Element表单动态控制是否必填
问题：有四种发票类型，当类型为纸质专票时，可以不输入校验码，其他三种情况都必须输入校验码。解决方式：动态控制表单的rules代码：...<!-- 纸质专票无需输入校验码--><el-form-item label="校验码后六位" prop="checkCode" :rules="invoiceInfo.invoiceType == 2 ? [{required: false}]:rules.checkCode"> <...转载 2021-12-14 10:49:00 · 1882 阅读 · 1 评论 -
解决H5在移动端软键盘弹出时底部fixed定位被顶上去的问题
移动端页面的底部菜单栏，通常会使用fixed定位在底部。在安卓手机上经常会出现软键盘弹出时，底部定位被顶上去，下面提供vue和jQuery两种解决办法。Vue解决方法<!--html部分--><div class="footer" v-show="hideshow"></div>// js 部分data(){ return { docmHeight: document.documentElement.clientHeight, //默认屏幕高转载 2021-12-14 10:05:33 · 8456 阅读 · 3 评论 -
Vue上传文件错误或者失败，重置input type=file
html中写一个type为file的input框//html<input type="file" name="file" ref="clearFile" @change="uploadMaterial($event)">提交文件, 重置input框//上传材料uploadMaterial(event) { var that = this; var formData = new FormData(); formData.append('file', event.tar转载 2021-12-14 10:01:48 · 1607 阅读 · 0 评论 -
JS判断数组中是否存在某个值或者某个对象的值
JS判断数组中是否存在某个值或者某个对象的值一、判断是否存在某个值二、判断是否存在对象的某个值原创 2021-12-14 09:32:34 · 22571 阅读 · 0 评论 -
crypto-js 加密、解密使用方法
一、安装crypto-jsnpm install crypto-js二、引入crypto-js支持ES6导入、Modularimport CryptoJS from "crypto-js";或者const CryptoJS = require("crypto-js");三、设置密钥和密钥偏移量// 十六位十六进制数作为密钥const SECRET_KEY = CryptoJS.enc.Utf8.parse("1234123412341234");// 十六位十六进原创 2021-12-10 15:35:32 · 66748 阅读 · 8 评论 -
axios 中配置withCredentials
withCredentials 有什么用?跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。配置withCredentials:const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url withCredentials: .转载 2021-07-26 17:43:33 · 32225 阅读 · 0 评论 -
数组对象去重方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>对象数组去重<.转载 2021-07-26 17:24:11 · 1472 阅读 · 0 评论 -
vue v-html 富文本图片附件前图标显示问题
vue v-html 富文本图片溢出，解决图片溢出问题之后会出现附件的图片也是100%显示如图所示：附件前面的图片也是100%解决方案：给富文本中所有图片增加 class富文本JavaScripthandleHtml(rich) { //使用正则表达式匹配所有图片 let reg = RegExp(/<[img]+\s+(.*?)(?<id>\w*?)[\s'"](.*?)>/g); let match = rich.match(reg);.原创 2021-07-16 11:56:16 · 930 阅读 · 0 评论 -
在 WebStorm 中使用 Jest 进行测试
Facebook 开发的测试平台 Jest 每天都变得越来越流行，尤其是用于测试 React 应用程序。 Jest 快速、易于上手，并且具有许多开箱即用的功能（例如快照测试和测试覆盖率）。在 WebStorm 中，我们希望简化整个测试工作流程，并使使用 Jest 编写、运行和调试测试更加顺畅和轻松。 让我们看看 WebStorm 如何帮助您使用 Jest 测试您的应用程序。例如，我们将使用使用 Jest 和 Enzyme 的 react-dropzon...翻译 2021-07-02 12:01:58 · 2383 阅读 · 0 评论 -
el-upload 使用 before-upload 传递其他参数
:before-upload="(file) => beforeAvatarUpload(file, id)"<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="(file) => be...原创 2021-06-26 18:17:28 · 5821 阅读 · 2 评论 -
JS将字符串转换为正则表达式
获取字符串将其转换为正则表达式使用regexp对象构造函数从字符串创建正则表达式：const value = "176****3333";const str = "(^$)|(^0?(13|14|15|17|18|19)[0-9]{9}$)";const reg = new RegExp(str);console.log(reg);if (!reg.test(value)) { console.log("手机号格式错误");}...原创 2021-06-26 18:09:52 · 11765 阅读 · 0 评论 -
JS 获取指定日期的前几天或者几天
例如获取2021-06-21后1天日期/** * JavaScript 获取指定日期的前几天或者后几天的日期 * @param date {string} 日期 如：2021-06-21 * @param day {number} 天数 如：1 后几天|-1 前几天，默认后1天 * @param format {string} 时间格式 如：2021-06-22，默认 - * @returns {string} */export function getNextDate(date, da原创 2021-06-21 14:26:27 · 2527 阅读 · 0 评论 -
JS时间日期比较大小
前一阵做项目要用到日期筛选条件，就临时看些一些网上的一些时间js日期比较大小的博客，我一边看一遍实测，真是坑，讲解粗糙，对于小白很不友好，大多坑人！所以一气之下要写一篇关于日期比较的文章。来吧，这次我一边写一边实测代码！并会解释每个方法是干啥的！首先比较日期的大小，思路：我们往往先会得到两个字符串格式的日期，之后利用Date.parse（）方法把这些字符串日期转成时间戳（实际上就是计算出从1970年00：00：00到目前时间日期的毫秒数），然后再比较两个时间戳的大小，就能判断日期大小。1.得到标准的字转载 2021-06-21 11:33:08 · 7212 阅读 · 0 评论 -
npm audit 安全扫描工具
为了提高 npm 依赖的安全，npm 6.1 后添加了 npm audit 工具，这个工具可以搜索当前项目中使用的依赖是否存在安全问题，并提供了 npm audit fix 工具修复。npm audit原创 2021-06-03 12:00:32 · 1004 阅读 · 0 评论 -
让Web应用更安全的13个小技巧
无论你是React、Angular、Vue.js，还是原生JavaScript开发者，你的代码都有可能成为黑客眼中的猎物。作为一个前端开发者，我们可能更加关注性能、SEO、UI/UX，往往会忽视安全问题。当你了解了大型框架是如何让你对xss攻击保持开放态度时，也许你会感觉到很意外。例如，React中的dangerouslySetInnerHTML或者Angular中的bypassSecurityTrust都是一些高危操作。我们需要记住，就安全而言，前端现在和后端、DevOps一样承担着相同的职责翻译 2021-06-03 11:31:32 · 260 阅读 · 0 评论 -
JS 较大金额格式化
/** * @param integer {number} * @returns {number} */export function getDigit(integer) { let digit = -1 while (integer >= 1) { digit++ integer = integer / 10 } return digit}/** * @param integer {number} * @param number {numbe...原创 2021-06-03 10:13:03 · 368 阅读 · 0 评论 -
vue 文件上传至阿里云 ali-oss
在之前的开发当中都是后台处理上传，前端负责上传接口调用，涉及到直传到阿里云对象存储服务（oss），查阅了相关资料，分享出来希望能帮助到遇到这个需求的小伙伴，下面是具体的步骤。使用oss1.使用 NPM 安装ali-ossnpm install ali-oss复制代码2.写一个公用的ali-oss.js...转载 2021-06-03 09:17:53 · 1795 阅读 · 4 评论 -
Vue 项目使用PDF.js预览pdf文件
<template> <div class="pdf" style="height:100vh"> <iframe width="100%" height="100%" scrolling="no" style="border:none" :src="src" ></iframe> </div></template><script>.原创 2021-06-03 09:10:13 · 900 阅读 · 6 评论 -
uni-app 选择和上传非图像、视频文件
首先小程序端不支持上传非图像视频文件。然后App和H5端，参考：https://uniapp.dcloud.io/api/media/fileH5端在2.9.9以前，可以使用如下方法： 使用web-view组件 使用web-view 组件，在 web-view 组件内可以使用 input 元素进行选择，使用表单或者 xhr 上传。 使用 js 创建 input 元素进行选择 使用 xhr 上传（或者转 base64、Object-URL 使用 uni.uploadFile 上..转载 2021-06-03 08:53:42 · 1745 阅读 · 0 评论 -
new FormData() 调试打印为空
// 创建一个formDataconst formData = new FormData()// 通过append向form对象添加数据formData.append("id", 1);formData.append("name", "测试");formData.append("age", 25);原创 2021-06-03 08:41:05 · 1216 阅读 · 2 评论 -
Promise实现子组件的多表单校验并反馈结果给父组件
先画个图看看整个组件+表单的结构（本文列举4个子组件、子组件中4个子表单为例，更多的同理）：F.vue：父组件，做表单的统一验证和提交；X.vue：子组件，单独做表单验证，验证通过则提交表单数据给父组件；formX：子组件中表单绑定的model变量，通常所有子表单绑定在这一个表单变量上；form_xn：子表单的ref；注：本文中表单验证基于Element-ui实现（采用ref+validate方法实现，但整体框架具备通用性）一、Promise实例生成首先需要一个根..转载 2021-05-31 17:39:18 · 840 阅读 · 0 评论 -
Promise的理解与总结
全手打原创，转载请标明出处：https://www.cnblogs.com/dreamsqin/p/10959411.html，多谢，=。=~axios用多了就开始疑惑它里面到底是个啥，虽然总被告知它就是基于ajax的封装，但掐指一算，事情应该没这么简单，于是开始深挖，挖着挖着就挖到了Promise。毕竟axios的官方描述是这样的：Promise based HTTP client for browser and node.js。而axios其中一个特点就是Supports the Promi..转载 2021-05-31 17:36:06 · 186 阅读 · 0 评论 -
Vue 本地开发访问线上图片问题
问题：线上图片无法访问解决方法：vue.config.js 设置 devServer proxy 代理devServer: { open: false, overlay: { warnings: false, errors: true }, proxy: { // 文档: https://cli.vuejs.org/zh/config/#devserver-proxy '/system/upload': { target: `htt.原创 2021-05-17 11:42:01 · 1190 阅读 · 0 评论 -
精确运算原生封装
加法运算函数/** * 加法函数 * @param summand {number|string} 被加数 * @param addend {number|string} 加数 * @returns {number} 计算结果 */export function accAdd(summand, addend) { let r1 let r2 try { r1 = summand.toString().split('.')[1].length } catch (e)原创 2021-05-12 16:16:55 · 121 阅读 · 0 评论 -
vue中使用v-html防止xss注入
一、下载 xss 依赖npm install xss --save二、main.js中引入xss包并挂载到vue原型上import xss from "xss";Vue.prototype.xss = xss;三、在vue.config.js中覆写html指令chainWebpack: config => { config.module .rule("vue") .use("vue-loader") .loader("转载 2021-01-14 09:52:04 · 3711 阅读 · 0 评论 -
JavaScript中的数组方法总结
原文链接：JavaScript中的数组方法总结在JS中,数组方法是非常重要且常用的方法.在此整理总结一番.JavaScript 数组的力量隐藏在数组方法中。1. javaScript常用数组方法顺序 方法名 功能 返回值 是否改变原数组 版本 1 push() (在结尾)向数组添加一或多个元素 返回新数组长度 Y ES5- 2 unshift() （在开头)向数组添加一或多个元素 返回新数组长度转载 2020-12-01 09:14:03 · 291 阅读 · 0 评论 -
微信小程序 删除数组中指定的对象
1.封装删除函数 util.js/**删除数组中的某一个对象 array:数组 obj:需删除的对象*/const arrRemoveObj = (array, obj) => { let length = array.length; for (let i = 0; i < length; i++) { if (array[i] ==...原创 2019-08-21 10:51:30 · 7391 阅读 · 5 评论 -
Vue项目 *.js 使用 jsdoc 生成 JavaScript 文档
一、安装 jsdocnpm install --save-dev jsdoc二、配置 jsdoc.json{ "source": { "include": [ "src/" ], "exclude": [ "src/router" ] }, "opts": { "template": "node_modules/docdash", "encoding": "utf8", "destination": "./docs/", "recu原创 2020-07-27 17:35:11 · 3013 阅读 · 5 评论 -
vue axios 接口请求封装优化
vue axios 接口请求封装主要区别是增加xhr.js 管理接口一、封装文件 src/utils/request.jsimport axios from "axios";import { getToken } from "@u/auth"; /** * 创建 axios 实例 */const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base .原创 2020-06-29 16:33:30 · 1282 阅读 · 0 评论 -
vue axios 接口请求封装
一、封装文件 src/utils/request.jsimport axios from "axios";import { getToken } from "@u/auth";/** * 创建 axios 实例 */const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url withCredentials: true, // 跨域请求时发.原创 2020-06-26 09:08:28 · 1204 阅读 · 0 评论 -
vue 判断数据是否为空
<template> <div>数据是否为空</div></template><script>export default { name: "Orders", data() { return { abj: {}, arr: [] }; }, created() { //判读数组是否为空 if(this.arr == undefined || this.arr.le.原创 2020-06-25 20:11:56 · 40801 阅读 · 0 评论 -
vue axios 请求GET，POST方式，都会首先有一个OPTIONS请求
一、OPTIONS请求产生原因Preflighted 请求与简单请求不同，Preflighted 请求首先会向服务器发送一个Options请求，以验证是否对指定服务有访问权限，之后再发送实际的请求。Preflighted 请求具有以下特点：1. 除GET、HEAD、POST方法外，XHR都会使用Preflighted 请求。使用POST方法向服务器发送数据时，Content-Type使用application/x-www-form-urlencoded、multipart/form-data或tex原创 2020-06-25 14:00:25 · 2843 阅读 · 0 评论 -
target=_blank 在新标签页打开页面安全问题解决
一、原生JavaScript解决function openUrl(url) { const newTab = window.open(); newTab.opener = null; newTab.location = url;}二、a标签rel="noreferrer noopener" 属性解决<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer"> 百度<.原创 2020-06-19 09:11:27 · 1401 阅读 · 2 评论