前端日记

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

面试官：说说你对Node.js 的理解？优缺点？应用场景？ 一、是什么Node.js 是一个开源与跨平台的 JavaScript 运行时环境 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核），利用事件驱动、非阻塞和异步输入输出模型等技术提高性能 可以理解为 Node.js 就是一个服务器端的、非阻塞式I/O的、事件驱动的JavaScript运行环境 非阻塞异步Nodejs采用了非阻塞型I/O机制，在做I/O操作的时候不会造成任何的阻塞，当完成之后，以时间的形式通知执行操作 例如在执行了访问数据库的代码之后，将立即转而执行其后面的代码，把数据库返回结果的处理代码放在回调函数中，从而提高了程序的执行效率 事件驱动事件驱动就是当进来一个新的请求的时，请求将会被压入一个事件队列中，然后通过一个循环来检测队列中的事件状态变化，如果检测到有状态变化的事件，那么就执行该事件对应的处理代码，一般都是回调函数 比如读取一个文件，文件读取完毕后，就会触发对应的状态，然后通过对应的回调函数来进行处理 二、优缺点优点： 处理高并发场景性能更佳 适合I&# ...

面试官：如果让你来设计一个分页功能, 你会怎么设计? 前后端如何交互? 一、是什么在我们做数据查询的时候，如果数据量很大，比如几万条数据，放在一个页面显示的话显然不友好，这时候就需要采用分页显示的形式，如每次只显示10条数据 要实现分页功能，实际上就是从结果集中显示第110条记录作为第1页，显示第1120条记录作为第2页，以此类推 因此，分页实际上就是从结果集中截取出第M~N条记录 二、如何实现前端实现分页功能，需要后端返回必要的数据，如总的页数，总的数据量，当前页，当前的数据 123456789{ "totalCount": 1836, // 总的条数 "totalPages": 92, // 总页数 "currentPage": 1 // 当前页数 "data": [ // 当前页的数据 { ... }] 后端采用mysql作为数据的持久性存储 前端向后端发送目标的页码page以及每页显示数据的数量pageSize，默认情况每次取10条数据， ...

面试官：Node性能如何进行监控以及优化？ 一、 是什么Node作为一门服务端语言，性能方面尤为重要，其衡量指标一般有如下： CPU 内存 I/O 网络 CPU主要分成了两部分： CPU负载：在某个时间段内，占用以及等待CPU的进程总数 CPU使用率：CPU时间占用状况，等于 1 - 空闲CPU时间(idle time) / CPU总时间 这两个指标都是用来评估系统当前CPU的繁忙程度的量化指标 Node应用一般不会消耗很多的CPU，如果CPU占用率高，则表明应用存在很多同步操作，导致异步任务回调被阻塞 内存指标内存是一个非常容易量化的指标。 内存占用率是评判一个系统的内存瓶颈的常见指标。 对于Node来说，内部内存堆栈的使用状态也是一个可以量化的指标 123456789101112131415161718// /app/lib/memory.jsconst os = require('os');// 获取当前Node内存堆栈情况const { rss, heapUsed, heapTotal } = process ...

面试官：说说对 Node 中的 process 的理解？有哪些常用方法？ 一、是什么process 对象是一个全局变量，提供了有关当前 Node.js 进程的信息并对其进行控制，作为一个全局变量 我们都知道，进程计算机系统进行资源分配和调度的基本单位，是操作系统结构的基础，是线程的容器 当我们启动一个js文件，实际就是开启了一个服务进程，每个进程都拥有自己的独立空间地址、数据栈，像另一个进程无法访问当前进程的变量、数据结构，只有数据通信后，进程之间才可以数据共享 由于JavaScript是一个单线程语言，所以通过node xxx启动一个文件后，只有一条主线程 二、属性与方法关于process常见的属性有如下： process.env：环境变量，例如通过 `process.env.NODE_ENV 获取不同环境项目配置信息 process.nextTick：这个在谈及 EventLoop 时经常为会提到 process.pid：获取当前进程id process.ppid：当前进程对应的父进程 process.cwd()：获取当前进程工作目录， process.platform： ...

面试官：说说 Node 文件查找的优先级以及 Require 方法的文件查找策略? 一、模块规范NodeJS对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发： 在Node中每一个js文件都是一个单独的模块 模块中包括CommonJS规范的核心变量：exports、module.exports、require 通过上述变量进行模块化开发 而模块化的核心是导出与导入，在Node中通过exports与module.exports负责对模块中的内容进行导出，通过require函数导入其他模块（自定义模块、系统模块、第三方库模块）中的内容 二、查找策略require方法接收一下几种参数的传递： 原生模块：http、fs、path等 相对路径的文件模块：./mod或../mod 绝对路径的文件模块：/pathtomodule/mod 目录作为模块：./dirname 非原生模块的文件模块：mod require参数较为简单，但是内部的加载却是十分复杂的，其加载优先级也各自不同，如下图： 从上图可 ...

面试官：React事件绑定的方式有哪些？区别？ 一、是什么在react应用中，事件名都是用小驼峰格式进行书写，例如onclick要改写成onClick 最简单的事件绑定如下： 123456789class ShowAlert extends React.Component { showAlert() { console.log("Hi"); } render() { return <button onClick={this.showAlert}>show</button>; }} 从上面可以看到，事件绑定的方法需要使用{}包住 上述的代码看似没有问题，但是当将处理函数输出代码换成console.log(this)的时候，点击按钮，则会发现控制台输出undefined 二、如何绑定为了解决上面正确输出this的问题，常见的绑定方式有如下： render方法中使用bind render方法中使用箭头函数 construct ...

面试官：React构建组件的方式有哪些？区别？ 一、是什么组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式 在React中，一个类、一个函数都可以视为一个组件 在之前文章中，我们了解到组件所存在的优势： 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级 二、如何构建在React目前来讲，组件的创建主要分成了三种方式： 函数式创建 通过 React.createClass 方法创建 继承 React.Component 创建 函数式创建在React Hooks出来之前，函数式组件可以视为无状态组件，只负责根据传入的props来展示视图，不涉及对stat ...

面试官：说说对Fiber架构的理解？解决了什么问题？ 一、问题JavaScript 引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待 如果 JavaScript 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿 而这也正是 React 15 的 Stack Reconciler 所面临的问题，当 React 在渲染组件时，从开始到渲染完成整个过程是一气呵成的，无法中断 如果组件较大，那么js线程会一直执行，然后等到整棵VDOM树计算完成后，才会交给渲染的线程 这就会导致一些用户交互、动画等任务无法立即得到处理，导致卡顿的情况 二、是什么React Fiber 是 Facebook 花费两年余时间对 React 做出的一个重大改变与优化，是对 React 核心算法的一次重新实现。从Facebook在 React Conf 2017 会议上确认，React Fiber 在React 16 版本发布 在react中，主要做了以下的操作： 为每个增加了优先级，优先级高的任务可以 ...

面试官：说说对高阶组件的理解？应用场景? 一、是什么高阶函数（Higher-order function），至少满足下列一个条件的函数 接受一个或多个函数作为输入 输出一个函数 在React中，高阶组件即接受一个或多个组件作为参数并且返回一个组件，本质也就是一个函数，并不是一个组件 1const EnhancedComponent = highOrderComponent(WrappedComponent); 上述代码中，该函数接受一个组件WrappedComponent作为参数，返回加工过的新组件EnhancedComponent 高阶组件的这种实现方式，本质上是一个装饰者设计模式 二、如何编写最基本的高阶组件的编写模板如下： 12345678910import React, { Component } from 'react';export default (WrappedComponent) => { return class EnhancedComponent extends Component { ...