前端小枫_社区达人页

2023年04月

• 04.27 11:31:11
  发表了文章 2023-04-27 11:31:11

  Vue3 响应式原理之 ref

  实现 isProxy 非常简单，就我们之前实现的 isReactive 和 isReadonly，只要满足其中之一即为已经代理的对象
• 04.27 11:29:44
  发表了文章 2023-04-27 11:29:44

  如何根据 IP 获取位置？

  现在很多带有社交性质的应用都陆续的添加了显示地区的功能。为什么要公布属地呢？ 其实主要目的还是为了净化网络空间，减少网暴的或者谣言的出现。 那么如何判断用户的地址呢？ 答：IP。
• 04.27 11:27:42
  发表了文章 2023-04-27 11:27:42

  Vue3 响应式原理之 readonly

  readonly和 reactive 类似，只不过，readonly不需要进行依赖收集，并且不可被 set，我们只需要在 set 时报错即可
• 04.27 11:26:16
  发表了文章 2023-04-27 11:26:16

  Vue3 响应式原理之scheduler、stop

  这里引用一下 Vue 官方的经典测试用例来测试 scheduler 功能

  
• 04.27 11:23:44
  发表了文章 2023-04-27 11:23:44

  Vue3 响应式原理之 effect

  了解过 Vue2 原理的再看 Vue3 的依赖收集原理很容易理解，同样的 get 时收集依赖，set 时出发依赖，区别在于将之前的 Object.defineProperty 替换为了 Proxy，Proxy 的功能比之前强大数倍
• 04.27 11:21:27
  发表了文章 2023-04-27 11:21:27

  Dva 初体验

  dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。
• 04.27 11:18:48
  发表了文章 2023-04-27 11:18:48

  webpack 笔记

  1.1 webpack 五个核心概念 1.1.1 Entry 入口，指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
• 04.27 11:17:08
  发表了文章 2023-04-27 11:17:08

  大菠萝 Pinia 赶紧用起来

  上次使用 Vuex4.0 的时候带来的体验不能说很差吧，可以说是非常不好，类型支持需要自定义等等问题让我将目光转向了社区中的新兴势力——Pinia
• 04.27 11:12:45
  发表了文章 2023-04-27 11:12:45

  VSCode 中使用 vim 操作

  为什么要使用 Vim 呢？因为真的很高效啊！！！我已经在代码编辑器和浏览器中都安装了类 Vim 插件来提搞我的操作效率。当熟练使用 Vim 命令之后，真的可以扔掉鼠标了。
• 04.27 11:06:56
  发表了文章 2023-04-27 11:06:56

  Symbol 扫盲

  大部分人可能都知道 symbol 是ES6 新加入的一种基本数据类型，通过 Symbol() 创建，每个 symbol 的值都不相等。
• 04.27 11:05:18
  发表了文章 2023-04-27 11:05:18

  动手实现一个 axios

  Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
• 04.27 11:02:58
  发表了文章 2023-04-27 11:02:58

  为你的 zsh 穿点衣服

  zsh-autosuggestions是一款自动提示命令的插件，插件会从之前的历史命令中选取匹配度最高的一条命令置于待选区
• 04.27 10:57:19
  发表了文章 2023-04-27 10:57:19

  使用 pug 模板语法提高页面开发的效率

  pug由jade改名而来，通过缩进（表示标签间的嵌套关系）的方式来编写代码的过程，在编译的过程中，不需要考虑标签是否闭合的问题。可以加快写代码速度，也为代码复用提供了便捷。
• 04.27 10:55:52
  发表了文章 2023-04-27 10:55:52

  CSS Grid 布局从 0 到 1

  现在很多的 UI 组件库都提供了栅格系统，在响应式方面非常的方面，今天我们来谈的是 CSS 原生的栅格系统。
• 04.27 10:47:20
  发表了文章 2023-04-27 10:47:20

  在浏览器中使用 FFmpeg

  FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。随着浏览器能力的不断发展，我们可以通过 WebAssembly 在浏览器运行各种语言的程序，这其中就包括了使用 c++ 写的 FFmpeg。

  
• 04.27 10:44:32
  发表了文章 2023-04-27 10:44:32

  在 MidwayJS 中使用 TypeORM的进行数据持久化操作

  Midway是面向未来的一款支持Serverless的Node框架，其内置的web框架也是非常的好用，还有一些其他的特性，前后端一体等等。
• 04.27 10:42:47
  发表了文章 2023-04-27 10:42:47

  神奇的 Canvas

  canvas是为了解决页面只能显示静态图片而出现的一种可以使用JavaScript绘制的HTML标签，它可以接受两个参数width和height（原来有三个，还有一个moz-opaque控制透明度，已经废弃了）
• 04.27 10:34:01
  发表了文章 2023-04-27 10:34:01

  你的 TypeScript 还只是用来声明 string、number……的吗？

  使用|操作符将变量可能出现的数值类型连接起来，就是联合类型
