` 元素的 `enctype` 属性设置为 `multipart/form-data`，这样就可以将文件作为二进制数据进行上传。\n\n当用户选择了本地的文件后，提交表单时就会将文件作为 `FormData` 对象的一部分进行发送。在 JavaScript 中，可以通过 `FormData` 构造函数来创建一个 `FormData` 对象，并使用 `append()` 方法向其中添加上传的文件数据。例如：\n\n```javascript\nconst formData = new FormData();\nconst fileInput = document.querySelector('input[type=\"file\"]');\nformData.append('image', fileInput.files[0]);\n```\n\n这样就可以将文件数据添加到 `formData` 对象中，然后使用 `fetch()` 方法或其他方式将其发送到后端进行处理。\n\n需要注意的是，由于安全原因，浏览器限制了用户上传文件的大小和类型。可以使用 `accept` 属性来限制文件的类型，例如 `accept=\"image/*\"` 表示只允许上传图片类型的文件。可以使用 `multiple` 属性来允许用户选择多个文件进行上传。同时，还需要在后端对上传的文件进行处理和验证，以确保安全性和正确性。\n\n### 后端如何解析？koa 为例\n\n在 Koa 中解析上传的文件需要使用一个叫做 `koa-body` 的中间件，它可以自动将 `multipart/form-data` 格式的请求体解析成 JavaScript 对象，从而获取到上传的文件和其他表单数据。\n\n以下是一个使用 `koa-body` 中间件解析上传文件的例子：\n\n```javascript\nconst Koa = require('koa');\nconst koaBody = require('koa-body');\n\nconst app = new Koa();\n\n// 注册 koa-body 中间件\napp.use(koaBody({\n multipart: true, // 支持上传文件\n}));\n\n// 处理上传文件的请求\napp.use(async (ctx) => {\n const { files, fields } = ctx.request.body; // 获取上传的文件和其他表单数据\n const file = files && files.image; // 获取上传的名为 image 的文件\n\n if (file) {\n console.log(`Received file: ${file.name}, type: ${file.type}, size: ${file.size}`);\n // 处理上传的文件\n } else {\n console.log('No file received');\n }\n\n // 返回响应\n ctx.body = 'Upload success';\n});\n\napp.listen(3000);\n```\n\n在上述代码中，使用 `koa-body` 中间件注册了一个解析请求体的函数，并在请求处理函数中获取到了上传的文件和其他表单数据。其中，`files` 对象包含了所有上传的文件，`fields` 对象包含了所有非文件类型的表单数据。\n\n可以根据实际需要从 `files` 对象中获取到需要处理的文件，例如上面的例子中使用了 `files.image` 来获取名为 `image` 的上传文件。可以使用上传文件的属性，如 `name`、`type` 和 `size` 来获取文件的信息，并进行处理。最后返回响应，表示上传成功。\n\n需要注意的是，`koa-body` 中间件需要设置 `multipart: true` 才能支持上传文件。另外，在处理上传文件时需要注意安全性和正确性，可以使用第三方的文件上传处理库来进行处理。\n\n### 解析上传文件的原理是啥？\n\n在 HTTP 协议中，上传文件的请求通常使用 `multipart/form-data` 格式的请求体。这种格式的请求体由多个部分组成，每个部分以一个 boundary 字符串作为分隔符，每个部分都代表一个字段或一个文件。\n\n对于一个上传文件的请求，浏览器会将请求体按照 `multipart/form-data` 格式构造，其中每个部分都有一些描述信息和内容，例如文件名、文件类型、文件大小、内容等。\n\n服务器端需要对这些部分进行解析，提取出所需要的信息。常见的解析方式有两种：\n\n1. 手动解析：根据 `multipart/form-data` 格式的规范，按照 boundary 字符串将请求体切分为多个部分，然后解析每个部分的头部和内容，提取出文件名、文件类型、文件大小等信息。这种方式比较麻烦，需要手动处理较多的细节，容易出错。\n\n2. 使用第三方库：可以使用第三方的解析库，如 `multer`、`formidable`、`busboy` 等，来方便地解析 `multipart/form-data` 格式的请求体。这些库通常会将解析出的信息存储到一个对象中，方便进一步处理。\n\n在 Node.js 中，使用 `http` 模块自己实现 `multipart/form-data` 的解析比较麻烦，常见的做法是使用第三方库来解析上传文件，例如在 Koa 中使用 `koa-body` 中间件就可以方便地处理上传文件。",{"_58":404,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/170/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/170/timeline",{"_58":407,"_60":61,"_62":408,"_64":409,"_66":410,"_68":411,"_70":412,"_72":413,"_74":414,"_76":415,"_78":416,"_111":417,"_124":125,"_126":24,"_127":-5,"_128":419,"_130":420,"_152":145,"_146":422,"_148":422,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":423,"_163":424,"_169":425,"_171":426,"_183":428,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/169","https://api.github.com/repos/pro-collection/interview-question/issues/169/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/169/comments","https://api.github.com/repos/pro-collection/interview-question/issues/169/events","https://github.com/pro-collection/interview-question/issues/169",1640809930,"I_kwDOJGDC6c5hzMXK",169,"[koa] body-parser 中间件实现原理？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[418],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":245,"_68":246,"_62":247,"_70":248,"_72":249,"_74":250,"_76":251,"_122":252,"_140":421,"_142":254,"_144":145,"_124":125,"_146":255,"_148":256,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-26T07:53:06Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"Koa 中间件 `koa-bodyparser` 的原理是将 HTTP 请求中的 `request body` 解析成 JavaScript 对象，并将其挂载到 `ctx.request.body` 属性上，方便后续的处理。\n\n具体来说，`koa-bodyparser` 中间件会监听 HTTP 请求的 `data` 事件和 `end` 事件，然后将请求中的数据流解析成一个 JavaScript 对象，并将其作为参数传递给 `ctx.request.body` 属性，最后调用 `await next()`，将控制权交给下一个中间件。\n\n在实现过程中，`koa-bodyparser` 中间件会根据请求头中的 `Content-Type` 字段来判断请求体的类型，支持解析的请求体类型有 `application/json`、`application/x-www-form-urlencoded` 和 `multipart/form-data`。对于其他类型的请求体，`koa-bodyparser` 会将其解析成一个空对象 `{}`。\n\n下面是一个简单的 `koa-bodyparser` 中间件的实现示例：\n\n```javascript\nfunction bodyParser() {\n return async (ctx, next) => {\n if (ctx.request.method === 'POST' || ctx.request.method === 'PUT') {\n let data = '';\n ctx.req.on('data', (chunk) => {\n data += chunk;\n });\n ctx.req.on('end', () => {\n if (ctx.request.headers['content-type'] === 'application/json') {\n ctx.request.body = JSON.parse(data);\n } else if (ctx.request.headers['content-type'] === 'application/x-www-form-urlencoded') {\n ctx.request.body = querystring.parse(data);\n } else if (ctx.request.headers['content-type'].startsWith('multipart/form-data')) {\n // 解析 multipart/form-data 请求体\n // ...\n } else {\n ctx.request.body = {};\n }\n return next();\n });\n } else {\n return next();\n }\n };\n}\n```\n\n在这个实现中，如果请求方法为 `POST` 或者 `PUT`，则开始监听 `data` 事件和 `end` 事件，将请求体数据解析成一个 JavaScript 对象并挂载到 `ctx.request.body` 上，最后调用 `next()` 将控制权交给下一个中间件。对于其他请求方法，则直接调用 `next()` 交给下一个中间件处理。注意，这个实现只支持解析 `application/json` 和 `application/x-www-form-urlencoded` 类型的请求体，对于其他类型的请求体需要进行特殊处理。",{"_58":427,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/169/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/169/timeline",{"_58":430,"_60":61,"_62":431,"_64":432,"_66":433,"_68":434,"_70":435,"_72":436,"_74":437,"_76":438,"_78":439,"_111":440,"_124":125,"_126":24,"_127":-5,"_128":442,"_130":443,"_152":145,"_146":445,"_148":445,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":446,"_163":447,"_169":448,"_171":449,"_183":451,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/168","https://api.github.com/repos/pro-collection/interview-question/issues/168/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/168/comments","https://api.github.com/repos/pro-collection/interview-question/issues/168/events","https://github.com/pro-collection/interview-question/issues/168",1640809431,"I_kwDOJGDC6c5hzMPX",168,"[koa] 在没有async await 的时候, koa是怎么实现的洋葱模型？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[441],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":245,"_68":246,"_62":247,"_70":248,"_72":249,"_74":250,"_76":251,"_122":252,"_140":444,"_142":254,"_144":145,"_124":125,"_146":255,"_148":256,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-26T07:51:12Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"在没有 `async/await` 的时候，Koa 通过使用 ES6 的生成器函数来实现洋葱模型。具体来说，Koa 中间件函数是一个带有 `next` 参数的生成器函数，当中间件函数调用 `next` 方法时，它会挂起当前的执行，转而执行下一个中间件函数，直到执行完最后一个中间件函数，然后将执行权返回到前一个中间件函数，继续执行下面的代码。这个过程就像一层一层剥开洋葱一样，因此被称为洋葱模型。\n\n下面是一个使用生成器函数实现的简单的 Koa 中间件函数：\n\n```javascript\nfunction* myMiddleware(next) {\n // 中间件函数的代码\n console.log('Start');\n yield next;\n console.log('End');\n}\n```\n\n在这个中间件函数中，`yield next` 表示挂起当前的执行，执行下一个中间件函数。假设我们有两个中间件函数 `middleware1` 和 `middleware2`，它们的代码如下：\n\n```javascript\nfunction* middleware1(next) {\n console.log('middleware1 Start');\n yield next;\n console.log('middleware1 End');\n}\n\nfunction* middleware2(next) {\n console.log('middleware2 Start');\n yield next;\n console.log('middleware2 End');\n}\n```\n\n我们可以使用 `compose` 函数将它们组合成一个洋葱模型：\n\n```scss\nscssCopy codeconst compose = require('koa-compose');\n\nconst app = compose([middleware1, middleware2]);\n\napp();\n```\n\n在这个例子中，`compose` 函数将 `middleware1` 和 `middleware2` 组合成一个函数 `app`，然后调用这个函数即可执行整个中间件链。执行的结果如下：\n\n```sql\nsqlCopy codemiddleware1 Start\nmiddleware2 Start\nmiddleware2 End\nmiddleware1 End\n```\n\n可以看到，这个结果与洋葱模型的特点相符。",{"_58":450,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/168/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/168/timeline",{"_58":453,"_60":61,"_62":454,"_64":455,"_66":456,"_68":457,"_70":458,"_72":459,"_74":460,"_76":461,"_78":462,"_111":463,"_124":125,"_126":24,"_127":-5,"_128":465,"_130":466,"_152":145,"_146":468,"_148":468,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":469,"_163":470,"_169":471,"_171":472,"_183":474,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/164","https://api.github.com/repos/pro-collection/interview-question/issues/164/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/164/comments","https://api.github.com/repos/pro-collection/interview-question/issues/164/events","https://github.com/pro-collection/interview-question/issues/164",1640805442,"I_kwDOJGDC6c5hzLRC",164,"[koa] 中间件的异常处理是怎么做的？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[464],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":467,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-26T07:34:30Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"在 Koa 中，中间件函数的异常处理可以通过两种方式来实现：\n\n1. 使用 `try...catch` 捕获异常：在中间件函数中使用 `try...catch` 语句来捕获异常，然后通过 `ctx.throw()` 方法抛出异常信息，例如：\n\n```vbnet\nvbnetCopy codeasync function myMiddleware(ctx, next) {\n try {\n await next();\n } catch (err) {\n ctx.throw(500, 'Internal Server Error');\n }\n}\n```\n\n在这个例子中，`await next()` 表示调用下一个中间件函数，如果这个函数抛出异常，就会被捕获到，然后通过 `ctx.throw()` 方法抛出一个包含错误状态码和错误信息的异常。\n\n2. 使用 Koa 的错误处理中间件：Koa 提供了一个错误处理中间件 `koa-json-error`，可以通过在应用程序中使用该中间件来处理异常。这个中间件会自动捕获应用程序中未被处理的异常，并将错误信息以 JSON 格式返回给客户端。例如：\n\n```javascript\nconst Koa = require('koa');\nconst jsonError = require('koa-json-error');\n\nconst app = new Koa();\n\n// 注册错误处理中间件\napp.use(jsonError());\n\n// 中间件函数\nasync function myMiddleware(ctx, next) {\n await next();\n throw new Error('Internal Server Error');\n}\n\n// 应用中间件\napp.use(myMiddleware);\n\n// 启动服务器\napp.listen(3000);\n```\n\n在这个例子中，`koa-json-error` 中间件会自动捕获应用程序中未被处理的异常，并将错误信息以 JSON 格式返回给客户端。开发人员可以通过自定义错误处理函数来处理异常，例如：\n\n```javascript\nconst Koa = require('koa');\nconst jsonError = require('koa-json-error');\n\nconst app = new Koa();\n\n// 自定义错误处理函数\nfunction errorHandler(err, ctx) {\n ctx.status = err.status || 500;\n ctx.body = {\n message: err.message,\n status: ctx.status\n };\n}\n\n// 注册错误处理中间件\napp.use(jsonError(errorHandler));\n\n// 中间件函数\nasync function myMiddleware(ctx, next) {\n await next();\n throw new Error('Internal Server Error');\n}\n\n// 应用中间件\napp.use(myMiddleware);\n\n// 启动服务器\napp.listen(3000);\n```\n\n在这个例子中，我们自定义了一个错误处理函数 `errorHandler`，将错误信息格式化为 JSON 格式，并设置响应状态码。然后将这个函数作为参数传递给 `koa-json-error` 中间件，用于处理异常。\n",{"_58":473,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/164/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/164/timeline",{"_58":476,"_60":61,"_62":477,"_64":478,"_66":479,"_68":480,"_70":481,"_72":482,"_74":483,"_76":484,"_78":485,"_111":486,"_124":125,"_126":24,"_127":-5,"_128":488,"_130":489,"_152":145,"_146":491,"_148":492,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":493,"_163":494,"_169":495,"_171":496,"_183":498,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/161","https://api.github.com/repos/pro-collection/interview-question/issues/161/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/161/comments","https://api.github.com/repos/pro-collection/interview-question/issues/161/events","https://github.com/pro-collection/interview-question/issues/161",1640793753,"I_kwDOJGDC6c5hzIaZ",161,"如何实现洋葱模式？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[487],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":245,"_68":246,"_62":247,"_70":248,"_72":249,"_74":250,"_76":251,"_122":252,"_140":490,"_142":254,"_144":145,"_124":125,"_146":255,"_148":256,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-26T06:44:01Z","2023-03-26T06:44:02Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"**思路**\n\n* 首先调用 `use` 方法收集中间件，调用 `listen` 方法执行中间件。\n* 每一个中间件都有一个`next`参数（暂时不考虑ctx参数），`next`参数可以控制进入下一个中间件的时机。\n\n**需要解决的问题**\n- 最后一个中间件调用next如何处理\n- 如何解决同一个中间件多次调用next\n\n\n**完整代码**\n\n其中最精华的部分就是`compose`函数，细数一下，只有`11`行代码，1比1还原了`koa`的`compose`函数（去除了不影响主逻辑判断）。\n\n> koa是利用koa-compose这个库进行组合中间件的，在koa-compose里面，next返回的都是一个promise函数。\n\n```js\nfunction Koa () {\n this.middleares = [];\n}\nKoa.prototype.use = function (middleare) {\n this.middleares.push(middleare);\n return this;\n}\nKoa.prototype.listen = function () {\n const fn = compose(this.middleares);\n}\nfunction compose(middleares) {\n let index = -1;\n const dispatch = (i) => {\n if(i <= index) throw new Error('next（）不能调用多次');\n index = i;\n if(i >= middleares.length) return;\n const middleare = middleares[i];\n return middleare('ctx', dispatch.bind(null, i + 1));\n }\n return dispatch(0);\n}\n\nconst app = new Koa();\napp.use(async (ctx, next) => {\n console.log('1');\n next();\n console.log('2');\n});\napp.use(async (ctx, next) => {\n console.log('3');\n next();\n console.log('4');\n});\napp.use(async (ctx, next) => {\n console.log('5');\n next();\n console.log('6');\n});\n\napp.listen();\n\n```\n\n\n**使用**\n\n```js\nconst Koa = require('koa');\nconst app = new Koa();\n\n// 中间件过多，可以创建一个middleares文件夹，将cors函数放到middleares/cors.js文件里面\nconst cors = () => {\n return async (ctx, next) => {\n ctx.set('Access-Control-Allow-Headers', 'X-Requested-With')\n ctx.set('Access-Control-Allow-Origin', '*')\n ctx.set('Access-Control-Allow-Methods', 'GET,HEAD,PUT,POST,DELETE,PATCH')\n await next();\n }\n};\n\napp.use(cors());\napp.use(async (ctx, next) => {\n console.log('第一个中间件', ctx.request.method,ctx.request.url);\n await next();\n ctx.body = 'hello world'\n});\n\n```\n\n`koa`的中间件都是有固定模板的，首先是一个函数，并且返回一个`async`函数（闭包的应用），这个`async`函数有两个参数，一个是`koa`的`context`，一个是`next`函数。\n\n",{"_58":497,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/161/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/161/timeline",{"_58":500,"_60":61,"_62":501,"_64":502,"_66":503,"_68":504,"_70":505,"_72":506,"_74":507,"_76":508,"_78":509,"_111":510,"_124":125,"_126":24,"_127":-5,"_128":512,"_130":513,"_152":145,"_146":515,"_148":515,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":516,"_163":517,"_169":518,"_171":519,"_183":521,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/160","https://api.github.com/repos/pro-collection/interview-question/issues/160/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/160/comments","https://api.github.com/repos/pro-collection/interview-question/issues/160/events","https://github.com/pro-collection/interview-question/issues/160",1640792637,"I_kwDOJGDC6c5hzII9",160,"什么是洋葱模型？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[511],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":514,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-26T06:38:58Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"说到洋葱模型，就必须聊一聊中间件，中间件这个概念，我们并不陌生，比如平时我们用的 `redux`、`express` 、`koa` 这些库里，都离不开中间件。\n\n那 `koa` 里面的中间件是什么样的呢？其本质上是一个函数，这个函数有着特定，单一的功能，`koa`将一个个中间件注册进来，通过**组合**实现强大的功能。\n\n先看 `demo` ：\n\n```js\n// index.js\nconst Koa = require(\"koa\")\nconst app = new Koa();\n\n// 中间件1\napp.use(async (ctx, next) => {\n console.log(\"1\")\n await next()\n console.log(\"2\")\n});\n// 中间件2\napp.use(async (ctx, next) => {\n console.log(\"3\")\n await next()\n console.log(\"4\")\n});\n// 中间件3\napp.use(async (ctx, next) => {\n console.log(\"5\")\n await next()\n console.log(\"6\")\n});\napp.listen(8002);\n\n\n```\n\n先后注册了三个中间件，运行一下`index.js` ，可以看到输出结果为：\n\n```js\n1\n3\n5\n6\n4\n2\n\n```\n\n没接触过洋葱模型的人第一眼可能会疑惑，为什么调用了一个 `next` 之后，直接从`1` 跳到了 `3` ，而不是先输出`1` ，再输出`2`呢。其实这就是洋葱模型特点，下图是它的执行过程：\n\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80798be002944d67a46c456d4af3c03c~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?) 一开始我们先后注册了三个中间件，分别是中间件1，中间件2，中间件3，调用`listen`方法，打开对应端口的页面，触发了中间件的执行。\n\n首先会先执行第一个中间件的 `next` 的前置语句，相当于 `demo` 里面的 `console.log('1')` ，当调用 `next()` 之后，会直接进入第二个中间件，继续重复上述逻辑，直至最后一个中间件，就会执行 `next` 的后置语句，然后继续上一个中间件的后置语句，继续重复上述逻辑，直至执行第一个中间件的后置语句，最后输出。\n\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/935675e49480426eb517a68c224673c7~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?) 正是因为它这种执行机制，才被称为**洋葱模型**。\n\n\n",{"_58":520,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/160/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/160/timeline",{"_58":523,"_60":61,"_62":524,"_64":525,"_66":526,"_68":527,"_70":528,"_72":529,"_74":530,"_76":531,"_78":532,"_111":533,"_124":125,"_126":24,"_127":-5,"_128":535,"_130":536,"_152":145,"_146":538,"_148":539,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":540,"_163":541,"_169":542,"_171":543,"_183":545,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/159","https://api.github.com/repos/pro-collection/interview-question/issues/159/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/159/comments","https://api.github.com/repos/pro-collection/interview-question/issues/159/events","https://github.com/pro-collection/interview-question/issues/159",1640791850,"I_kwDOJGDC6c5hzH8q",159,"[Vue] 父子组件通信方式有哪些？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[534],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":537,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-26T06:34:56Z","2023-03-26T06:35:48Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"Vue 父子组件通信\r\n\r\n- Prop（常用）\r\n- $emit (组件封装用的较多)\r\n- .sync语法糖（较少）\r\n- $attrs & $listeners (组件封装用的较多)\r\n- provide & inject （高阶组件/组件库用的较多）\r\n- slot-scope & v-slot （vue@2.6.0+）新增\r\n- scopedSlots 属性\r\n- 其他方式通信\r\n\r\n\r\n具体使用场景参考链接：https://juejin.cn/post/6844903700243316749\r\n\r\n",{"_58":544,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/159/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/159/timeline",{"_58":547,"_60":61,"_62":548,"_64":549,"_66":550,"_68":551,"_70":552,"_72":553,"_74":554,"_76":555,"_78":556,"_111":557,"_124":125,"_126":24,"_127":-5,"_128":565,"_130":566,"_152":145,"_146":568,"_148":569,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":570,"_163":571,"_169":572,"_171":573,"_183":575,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/158","https://api.github.com/repos/pro-collection/interview-question/issues/158/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/158/comments","https://api.github.com/repos/pro-collection/interview-question/issues/158/events","https://github.com/pro-collection/interview-question/issues/158",1640790751,"I_kwDOJGDC6c5hzHrf",158,"CSS 中 position 常见属性有哪些，大概讲一下？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[558],{"_70":559,"_72":560,"_58":561,"_117":562,"_119":563,"_121":24,"_122":564},5232524505,"LA_kwDOJGDC6c8AAAABN-H82Q","https://api.github.com/repos/pro-collection/interview-question/labels/CSS","CSS","A46719","CSS 相关问题",[],{"_58":350,"_68":351,"_62":352,"_70":353,"_72":354,"_74":188,"_76":355,"_122":356,"_140":567,"_142":358,"_144":145,"_124":125,"_146":359,"_148":360,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-26T06:29:30Z","2023-03-26T06:29:31Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"CSS 中 `position` 属性用于指定元素的定位方式，它有以下常见的属性值：\n\n1. `static`：默认值，元素在文档流中正常排列。\n\n2. `relative`：元素在文档流中正常排列，但是可以通过设置 `top`、`right`、`bottom`、`left` 属性相对于其正常位置进行偏移，不会影响其它元素的位置。\n\n3. `absolute`：元素脱离文档流，相对于最近的非 `static` 定位的祖先元素进行定位，如果没有则相对于 `` 元素进行定位。通过设置 `top`、`right`、`bottom`、`left` 属性进行偏移，如果祖先元素发生位置变化，则元素的位置也会发生相应的变化。\n\n4. `fixed`：元素脱离文档流，相对于浏览器窗口进行定位，始终保持在窗口的固定位置，不会随页面滚动而滚动。通过设置 `top`、`right`、`bottom`、`left` 属性进行偏移。\n\n5. `sticky`：元素在文档流中正常排列，当元素滚动到指定的位置时，停止滚动并固定在该位置，直到其祖先元素发生滚动时才会取消固定。通过设置 `top`、`right`、`bottom`、`left` 属性和 `z-index` 属性进行设置。\n\n以上是 `position` 属性的常见属性值和简单说明，不同的值会对元素进行不同的定位方式，开发人员可以根据需要选择合适的值来实现页面布局。",{"_58":574,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/158/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/158/timeline",{"_58":577,"_60":61,"_62":578,"_64":579,"_66":580,"_68":581,"_70":582,"_72":583,"_74":584,"_76":585,"_78":586,"_111":587,"_124":125,"_126":24,"_127":-5,"_128":589,"_130":590,"_152":145,"_146":592,"_148":593,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":594,"_163":595,"_169":596,"_171":597,"_183":599,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/157","https://api.github.com/repos/pro-collection/interview-question/issues/157/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/157/comments","https://api.github.com/repos/pro-collection/interview-question/issues/157/events","https://github.com/pro-collection/interview-question/issues/157",1640790354,"I_kwDOJGDC6c5hzHlS",157,"CSS 文档流是什么概念？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[588],{"_70":559,"_72":560,"_58":561,"_117":562,"_119":563,"_121":24,"_122":564},[],{"_58":350,"_68":351,"_62":352,"_70":353,"_72":354,"_74":188,"_76":355,"_122":356,"_140":591,"_142":358,"_144":145,"_124":125,"_146":359,"_148":360,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-26T06:27:52Z","2023-03-26T06:27:53Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"CSS 的文档流（Document Flow）是指文档中元素按照其在 HTML 中出现的顺序自上而下布局的方式，也称为常规流（Normal Flow）或默认流。文档流定义了元素的布局顺序和定位方式，包括元素的位置、大小、间距等属性。\n\n在文档流中，每个元素都会占据一定的空间并尽可能充满其包含块的宽度。每个元素的位置都会受到前面元素的影响，如果前面的元素发生位置变化，那么后面的元素的位置也会发生相应的变化。\n\n文档流中的元素按照下面的规则排列：\n\n1. 块级元素：块级元素会独占一行，并在前面自动添加一个垂直间距。例如：`

`、`

` 等。\n\n2. 行内元素：行内元素会在一行中排列，并且宽度根据内容自适应。例如：``、``、`` 等。\n\n3. 行内块级元素：行内块级元素与行内元素类似，但是它可以设置宽度、高度等块级元素的属性。例如：``、`