js
关注
分享
扫一扫
Yomuki
这个作者很懒，什么都没留下…
展开
-
又又又是axios封装，顺便复习下ts
useServer处理请求和响应拦截。响应拦截中会处理通用的http错误。响应拦截一旦被拦截就会进入reject状态。原创 2022-07-28 16:30:19 · 338 阅读 · 1 评论 -
【class】接口使用类封装
/* * @Desc: 接口使用类 * @Author: Yomuki * @Date: 2021-08-25 11:14:00 * @LastEditors: 曾茹菁 * @LastEditTime: 2021-08-25 11:43:24 */// 接口类生成对象const apiClassObj = { post: function () {}, get: function () {},};// 用户信息(vuex)const user = {};export .原创 2021-08-25 11:44:13 · 344 阅读 · 0 评论 -
附件列图片获取改为PromiseAll
情况：后端传过来的附件信息与其他表单信息放在了一个对象里。 附件信息的值不是图片而是图片id字符串（多个图片会有,分割）我需要做的：提取出所有的代表附件的参数。 通过id走图片接口获取到图片地址。 图片和前端参数对应。以前采用的是非常简单有效但很慢的循环+await。真的太太太慢了，所以决定改为PromiseAll。建立前端属性名和后端参数名的对应配置对象。export const apiName = { 前端属性名: "后端参数名", backCard: "bank_ca原创 2021-07-23 11:47:26 · 137 阅读 · 0 评论 -
【兼容性】new Date 出现 Invalid Date
pc端new Date("2020-02-02 10:00:00")正常，移动端出现Invalid Date。翻了下MDN ，发现这句话之前偷懒直接全用了字符串构造。改函数吧QAQ改前：改后：（格式判断暂无，日期写死在前端里了）/** * @description: 时间区域判断 * @param {*} checkArr * @return {*} */export function checkDateTimeBetween(checkAr...原创 2021-07-15 11:37:20 · 1172 阅读 · 0 评论 -
【utils】提取url中的参数/手机号验证/身份证验证/护照验证
/** * @description: 获取url中的参数 * @param {*} * @return {*} */export function getUrlParams(name) { const reg = new RegExp("[?|&]" + name + "=([^&]*)(&|$)", "i"); const res = window.location.href.match(reg); // console.log(res); if (r.原创 2021-03-25 09:36:34 · 245 阅读 · 0 评论 -
【utils】日期/时间
/** * @description: 获取日期 yy-mm-dd * @param {*} date * @param {*} separate * @return {*} */export function getDateStr(date = new Date(), separate = "-") { if (!(date instanceof Date)) return; let yy = date.getFullYear(); let mm = padStartDay(da.原创 2021-03-25 09:43:10 · 184 阅读 · 0 评论 -
【Webpack】webpack配置
step 1 安装依赖webpack webpack-cli webpack-dev-server babel-loader@7 babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy less-loader css-loader style-loader postcss-loader.原创 2021-03-16 22:41:07 · 150 阅读 · 0 评论 -
【JS】原生实现拖拽上传
源视频 ：华峰前端工程师<!-- * @Desc: 原生JS 实现文件/图片 拖拽效果 (移动端目前不适用) * @Author: Yomuki * @Date: 2021-02-23 12:24:27 * @LastEditors: Yomuki * @LastEditTime: 2021-02-23 21:53:19--><!DOCTYPE html><html lang="en"> <head> <meta cha原创 2021-02-23 21:59:31 · 437 阅读 · 0 评论 -
【utils】Proxy应用：通过obj.attr直接获取深层属性值
/** * @description: 获取对象属性值（同名取第一个的值） * @param {*} obj * @param {string} attrName * @return {*} any */export function getObjectAttrValue(obj, attrName: string | number | symbol): any { if (!(typeof obj === 'object')) return undefined if (obj.原创 2021-02-13 10:11:26 · 325 阅读 · 0 评论 -
【Fetch】笔记
更加简单的数据获取方式，功能更强大，灵活，xhr的升级版 基于Promise实现 文档请求参数常用配置选项method(string) HTTP请求方法，默认GET(GET,POST,PTU,DELETE) body(string) HTTP请求参数 headers(obj) HTTP请求头，默认{}...原创 2021-02-13 09:59:52 · 151 阅读 · 0 评论 -
【ES6】spread运算符
MDN语法 函数调用 fn(...iterableObj) const arrNumber = [3,2,4] function getSum(a,b,c,y){ console.log(a+b+c+y) return a+b+c+y } getSum(...arrNumber,4)字面量数组构造或字符串 // 字面量数组构造或字符串 const arr2原创 2021-01-12 14:10:36 · 167 阅读 · 0 评论 -
【ES6】generator 笔记
ruanyifengMDN看上去像一个函数，但可以返回多次。 Generator 函数会返回一个遍历器对象。 function* gen() { yield 'Hello'; yield 'Hi'; return 'return'; } console.log(gen())Generator.prototype.next() function* ge原创 2020-12-27 14:15:22 · 93 阅读 · 0 评论 -
ES6——Promise笔记
可以避免多层异步调用嵌套问题 Promise 对象提供了简介的API , 值得控制异步操作更容易原创 2020-12-26 16:44:45 · 222 阅读 · 0 评论 -
ES6笔记 —— let / 块级作用域 /const
letlet 在块级作用域有效 { var a = '123'; let b = '456'; } console.log(a); // 123 console.log(b); // Uncaught ReferenceError: b is not defined var a = []; for (var i = 0; i < 10; i++) {原创 2020-12-21 14:17:12 · 276 阅读 · 0 评论 -
【utils】数组扁平化
数组扁平化就是把多维数组转化成一维数组。1、flatarr.flat([depth]) 创建一个新的阵列的所有子阵元件连接到它递归到指定的深度。不改变原数组。【ES6】在浏览器支持的情况下最好用这个。 //var newArray = arr.flat([depth]); //depth : 深入水平 var arr_ = ['a',['a','b',['c','d',['1','3']],'e'],'f',['g',['h']]];原创 2020-12-19 22:46:05 · 135 阅读 · 0 评论 -
JQ记录 —— currentTarget / delegateTarget / this
$("#parent").on('click',{foo: "bar"},fn); function fn (e) { console.log(e.currentTarget) // parent console.log(this) // parent console.log(e.delegateTarget) // parent } $("#parent").on(...原创 2020-12-17 16:16:30 · 174 阅读 · 0 评论 -
JS应用 —— 鼠标点击后跟随移动
功能鼠标点击后，box跟随鼠标移动，再次点击后，停止跟随并停留在当前位置。实现点击后添加mousemove监听和移动样式。 再次点击后移除mousemove监听和移动样式。相关属性和方法element.classList 获取class列, add添加, remove移除 element.addEventListener() 添加监听 当回调函数为匿名函数时无法被移除 element.removeEventListener() 移除监听 element.getAttribute()原创 2020-12-14 13:07:11 · 1530 阅读 · 0 评论 -
DOM笔记——元素内容插入/获取合集
方法 or 属性 是否覆盖原居民 获取的内容 浏览器 element.insertAdjacentElement(position, element) 方法 不覆盖 / 单次 x element.insertAdjacentHTML(position, text) 方法 不覆盖 x element.insertAdjacentText(position, element) 方法 不覆盖 x ...原创 2020-12-12 17:01:39 · 404 阅读 · 1 评论 -
DOM事件笔记——焦点 blur / focus / focusout / focusin
目标对象事件 是否支持冒泡 是否可取消默认行为 支持 注册方式 blur element 失去焦点 否 否 on / 监听 focus element 获得焦点 否 否 on / 监听 focusout element 失去焦点 是 否 IE9+ 监听 focusin element 获得焦点 是 否 IE9+ 监听 四者...原创 2020-12-12 15:30:56 · 651 阅读 · 0 评论 -
DOM基础笔记——事件流
事件流指的是页面中接收事件的顺序。事件发生时，会在元素节点间按照规定顺序传播。事件流分为三阶段：捕获阶段 从document -> html -> body -> 父元素 -> 子元素，由外向内传播。 当前目标阶段 冒泡阶段 从当前目标 由内向外传播。 <style> .father { overflow: hidden; width: 300px; h...原创 2020-12-12 14:52:09 · 100 阅读 · 0 评论 -
DOM基础笔记——element 插入元素方法
element.insertAdjacentElement(position, element)将元素移动到指定元素的指定位置上。positionbeforebegin 指定元素之前 afterend 指定元素之后 afterbegin 指定元素的第一个子元素之前 beforeend 指定元素的最后一个子元素之后element要移动的元素返回值插入成功，返回插入的元素 插入失败，返回nulelement.insertAdjacentHTML(position...原创 2020-12-12 14:24:45 · 1468 阅读 · 0 评论 -
DOM基础笔记——Element(属性)
element.clientWidth / clientHeight只读元素的内部宽度/高度。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。element.clientTop / clientLeft只读top : 元素顶部边框的宽度。left : 元素左边边框的宽度。如果元素的文本方向是从右向左（RTL, right-to-left），并原创 2020-12-12 13:30:32 · 316 阅读 · 0 评论 -
DOM基础笔记——getBoundingClientRect() / getClientRects()
getBoundingClientRect()返回元素的大小及其相对于视口的位置。返回的是DOMRect对象.width / height content-box : width + padding + border border-box : width IE9+ x 左边到视口的距离 IE不支持 y 上边到视口的距离 IE不支持 top 上边到视口的距离 bottom 下边到视口的距离 ri...原创 2020-12-12 13:26:35 · 447 阅读 · 0 评论 -
DOM基础笔记——DOMTokenList
目录1、什么是DOMTokenList？2、属性3、方法1、什么是DOMTokenList？表示一组空格分隔的标记（tokens）由 Element.classList 等返回的一组值。2、属性DOMTokenList.length 值的个数 DOMTokenList.value 以DOMString 的形式返回 DOMTokenList列表的值。（DOMString映射String）3、方法DOMTokenList.item(index) 根据传入的...原创 2020-12-11 14:36:13 · 3052 阅读 · 0 评论 -
DOM基础笔记——元素大小和偏移
1、.offsetParent只读属性，返回一个指向最近的带有定位或者为（table,td,th,body）的父元素。它返回的是一个元素对象。parentObj = element.offsetParent;2、.offsetLeft是一个只读属性，返回当前元素左上角相对于.offsetParent节点的左边界偏移的像素值。即元素左边距离.offsetParent元素左边的距离。父绝子相，子left-20px效果：5、.offsetTop返回当前元素相对于其.offse原创 2020-12-11 13:53:17 · 268 阅读 · 0 评论 -
JS基础笔记——事件对象(属性/方法)
目录属性e.targete.currentTargete.type方法e.preventDefault()e.stopPropagation()属性e.target返回 触发事件 的对象e.currentTarget返回 事件绑定 的对象 ie678不支持，开发用this <ul> <li>abc</li> <li>abc</li> <.原创 2020-12-10 14:26:57 · 159 阅读 · 0 评论