• 04.27 10:28:11
  发表了文章 2023-04-27 10:28:11

  WebRTC 实战：实现 P2P 实时视频互动

  只有虽然说WebRTC支持P2P，但是需要有一台信令服务器来交换双方的SDP，现在我们就来用Node实现一个信令服务器。
• 04.27 10:26:47
  发表了文章 2023-04-27 10:26:47

  WebRTC 常用的 API

  推荐使用WebRTC兼容库: adapter.js，用来抹平各个浏览器之间的差异
• 04.27 10:22:44
  发表了文章 2023-04-27 10:22:44

  WebRTC 的连接过程

  经过前面几部分的铺垫，你应该对P2P音视频互动的过程有了一个大概的了解，有可能你会觉得过程比较繁琐，甚至涉及到了网络底层。但是，不要担心，WebRTC已经帮我们做了很多的事情，让我们在音视频开发时变得轻而易举。那么WebRTC到底是什么呢？
• 04.27 10:20:50
  发表了文章 2023-04-27 10:20:50

  WebRTC 之 NAT 穿透

  网络地址转换协议。由于IPv4地址过于稀缺，不足以分配给每一台设备一个IP，本就不多的IP地址被列强占据大部分，再扣去保留地址，剩下的寥寥无几。不过好在有NAT，可以支撑我们能在因特网中冲浪
• 04.27 10:17:14
  发表了文章 2023-04-27 10:17:14

  音视频相关基础

  视频的播放原理：多张图片在短时间内播放，人眼就会认为是一段连贯的动作，以前的胶片电影，还有小时候玩过的快速翻页就能看动画的小书……
• 04.27 10:15:48
  发表了文章 2023-04-27 10:15:48

  WebAudio API 入门

  之前也有做过前端音频相关的操作，之前的做法是创建一个 audio 标签，需要播放提示音时调用 audio 实例的 play 方法，从而实现提示音的效果。
• 04.26 23:49:06
  发表了文章 2023-04-26 23:49:06

  你还在用静态的 Mock 数据吗

  作为前端开发者，在前后端分离的时代下，不能一天到晚追着后端的同学要接口调试，我们可以自己来 Mock 现在的打包工具或者框架基本都支持或者通过第三方插件支持了 Mock 数据的能力。对于写死的静态数据而言，我们可以使用 MockJS 来生成动态的数据，这至少这样看起来更逼真，而且更方便，可以通过 Mock 的表达式来生成指定格式及数量的 JSON 数据。
• 04.26 23:42:24
  发表了文章 2023-04-26 23:42:24

  前端请求调试工具推荐

  首先从官网下载并安装Proxyman 打开软件，你可以看到主界面上会有很多个请求依次弹出
• 04.26 23:34:37
  发表了文章 2023-04-26 23:34:37

  接入 Sentry 实现前端的异常上报

  前端监控现在已经是老生常谈的一个话题了，我之前的一次面试中就被问到了有没有做过前端监控，我回答没做过。。。然后就没有然后了。
• 04.26 23:28:43
  发表了文章 2023-04-26 23:28:43

  微前端框架 qainkun 初体验

  qiankun是蚂蚁开源的基于single-spa的一款微前端框架，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
• 04.26 23:25:50
  发表了文章 2023-04-26 23:25:50

  JavaScript 正则表达式

  创建正则的两种方式： 创建字面量正则表达式，使用//包裹 let reg = /\w/ 复制代码 创建正则表达式对象，使用new RegExp() let reg = new RegExp(/\w/)
• 04.26 23:20:43
  发表了文章 2023-04-26 23:20:43

  手写一个 Vuex 和 Vue-Router

  在 Vue3.0 全面开放的大背景下，Vue 的周边生态迅速跟进，其中与 Vue 具有“血缘关系”的两个组件Vuex 和 Vue-Router 也相对应 Vue3.0 推出了全新的版本。
• 04.26 23:16:15
  发表了文章 2023-04-26 23:16:15

  装饰器语法

  利用typeof判定类型的取值范围是：'undefined' /'boolean' /'string' /'number' /'object' /'function' /'symbol' 在JavaScript内部使用typeof判断类型依据的是二进制，根据变量的机器码低位1-3位存储其类型信息，有如下规则：
• 04.26 23:11:00
  发表了文章 2023-04-26 23:11:00

  装饰器语法

  @decorator 装饰器是 es7 更新的提案，是一种与类相关的语法，用来注释或修改类和类的方法，是在装饰器模式的基础上产生的。装饰器是过去几年中js最大的成就之一，已是ES7的标准特性之一。
• 04.26 23:07:52
  发表了文章 2023-04-26 23:07:52

  Redux 原理探索

  Redux 是一个非常不错的状态管理库，和 Vuex 不同的是 Redux 并不和 React 强绑定，你甚至可以在 Vue 中使用 Redux。当初的目标是创建一个状态管理库，来提供最简化 API。
