诸葛小愚_社区达人页

2022年07月

• 07.21 10:54:16
  发表了文章 2022-07-21 10:54:16

  聊天框(番外篇)—如何实现@功能的整体删除

  上一篇文章中，我们已经初步实现了聊天输入框，但其@功能是不完善的，例如无法整体删除、无法获取除用户名以外的数据（假设用户名不是唯一的）。有问题就要想办法解决，在网上百度了一圈后，倒是有一些收获。本文就着重解决@的整体删除以及获取额外数据。

  
• 07.21 10:52:55
  发表了文章 2022-07-21 10:52:55

  脑洞大开：如何使用CSS实现自定义圆角虚线框

  在CSS中，我们常用`border`来表示一个元素的边框样式，也可以使用`border`来绘制简单的分割线。最近遇到一个项目，需要用虚线来显示元素的边框。初步一看，这不很简单嘛，一行代码搞定`border: 1px dashed #ccc`。自我感觉良好，结果UI的同事直接提刀来了，“这是我想要的效果吗，我要的是……”。没办法，还是老老实实想办法解决自定义的虚线边框。

  
• 07.21 10:49:47
  发表了文章 2022-07-21 10:49:47

  别再用错setTimeout和setInterval了

  `setTimeout`和`setInterval`都可以用于设置定时器，参数相似，但是使用效果和用途截然不同。本文就重点阐述两者之间的区别
• 07.20 14:20:16
  发表了文章 2022-07-20 14:20:16

  5分钟快速搭建一个vue3+ts+vite+pinia项目

  最近接到一个新的需求，需要使用Vue3来开发，本着学习的目的，就先来创建一个Vue3项目。既然是学习，那就怎么新怎么来。

  
• 07.20 14:17:30
  发表了文章 2022-07-20 14:17:30

  ts：从入门到放弃（三）

  前文已经学习了数组、函数、联合类型和内置对象等，接下来一鼓作气，先过一遍ts的入门知识。
• 07.20 14:16:17
  发表了文章 2022-07-20 14:16:17

  ts：从入门到放弃（二）

  温故而知新，回顾前文学到的数据类型：boolean、number、string、void、null、undefined、any，然后是类型：联合类型、接口类型，本文继续来学习TypeScript，相信我会越学越上头。
• 07.19 16:29:58
  发表了文章 2022-07-19 16:29:58

  ts：从入门到放弃（一）

  2022年了，作为一个前端开发，如果没听说过TypeScript的话，估计要被吐槽落伍了。因为工作需要，虽然自己更习惯使用JavaScript，但是还是不得不硬着头皮捡起TypeScript好好看看。本系列为TypeScript的学习笔记，后续也会有实战项目

  
• 07.19 16:27:07
  发表了文章 2022-07-19 16:27:07

  几个实用的CSS代码块

  CSS是一门神奇的语言，用的好可以让页面看起来更优雅，用的不好不仅会给自己带来工作量，也可能会影响页面的美感。想要把CSS学完，并且牢牢记住，这个还真有点难度。一般常用的我们会写，因为用的多了，如果是遇到不常用的属性，估计只能靠“百度”了。本文总结了笔者在实际项目中遇到的CSS问题，感觉有点意思，就记录下来。

  
• 07.19 16:22:37
  发表了文章 2022-07-19 16:22:37

  Vue2和Vue3的区别：从响应式开始

  如果在项目中使用过Vue，那么一定会享受到其响应式带来的好处。作为前端三大框架之一的Vue，已经迭代出Vue2和Vue3两个大版本，Vue3是兼容Vue2的，但是为了区分，我们暂且将其看作是两个独立的框架。Vue3对响应式做了比较大的调整，工作原理上与Vue2并不相同，但是效率上来说Vue3是更好的选择。

  
• 07.18 09:27:25
  发表了文章 2022-07-18 09:27:25

  在forEach面前大多数人都可能会犯的错

  使用过`forEach`的人大致有两种：普通使用，简简单单；复杂使用，总想搞出点花样来，结果一些莫名其妙的bug就出现了，解决这些bug所花费的时间都可以换一种思路实现了，能用作`for`循环的，又不只是`forEach`。没错，笔者就是后者，终究是自己“学艺不精”。于是乎，花点时间，结合自己的实际开发经验，再来好好理理`forEach`。

  
