前端日记

面试官：如何判断一个元素是否在可视区域中？ 一、用途可视区域即我们浏览网页的设备肉眼可见的区域，如下图 在日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如 100 px），从而实现一些常用的功能，例如： 图片的懒加载 列表的无限滚动 计算广告元素的曝光情况 可点击链接的预加载 二、实现方式判断一个元素是否在可视区域，我们常用的有三种办法： offsetTop、scrollTop getBoundingClientRect Intersection Observer offsetTop、scrollTopoffsetTop，元素的上外边框至包含元素的上内边框之间的像素距离，其他offset属性如下图所示： 下面再来了解下clientWidth、clientHeight： clientWidth：元素内容区宽度加上左右内边距宽度，即clientWidth = content + padding clientHeight：元素内容区高度加上上下内边距高度，即clientHeight = content + padding 这里可 ...

面试官：说说对 Node 中的 Buffer 的理解？应用场景？ 一、是什么在Node应用中，需要处理网络协议、操作数据库、处理图片、接收上传文件等，在网络流和文件的操作中，要处理大量二进制数据，而Buffer就是在内存中开辟一片区域（初次初始化为8KB），用来存放二进制数据 在上述操作中都会存在数据流动，每个数据流动的过程中，都会有一个最小或最大数据量 如果数据到达的速度比进程消耗的速度快，那么少数早到达的数据会处于等待区等候被处理。反之，如果数据到达的速度比进程消耗的数据慢，那么早先到达的数据需要等待一定量的数据到达之后才能被处理 这里的等待区就指的缓冲区（Buffer），它是计算机中的一个小物理单位，通常位于计算机的 RAM 中 简单来讲，Nodejs不能控制数据传输的速度和到达时间，只能决定何时发送数据，如果还没到发送时间，则将数据放在Buffer中，即在RAM中，直至将它们发送完毕 上面讲到了Buffer是用来存储二进制数据，其的形式可以理解成一个数组，数组中的每一项，都可以保存8位二进制：00000000，也就是一个字节 例如： 1const buffer = Buffe ...

面试官：说说Node中的EventEmitter? 如何实现一个EventEmitter? 一、是什么我们了解到，Node 采用了事件驱动机制，而EventEmitter 就是Node实现事件驱动的基础 在EventEmitter的基础上，Node 几乎所有的模块都继承了这个类，这些模块拥有了自己的事件，可以绑定／触发监听器，实现了异步操作 Node.js 里面的许多对象都会分发事件，比如 fs.readStream 对象会在文件被打开的时候触发一个事件 这些产生事件的对象都是 events.EventEmitter 的实例，这些对象有一个 eventEmitter.on() 函数，用于将一个或多个函数绑定到命名事件上 二、使用方法Node 的events模块只提供了一个EventEmitter类，这个类实现了Node异步事件驱动架构的基本模式——观察者模式 在这种模式中，被观察者(主体)维护着一组其他对象派来(注册)的观察者，有新的对象对主体感兴趣就注册观察者，不感兴趣就取消订阅，主体有更新的话就依次通知观察者们 基本代码如下所示： 1234567891011const Event ...

面试官：说说对 Node 中的 Stream 的理解？应用场景？ 一、是什么流（Stream），是一个数据传输手段，是端到端信息交换的一种方式，而且是有顺序的,是逐块读取数据、处理内容，用于顺序读取输入或写入输出 Node.js中很多对象都实现了流，总之它是会冒数据（以 Buffer 为单位） 它的独特之处在于，它不像传统的程序那样一次将一个文件读入内存，而是逐块读取数据、处理其内容，而不是将其全部保存在内存中 流可以分成三部分：source、dest、pipe 在source和dest之间有一个连接的管道pipe,它的基本语法是source.pipe(dest)，source和dest就是通过pipe连接，让数据从source流向了dest，如下图所示： 二、种类在NodeJS，几乎所有的地方都使用到了流的概念，分成四个种类： 可写流：可写入数据的流。例如 fs.createWriteStream() 可以使用流将数据写入文件 可读流： 可读取数据的流。例如fs.createReadStream() 可以从文件读取内容 双工流： 既可读又可写的流。例如 net.Sock ...

面试官：说说对Nodejs中的事件循环机制理解? 一、是什么在浏览器事件循环中，我们了解到javascript在浏览器中的事件循环机制，其是根据HTML5定义的规范来实现 而在NodeJS中，事件循环是基于libuv实现，libuv是一个多平台的专注于异步IO的库，如下图最右侧所示： 上图EVENT_QUEUE 给人看起来只有一个队列，但EventLoop存在6个阶段，每个阶段都有对应的一个先进先出的回调队列 二、流程上节讲到事件循环分成了六个阶段，对应如下： timers阶段：这个阶段执行timer（setTimeout、setInterval）的回调 定时器检测阶段(timers)：本阶段执行 timer 的回调，即 setTimeout、setInterval 里面的回调函数 I/O事件回调阶段(I/O callbacks)：执行延迟到下一个循环迭代的 I/O 回调，即上一轮循环中未被执行的一些I/O回调 闲置阶段(idle, prepare)：仅系统内部使用 轮询阶段(poll)：检索新的 I/O 事件;执行与 I& ...