• 04.26 23:04:19
  发表了文章 2023-04-26 23:04:19

  docker 从 0 到 1

  容器技术对进程进行封装隔离，属于操作系统层面的虚拟化技术。由于隔离的进程独立于宿主和其它的隔离的进程，因此称为容器。Docker 在容器的基础上，进行了进一步的封装，从文件系统、网络互联到进程隔离等等，极大的简化了容器的创建和维护。使得 Docker 技术比虚拟机技术更为轻便、快捷。
• 04.26 22:56:48
  发表了文章 2023-04-26 22:56:48

  Fetch 和 Cache

  fetch 是浏览器提供的一个用于发起网络请求的 API，是 XMLHttpRequest 的替代方案，fetch 本身自带 Promise 属性，支持现代化的异步方案。
• 04.26 22:54:28
  发表了文章 2023-04-26 22:54:28

  Redux 原理探秘

  Redux 是一个非常不错的状态管理库，和 Vuex 不同的是 Redux 并不和 React 强绑定，你甚至可以在 Vue 中使用 Redux。当初的目标是创建一个状态管理库，来提供最简化 API。
• 04.26 22:50:53
  发表了文章 2023-04-26 22:50:53

  使用 ServiceWorker 缓存 WebApp

  ServiceWorker 也是一种 worker，他的功能偏向代理或者缓存，应该算是功能最强大的一类 worker 了，PWA的实现就离不开ServiceWorker。
• 04.26 22:45:24
  发表了文章 2023-04-26 22:45:24

  IndexedDB——在浏览器中使用数据库

  IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。
• 04.26 22:39:16
  发表了文章 2023-04-26 22:39:16

  使用 SharedWorker 进行跨标签通信

  sharedWorker 也是一种 worker，sharedWorker 的创建和 webWorker 的创建一样，使用 new 关键字来进行初始化（不能通过代码片段创建），不同的是可以在浏览器不同标签下（同源，后面的跨页面等均是在同源的前提下）使用同一个js url 创建sharedWorker 会复用同一个实例。
• 04.26 22:36:33
  发表了文章 2023-04-26 22:36:33

  WebWorker——JavaScript也可以“多线程”

  虽然JavaScript是单线程的，但是浏览器是多线程的啊，我们可以借助浏览器再跑一个JavaScript线程来帮助主JavaScript线程减轻压力，JavaScript之所以是单线程的原因是要保持数据的一致性，防止多个线程修改数据导致数据不一致，所以虽然可以使用worker，但也要遵循一些规范

  
• 04.26 22:34:00
  发表了文章 2023-04-26 22:34:00

  终端中常用的高效率管道工具

  终端作为日常开发比较常用的的工具，其方便程度被广大程序员所认可，但其实在使用命令行时，可以使用管道操作来对输出结果进行处理。
• 04.26 22:27:13
  发表了文章 2023-04-26 22:27:13

  JavaScript 中的生成器函数

  调用一个生成器函数并不会马上执行它里面的语句，而是返回一个这个生成器的 迭代器对象。在生成器函数内部可以通过yield关键字来中断代码的执行，迭代器每次执行都会执行到下一次 yield 或者 return。
• 04.26 22:24:39
  发表了文章 2023-04-26 22:24:39

  探秘 Proxy 和 Reflect

  Proxy 是一个构造函数，接收两个参数：原对象和捕捉器。Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
• 04.26 22:20:03
  发表了文章 2023-04-26 22:20:03

  NodeJS 多线程发展史

  在开始了解多线程之前先来了解一下程序任务按照性能的分类，从性能方面来看，计算机程序主要分为两个维度，CPU密集型（也叫计算密集型）和UO密集型。
• 04.26 22:14:16
  发表了文章 2023-04-26 22:14:16

  Intersection Observer 详解

  在一些场景下，尤其是在移动端，我们需要判断元素是否进入用户视口（viewport），来进行以下处理，例如无限滚动，当底部元素进入视口之后加载下一页内容。
• 04.26 22:09:41
  发表了文章 2023-04-26 22:09:41

  Mutation Observer API 详解

  Mutation Observer 提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。
• 04.26 22:06:02
  发表了文章 2023-04-26 22:06:02

  纯前端实现视频混流

  随着前端音视频技术的不断成熟越来越多的直播平台开始提供网页开播的直播方式，不需要再使用 OBS 或者各家的直播伴侣。
• 04.26 22:01:56
  发表了文章 2023-04-26 22:01:56

  MySQL 无法远程连接的解决办法

  情况 1——云服务器控制台防火墙未开启 情况 2——未设置远程用户
• 04.26 21:58:39
  发表了文章 2023-04-26 21:58:39

  xgplayer + SRS 实现直播方案

  直播作为近几年比较火的方向，吸引了像我这样的小白不断在音视频的边缘不断试探。“宇宙的尽头是直播”，不论是娱乐直播还是直播带货，都已经成为现在人们生活中不可获取的一部分。 今天我们就来实现一个直播的 demo，我们来看一下整个直播的过程