- 博客(48)
- 收藏
- 关注
RSS订阅原创 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关注的人