• 07.18 09:25:38
  发表了文章 2022-07-18 09:25:38

  对比Vue2和Vue3的监听器

  我们总是会把计算属性和监听器做比较，简单来说，计算属性可以声明性地计算推导值，监听器更多的是为了处理一些状态的变化，不具备声明性。Vue发布了两个大版本，其监听器也发生了变化，本文就重点探讨Vue2和Vue3关于监听器的区别。
• 07.18 09:24:07
  发表了文章 2022-07-18 09:24:07

  开箱即用的axios封装：Vue3+TS（建议收藏）

  Axios多用于处理前端项目的Ajax请求，这里要注意区分Axios和Ajax：Ajax是一种技术统称，Axios是第三方库。在使用的时候，我们可以直接使用Axios来发起请求，也可以封装后采用统一的接口发送请求。在前端项目中，应该大多数人都会选择封装一下Axios，不仅可以节省代码，看起来更简洁；而且可以统一管理请求和响应。本文就以Vue3+Typescript，封装一个”开箱即用“的Axios。

  
• 07.15 10:33:12
  发表了文章 2022-07-15 10:33:12

  超详细：在Vue3中实现自定义指令

  在开发Vue项目时，大多数人都会使用到Vue内置的一些指令，例如`v-model`、`v-if`等，在使用的时候不知道有没有想过自己也来实现一个指令呢。本文就以Vue3项目为基础，从原理、方法到实际案例、注意事项，尽可能细致的讲解如何自定义指令。

  
• 07.15 10:26:44
  发表了文章 2022-07-15 10:26:44

  你可能没有用过的HTML属性

  HTML作为前端三大基础之一，应该没有前端工程师没用过吧。HTML的属性有很多，全部记住也不现实，主要是没必要。但是常见的一些属性还是要时刻记得的，本文就来总结一些可能不常见还是有点意思的HTML属性。

  
• 07.15 10:18:49
  发表了文章 2022-07-15 10:18:49

  如何优雅地使用Vue3的异步组件

  在开发Vue项目时，大多数人都会用到组件。在父组件中，子组件的加载一般是按照先后顺序加载的，子组件加载后才会加载父组件。如果一个页面的子组件很多，由于会先加载子组件，那么父组件可能会出现比较长的白屏等待时间。我们想让`child.vue`组件异步加载应该怎么办呢？Vue3

  
• 07.14 17:03:45
  发表了文章 2022-07-14 17:03:45

  让人头秃的promise-then执行顺序问题

  `Promise`对于前端开发来说应该不陌生了，其主要用于在一个异步操作中返回结果值，并且支持链式调用。今天就来讨论一个`Promise`链式调用相关的面试题。

  
• 07.14 17:01:40
  发表了文章 2022-07-14 17:01:40

  前端页面如何使用img实现埋点功能

  做数据分析的时候，可能会遇到一个问题：如何获取足量的有效数据。简单记录用户登录IP肯定是不能满足要求的，这个时候就需要我们在前端页面埋点，也就是数据采集点。如何来实现一个前端埋点功能，本文就带你上手试试。

  
• 07.14 16:58:07
  发表了文章 2022-07-14 16:58:07

  js是如何实现new一个对象的？

  面向对象，从new一个对象开始。在ES6中，引入了关键词`class`来声明一个类，在此之前想要创建一个"类"，只能使用函数的方式。可以说，`class`其实就是函数`function`的一个语法糖。有了类，我们就可以使用`new`来创建一个实例对象。

  
• 07.01 09:44:59
  发表了文章 2022-07-01 09:44:59

  分不清bind、apply、call？手写实现一下就明白了

  bind、call和apply都是`Function`原型链上面的方法，因此不管是使用`function`声明的函数，还是箭头函数都可以直接调用。这三个函数在使用时都可以改变`this`指向，本文就带你看看如何实现bind、call和apply。

  
• 07.01 09:42:38
  发表了文章 2022-07-01 09:42:38

  如何处理页面关闭时发送HTTP请求？

  在实际项目开发中，可能会遇到这样的业务问题：如何在用户离开或关闭页面时发送HTTP请求给服务端？可能有人会觉得页面都关闭了，还需要发送什么请求，完全没必要噻。但如果真有这样的业务需求落到自己的头上，那么我们应该如何来实现呢？

  
