- 博客(48)
- 收藏
- 关注
原创 vue3路由和网页标题的国际化
现在越来越多的项目使用了国际化,传统的页面功能按钮、菜单等固定文本的国际化比较容易,而在有些管理系统项目中,页面中很多菜单、按钮、网站标题等依赖配置的路由文件。
2023-12-21 17:52:54
838
1
原创 TS中断言、转换的应用
类型断言是把两种能有重叠关系的数据类型进行相互转换的一种 TS 语法,把其中的一种数据类型转换成另外一种数据类型。类型断言和类型转换产生的效果一样,但语法格式不同。
2023-12-13 23:32:27
1410
1
原创 深度掌握TS继承(中)
TypeScript 支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类。
2023-12-09 23:26:39
1833
原创 深度掌握TS继承(上)
只有深度掌握TS继承,才会拥有更深厚的 JS 原型、原型链功底,也能为阅读Vue3,React 源码或其他流行框架源码铺路,因为不管是哪种源码,JS原型链继承一定会用到!
2023-12-09 23:21:51
1557
原创 TypeScript中的单件设计模式
设计模式通俗的讲,就是一种更好的编写代码方案,打个比喻:从上海到武汉,你可以选择做飞机,做轮船,开车,骑摩托车多种方式,把出行看成是编码,那么选择飞机相对就是一个更好选择的优化方案。
2023-12-06 23:58:26
1515
2
原创 深度掌握TypeScript中的重载【函数重载、方法重载】
TS 的函数重载比较特殊,和很多其他后端语言的方法重载相比,多了不少规则。函数签名[ function signature ]:函数签名=函数名称+函数参数+函数参数类型+返回值类型四者合成。在 TS 函数重载中,包含了实现签名和重载签名,实现签名是一种函数签名,重载签名也是一种函数签名。不完整模糊的 TS 函数重载定义:一组具有相同名字,不同参数列表的和返回值无关的函数。完整的函数重载定义:包含了以下规则的一组函数就是TS函数重载 :**规则1:**由一个实现签名+ 一个或多个重载签名合成。
2023-12-06 09:19:35
3989
1
原创 TypeScript中的类
定义:类就是拥有相同属性和方法的一系列对象的集合,类是一个模具,是从这该类包含的所有具体对象中抽象出来的一个概念,类定义了它所包含的全体对象的静态特征和动态特征。 类有静态特征和动态特征【以大家最熟悉的人类为例】静态特征【软件界叫属性】姓名,年龄,地址,身份证号码,联系方式,家庭地址,微信号动态特征【软件界叫方法】吃饭,走路【再看桌子类】 静态特征【属性】高度,宽度,颜色,价格,品牌,材质 动态特征【方法】承载【来看订单类】
2023-12-04 23:30:31
977
原创 一文弄懂TypeScript中的混合(Mixin)
1.前言由于TypeScrip中的类不支持多继承,所以引入了混合(Mixin)的特性,可以间接实现继承的效果。
2023-09-18 23:18:02
451
原创 一文搞定>>、<<、>>>等位运算
位运算在我们平时开发中很少会用到,以至于它被大多数人所忽略,因此在面试题中能频繁的看到位运算的身影。由于位运算本质是二进制运算,大多数开发者可能会对此比较陌生,本文旨在揭开位运算的神秘面纱,一同探究其本质,帮助大家掌握位运算的方法。
2023-09-08 13:52:22
827
原创 JS判断对象是否发生变化,常用于监听页面表单是否修改并给出保存提示
本文主要封装方法,实现用户离开表单编辑页面时弹出提示框,若表单数据发生变化,则提示用户是否保存当前页面的信息,如图:
2023-09-04 21:48:57
1376
原创 前端算法之二分查找
在数组中查找指定元素,如果存在就返回它的位置,如果不存在,就返回-1。这是一道非常经典的算法题,考的就是二分查找算法,首先分析二分查找的思路:
2023-02-02 19:01:03
277
原创 React中实现keepalive组件缓存效果
由于react官方并没有提供缓存组件相关的api(类似vue中的keepalive),在某些场景,会使得页面交互性变的很差...封装keepalive缓存组件,实现组件的缓存,并暴露相关方法,可以手动清除缓存
2023-01-13 17:15:53
4301
6
原创 el-cascader组件根据最后一级向上找到父级并设置默认值
vue + elementUI项目中,el-cascader级联选择器使用频率非常高,一些基本使用方法可以参考elementUI官方文档,本文主要研究当接口只返回最后一级id时,如何向上找出所有父级数据,并设置组件el-cascader的默认值!图中未处理的数据就是根据最后一级id向上查找父级数据,处理后的数据是将找到的树形数据继续平铺处理成组件需要的各级id组成的数组(若业务场景固定,只需要id数据,那么在。准备测试数据:方位、省、市区级联选择。方法中可以直接返回处理后的数据)。
2022-10-24 14:09:25
3318
1
原创 力扣算法之数组中出现次数超过一半的数字
数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字。你可以假设数组是非空的,并且给定的数组总是存在多数元素。
2022-09-25 10:09:54
133
原创 前端性能优化之控制请求并发数
在我们平时开发中,经常会遇到页面数据初始化时,频繁调同一个接口的情况。比如echarts项目中,一个页面可能会有几十张图表,如果一个接口返回所有图表数据的话,会造成用户过长的等待时间,再者过多图表同时渲染,也会给页面增加压力,造成卡顿的现象。...
2022-08-01 19:08:55
852
原创 React开发中常见报错之组件更新错误
在React开发中,这样的报错会经常遇到:Warning: Can't perform a React state update on an unmounted component.
2022-07-25 15:35:35
907
原创 js俩个大数之和
js中,对整数范围是有限制的,超过安全范围会发生精度丢失,无法正常计算,常见的解决方案就是转成字符串处理,代码如下: // 俩个大数相加 var a = '9998995523412341234123412441123412342', b = '0002245332134123423142341423424'; function bigSum(a, b) { a = String(a).split(''); b = String(b).sp
2022-04-11 17:42:39
454
原创 SharedWorker实现多标签页联动计时器
web workers对于每个前端开发者并不陌生,在mdn中的定义:Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外,他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦创建,一个worker可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序(反之亦然)。我的理解:webworkers可以为js带来多线程环境,由js主线程创建...
2021-12-13 15:57:59
772
1
原创 vue+element表单校验封装
vue+elementui技术栈的小伙伴们,在平时项目里,特别是OA项目,会大量用到表单以及表单校验。经常会处理一些必填项,对它们是否有值的判断显得有些繁琐和臃肿,本文将封装方法,解决该问题。最近业务中频繁增加必填项,之前的常规做法就是在提交、修改或者其他操作之前,判断必填项是否填写,做个拦截:在每一个操作之前加上这些必填项的验证,如果有少量的必填项,可以这样处理,但是有大量必填项的时候,代码就会显得非常冗余。现在尝试将抽出来形成方法,在提交、修改等操作之前调用该方法,.
2021-11-08 18:31:50
1956
原创 vue自定义指令防抖和节流
函数防抖和节流在平时业务中经常会用到,一般都是调用已经封装好的方法,下面介绍一种新的思路:vue自定义指令!下面这段代码以防抖为例,el-input标签直接写上v-debounce,传入arg参数:search和expression表达式:‘input’,1000,seach为需要防抖的函数,'input'为绑定的事件名称,1000(ms)表示防抖间隔时间。<template> <el-input v-debounce:search="'input',1000" v-mo
2021-11-03 19:17:39
823
原创 vue项目实现文件下载进度条
平时业务中下载文件方式常见的有俩种:第一种,直接访问服务器的文件地址,自动下载文件;第二种 ,服务器返回blob文件流,再对文件流进行处理和下载。一般小文件适用于第一种下载方案,不占用过多服务器资源,而对于体积庞大的文件,常常使用文件流的方式进行传输,如图:文件流传输成功后通过代码可以立即发起浏览器下载该文件流:这种方式也有弊端,在文件流传输过程中,用户无法感知文件流的传输状态(进度),会造成一些困扰(无法确定当前下载操作是否已经生效)。针对这种情况,我们可以在页面显示文件流的状
2021-09-22 17:17:55
6881
5
原创 谷歌调试工具小技巧
谷歌调试工具的使用是每一名前端开发者必备技能之一,其中有些比较有意思的小彩蛋,因为并不常用,所以很多人可能并不知道,下面一起来涨姿势吧!打开调试工具面板:1.更改调试工具的主题色ctrl + shift + p在出现的输入框中输入dark,选中第一个:点击ReloadDevTools按钮,重启工具面板:2.调整工具面板的位置ctrl + shift + p 出现的输入框中输入 dock,选择对应的位置:3.console.log() 打印的内容增加样式..
2021-09-13 14:45:14
538
原创 正则处理手机号码格式
正则生成形如xxx xxxx xxxx格式的手机号码(中间数字自动追加空格):监听输入事件,对输入的值用正则处理:1.过滤输入的字符,去掉非数字var a = '13177wsdrfs778888sdfasdf999asdfasdfasdf9'a.replace(/\D+/g, '') // => 1317777888899992.控制输入字符的位数(手机号位数为11位)var a = '131777788889999'a.replace(/(\d{1,11})(\d
2021-09-01 14:31:42
1138
原创 vue2在css中使用js变量
本篇将实现vue2在css中使用js变量。下图是el-tab组件,由上面的tab头和下面的内容区构成,当内容区过长的时候,外层固定高度的盒子会出现滚动条(设置了overflow: auto;),tab头部会向上滚动而消失:滚动前:滚动后:现在的需求是,tab头部需要固定在最上方,不随滚动条滚动而消失。首先尝试将tab头用固定定位,加上背景色和z-index层级,已经实现悬浮固定,但是长度不够,只能盖住“特殊指示”旁边一点,空出来一大截。加上width: 100%又超长,由于组件的
2021-08-24 12:31:22
4009
原创 前端性能优化之防抖、节流
本篇主要封装防抖、节流方法,并简述它们的使用场景:防抖:/** * 如果短时间内触发多次同一事件,只执行一次 * @param {*} callback callback: 需要处理的回调函数 * @param {*} delay delay:期限 * @returns */export function debounce(callback, delay) { return function (event) { // 如果上次事件还没有真正处理, 取消它 //
2021-08-23 17:04:58
156
原创 js数组元素为基本类型和对象去重
常见的数组去重主要有俩方面:由基本类型组成的数组去重 由对象组成的数组根据对象某个属性去重基本类型去重:export function unique(array) { const arr = [] const contain = {} array.forEach(item => { if (!contain.hasOwnProperty(item)) { arr.push(item) contain[item] = true } }
2021-08-20 19:13:39
91
原创 vue服务端渲染之nuxtjs
前言本篇主要针对nuxtjs中的一些重要概念整理和代码实现!在学习vue服务端渲染之前,先搞清楚几个概念:什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同客户端渲染(CSR):当用户在浏览器中输入网址,打开网页,此时的页面只有样式和一些html代码构成的空壳页面,并没有数据。这就需要我们通过执行js代码,请求相关数据,请求到数据之后,通过模板(vue),将这些数据渲染到页面,最终呈现给用户完整的页面。服务端渲染(SSR):当用户在浏览器中输入网址,打开网
2021-08-17 10:07:07
484
原创 js引用类型深拷贝、浅拷贝方法封装
引用类型的深拷贝、浅拷贝在前端领域一直是个很重要的知识点,不仅在业务中频繁使用,也是面试官们喜欢考的的知识点之一。本篇将封装引用类型的深拷贝、浅拷贝方法,并解决在封装过程中出现的问题。一、浅拷贝浅拷贝一般比较简单,缺点也很明显,引用类型的属性并不是真正的拷贝,而是拷贝的引用地址,改变一个当中的属性值,另一个也跟着变化。方法封装:/** * 浅拷贝 * @param {*} target * @returns */export function clone (target) {
2021-08-13 19:44:55
286
原创 前端面试题之类数组的push
js中的类数组对象,它具有数组的下标和length,但是没有数组相关的方法(push、slice、map、、、),现将数组的方法强行给它,会发生什么呢?var obj = { '2': 3, '3': 4, 'length': 2, 'splice': Array.prototype.splice 'push': Array.prototype.push}console.log(obj) //=> ?上面代码,强行给这个类数组对象增加一个数组的pu
2021-08-11 00:29:13
576
原创 前端面试题之浏览器环境和node环境下的函数执行
原题:以下代码在浏览器环境和node环境中分别输出什么?var a = 1, b = 2;function test() { var b = 3; return new Function('c ', 'console.log(a + b + c)'); }var t = test();t(4);先来补充一下函数相关知识点:const test = new Function('a', 'b', 'c', 'console.log(a + b + c)
2021-08-08 14:27:50
107
原创 vue函数式组件在项目中的使用
本篇将详细介绍vue组件化之函数式组件,会用到以下api:Vue.component()、Vue.extend()、$createElement、patch()。从事vue开发的小伙伴,平时组件化的过程中大多都采用的vue文件+模块化系统的方式吧。例如:import ComponentA from './ComponentA.vue'export default { components: { ComponentA }, // ...}如果你看过官方文档,了解过v
2021-07-31 16:18:32
2413
原创 前端面试题之找出字符串中出现次数最多的字符(正则解法)
前端面试题中有这样一道比较经典的题目:找出一串字符串中出现(或者连续出现)最多的字符。这种题的解法有很多,这里介绍一种思路:巧用正则。/*@params {string} s 字符串 */function findSameStrs(s) { if(typeof s !== "string") return ''; var str = s; //下面对乱的字符排序,如果题目要求”连续出现”最多字符的话,不用写 str = s.split('').sort((a,b)=>
2021-07-28 23:58:51
1250
原创 vue组件之间通信总结(超详细)
组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位。本篇将总结在vue中,组件之间通信的几种方式:props、$emit $parent、$children $attrs、$listeners provide、inject eventBus vuex 本地存储一、props、$emit单向数据流father.vue:<template> <div> <div>我是父亲:<input type=
2021-07-26 23:58:26
642
原创 面试题之a==1&&a==2&&a==3和a===1&&a===2&&a===3
这道面试题现在应该挺常见了吧://定义a,使下面代码可以打印出"哈哈!"if(a==1&&a==2&&a==3){ console.log("哈哈!");}else{ console.log("嘻嘻!");};我当初看到题目的第一反应:what?一个数可以同时和三个数相等?会不会是toString隐式转换?于是就尝试了一下:var a={ num:1, toString:function(){ ret...
2021-07-25 00:33:24
1073
原创 js获取本地时间
小伙伴们平时开发过程中,对获取到的本地时间有没有进行一些特殊的处理啊。比如页面需要展示这样的时间:2021.07.22、2021/07/22、2021-07-22等 。下面我们封装一个方法,可以获取自定义格式的日期格式,可自定义精确到年月日时分秒哦~ 上代码:/** * * @param {number|string} timestamp,默认是当前时间戳 * @param {string} format 'year' || 'month' || 'day' || 'hour' || 'mi
2021-07-22 22:34:32
846
原创 js树形数据结构的扁平化
前面我们封装了一维数组(具备树形结构相关属性)处理成树形结构的方法::https://www.cnblogs.com/coder--wang/p/15013664.html接下来我们来一波反向操作,封装一个可以将树形结构的数据扁平化的方法。这种场景在业务中还是很常见的,比如一个级联选择器,有时候你需要判断某个id或者某个字段,是否存在于该级联选择器的多维数组中,亦或者你需要将该多维数组中的字段进行处理,那么此时,对这个树形的复杂数组进行降维就显得很有必要了!下面直接上代码:/** * * @.
2021-07-21 23:46:34
7115
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人