f18855666661的博客

原创 fly-barrage 前端弹幕库（6）：实现人像免遮挡

前端弹幕库实现人像免遮挡；

原创 fly-barrage 前端弹幕库（5）：高级弹幕的设计与实现

高级弹幕的计算是最简单的，因为每个高级弹幕和其他弹幕是无交互的，不需要处理相互重叠的问题，只需要根据当前视频的播放时间计算出高级弹幕处于的位置即可。

原创 fly-gesture-unlock 手势解锁库

最近要实现前端九宫格手势解锁功能，到 github 和 gitee 上没有找到质量比较好的库，自己对这个功能也是蛮感兴趣的，所以做了这个开源库，用于实现手势解锁功能，可以帮助大家快速完成业务逻辑，提供了完整的 DEMO，可快速上手。这篇文章向大家简单介绍下这个开源库，如果感觉项目还不错的话，还请多多 star。项目官网：https://fly-gesture-unlock.netlify.app/；在线体验：https://fly-gesture-unlock-online.netlify.app/；

原创 fly-barrage 前端弹幕库（4）：顶部、底部弹幕的设计与实现

今天和大家说说顶部、底部弹幕的设计与实现，这块的逻辑相对简单些，为了方便，这里把顶部、底部弹幕统一叫固定弹幕。

原创 fly-barrage 前端弹幕库（3）：滚动弹幕的设计与实现

今天和大家说说滚动弹幕的设计与实现，为了便于理解，我会由简到难的一步步解析说明，主要包括以下几块内容： - 实现一条滚动弹幕的计算与渲染； - 实现多条滚动弹幕的计算与渲染； - 实现多条滚动弹幕相同字号并且不允许弹幕重叠的计算与渲染； - 实现多条滚动弹幕不同字号并且不允许弹幕重叠的计算与渲染；

原创 fly-barrage 前端弹幕库（2）：弹幕内容支持混入渲染图片的设计与实现

如果弹幕内容只支持文字的话，只需要借助 canvas 绘图上下文的 fillText 方法就可以实现功能了。但如果想同时支持渲染图片和文字的话，需要以下几个步骤： 1. 设计一个面向用户的数据结构，用于描述弹幕应该渲染哪些文字和图片； 2. 框架内部对上述数据结构进行解析，解析出文字部分和图片部分； 3. 计算出各个部分相对于弹幕整体左上角的 top 偏移量和 left 偏移量； 4. 弹幕渲染时，需要计算出各个片段的左上角定位；

原创 fly-barrage 前端弹幕库（1）：项目介绍

fly-barrage 是我写的一个前端弹幕库，由于经常在 Bilibili 上看视频，所以对网页的弹幕功能一直蛮感兴趣的，所以做了这个库，可以帮助前端快速的实现弹幕功能。

原创 Vue2 中组件的本质、组件的实例化、组件实例的挂载

这篇博客的内容是讲讲在 Vue2 中，组件在底层的本质。在这里，直接抛出结论：组件的本质就是一个个的构造函数，这些函数以组件的定义 options 对象为参数，在 Vue2 中，最顶级的组件就是我们从 vue.js 中导入的 Vue 函数，而子组件是 Vue 底层通过 extend 函数创建出来的 VueComponent 函数。通过 new 这些组件的构造函数，我们可以创建出组件实例。

原创 Vue3 源码阅读（12）：组件化 —— KeepAlive

KeepAlive 组件的作用是：缓存子组件的实例以及上次渲染的真实 DOM，当 KeepAlive 的子组件是之前已经缓存的子组件时，会将缓存的真实 DOM 和组件实例拿出来进行复原，这可以防止子组件从 0 开始实例化和渲染。...

原创 Vue3 源码阅读（11）：组件化 —— 异步组件

异步组件的实现主要借助了组件的 setup 选项，当 setup 函数的返回值是一个函数时，这个返回的函数就会作为异步组件的 render 函数。

原创 Vue3 源码阅读（10）：组件化 —— 实现原理

组件是对页面中内容的一种模块化封装，这篇博客讲解 Vue 中组件化的实现方式。

原创 Vue3 源码阅读（9）：渲染器 —— diff 算法

这篇文章讲解 Vue 中常说的 diff 算法，既会讲解 Vue3 的版本，也会讲解 Vue2 的版本。

原创 Vue3 源码阅读（8）：渲染器 —— 总体思路

这篇文章主要是从一个整体的视角介绍一下渲染器的工作流程，让大家有了整体的感知。我们可以发现，渲染器的代码量是非常多的，Vue 中的许多功能也是依托于渲染器实现的，所以不可能在一片博客中对渲染器进行全面的解读。接下来，当讲解到具体的功能时，如果这个功能的实现依托于渲染器，我会着重对渲染器中对应的代码进行细致解读。...

原创 Vue3 源码阅读（7）：响应式系统 —— 响应式 API 精讲