面试官：如何实现文件上传？说说你的思路 一、是什么文件上传在日常开发中应用很广泛，我们发微博、发微信朋友圈都会用到了图片上传功能 因为浏览器限制，浏览器不能直接操作文件系统的，需要通过浏览器所暴露出来的统一接口，由用户主动授权发起来访问文件动作，然后读取文件内容进指定内存里，最后执行提交请求操作，将内存里的文件内容数据上传到服务端，服务端解析前端传来的数据信息后存入文件里 对于文件上传，我们需要设置请求头为content-type:multipart/form-data multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件 结构如下： 1234567891011121314151617181920212223242526POST /t2/upload.do HTTP/1.1User-Agent: SOHUWapRebotAccept-Language: zh-cn,zh;q=0.5Accept-Charset: GBK,utf-8;q=0.7,*;q=0.7Connection: keep-a ...

面试官：说说对 Node 中的 fs模块的理解? 有哪些常用方法 一、是什么fs（filesystem），该模块提供本地文件的读写能力，基本上是POSIX文件操作命令的简单包装 可以说，所有与文件的操作都是通过fs核心模块实现 导入模块如下： 1const fs = require('fs'); 这个模块对所有文件系统操作提供异步（不具有sync 后缀）和同步（具有 sync 后缀）两种操作方式，而供开发者选择 二、文件知识在计算机中有关于文件的知识： 权限位 mode 标识位 flag 文件描述为 fd 权限位 mode 针对文件所有者、文件所属组、其他用户进行权限分配，其中类型又分成读、写和执行，具备权限位4、2、1，不具备权限为0 如在linux查看文件权限位： 12drwxr-xr-x 1 PandaShen 197121 0 Jun 28 14:41 core-rw-r--r-- 1 PandaShen 197121 293 Jun 23 17:44 index.md 在开头前十位中，d为文件夹，-为文件，后九位就代表当前用户、用户所属组和其他 ...

面试官：说说 Node. js 有哪些全局对象？ 一、是什么在浏览器 JavaScript 中，通常 window 是全局对象， 而 Nodejs 中的全局对象是 global 在NodeJS里，是不可能在最外层定义一个变量，因为所有的用户代码都是当前模块的，只在当前模块里可用，但可以通过exports对象的使用将其传递给模块外部 所以，在NodeJS中，用var声明的变量并不属于全局的变量，只在当前模块生效 像上述的global全局对象则在全局作用域中，任何全局变量、函数、对象都是该对象的一个属性值 二、有哪些将全局对象分成两类： 真正的全局对象 模块级别的全局变量 真正的全局对象下面给出一些常见的全局对象： Class:Buffer process console clearInterval、setInterval clearTimeout、setTimeout global Class:Buffer可以处理二进制以及非Unicode编码的数据 在Buffer类实例化中存储了原始数据。Buffer类似于一个整数数组，在V8堆原始存储空间给它分配了内存 一旦 ...

面试官：如何实现jwt鉴权机制？说说你的思路 一、是什么JWT（JSON Web Token），本质就是一个字符串书写规范，如下图，作用是用来在用户和服务器之间传递安全可靠的信息 在目前前后端分离的开发过程中，使用token鉴权机制用于身份验证是最常见的方案，流程如下： 服务器当验证用户账号和密码正确的时候，给用户颁发一个令牌，这个令牌作为后续用户访问一些接口的凭证 后续访问会根据这个令牌判断用户时候有权限进行访问 Token，分成了三部分，头部（Header）、载荷（Payload）、签名（Signature），并以.进行拼接。其中头部和载荷都是以JSON格式存放数据，只是进行了编码 header每个JWT都会带有头部信息，这里主要声明使用的算法。声明算法的字段名为alg，同时还有一个typ的字段，默认JWT即可。以下示例中算法为HS256 1{ "alg": "HS256", "typ": "JWT" } 因为JWT是字符串，所以我们还需要对以上内容进行Base6 ...

面试官：说说对中间件概念的理解，如何封装 node 中间件？ 一、是什么中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的 在NodeJS中，中间件主要是指封装http请求细节处理的方法 例如在express、koa等web框架中，中间件的本质为一个回调函数，参数包含请求对象、响应对象和执行下一个中间件的函数 在这些中间件函数中，我们可以执行业务逻辑代码，修改请求和响应对象、返回响应数据等操作 二、封装koa是基于NodeJS当前比较流行的web框架，本身支持的功能并不多，功能都可以通过中间件拓展实现。通过添加不同的中间件，实现不同的需求，从而构建一个 Koa 应用 Koa 中间件采用的是洋葱圈模型，每次执行下一个中间件传入两个参数： ctx ：封装了request 和 response 的变量 next ：进入下一个要执行的中间件的函数 下面就针对koa进行中间件的封装： Koa 的中间件就是函数，可以是 async 函数，或是普通函数 ...