花圃

# 实现图片懒加载 # 传统的不够优雅的实现方式 完整代码 const imgs = document.querySelectorAll('img');window.addEventListener('scroll', () => { imgs.forEach((img) => { if (img.getBoundingClientRect().top < window.innerHeight) { const dataSrc =...

# 理解 CDN 及其原理 # CDN 是什么 CDN (Content Delivery Network) 内容分发网络， 是一种靠互联网连接的电脑网络系统，它根据用户所在的区域，选择离用户最近的服务器来将相关文件发送给用户，以此提供更快速，更稳定的网络内容分发服务。 # CDN 由什么组成 分发服务系统 分发服务系统最基本的工作单位是 Cache 设备，cache 设备负责直接响应用户的请求，将缓存在本地的内容快速的提供给用户，并且负责与源站点进行同步，将更新的内容，本地没有的内容，缓存到本地 负载均衡系统，...

# 什么是执行上下文 简单地说，执行上下文是评估和执行 Javascript 代码的环境的一个抽象概念。任何代码在 JavaScript 中运行时，都在执行上下文中运行。 # 执行上下文的类型 全局执行上下文 默认的，基础的执行上下文，任何不在函数内部的代码都在全局执行上下文中，全局执行上下文只能有一个。 函数执行上下文 函数被调用时创建的执行上下文，程序中可以有多个函数执行上下文 Eval 函数执行上下文 Eval 函数内部的代码执行时也会有自己的执行上下文，但是我们一般不使用 Eval 函数，所以这里我们不讨论。 #...

# JS 继承的实现方式 原型链式继承 第一种是以原型链的方式来实现继承，也就是把子类的原型赋值为父类的实例对象。但是这种实现方式存在的缺点是，这个作为子类原型的父类实例对象上的属性会被所有的实例对象所共享，容易造成修改的混乱（修改了，会影响所有的子类对象）。还有就是在创建子类型的时候不能向父类构造函数传递参数。 盗用构造函数式继承 第二种方式是使用借用构造函数的方式，也就是在子类中调用父类的构造函数，通过 call 方法将 this...

# 手写 promise # 完整代码 const PENDING = Symbol('pending');const FULFILL = Symbol('resolve');const REJECT = Symbol('reject');class myPromise { constructor(executor) { /* 初始化 promise pending 状态 */ this.status = PENDING; /* 记录当前 promise 兑现值和拒因 */ this.value =...

# 浏览器中的事件循环 # 同步与异步 浏览器是单线程的，所以为了不堵塞代码的运行，我们将任务分为了同步任务，和异步任务（ setTimeout 和 setInterval 、 axios 、事件绑定等这种带回调函数的），那么同步任务和异步任务又是按照怎样的顺序进入主线程执行的呢，废话不多说，直接上图好叭 😎 先看一段代码，我们会结合这张图和代码来先简单认识一下同步和异步的执行 执行的结果很简单 start -> end -> 时间到了 整个 script 代码进入主线程，遇到同步任务 start 的打印，执行打印 遇到异步任务 setTimeout ，将...

# effect 方法剖析与实现 # 完整代码 export type EffectFn = { (): any; deps: Array<Set<EffectFn>>; options?: Options;};type Options = { scheduler?: (fn: EffectFn) => void; lazy?: boolean;};let activeEffect: EffectFn;const effectStarck:...

# 文档描述 接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。 具有缓存机制，只有当依赖的响应式数据发生改变的时候才会重新计算，否则会直接读取缓存的值 # 实现思路 computed 返回的是一个 ref ，所以我们需要一个类来进行 get value , set value 的操作 当依赖的响应式数据发生改变时会重新计算，所以需要引入 effect 函数来注册依赖副作用，并进行依赖的收集和触发操作，收集的依赖就是...

# ractive 方法剖析与实现 # 完整代码实现 import { isArray, isObject, hasChanged } from '../utils/index';import { effect, track, trigger } from './effect';export function reactive(target: any) { if (!isObject(target)) return target; if...

# 文档介绍 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。 # 实现原理 因为返回的是一个 ref 对象，所以需要一个 RefImpl 类，在类里面进行 get value 和 set value 操作 get value 里进行依赖的收集， set value 里进行依赖的触发 # 完整代码 import { hasChanged, isObject } from '../utils/index';import { track, trigger...