• 07.01 09:38:52
  发表了文章 2022-07-01 09:38:52

  你知道toString()可以获取变量的数据类型吗？

  js是弱类型语言，或者说是动态语言，在定义变量时我们可以不提前声明变量的类型，也可以在变量声明后赋予不同类型的值。变量的类型会在程序运行的过程中被确定。对于开发者来说，虽然可以不用频繁的定义不同的数据类型，但是如果是比较复杂的项目，或者接手他人的项目，发现一个变量到处被使用并且赋予不同类型的值，也许头都大了。变量类型的不确定还可能出现运行时报错：`xxx is not a function`，根本原因就是不同的数据类型所具有的方法是不一样的，也许有的大家都有，因此不报错；但是如果是特有的，或者有差异的，不判断变量的类型就直接调用，就有可能出现生产bug。那么应该如何才能获取准确的变量类型呢？

2022年06月

• 06.30 09:43:45
  发表了文章 2022-06-30 09:43:45

  实现LRU缓存的三种方式（建议收藏）

  LRU全称为Least Recently Used，即最近使用的。针对的是在有限的内存空间内，只缓存最近使用的数据（即get和set的数据），超过有限内存空间的数据将会被删除。这个在面试题中也是常会被问到的内容，接下来就看看怎么来实现。

  
• 06.30 09:40:13
  发表了文章 2022-06-30 09:40:13

  express+nodejs+mysql 开启服务端开发之路

  作为一个普普通通的前端开发，一直有一个“全沾”开发的梦想。如果要开发服务端，现在去学习Java、Go的话，或多或少都会显得有点麻烦了。其实，对于习惯了使用JavaScript的前端er来说，Nodejs就是一个很不错的选择。

  
• 06.30 09:30:55
  发表了文章 2022-06-30 09:30:55

  手写代码：实现一个EventBus

  EventBus，事件总线。总线一词来自于《计算机组成原理》中的”系统总线“，是指用于连接多个部件的信息传输线，各部件共享的传输介质。我们通常把事件总线也成为自定义事件，一般包含`on`、`once`、`emit`、`off`等方法。在Vue2中想要实现EventBus比较简单，直接暴露出一个`new Vue()`实例即可，以此为思路，我们应该如何自定义实现EventBus呢?

  
• 06.23 10:14:47
  发表了文章 2022-06-23 10:14:47

  深入理解js的内存泄漏

  以前我们说的内存泄漏，通常发生在后端，但是不代表前端就不会有内存泄漏。特别是当前端项目变得越来越复杂后，前端也逐渐称为内存泄漏的高发区。本文就带你认识一下Javascript的内存泄漏。

  
• 06.23 10:08:40
  发表了文章 2022-06-23 10:08:40

  面试官：听说过LazyMan吗，手写一个试试

  我们都知道，JavaScript是单线程、基于异步的编程语言，执行代码时是非阻塞的。如果执行的是同步的代码，则按照顺序执行完毕；如果是异步的代码，则按照异步调用执行，并不会阻塞在某一个异步函数中。最近遇到了这样一个面试题……

  
• 06.23 10:05:19
  发表了文章 2022-06-23 10:05:19

  你能给出几种实现数组扁平化的方法？

  扁平化数组没听过？那应该听说过扁平化管理吧，这可是互联网公司面试时的通用话术。简单的说，扁平化就是减少层级，可根据需要减少一个层级，或者减少到只有一个层级。扁平化数组就是将多重嵌套的数组，重新整理成一维数组。接下来就来看看可以怎么实现这种效果吧。

  
• 06.22 16:22:58
  发表了文章 2022-06-22 16:22:58

  Vue3+Element Plus使用svg加载iconfont的解决方案

  Element UI作为一款优秀的开源组件库，想必很多人都使用过，在Vue3中，我们需要使用Element Plus。Element Plus有很多好用的组件，详细用法可直接去查看官方文档：[Element Plus](https://element-plus.org/zh-CN/)。本文主要介绍如何在Vue3+Element Plus的项目中，使用自己封装的svg图标。

  
• 06.22 16:16:34
  发表了文章 2022-06-22 16:16:34

  H5页面如何实现图片懒加载？

  图片懒加载，往往作为减少首页白屏时间的一个解决方案而出现。直观的来说，就是不要直接加载所有图片，而是满足一定条件后才加载，也就是”惰性加载“。实现图片懒加载的方式有很多，如果要简单点那就直接使用第三方插件：[vue-lazyload](https://www.npmjs.com/package/vue-lazyload)，如果想探究一下别人的插件是怎么实现图片懒加载的，那么可以看看本文是如何实现的。

  
• 06.22 16:08:39
  发表了文章 2022-06-22 16:08:39

  中级算法题：实现数组和树的相互转换（ts版）

  这段时间重新捡起了数据结构和算法，发现里面的树和图是真的掉头发。本文基于一个面试题，详细分析如何实现数组和树的相互转换。