当数组中存在空位时，遍历数组需要选择合适的方法，不同的方法可能返回不同的结果。 示例数组： constarr=[1,2,,3,4]; 数组空位不会影响数组长度，arr的长度是5。 for循环 最朴素的for循环会遍历到数组的每一位，对于空位，访问时返回undefined。 for(leti=0;i<arr.length;i){ console.log(arr[i]); } 输出： 1 2 undefined 4 5 forEach方法 forEach方法会跳过空位，所以这里只遍历到了4个数。 arr.forEach(el=>{ console.log(el); }); 输出...

XSS(Cross-SiteScripting，跨站脚本攻击)是一种代码注入攻击。攻击者通过在目标网站注入恶意脚本，使其在用户浏览器中执行，从而窃取用户敏感信息如Cookie和SessionID。 CSS在前端已经被用了，为了避免歧义用了XSS作为缩写。 XSS的本质是恶意代码与网站正常代码混在一起，浏览器无法分辨它们的可信度，最终导致恶意代码被执行。 XSS的危害 浏览器无法区分恶意代码和正常代码，它们拥有相同的权限。恶意代码可以读取用户的敏感数据，比如cookie和sessionID等等。 可能的危害如下： 由于恶意代码可以获取cookie和sessionID等数据，它可以获取用户的...

PageVisibilityAPI 在做考试系统或者网课系统的时候，通常需要监测用户是否隐藏了当前标签页在看其它页面。 PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性，可以用它来判断用户是否切屏。 visibilitychange 这个事件会在页面可见性变化时触发。（隐藏时、打开时） //使用addEventLisitener document.addEventListener('visibilitychange',(e)=>{ console.log('visibilityState:',document.visibilityState); }); //或...

JavaScript中数组元素的数据类型是不固定的，number类型可以是整数也可以是浮点数。这种性质与其它常见语言中的定型数组很不一样，导致不同语言编写的程序在交换数据的时候，需要花费很多时间在数据转换上。 ECMAScript后来引入了定型数组TypedArray。TypedArray并不是一个实际存在的数据类型，而是一系列定型数组类型的统称，它包含了Int8Array、Uint8Array、Int16Array、Uint16Array、Float32Array等等。 这些定型数组只是一种“视图”，通过一种指定的方式解读内存中的二进制数据。 ArrayBuffer 在JavaScript中...

从语法上看，CompositionAPI提供了一个setup启动函数作为逻辑组织的入口，提供了响应式API，提供了生命周期函数以及依赖注入的接口，通过调用函数来声明一个组件。 OptionsAPI 选项式API在props、data、methods、computed等选项中定义变量； 在组件初始化阶段，Vue.js内部处理这些options，把定义的变量添加到组件实例上； 等模板编译成render函数的时候，内部通过with(this){}的语法去访问在组件实例中的变量。 在Vue3中，这两种API能够同时使用，但执行的优先级不同，建议只使用其中一种。 OptionsAPI适合小型简单的...

