![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
Luck Young
个人网站https:/www.wlittleyang.com
展开
-
js 多维数组扁平化
代码/** * 多维数组扁平化 * @param {Array<T>} deepArr 多维数组 * @param {Array<string>} hideKeys 扁平后不要的key值 * @returns Array<T> */function toFlatness(deepArr = [], hideKeys = []) { const reg = new RegExp(hideKeys.join('|')) const list = []原创 2021-07-09 09:52:47 · 201 阅读 · 0 评论 -
js 判别IE浏览器版本
// 获取IE版本function IEVersion() { // 取得浏览器的userAgent字符串 var userAgent = navigator.userAgent; // 判断是否为小于IE11的浏览器 var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; // 判断是否为IE的Edge浏览器转载 2020-08-24 13:11:33 · 438 阅读 · 0 评论 -
js之reduce巧用
在JavaScript数组函数中有一个reduce函数,和filter、map、forEach等方法略有不同,虽然中间也是有内部循环,但reduce多了一层递归。先看看reduce函数接收的参数。reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, ini...原创 2020-04-09 23:43:19 · 297 阅读 · 0 评论 -
webpack学习记录(第三阶段)
手写webpack文章目录手写webpack构建自定义命令手写loader手写插件(简单实现)手写babel-loader实现file-loader实现url-loader实现css-loader,改造style-loader构建自定义命令因为这是单独的全局功能模块,源码请移步至https://github.com/smallMote/ypack.git手写loader这里以处理le...原创 2020-04-06 22:36:31 · 206 阅读 · 0 评论 -
js实现一个简单的订阅模式
订阅模式应用非常广泛,比如Vue中的钩子以及Vuex的设计模式中都大量使用了订阅模式。下面就简单的演示一下。class Event { constructor() { this.handlers = {} // 事件队列 } // 注册事件(发布) addEventListener(name, handler) { if (!(name in this.h...原创 2020-03-21 18:26:57 · 464 阅读 · 0 评论 -
axios 主动取消请求
axios 主动取消请求已经发送的请求,在没有收到后台返回之前主动取消。这样的场景很常用。例如:一个支付组件,正在支付的时候用户立即又关闭了组件,这时应该立即取消支付请求。又或者tabs切换的时候,都是经常用到的。这里我是用Typescript来封装的一个简单的axios请求做演示。api.jsimport axios, { CancelTokenStatic } from 'axio...原创 2020-02-05 11:50:15 · 1196 阅读 · 0 评论 -
Typescript封装防抖和节流函数
防抖函数在规定时间内重复执行同一个函数,但是只生效一次函数的行为。比如由于网络延迟,用户在一定时间内会重复点击某一个按钮,然而不断的执行按钮上的事件。若该事件是网络请求,则会给服务器不断造成压力,这是我们不愿看到的。节流函数在规定时间内重复执行同一个函数,但是按照一定的时间段生效函数的行为。和防抖函数非常相似。例如在支付回调后我们要确认支付的状态,可以手动检查+自动检查的情况下,我们使用节流...原创 2020-02-02 17:23:15 · 9274 阅读 · 4 评论 -
js 将数据按需分类
classifyDemand 函数说明该函可将数组按字段分类,并将字段或自定义名称作为索引便于查找,分类显示,大大提高了试图的遍历压力。函数体/** * @param arr 需要分类的数组 * @param value -> object | array * @param key -> string * @param nickName -> string *...原创 2019-12-10 13:39:43 · 643 阅读 · 0 评论 -
简单封装Element-UI表单验证
我相信大家在使用element-ui框架的时候都避免不了使用它的表单组件,其中表单验证的使用频率颇高。由于自己工作的原因会使用到很多表单,而且都需要验证,而本人人又特别懒不想写那些重复代码,就连c、v键都不想使用。于是我对element-ui的表单验证进行了一定的封装。首先来看一下目录结构reg-exp-maven.js 存放正则表达式validate.js 写通用的校验方法val...原创 2019-11-22 16:59:04 · 1304 阅读 · 2 评论 -
eslint 配置参数表(中文解释)
eslint 配置参数,0是关闭,1是打开,[]里面配置详细格式"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no...原创 2019-11-06 14:48:59 · 1896 阅读 · 0 评论 -
js实现根据最小值,截取数组
根据传递的最小值截取数组,并将其作为首位。在做分页的时候还是很有用的,在前端,有些时候为了页面能够美观,有时候列表数量不一致,这样就能控制分页的页码。// 传递的最小值截取数组并将最小值添加到首位function minArrSplice(min, arr) { if (!arr || arr.length < 2) return arr; let _index = 0; ...原创 2019-10-21 09:39:56 · 324 阅读 · 0 评论 -
JsZip+FileSaver实现打包文件并下载
这里使用jszip进行文件打包,可以创建文件夹,创建文件。然后使用FileSaver进行下载,这里使用FileSaver下载是因为这个工具可以下载大文件,而且效率非常高。一下代码示例,简单模块化了一下,为了能够上传下载文件。'use strict';import JsZip from 'jszip'import { saveAs } from 'file-saver'export cl...原创 2019-10-17 13:44:57 · 6702 阅读 · 0 评论 -
使用纯css实现类似于CSR方块排列
有需求就有方案。现在遇到一个问题是后台返回已经格式化好的CSR,但是在前端页面显示是不像在代码编辑器中一样会自定排版。之前看了有js方案的,传送门,这样解决是没问题,但是用来处理CSR的会出现一个问题就是会重新组合字符串的长度,但是这不是我们需要的,回溯到最初,布局本来就是CSS的事,我们先来看一张没有添加样式的CSR只能用一个“丑”来赞美了。接下来我就要传递秘籍了,直接上代码。...原创 2019-09-24 18:01:11 · 431 阅读 · 0 评论 -
js 服务器链接失败跳转错误页面处理
一般我们在处理请求服务的时候不免会遇到服务器连接不上的情况,而现在开发网站应用一般读书采用路由的方式,也非html静态文件开发,列入使用vue脚手架开发网站应用的时候,我们会将对请求服务器的操作进行封装到一个单独的文件,会用一个总的post或者get等方法。当我们请求服务端的时候如果返回的是服务器连接失败的情况想用路由跳转的指定的提示页面却发现就会出现两个Vue事例,这样跳转就没有意义的,完全无效...原创 2019-09-04 14:32:42 · 2532 阅读 · 0 评论 -
js超过了21为的数字怎么处理?
在项目中遇到了一个37位的数字,后台默认返回的是long型的,但这个超过了js中number类型的安全范围(2^53 = 9007199254740992),js会自动转换成科学计数法,小数还是整数都会使用科学计数法来表示。对于整数来说可以使用js的内置对象BigInt来转换,接受的number类型console.log(BigInt(8.2947751915953e+37));//2...原创 2019-09-03 17:37:14 · 2631 阅读 · 0 评论 -
ES6新增语法
九个ES6新增语法的使用和演示为了测试使用class定义类来便于调用测试,代码可以之间粘贴复制使用Let声明关键字 Const声明关键字 箭头函数 默认参数 For…of…循环 展开属性 Map集合 静态方法 Getter和Setter方法class Method { //构造方法 constructor(){ Method.a = 1;...原创 2018-10-22 09:07:39 · 976 阅读 · 0 评论 -
js将一个数组分割成多个子数组
在做一个项目的时候需要将得到的json数据分组显示,于是自己写了个算法。将一个长数组分割成许多小数组保存起来。/** * 分割数组创建二维数组封装 * @param data 数组 * @param senArrLen 需要分割成子数组的长度 */let splitArr = (data , senArrLen)=>{ //处理成len个一组的数据 let d...原创 2018-11-01 16:25:57 · 17185 阅读 · 1 评论 -
折半查找
const a = [3,6,7,10,11,16,20,33,56,89];const b = [41,4,5,1,3,16,20,33,56,89];/** * 折半查找 * @param arr 数组 * @param key 需要查找的关键字 * @param flag 是否需要排序 * @returns {number} 所在数组的索引 * @constructor...原创 2019-02-01 23:40:34 · 167 阅读 · 0 评论 -
js骚之回调函数——歌曲列表循环播放
js的回调函数真的是一门精彩绝伦的技术,每一次使用都很让我感叹,废话不多说。最近再做一个音乐Dome,里面有一个功能是点击歌曲播放后自动播放下一首,然后列表循环播放。这里自动播放下一首的时候自然用到了js骚之回调来侦测当前歌曲是否播放完。为什么是骚之呢,那就看回调函数再列表循环中的表演了,看代码原创 2019-04-30 13:44:54 · 1257 阅读 · 0 评论 -
Vue获取(返回)上一个路由
Vue获取上一个路由或者说返回到上一个路由可以用三种方法实现1.使用钩子函数beforeRouteEnterbeforeRouteEnter(to, from, next) {}以及其他两个钩子函数请看:https://www.cnblogs.com/lhl66/p/9195901.html关于路由守卫,每个路由是又独立守卫的:https://www.jianshu.com/p/...原创 2019-05-25 08:52:22 · 20773 阅读 · 0 评论 -
ES6入门
安装ES6环境ES6是需要依赖与node上运行的,虽然现在很多浏览器也支持了不少ES6的语法,但是为了兼容我们可以将ES6转换成es5然后再向浏览器输出。使用Babel转换ES6首先我们再根目录初始化一下:1.首先在根目录创建src和dilst文件夹,src下创建一个index.js(用来写ES6)-src //用于编码 --index.js-dilst //用于输出2...原创 2019-07-13 16:15:56 · 207 阅读 · 0 评论 -
作为前端内网穿透我推荐localtunnel
在做开发的时候避免不了测试、调试、接口对接……等等流程,内网穿透是一种好的解决方案。什么是内网穿透?我就简单的解释一下:将本地地址映射到一个公共地址,让其他用户也能访问。原创 2019-07-13 21:53:51 · 1424 阅读 · 0 评论 -
ts封装格式化时间
之前一直在用js时间工具,往往用Date.prototype.format的方式来封装,虽然代码量上会比ts少,但是为什么还用ts封装,自然是为了提高B格呀!最近一段时间迷恋上了ts,之前写了一年的java现在用上这玩意儿真是慢慢的回忆啊,每一次写构造函数、getter和setter方法的时候都会想起最初的java导师为我们讲解这两个的区别,功能,优化,现在感觉真的很感谢当时的松哥!废话说完了就来...原创 2019-07-12 00:11:59 · 4717 阅读 · 0 评论 -
js获取视窗的常用属性和功能总结
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全...转载 2019-07-19 17:58:03 · 512 阅读 · 0 评论 -
vue+wangEditor使用
vue + wangEditor 小试牛刀在新的后台管理项目中由于需要对文章、商品进行一些相关编辑,于是加入了富文本编辑器,最先是用了vue-quill-editor,发现界面有点难看,后来换ckeditor,试了好几个npm包,后来没有实现:( 全是泪,后来想起之前一个网友推荐的wangeditor这个编辑器,在官网看了一下,介绍的很详细,下面就来看看再下是如何实现的,由于刚刚开始用,目前功能...转载 2019-08-02 10:05:45 · 2667 阅读 · 0 评论 -
输入框实时搜索、查询(截流函数)
在检索数据的时候需要当输入完内容之后就开始自动请求接口查询结果,但却不是onchange这种观察的方式,性能上是不行的。截流函数使用的是监听键盘事件,停止敲击键盘后一定时间便自动请求接口。如下: //截流函数 const delay = (function() { let timer = 0; return function(callback, ms) { ...原创 2019-08-28 16:00:46 · 1126 阅读 · 0 评论 -
五个技巧写出更好的js条件语句
解决JavaScript中不必要的条件嵌套,多余判定,参数设置,以及参数不确定性。<script> 'use strict'; //1.使用Array.includes来处理多重条件 /** * 如果我们要找到符合我们需要的鞋子 * 符合的有"Asics" , "Nike" , "Adidas"...原创 2018-10-11 16:43:05 · 471 阅读 · 0 评论