这篇文章详细讲讲 Vue3 中的响应式 API，如下图所示：

原创 Vue3 源码阅读（6）：响应式系统 —— ref

ref API 的官方文档点击这里，官网中需要注意的点是：如果参数是一个对象的话，ref 的内部会使用 reactive 对参数进行一层转化封装，若要避免这种深层次的转换，请使用shallowRef()来替代 ref。

原创 Vue3 源码阅读（5）：响应式系统 —— Vue2 中的 watch 和 computed

ok，Vue2 中的 watch 和 computed 的实现思路就是这样了，是不是发现和 Vue3 中的实现思路也差不多。接下来，说说 Vue3 中 ref 函数是如何实现的。

原创 Vue3 源码阅读（4）：响应式系统 —— watch、computed

ok，Vue3 的 computed 和 watch 讲完了，下一篇博客，讲讲 Vue2 中的 computed 和 watch。

原创 Vue3 源码阅读（3）：响应式系统 —— 重置 effect 的依赖收集、嵌套的 effect、effect 调度执行

上一篇博客讲解了 Vue3 响应式系统的核心思想，但真正的响应式系统不可能这么简单，真实的业务场景中，会有很多更加复杂的场景，这一篇博客，我们来增强上一篇中实现的响应式系统。

原创 Vue3 源码阅读（2）：响应式系统 —— 核心思想、基本实现

依赖就是封装了 effect 函数的实例，这个实例能够被收集存储，并向外提供了能够重新执行 effect 函数的方法。}run(){this.fn()}}// _effect 就是依赖}// 副作用函数console.log("哈哈")})Vue3 和 Vue2 的响应式系统核心思想并没有变，只不过 Vue3 的源码更加的简练、解耦和易于理解，对 Vue2 响应式感兴趣的朋友可以看我的这篇博客。...

原创 Vue3 源码阅读（1）：首先看看 Vue3 源码的项目结构

Vue3 的项目截图如下所示：compiler-core // 与平台无关的编译器核心compiler-dom // 针对浏览器的编译模块compiler-sfc // 用于解析 xxx.vue 单文件compiler-ssr // 针对服务器渲染的编译模块reactivity // 响应式系统runtime-core // 与平台无关的运行时核心runtime-dom // 针对浏览器的运行时，例如包含了很多 DOM 操作以及属性事件操作等等。...

原创 Vue 首屏加载优化（dist 打包文件从 5M+ 缩减到 324kb）

最近在做 Vue 项目的首屏优化，效果不错，在这里将经验分享给大家，总的优化措施是以下四点。优化方式1：将项目中用到的图片移动到百度云文件存储 优化方式2：使用路由懒加载 优化方式3：关闭 sourceMap 文件的生成 优化方式4：将 vue、vue-router、vuex、axios、element-ui 改成 cdn 引入优化思路：将非必要打包的文件都移出去，最大化减小 dist 文件夹的体积，这样即使在服务器带宽不大的情况下，也能保证浏览器快速从服务器获取代码资源，而其他那些被移出去的文

原创 React 学习笔记（16）：扩展知识点

1，setState 更新状态的2种写法(1). setState(stateChange, [callback]) ------ 对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback]) ------ 函数式的setState 1.up

原创 React 学习笔记（15）：react 脚手架

1，脚手架的作用在前面的学习中，我们都是直接在 html 中引入 react 依赖包进行开发，这种方式很简单，上手也快，但是这种项目非常的简陋，开发效率低，很多目前前端生态中能够大幅提高开发效率的工具都没有用到。完善的项目应该有 webpack、devServer、eslint、jsx 编译 等等工具的支持，一个工程化的项目能够大幅度提高开发效率和开发体验。但是，如果让我们自己手动搭建一个完善的项目，成本会非常高，需要学习很多前置知识，而且搭建出来的项目还可能有很多问题。因此，React 官

原创 React 学习笔记（14）：组件的生命周期

1，生命周期函数的理解组件从创建到死亡会经历一些特定的阶段。 React 组件中包含一系列的钩子函数（生命周期回调函数），会在特定的时刻调用。 我们在定义组件时，会在特定的生命周期函数中做对应的工作。2，React 旧版生命周期函数2-1，旧版生命周期函数图2-2，旧版生命周期函数单独讲解componentWillMount：在组件挂载前触发执行。 componentDidMount：在组件完成组件挂载后触发执行。 componentWillReceiveProps：父

原创 Vue 脚手架项目，npm install 失败，npm ERR gyp ERR

今天使用 npm install 安装项目的依赖包，一直提示 npm ERR! gyp ERR! node-gyp -v v3.8.0 错误，研究了下 gyp 是什么也一直解决不了问题。后来翻到控制台最先报错的地方，发现是 node-sass 引发的错误，最后发现是 node-sass、sass-loader 安装的版本和当前电脑的 node 版本不兼容的原因（因为是在一个新电脑上安装项目依赖），修改了 node-sass 和 sass-loader 的版本之后，npm install 安装完成。我