在Vue3中，组件的更新通过patch函数进行处理。 patch函数 源码位置：core/packages/runtime-core/src/renderer.tsatmain·vuejs/core(github.com) constpatch:PatchFn=( n1, n2, container, anchor=null, parentComponent=null, parentSuspense=null, namespace=undefined, slotScopeIds=null, optimized=__DEV__&&isHmrUpdating?false:!!n...

简介 发布订阅模式是一种常用的用于解耦的模式。 它和观察者模式的区别在于： 观察者模式：被观察者需要维护一个观察者的集合； 发布订阅模式：通信双方互相不知道对方的存在，通过第三方事件总线进行通信。 发布订阅模式在前端领域很常见，例如： Vue框架中组件的$on和$emit方法； Node.js中EventEmitter中的on和emit方法。 图示： 订阅者通过on方法注册事件： 发布者通过emit触发回调列表：发布者和订阅者双方不知道各自的存在，它们仅通过EventBus进行通信。 实现 事件总线最基本的两个方法是on和emit。 常见的设计还有两个方法是off和once，off...

内存管理简介 内存管理是控制和协调软件应用程序访问计算机内存的方式的过程。 当一个程序运行在某个操作系统上时，进程需要拥有对RAM的访问权限，以实现： 载入程序需要执行的字节码； 存储正在执行的程序所使用的数据值和数据结构； 载入程序执行所需的任何运行时系统。 一个进程在启动时，会向操作系统申请内存空间。一个进程的内存空间被分为多个区域，其中最主要的两个区分别是栈区和堆区。 栈区 栈区的内存分配符合栈先进后出这一特性，并且栈区的大小通常是固定的。 与堆区不同，栈区的变量查询比较简单，且通常只在栈顶进行数据的存储和读取，只需要维护一个栈指针即可，读写操作非常快； 存储在栈中的数据必须在编译...

JavaScript应用程序通常依赖于许多外部库，这些依赖项通常通过包管理器来管理。默认情况下，Node.js使用NPM作为包管理器。 由于早期的NPM存在各种不足，社区后来开发了Yarn和pnpm作为替代品。 如果要使用Yarn和pnpm，则需要先通过NPM进行安装。 早期NPM的不足 依赖树过深在NPM3.0之前，NPM使用了嵌套依赖树的结构。这意味着如果一个项目的多个依赖项需要同一个包的不同版本，NPM会在每个依赖项的目录中重复安装该包。这种结构会导致node_modules目录非常深，特别是在Windows系统中，这可能导致路径长度限制的问题。 重复安装和磁盘空间浪费每次安装包时都...

组件初次渲染流程 组件是对DOM树的抽象，组件的外观由template定义，模板在编译阶段会被转化为一个渲染函数，用于在运行时生成vnode。即组件在运行时的渲染步骤是： graphLRA[创建vnode]-->B[渲染vnode]-->C[生成DOM] vnode是一个用于描述视图的结构和属性的JavaScript对象。vnode是对真实DOM的一层抽象。 使用vnode的优点： 相比于直接操作DOM，在需要频繁更新视图的场景下，可以将多次操作应用在vnode上，再一次性地生成真实DOM，可以避免频繁重排重绘导致的性能问题； vnode是抽象的视图层，具有平台无关性，上层...

不足与展望 Vue2的不足 源码自身的可维护性较差； 数据量大后带来渲染和更新的性能问题； 存在一些为了兼容但是和鸡肋的API。 对Vue3的期望 更好的编程体验； 更好的TypeScript支持； 更好的逻辑复用实践。 从源码、性能、语法API三大方面优化框架。 Vue3的优化 源码优化 源码优化的目的是让代码更易于开发和维护。 主要体现在使用monorepo管理源码仓库，以及使用TypeScript进行开发。 monorepo monorepo将模块拆分到不同的package中，每个package拥有各自的API、类型定义和测试。 这样使得模块拆分更细化，职责划分更明确，模块之间的...

Vue3在编译template的过程中会分析模板中的动态部分和静态部分，并标记相应的flag，用于在运行时优化虚拟DOM的更新。 Parse：将模板字符串解析成AST； Transform：对AST进行转换和优化，包括识别动态节点和静态节点； CodeGeneration：将转换后的AST生成渲染函数，这个阶段会生成patchFlags。 在diff过程中，遇到包含dynamicChildren的块时，diff算法会进入优化模式，跳过对静态节点的处理从而优化了diff的执行效率。 flag的种类 源码位置：core/packages/shared/src/patchFlags.tsatma...

Vue3除了内置的v-on、v-bind等指令，还可以自定义指令。 注册自定义指令 全局注册 constapp=createApp({}) //使v-focus在所有组件中都可用 app.directive('focus',{ /.../ }) 局部选项式注册 在没有使用<scriptsetup>的情况下，使用选项式语法，在direactives中注册事件。 exportdefault{ setup(){ /.../ }, directives:{ //在模板中启用v-focus focus:{ /.../ } } } 隐式注册 在<scriptsetup>内，...

源码位置：https://github.com/vuejs/core/blob/main/packages/reactivity/src/collectionHandlers.ts 这个文件主要用于处理Set、Map、WeakSet、WeakMap类型的拦截。 拦截是为了什么？为什么要处理这些方法？ Vue3实现响应式的思路是使用ProxyAPI在getter中收集依赖，在setter触发更新。 而Set、Map等这些内置集合类型比较特殊，举个例子，我们在使用Map的实例对象的时候，我们一般不会在实例对象上面去添加属性或者修改自定义属性的值，而是通过其原型上的get/set方法来操作键值对...

Babel是什么 Babel是一个通用的多功能的JavaScript编译器。主要用于将采用ECMAScript2015+语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 常见的用途有： 语法转换 通过Polyfill方式在目标环境中添加缺失的功能（通过引入第三方polyfill模块，例如core-js） 源码转换（codemods） 例如我们在React经常使用JSX语法，由于这不是JS原生语法，所以不能直接被JS引擎编译执行。在代码被执行之前，需要使用编译器进行转译，转换成JS代码。 Babel的工作原理 从代码到代码的过程，也是...

源码位置：https://github.com/vuejs/core/blob/main/packages/reactivity/src/baseHandlers.ts baseHandler用于处理对象、数组类型的getter和setter。 这个文件中主要有两个函数，和三个类。 arrayInstrucmentations和hasOwnProperty这两个函数主要起到辅助作用； 3个类： BaseReactiveHandler：负责处理getter； MutableReactiveHandler和ReadonlyReactiveHandler：负责处理setter； grap...

这篇文章使用JavaScript语言进行相关代码的编写。 数据结构——堆heap 基本概念与性质 堆是一颗完全二叉树，根据父子节点之间值的大小关系可以分为： 大根堆：每一个节点的值大于或等于其子节点的值； 小根堆：每一个节点的值小于或等于其子节点的值； 堆数据结构的底层通常使用顺序表进行存储。 通过索引的计算可以快速得到子节点、父节点的值： 以0作为根节点的索引：（下文使用这种标准） Parent(i)=(i-1)/2; LeftChild(i)=i2+1; RightChild(i)=i2+2; 以1作为根节点的索引： Parent(i)=i/2; LeftChild(i)=i2...

Promise是JS中用于处理异步操作的方法，支持链式调用从而解决了地狱回调问题。 Promise的基础用法 状态 promise有三种状态： Pending（待定）：初始状态，既不是成功也不是失败。 Fulfilled（已成功）：操作成功完成。 Rejected（已失败）：操作失败。 constpromise=newPromise((resolve,reject)=>{ //异步操作 if(成功){ resolve(value); }else{ reject(error); } }); 实例方法 Promise有三个实例方法，分别是then，catch，和finally。 t...

NodeJS的基本组成 NodeJS是JavaScript运行时，主要由V8引擎和libuv组成，其中V8使用javascript和c编写，而libuv是纯c编写的，二者都是开源的。 V8引擎用于将javascript代码转换为计算机可以执行的机器码； 而libuv则负责完成异步IO、与操作系统交互（文件系统和网络模块）、事件循环、线程池等等。 Node还有其它模块： http-parser：用于解析http； c-ares：用于处理DNS请求； OpenSSL：用于加密和安全编程； zlib：与压缩有关。 总而言之，NodeJS相当于Javascript和操作系统之间的一个抽象层，为开...

在现代应用开发中，数据处理的效率和资源管理尤为重要。NodeJS作为一种高效的JavaScript运行时环境，通过其强大的流（Stream）功能，提供了处理大规模数据的便捷方式。流式数据处理不仅能够优化内存使用，还可以提高数据处理的实时性和效率。下文将介绍NodeJS中的流概念、流的类型以及如何利用流来进行数据传输和处理。 流的基本概念 流式数据的特点是将数据分成一个一个的chunk，每次操作只针对其中的一小部分。 因此流式数据的读写操作不需要将整个数据保存在内存中（处理完就丢掉）。 常用于视频这种包含大量数据的应用场景，也可以在时间和空间角度上更有效地处理数据： 时间：从开始读到流就可以处...