javascript
交互行为
不能懒鸭
努力写出优雅的代码
展开
-
js 哪些情况不能用 JSON.parse 、JSON.stringify深拷贝及一个更好的深拷贝方法
深拷贝原创 2022-07-27 10:10:07 · 1122 阅读 · 0 评论 -
递归的使用:1.将平铺数组转为树 2.将树转化为平铺数组
递归将平铺数组转为树原创 2022-07-21 17:56:49 · 329 阅读 · 0 评论 -
时分秒计时器 js
时分秒计时器原创 2022-07-05 15:10:19 · 961 阅读 · 0 评论 -
ES6 generator函数与yield的理解、及在react项目中的使用
1. yield是什么yield是ES6的新关键字,使生成器函数执行暂停,将其后面的表达式的值以对象的形式返回。可以理解为生成器函数专有的return关键字。yield关键字实际返回的是一个迭代器对象,{value:返回值,done:是否完成}yield无法单独工作,需要配合generator(生成器)的其他函数,如next。先来个简单的例子:function* saleCount(){ var saleList = [1,5,9] for (var i原创 2022-03-10 17:32:50 · 4105 阅读 · 1 评论 -
在项目中用ts封装axios
在项目中用ts封装axios基础封装import axios from 'axios'import type {AxiosInstance,AxiosRequestConfig,AxiosResponse} from 'axios'class Request{ //axios实例,并将它作为 类的instance属性(属性名自定义) instance:AxiosInstance constructor(config:AxiosRequestConfig){原创 2022-03-07 22:07:24 · 604 阅读 · 0 评论 -
js图片懒加载原理、实现及节流优化
1.懒加载原理在图片没有进入可视区域时,先给的src一个默认加载的图片,这样浏览器就不会发送请求了,等到图片进入可视区域再把真实的图片路径data-src给src。2.具体实现1. 效果2. 代码如下:<style> .imgList{ width: 600px; } .lazy { width: 600px; }</style><body>原创 2022-02-27 22:33:38 · 2033 阅读 · 0 评论 -
原型链图解
图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的线:详解:https://github.com/mqyqingfeng/Blog/issues/2原创 2022-02-22 16:50:29 · 86 阅读 · 0 评论 -
ajax请求中的cache、async属性
cache属性:决定是否从缓存中读取数据true 表示第一次请求完成之后,如果请求地址、参数不变化,第二次去请求会默认从缓存中读取数据,不去读取服务端的最新数据。false 表示每次读取的都是服务端的最新数据注意:ajax缓存只对GET请求有效,因为浏览器默认POST请求提交的内容必定与变化,所以不走缓存。!!!async属性:决定是否异步true(默认) 表示异步,当ajax请求发出之后,会继续执行ajax后面的代码,当服务器返回数据之后,再触发ajax里成功之后的回调sucess原创 2022-02-21 14:26:35 · 466 阅读 · 0 评论 -
vue中:将列表导出成excel表格、图片下载
功能实现:前后端配合,前端借助调用后端接口。如果后端返回的是base64格式的url,需要转成二进制,再用blob处理;如果后端返回的是文件流或二进制流,直接用blob处理;前端将列表导出成excel表格(后端返回的是base64格式的url)调用后端接口,将列表数据传给后端后端返回一个base64格式的url地址,解码,将base64格式的url转成二进制创建一个a标签,把解码后的地址赋值给a标签的href属性,再给它添加下载功能// /utils.jsexport defa原创 2022-02-20 21:46:33 · 401 阅读 · 0 评论 -
vue中使用 canvas给页面添加水印
封装公共添加水印的方法:// utils/watermark.js/**入参: @text: 传入水印需要展示的文本; @renderDom:要给哪个元素加水印,默认body;*/var watermark = {}var setWatermark = function(text,renderDom=document.body){ var id = '1.23345566.3333344'; if(document.getElementById(id)!==null){原创 2022-02-20 21:10:43 · 775 阅读 · 0 评论 -
js 金额格式化,千分位以逗号隔开
/**\* @desc 向金额添加逗号分隔符\* @func addComma\* @static\* @param {Number} money 传入的金额\* @param {Number} wei 保留几位小数,默认两位\* @returns {string} 转换后的金额字符串\* @example var money = '32,647.12'; //含 , 号的金额字符串*/方法一:export const addComma = function (mon原创 2022-02-18 14:14:00 · 727 阅读 · 0 评论 -
【onload】js判断单张、多张图片加载完成
方法一:原生js// 单张图片加载完成let imgTag = new Image() //创建img标签imgTag.src = 'https://t7.baidu.com/it/u=1744157654,1808520583&fm=193&f=GIF'imgTag.onload=function(){ console.log('图片加载完成才会执行的回调')}// 多张图片加载完成let imgList = [ {id:0,src:'https://t7.转载 2021-11-19 10:06:45 · 1388 阅读 · 0 评论 -
nanoid js字符串id生成器
优点:比uuid更轻量 js库安装:npm i nanoid -S 或 yarn add nanoid使用:第一步 引入 import ‘nanoid’ from 'nanoid'第二步 调用即可生成唯一的id id:nanoid()原创 2021-11-19 10:21:54 · 1242 阅读 · 0 评论 -
【点击选项内容也可选中】input与label
需求:默认点击单选框可选中,为了让用户体验更好,操作更方便,实现点击选项内容也可选中。代码如下:利用input的id属性与label的for属性,当点击label的内容时,自动触焦到对应的勾选框上。...原创 2021-11-24 16:01:23 · 602 阅读 · 0 评论 -
【递归处理树形结构】
```javascriptlet data = [ { code:0, type:'衣服', children:[ { code:1, type:'毛衣', children:[ { .原创 2021-12-16 14:42:46 · 1360 阅读 · 0 评论 -
前端程序调试打断点的方式
1. 普通断点第一步:在想要断住的那一行,写个dubugger或者双击左侧的行出现红色断点第二步:打开浏览器,F12打开控制台,刷新浏览器(一定要先打开控制台,不然刷新断点也出不来!)第三步:下一步,执行代码查看变量当前值:结束断点:想看程序的执行步骤、查找问题都非常方便2. 条件断点...原创 2021-12-31 11:16:04 · 13459 阅读 · 4 评论 -
【JSON.stringfy() 妙用 】第二个参数
let arr = [ { label:'哈哈', value:undefined }, { label:'拉拉', value:undefined }, ]//后端需要前端传过去的数据为undefined时,默认传给他 ''//如果直接转的话,整个value字段都没没有了![在这里插入图片描述](https://img-blog.csdnimg.cn/a5e44e005579457ebea237e1b17原创 2022-01-04 17:46:03 · 228 阅读 · 0 评论 -
前端解决跨域的方法
https://segmentfault.com/a/1190000011145364一、jsonp跨域jsonp缺点:只能实现get一种请求。1. 原生实现<script> var script = document.createElement('script'); script.type = 'text/javascript'; // 传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数 script.src = 'http://www.do转载 2022-01-12 17:06:15 · 239 阅读 · 0 评论