原创 React 学习笔记（13）：高阶函数、函数柯里化

1，基础概念高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。若 A 函数，接受的参数是一个函数，那么 A 就可以称之为高阶函数。 若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称之为高阶函数。函数柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。2，使用高阶函数和函数柯里化优化上一节的例子上一小节代码的缺点：每一个输入 DOM 都需要绑定一个回调函数，导致需要写多个回调函数，非常的麻烦和多余。重写的代码如下：

原创 React 学习笔记（12）：非受控组件和受控组件

原创 React 学习笔记（11）：事件处理

这一篇文章说说 React 中的事件应该注意的点。1，通过 onXxx 指定回调函数绑定事件的写法如下所示：class Demo extends React.Component{ showData = (event) => {} render(){ return( <div> <button onClick={this.showData}>点我提示左侧的数据</button> </div> ) }}

原创 React 学习笔记（10）：ref

在业务代码中，我们有可能需要获取真实 DOM 节点或者某个组件的实例，react 中提供的 ref 可以做到这两件事。ref 的写法有三种，分别是 字符串形式、回调函数形式 以及 createRef 形式。1，字符串形式写法如下所示：<script type="text/babel"> //创建组件 class Demo extends React.Component{ //展示左侧输入框的数据 showData = ()=>{ const {inp

原创 React 学习笔记（9）：props

props 用于父组件向子组件传递数据。1，props 基本使用<script type="text/babel"> //创建组件 class Person extends React.Component{ render(){ console.log(this); const {name,age,sex} = this.props return ( <ul> <li>姓名：{name}</li>

原创 React 学习笔记（8）：state（状态）

1，state（状态）的作用

原创 React 学习笔记（7）：函数式组件和类式组件

React 中组件的定义方式有两种，分别是函数式和类式，首先看看函数式组件的写法。函数式组件<script type="text/babel"> //1.创建函数式组件 function MyComponent(){ console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2> } //2.渲染组件到页面 Rea

原创 React 学习笔记（6）：类的相关知识

es6 class

原创 React 学习笔记（5）：jsx 语法规则与练习

jsx 语法规则：<script type="text/babel" > const myId = 'aTgUiGu' const myData = 'HeLlo,rEaCt' //1.创建虚拟DOM const VDOM = ( <div> <h2 className="title" id={myId.toLowerCase()}> <span style={{color:'white',fontSize:'29px'}}>

原创 React 学习笔记（4）：虚拟 DOM 和真实 DOM 的比较

例子代码：<script type="text/babel" > /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */ <h1 id="title"> <span>Hello,React</span> </h1> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById

原创 React 学习笔记（3）：虚拟 DOM 的两种创建方式

方式一：使用 jsx 创建。<script type="text/babel" > /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */ <h1 id="title"> <span>Hello,React</span> </h1> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getEl

原创 React 学习笔记（2）：hello react 小案例

案例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello_react</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> &lt

原创 React 学习笔记（1）：React 简介

该系列文章是看 B 站尚硅谷天禹老师React 教学视频时的学习笔记，视频链接点击这里。1，React 是什么？是一个用于构建用户界面的 JavaScript 库。2，为什么要学？原生 JavaScript操作 DOM 繁琐、效率低（DOM-API 操作 UI）。 原生 JavaScript 没有组件化编码方案，代码复用率低。3，React 的特点采用组件化模式、声明式编码，提高开发效率及代码复用率。 在 React Native 中可以使用 React 语法进行移...

原创 Vuex源码阅读（5）：Vuex 中的发布脚本

如果我们自己写一个库，当想要发布时，要进行一系列的操作，例如：更改 package.json 中的 version、执行测试命令、执行构建命令、新增 CHANGELOG.md 文件中的内容、将库推送到 GitHub 以及将库上传到 npm 仓库。这一系列的操作很繁琐，人为的进行的话，很容易出错，所以Vuex 使用 js 脚本进行库的发布，接下来我们看看 Vuex 中的发布脚本。1，package.json首先看 package.json 文件中与发布有关的脚本：{ "scripts": .

原创 Vuex源码阅读（4）：Vuex 中的代码构建

阅读某个库的源码，除了阅读功能性的代码之外，还应该多多注意工程化部分的代码，例如：Vuex 中的构建脚本和发布脚本，都很有意思，很值得我们借鉴和学习。今天，让我们一起看看 Vuex 的源码是如何构建的。Vuex 的代码构建使用了 Rollup ，如果对其不怎么了解的话，可以先看看它的官方文档。1，package.json首先我们应该看 Vuex 项目的 package.json 文件，里面与构建有关的部分如下所示：{ "scripts": { "build": "npm run