Your Page Title

` 元素（早于跨站 `XMLHttpRequest 和 fetch`）可以向任何来源提交简单请求，所以任何编写服务器的人一定已经在保护跨站请求伪造攻击`（CSRF）`。在这个假设下，服务器不必选择加入（通过响应预检请求）来接收任何看起来像表单提交的请求，因为 CSRF 的威胁并不比表单提交的威胁差。然而，服务器仍然必须提供 `Access-Control-Allow-Origin`的选择，以便与脚本共享响应。\n\n若请求满足所有下述条件，则该请求可视为简单请求：\n\n- 使用下列方法之一：\n - `GET`\n - `HEAD`\n - `POST`\n\n- 除了被用户代理自动设置的标头字段（例如 Connection、User-Agent 或其他在 Fetch 规范中定义为禁用标头名称的标头），允许人为设置的字段为 Fetch 规范定义的对 CORS 安全的标头字段集合。该集合为：\n - `Accept`\n - `Accept-Language`\n - `Content-Language`\n - `Content-Type（需要注意额外的限制）`\n - `Range（只允许简单的范围标头值如 bytes=256- 或 bytes=127-255）`\n\n- Content-Type 标头所指定的媒体类型的值仅限于下列三者之一：\n - `text/plain`\n - `multipart/form-data`\n - `application/x-www-form-urlencoded`\n\n- 如果请求是使用 `XMLHttpRequest` 对象发出的，在返回的 `XMLHttpRequest.upload` 对象属性上没有注册任何事件监听器；也就是说，给定一个 `XMLHttpRequest` 实例 `xhr`，没有调用 `xhr.upload.addEventListener()`，以监听该上传请求。\n\n- 请求中没有使用 `ReadableStream` 对象。\n\n比如说，假如站点 https://foo.example 的网页应用想要访问 https://bar.other 的资源。foo.example 的网页中可能包含类似于下面的 JavaScript 代码：\n",{"_54":743,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/675/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/675/timeline",{"_54":746,"_56":57,"_58":747,"_60":748,"_62":749,"_64":750,"_66":751,"_68":752,"_70":753,"_72":754,"_74":755,"_107":756,"_127":128,"_129":26,"_130":-5,"_131":759,"_133":760,"_155":148,"_149":762,"_151":763,"_154":-5,"_158":159,"_160":764,"_165":-5,"_166":765,"_168":766,"_180":768,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/674","https://api.github.com/repos/pro-collection/interview-question/issues/674/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/674/comments","https://api.github.com/repos/pro-collection/interview-question/issues/674/events","https://github.com/pro-collection/interview-question/issues/674",2105712097,"I_kwDOJGDC6c59gp3h",674,"http 中 HSTS 是什么【热度: 374】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[757,758],{"_66":704,"_68":705,"_54":706,"_113":707,"_115":708,"_117":26,"_118":709},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":761,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-01-29T15:07:23Z","2024-01-29T15:07:24Z",{"_162":148,"_163":148,"_164":148},"**关键词**：http HSTS\n\nHTTP `Strict-Transport-Security`（HSTS）是一种安全策略，它通过 HTTP 头部告诉浏览器只能通过安全的 HTTPS 连接访问网站，从而增加网站的安全性。HSTS 有助于防止恶意攻击者通过中间人攻击（如SSL剥离攻击）窃取敏感信息。\n\nHSTS 的主要作用包括：\n\n- **强制使用 HTTPS：** 通过 HSTS，网站可以强制浏览器在一定时间内只能通过 HTTPS 访问，提高数据的安全性。\n\n- **防止 SSL 剥离攻击：** HSTS 通过告知浏览器只能通过安全的连接访问网站，有效地防止了一些中间人攻击，例如 SSL 剥离攻击，其中攻击者试图将 HTTPS 连接降级为不安全的 HTTP 连接。\n\n- **增加网站的安全性：** HSTS 是一种增加网站安全性的简单而有效的手段，尤其是对于那些强调隐私和数据保护的网站。\n\n\nHSTS 的工作原理如下：\n\n1. **首次访问：** 当用户首次通过 HTTPS 访问网站时，服务器可以在响应头中包含 HSTS 头部，指定网站的 HSTS 策略。例如：\n```\nStrict-Transport-Security: max-age=31536000; includeSubDomains; preload\n```\n\n- `max-age=31536000`: 告诉浏览器在接下来的 1 年内，只能通过 HTTPS 访问该网站。\n- `includeSubDomains`: 表示该策略也适用于所有子域名。\n- `preload`: 表示网站希望被添加到浏览器的 HSTS 预加载列表中。\n\n2. **以后的访问：** 一旦浏览器接收到包含 HSTS 头部的响应后，它会记住这个信息。在接下来的一年内，浏览器将强制使用 HTTPS 访问该网站，即使用户尝试通过 HTTP 访问。\n\n一旦网站启用了 `HSTS`，并且用户第一次通过 HTTPS 访问该网站，浏览器将在 `HSTS` 头部指定的时间内（`max-age` 参数指定的时间）记住这个策略，即使用户以后尝试通过 HTTP 访问，浏览器仍然会强制使用 HTTPS。因此，使用 HSTS 需要谨慎，确保网站支持 HTTPS 并且配置正确。\n\n**如何取消 `HSTS`**\n\n> 如果之前的请求设置了 HTTP Strict-Transport-Security 这个 header 了，时间是 max-age=31536000；\n> 之后因为一些原因，取消了 Strict-Transport-Security 这个 header，那么还是不能使用 http 吗?\n\n一旦浏览器接收到包含 HTTP `Strict-Transport-Security`（HSTS）头部的响应，并且在响应中设置了 `max-age` 参数，浏览器会在指定的时间内坚持使用 HTTPS 连接，即使后续的请求中不再包含 HSTS 头部。\n\n如果之前的请求设置了 `max-age=31536000`，那么浏览器将在接下来的一年内坚持使用 HTTPS 连接，即使后续的请求中不再包含 HSTS 头部。即使之后取消了 HSTS 头部，浏览器仍然会在 `max-age` 规定的时间内执行强制使用 HTTPS 的策略。\n\n如果由于一些原因需要取消 HSTS，可以采取以下步骤之一：\n\n1. **在 HTTP 响应中不再包含 HSTS 头部：** 在服务器的 HTTPS 响应中，不再包含 `Strict-Transport-Security` 头部，或者将 `max-age` 设置为较短的时间，以便更快地使浏览器放弃 HSTS 策略。\n\n2. **使用 `includeSubDomains` 指令进行逐步取消：** 如果之前设置了 `includeSubDomains`，并且想逐步取消 HSTS，可以在不同的子域名上逐步取消。例如，可以在某个子域名上不再包含 HSTS 头部，而其他子域名仍然保持 HSTS。\n\n请注意，取消 HSTS 头部可能导致用户在一定时间内无法通过 HTTPS 访问网站，因为浏览器会在 `max-age` 规定的时间内继续强制使用 HTTPS。确保在取消 HSTS 头部之前，确保网站的 HTTPS 配置是正确的，以避免访问问题。\n",{"_54":767,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/674/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/674/timeline",{"_54":770,"_56":57,"_58":771,"_60":772,"_62":773,"_64":774,"_66":775,"_68":776,"_70":777,"_72":778,"_74":779,"_107":780,"_127":128,"_129":26,"_130":-5,"_131":783,"_133":784,"_155":148,"_149":786,"_151":787,"_154":-5,"_158":159,"_160":788,"_165":-5,"_166":789,"_168":790,"_180":792,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/673","https://api.github.com/repos/pro-collection/interview-question/issues/673/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/673/comments","https://api.github.com/repos/pro-collection/interview-question/issues/673/events","https://github.com/pro-collection/interview-question/issues/673",2105665554,"I_kwDOJGDC6c59gegS",673,"http 中 CSP 是什么【热度: 323】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[781,782],{"_66":704,"_68":705,"_54":706,"_113":707,"_115":708,"_117":26,"_118":709},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":785,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-01-29T14:46:34Z","2024-01-29T14:46:35Z",{"_162":148,"_163":148,"_164":148},"**关键词**：http CSP\n\n在 HTTP 协议中，CSP 指的是 \"Content Security Policy\"（内容安全策略）。CSP 是一种用于增强网站安全性的安全策略机制，通过指定浏览器只能加载指定来源的资源，以减少恶意攻击的风险。\n\nCSP 的主要目标是防止和减缓特定类型的攻击，例如跨站脚本攻击 (XSS) 和数据注入攻击。通过配置 CSP，网站管理员可以告诉浏览器哪些资源是被信任的，从而减少恶意代码的执行。\n\nCSP 的一些常见配置项包括：\n\n1. **default-src：** 指定默认情况下可以从哪些来源加载资源。\n2. **script-src：** 指定允许加载脚本的来源。\n3. **style-src：** 指定允许加载样式表的来源。\n4. **img-src：** 指定允许加载图片的来源。\n5. **font-src：** 指定允许加载字体的来源。\n6. **connect-src：** 指定允许进行网络请求的来源（例如 Ajax 请求）。\n7. **frame-src：** 指定允许加载框架的来源。\n8. **media-src：** 指定允许加载媒体资源的来源。\n\n等等。\n\n以下是一个简单的 CSP 示例：\n\n```http\nContent-Security-Policy: default-src 'self'; script-src 'self' example.com; img-src 'self' data:;\n```\n\n上述 CSP 规则的含义是：\n\n- `default-src 'self'`: 允许从同一站点加载默认来源的资源。\n- `script-src 'self' example.com`: 允许从同一站点和 example.com 加载脚本。\n- `img-src 'self' data:`: 允许从同一站点和 data: 协议加载图片。\n\nCSP 可以通过 HTTP 头部来设置，也可以通过 `` 标签嵌入在 HTML 页面中。使用 CSP 可以帮助网站减少受到恶意攻击的风险，提高网站的安全性。\n\n**如何通过 meta 标签设置 CSP**\n\n通过 `` 标签设置 Content Security Policy (CSP) 的方式如下：\n\n```html\n\n\n\n \n \n Your Page Title\n\n\n \n\n\n```\n\n在上面的代码中，`` 标签的 `http-equiv` 属性被设置为 \"Content-Security-Policy\"，而 `content` 属性中则包含了 CSP 指令（directives）。你需要将 \"directives\" 替换为你实际想要设置的 CSP 规则。\n\n以下是一个具体的例子：\n\n```html\n\n```\n\n在这个例子中，CSP 规则指定了默认来源是同一站点，允许加载同一站点和 example.com 的脚本，允许加载同一站点和 data: 协议的图片。\n\n注意：通过 `` 标签设置的 CSP 规则只对当前页面生效，而通过 HTTP 头部设置的 CSP 规则对整个站点生效。因此，如果你希望 CSP 规则对整个站点生效，最好在服务器端通过 HTTP 头部设置 CSP。\n",{"_54":791,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/673/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/673/timeline",{"_54":794,"_56":57,"_58":795,"_60":796,"_62":797,"_64":798,"_66":799,"_68":800,"_70":801,"_72":802,"_74":803,"_107":804,"_127":128,"_129":26,"_130":-5,"_131":807,"_133":808,"_155":148,"_149":810,"_151":810,"_154":-5,"_158":159,"_160":811,"_165":-5,"_166":812,"_168":813,"_180":815,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/667","https://api.github.com/repos/pro-collection/interview-question/issues/667/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/667/comments","https://api.github.com/repos/pro-collection/interview-question/issues/667/events","https://github.com/pro-collection/interview-question/issues/667",2079185674,"I_kwDOJGDC6c577dsK",667,"Protobuf 相关知识【热度: 216】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[805,806],{"_66":704,"_68":705,"_54":706,"_113":707,"_115":708,"_117":26,"_118":709},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":809,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-01-12T16:04:54Z",{"_162":148,"_163":148,"_164":148},"**关键词**：Protobuf 基本概念\n\n`Protobuf（Protocol Buffers）`是由 Google 开发的一种轻量级、高效的数据交换格式，它被用于结构化数据的序列化、反序列化和传输。相比于 XML 和 JSON 等文本格式，Protobuf 具有更小的数据体积、更快的解析速度和更强的可扩展性。\nProtobuf 的核心思想是使用协议（Protocol）来定义数据的结构和编码方式。使用 Protobuf，可以先定义数据的结构和各字段的类型、字段等信息，然后使用Protobuf提供的编译器生成对应的代码，用于序列化和反序列化数据。由于 Protobuf 是基于二进制编码的，因此可以在数据传输和存储中实现更高效的数据交换，同时也可以跨语言使用。\n\n相比于 XML 和 JSON，Protobuf 有以下几个优势：\n\n1. **可扩展性：** Protobuf 支持向已有的消息类型中添加新的字段，而不会破坏对旧数据的兼容性。这使得系统能够逐渐演进而不需要修改所有的代码。\n\n2. **高效性：** 相对于一些文本格式的序列化（如XML和JSON），Protobuf 使用二进制格式，因此更为紧凑，更高效地进行数据存储和传输。\n\n3. **语言中立：** Protobuf 支持多种编程语言，包括但不限于C++, Java, Python, Go等，这使得不同语言的系统能够使用相同的数据结构进行通信。\n\n4. **自动代码生成：** Protobuf 通过使用 .proto 文件定义消息结构，然后利用相应语言的编译器生成与消息结构对应的代码。这简化了开发过程，减少了手动编写序列化和反序列化代码的工作。\n\n5. **支持多种数据类型：** Protobuf 提供了丰富的基本数据类型，包括整数、浮点数、布尔值、字符串等，以及可以嵌套的消息类型，使得可以构建复杂的数据结构。\n\n6. **适用于网络通信：** Protobuf 在网络通信领域广泛应用，特别是在 gRPC 中作为默认的消息序列化格式。\n\n**可以参考文档**：https://zhuanlan.zhihu.com/p/141415216\n",{"_54":814,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/667/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/667/timeline",{"_54":817,"_56":57,"_58":818,"_60":819,"_62":820,"_64":821,"_66":822,"_68":823,"_70":824,"_72":825,"_74":826,"_107":827,"_127":128,"_129":26,"_130":-5,"_131":830,"_133":831,"_155":185,"_149":844,"_151":845,"_154":-5,"_158":159,"_160":846,"_165":-5,"_166":847,"_168":848,"_180":850,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/641","https://api.github.com/repos/pro-collection/interview-question/issues/641/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/641/comments","https://api.github.com/repos/pro-collection/interview-question/issues/641/events","https://github.com/pro-collection/interview-question/issues/641",1997174764,"I_kwDOJGDC6c53Cnfs",641,"nodejs 如何充分利用多核 CPU?【热度: 725】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[828,829],{"_66":445,"_68":446,"_54":447,"_113":448,"_115":449,"_117":26,"_118":450},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":832,"_64":833,"_58":834,"_66":835,"_68":836,"_70":837,"_72":838,"_118":839,"_143":840,"_145":841,"_147":148,"_127":128,"_149":842,"_151":843,"_153":-5,"_154":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/4","https://github.com/pro-collection/interview-question/milestone/4","https://api.github.com/repos/pro-collection/interview-question/milestones/4/labels",9124550,"MI_kwDOJGDC6c4AizrG",4,"资深","资深级别面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},48,"2023-03-06T15:00:45Z","2024-10-07T08:15:55Z","2023-11-16T15:48:37Z","2023-11-16T15:52:31Z",{"_162":148,"_163":148,"_164":148},"**关键词**：nodejs 多CPU使用\n\n总所周知， NodeJS 是单线程执行任务，不同于浏览器还可以使用 web worker 等手段多线程执行任务。那么 NodeJS 中，是如何充分利用物理机的多核 CPU 呢？\n\n### 有三种方式\n\n在 Node.js 中，JS 也是单线程的，只有一个主线程用于执行任务。但是，在 Node.js 中可以使用多进程来利用多核机器，以充分利用系统资源。\n\n- **Node.js 提供了 `cluster` 模块**，可以轻松创建子进程来处理任务。通过将任务分配给不同的子进程，每个子进程可以在自己的线程上执行任务，从而实现多核机器的利用。\n\n- **Node.js 也提供了 `worker_threads` 模块**，可以创建真正的多线程应用程序。这个模块允许开发者创建和管理多个工作线程，每个线程都可以独立地执行任务。\n\n- **利用的是 Node.js 的事件循环机制和异步非阻塞的 I/O 操作**。Node.js 使用事件驱动的模型来处理请求，当有请求到达时，Node.js 将其放入事件队列中，然后通过事件循环来处理这些请求。在等待 I/O 操作的过程中，Node.js 不会阻塞其他请求的处理，而是继续处理其他请求。这样，即使 JavaScript 是单线程的，但在实际运行中，多个请求可以同时处理，充分利用了多核系统的能力。\n\n### 如果 Nodejs 只写同步代码，是否意味着无法充分利用多核优势？\n\n如果在 Node.js 的开发过程中只使用同步代码而不使用异步代码或集群模块，**那么意味着无法充分利用机器多核优势**。\n\nNode.js的事件驱动和异步非阻塞的特性使得它在处理大量并发请求时非常高效。当你使用异步代码时，可以在等待 I/O 操作的过程中继续处理其他请求，从而提高系统的吞吐量和响应速度。而同步代码会阻塞事件循环，使得只能按顺序处理请求，无法同时处理多个请求，无法充分利用多核系统的能力。\n\n另外，如果你不使用集群模块，那么只有一个 Node.js 进程在运行，无法充分利用多核系统的资源。使用集群模块可以创建多个子进程，每个子进程在一个核心上运行，从而并行处理请求，提高系统的并发能力。\n\n### 为何 nodejs 异步代码就可以充分利用多核优势了？\n\nNode.js的异步代码可以充分利用多核优势，主要有两个原因：\n\n1. 事件驱动和非阻塞 I/O：Node.js采用事件驱动的模型，通过使用异步非阻塞 I/O 操作，可以在等待 I/O 操作完成的同时继续处理其他请求。这意味着在一个请求等待 I/O 的过程中，Node.js 可以同时处理其他请求，充分利用了 CPU 的多核能力。每个核心可以处理一个请求，从而提高系统的并发能力和吞吐量。\n\n2. 事件循环机制：Node.js的事件循环机制使得异步代码可以高效地处理大量并发请求。事件循环机制通过将请求注册为事件监听器，并在合适的时候触发事件处理函数，从而实现异步处理。这样一来，即使有大量并发请求，也能够通过事件循环机制避免线程切换的开销，提高系统的性能。\n\n需要注意的是，虽然 Node.js 的事件驱动和异步非阻塞的特性使得它能够充分利用多核优势，但是在处理 CPU 密集型任务时，仍然可能受限于单线程的性能。在这种情况下，可以通过使用集群模块来创建多个子进程，在每个核心上运行独立的 Node.js 进程，从而实现并行处理，提高系统的性能。\n\n### 异步就能充分利用 CPU 原理是啥？\n\n当Node.js使用异步代码时，服务器的其他CPU核心是在工作的。\n这是因为Node.js的事件驱动模型和非阻塞I/O使得在等待I/O操作完成时，可以同时处理其他请求。\n当一个请求在等待I/O操作时，CPU核心可以被用于处理其他请求，而不是空闲等待。\n这种方式可以充分利用服务器上的多个CPU核心，提高系统的并发能力和吞吐量。通过同时处理多个请求，可以更有效地利用服务器的资源，提高系统的性能。\n",{"_54":849,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/641/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/641/timeline",{"_54":852,"_56":57,"_58":853,"_60":854,"_62":855,"_64":856,"_66":857,"_68":858,"_70":859,"_72":860,"_74":861,"_107":862,"_127":128,"_129":26,"_130":-5,"_131":865,"_133":866,"_155":148,"_149":868,"_151":868,"_154":-5,"_158":159,"_160":869,"_165":-5,"_166":870,"_168":871,"_180":873,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/635","https://api.github.com/repos/pro-collection/interview-question/issues/635/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/635/comments","https://api.github.com/repos/pro-collection/interview-question/issues/635/events","https://github.com/pro-collection/interview-question/issues/635",1988970451,"I_kwDOJGDC6c52jUfT",635,"前端日志埋点 SDK 设计思路【热度: 755】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[863,864],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":867,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-11-11T14:18:02Z",{"_162":148,"_163":148,"_164":148},"**关键词**：前端埋点监控、埋点 SDK 设计\n\n### 前端日志埋点 SDK 设计思路\n\n既然涉及到了日志和埋点，分析一下需求是啥：\n\n- 自动化上报页面 PV、UV。如果能自动化上报页面性能，用户点击路径行为，就更好了。\n- 自动上报页面异常。\n- 发送埋点信息的时候，不影响性能，不阻碍页面主流程加载和请求发送。\n- 能够自定义日志发送，日志 scope、key、value。\n\n### SDK 设计\n\nsdk 的设计主要围绕以下几个话题来进行：\n\n- SDK 初始化\n- 数据发送\n- 自定义错误上报\n- 初始化错误监控\n- 自定义日志上报\n\n**最基本使用**\n\n```js\nimport StatisticSDK from 'StatisticSDK';\n// 全局初始化一次\nwindow.insSDK = new StatisticSDK('uuid-12345');\n\n\n\n```\n\n### 数据发送\n\n数据发送是一个最基础的api，后面的功能都要基于此进行。这里介绍使用 `navigator.sendBeacon` 来发送请求；具体原因如下\n\n使用 `navigator.sendBeacon()` 方法有以下优势：\n\n1. 异步操作：`navigator.sendBeacon()` 方法会在后台异步地发送数据，不会阻塞页面的其他操作。这意味着即使页面正在卸载或关闭，该方法也可以继续发送数据，确保数据的可靠性。\n\n2. 高可靠性：`navigator.sendBeacon()` 方法会尽可能地保证数据的传输成功。它使用浏览器内部机制进行发送，具有更高的可靠性和稳定性。即使在网络连接不稳定或断开的情况下，该方法也会尝试发送数据，确保数据的完整性。\n\n3. 自动化处理：`navigator.sendBeacon()` 方法会自动处理数据的发送细节，无需手动设置请求头、响应处理等。它会将数据封装成 POST 请求，并自动设置请求头和数据编码，使开发者能够更专注于业务逻辑的处理。\n\n4. 跨域支持：`navigator.sendBeacon()` 方法支持跨域发送数据。在一些情况下，例如使用第三方统计服务等，可能需要将数据发送到其他域名下的服务器，此时使用 `navigator.sendBeacon()`\n 方法可以避免跨域问题。\n\n需要注意的是，`navigator.sendBeacon()` 方法发送的数据是以 POST 请求的形式发送到服务器，通常会将数据以表单数据或 JSON 格式进行封装。因此，后端服务器需要正确处理这些数据，并进行相应的解析和处理。\n\n**简单介绍一下 `navigator.sendBeacon` 用法**\n\n语法：\n\n```js\nnavigator.sendBeacon(url);\nnavigator.sendBeacon(url, data);\n```\n\n参数\n\n- url\n - url 参数表明 data 将要被发送到的网络地址。\n\n- data 可选\n - data 参数是将要发送的 `ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams` 类型的数据。\n\n**发送代码实现如下**\n\n```js\nclass StatisticSDK {\n constructor(productID, baseURL) {\n this.productID = productID;\n this.baseURL = baseURL;\n }\n\n send(query = {}) {\n query.productID = this.productID;\n\n let data = new URLSearchParams();\n for (const [key, value] of Object.entries(query)) {\n data.append(key, value);\n }\n navigator.sendBeacon(this.baseURL, data);\n }\n}\n```\n\n### 用户行为与日志上报\n\n用户行为主要涉及到的是事件上报和 pv 曝光，借助 send 实现即可。\n\n```js\nclass StatisticSDK {\n constructor(productID, baseURL) {\n this.productID = productID;\n this.baseURL = baseURL;\n }\n\n send(query = {}) {\n query.productID = this.productID;\n\n let data = new URLSearchParams();\n for (const [key, value] of Object.entries(query)) {\n data.append(key, value);\n }\n navigator.sendBeacon(this.baseURL, data);\n }\n\n event(key, value = {}) {\n this.send({ event: key, ...value })\n }\n\n pv() {\n this.event('pv')\n }\n}\n```\n\n### 性能上报\n\n性能主要涉及的 api 为 performance.timing 里面的时间内容；\n\n```js\nclass StatisticSDK {\n constructor(productID, baseURL) {\n this.productID = productID;\n this.baseURL = baseURL;\n }\n\n send(query = {}) {\n query.productID = this.productID;\n\n let data = new URLSearchParams();\n for (const [key, value] of Object.entries(query)) {\n data.append(key, value);\n }\n navigator.sendBeacon(this.baseURL, data);\n }\n\n // ....\n initPerformance() {\n this.send({ event: 'performance', ...performance.timing })\n }\n}\n```\n\n### 错误上报\n\n错误上报分两类：\n\n一个是 dom 操作错误与 JS 错误报警，也是常说的运行时报错。该类报错直接可以通过 `addEventListener('error')` 监控即可；\n\n另一个是Promise内部抛出的错误是无法被error捕获到的，这时需要用`unhandledrejection`事件。\n\n```js\nclass StatisticSDK {\n constructor(productID, baseURL) {\n this.productID = productID;\n this.baseURL = baseURL;\n }\n\n send(query = {}) {\n query.productID = this.productID;\n\n let data = new URLSearchParams();\n for (const [key, value] of Object.entries(query)) {\n data.append(key, value);\n }\n navigator.sendBeacon(this.baseURL, data);\n }\n\n // ....\n error(err, errInfo = {}) {\n const { message, stack } = err;\n this.send({ event: 'error', message, stack, ...errInfo })\n }\n\n initErrorListenner() {\n window.addEventListener('error', event => {\n this.error(error);\n })\n window.addEventListener('unhandledrejection', event => {\n this.error(new Error(event.reason), { type: 'unhandledrejection' })\n })\n }\n}\n```\n\n### React 和 vue 错误边界\n\n错误边界是希望当应用内部发生渲染错误时，不会整个页面崩溃。我们提前给它设置一个兜底组件，并且可以细化粒度，只有发生错误的部分被替换成这个「兜底组件」，不至于整个页面都不能正常工作。\n\n**React**\n\n可以使用类组件错误边界来进行处理，涉及到的生命周期为：`getDerivedStateFromError` 和 `componentDidCatch`；\n\n```js\n// 定义错误边界\nclass ErrorBoundary extends React.Component {\n state = { error: null }\n static getDerivedStateFromError(error) {\n return { error }\n }\n componentDidCatch(error, errorInfo) {\n // 调用我们实现的SDK实例\n insSDK.error(error, errorInfo)\n }\n render() {\n if (this.state.error) {\n return

Something went wrong.

\n }\n return this.props.children\n }\n}\n...\n\n \n\n```\n\n**Vue**\n\nvue也有一个类似的生命周期来做这件事：`errorCaptured`\n\n```js\nVue.component('ErrorBoundary', {\n data: () => ({ error: null }),\n errorCaptured (err, vm, info) {\n this.error = `${err.stack}\\n\\nfound in ${info} of component`\n // 调用我们的SDK，上报错误信息\n insSDK.error(err,info)\n return false\n },\n render (h) {\n if (this.error) {\n return h('pre', { style: { color: 'red' }}, this.error)\n }\n return this.$slots.default[0]\n }\n})\n...\n\n \n\n```\n\n\n### 参考文档\n\nhttps://juejin.cn/post/7085679511290773534\n",{"_54":872,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/635/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/635/timeline",{"_54":875,"_56":57,"_58":876,"_60":877,"_62":878,"_64":879,"_66":880,"_68":881,"_70":882,"_72":883,"_74":884,"_107":885,"_127":128,"_129":26,"_130":-5,"_131":888,"_133":889,"_155":148,"_149":891,"_151":892,"_154":-5,"_158":159,"_160":893,"_165":-5,"_166":894,"_168":895,"_180":897,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/632","https://api.github.com/repos/pro-collection/interview-question/issues/632/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/632/comments","https://api.github.com/repos/pro-collection/interview-question/issues/632/events","https://github.com/pro-collection/interview-question/issues/632",1987850638,"I_kwDOJGDC6c52fDGO",632,"在前端应用如何进行权限设计？【热度: 329】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[886,887],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":890,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-11-10T15:33:25Z","2023-11-10T15:33:26Z",{"_162":148,"_163":148,"_164":148},"**关键词**：权限设计\n\n在前端应用的权限设计中，以下是一些建议：\n\n### 角色与权限分离\n将用户的权限分为不同的角色，每个角色拥有特定的权限。\n这样可以简化权限管理，并且当需求变化时，只需要调整角色的权限，而不需要逐个修改用户的权限。\n\n**在角色与权限分离的设计中，可以按照以下几个步骤进行**\n\n1. 确定权限集合：首先，需要确定系统中所有的权限，包括操作、功能、资源等。可以根据系统需求、业务流程等确定权限的粒度和层次结构。\n\n2. 确定角色集合：根据系统的角色需求，确定不同的角色，例如管理员、普通用户、编辑等。每个角色代表一组权限的集合，可以根据业务需求进行划分。\n\n3. 分配权限给角色：将权限与角色进行关联，确定每个角色具备哪些权限。可以通过角色-权限的映射表或者通过角色组的方式进行管理。\n\n4. 用户与角色关联：将用户与角色进行关联，确定每个用户属于哪些角色。可以通过用户-角色的映射表或者通过用户组的方式进行管理。\n\n5. 权限验证：在系统中，根据用户的角色和权限配置进行权限验证。在用户进行操作或访问受限资源时，根据用户的角色与权限进行验证，决定是否允许执行相应的操作。\n\n\n### 功能级权限控制\n对于敏感操作或者需要权限控制的功能，需要在前端实现功能级的权限控制。\n通过在代码中判断用户是否拥有执行该功能的权限，来决定是否展示或者禁用相关功能。\n\n**功能级权限控制是指在系统中对用户进行细粒度的权限控制，即控制用户是否能够执行某个具体的功能或操作。**\n以下是功能级权限控制的设计步骤：\n\n1. 确定功能点：首先，需要明确系统中的各个功能点，例如新增、编辑、删除、查询等。将系统中的所有功能进行明确定义和分类。\n\n2. 定义权限：对于每个功能点，定义相应的权限。权限可以使用权限名或者权限码进行标识，例如新增权限可以使用\"add\"或者权限码\"001\"进行标识。\n\n3. 角色与权限关联：将权限与角色进行关联。确定每个角色具备哪些权限。可以使用角色-权限的映射表进行管理。\n\n4. 用户与角色关联：将用户与角色进行关联。确定每个用户属于哪些角色。可以使用用户-角色的映射表进行管理。\n\n5. 权限验证：在系统中，对用户进行权限验证。当用户进行某个功能操作时，根据用户的角色与权限进行验证，决定是否允许执行该操作。\n\n6. 权限控制界面：提供一个权限控制界面，用于管理角色与权限的关联。管理员可以通过该界面对角色的权限进行配置和管理。\n\n7. 动态权限控制：可以考虑将权限控制设计成动态的。即在系统运行时，可以根据用户角色的配置动态控制用户是否具备某个功能的权限。这样可以灵活地根据业务需求进行权限的调整。\n\n\n### 路由级权限控制\n\n对于不同的页面或路由，可以根据用户的角色或权限来进行权限控制。在前端路由中配置权限信息，当用户访问特定路由时，前端会检查用户是否具备访问该路由的权限。\n\n**前端路由级权限控制是指在前端页面中根据用户的权限配置，控制用户是否可以访问某个路由或者页面。**\n以下是前端路由级权限控制的设计方案：\n\n1. 定义路由表：首先，需要定义系统中的所有路由和对应的页面组件。将路由按照功能模块进行分类，方便后续的权限管理。\n\n2. 定义权限配置：对于每个路由或者页面，定义相应的权限配置。可以使用权限名或者权限码进行标识，例如\"add\"、\"edit\"等。可以将权限配置与路由表一起存放在一个配置文件中，或者存放在后端数据库中。\n\n3. 获取用户权限：在登录成功后，从后端获取当前用户的权限信息。可以将用户的权限信息存放在前端的状态管理库（如Vuex或Redux）中，以便在全局范围内进行访问。\n\n4. 路由守卫：使用前端路由守卫机制，在路由跳转前进行权限验证。在路由守卫中，根据当前用户的权限信息和路由配置进行判断，决定是否允许用户访问该路由。如果用户没有相应的权限，可以进行跳转到无权限提示页面或者其他处理方式。\n\n5. 权限控制组件：可以创建一个权限控制组件，在需要进行权限控制的路由组件上使用该组件进行包裹。该组件可以根据当前用户的权限和路由配置，动态显示或隐藏路由组件。\n\n6. 动态路由：对于一些有权限控制的路由，可以在用户登录时根据权限配置动态生成。根据用户的权限配置，过滤路由表，生成用户可以访问的路由列表，并将该列表添加到路由配置中。\n\n\n### 动态权限管理\n\n在前端应用中，可以实现动态权限管理，即在用户登录时从服务器获取用户的权限信息，并在前端进行缓存。这样可以保证用户权限的实时性，同时也便于后端对权限进行调整和管理。\n\n### UI级的权限控制\n\n对于某些敏感信息或操作，可以通过前端的界面设计来进行权限控制。例如，隐藏某些敏感字段或操作按钮，只对具有相应权限的用户可见或可操作。\n\n### 异常处理与安全验证\n\n在前端应用中，需要实现异常处理机制，当用户越权操作时，需要给予相应提示并记录日志。同时，对于敏感操作，需要进行二次验证，例如通过输入密码或短信验证码等方式进行安全验证。\n\n### 安全性考虑\n\n在设计前端应用的权限时，需要考虑安全性，例如防止跨站脚本攻击（XSS）、跨站请求伪造（CSRF）等攻击方式。可以采用合适的安全措施，如输入验证、加密传输等来保护应用的安全性。\n\n综上所述，前端应用的权限设计应该考虑角色与权限分离、功能级与路由级的权限控制、动态权限管理、UI级的权限控制、异常处理与安全验证以及安全性考虑等方面。通过合理的权限设计，可以确保系统的安全性和用户权限的灵活管理。\n",{"_54":896,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/632/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/632/timeline",{"_54":899,"_56":57,"_58":900,"_60":901,"_62":902,"_64":903,"_66":904,"_68":905,"_70":906,"_72":907,"_74":908,"_107":909,"_127":128,"_129":26,"_130":-5,"_131":912,"_133":913,"_155":148,"_149":915,"_151":915,"_154":-5,"_158":159,"_160":916,"_165":-5,"_166":917,"_168":918,"_180":920,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/630","https://api.github.com/repos/pro-collection/interview-question/issues/630/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/630/comments","https://api.github.com/repos/pro-collection/interview-question/issues/630/events","https://github.com/pro-collection/interview-question/issues/630",1987802263,"I_kwDOJGDC6c52e3SX",630,"[低代码] 代码平台一般渲染是如何设计的？【热度: 399】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[910,911],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":832,"_64":833,"_58":834,"_66":835,"_68":836,"_70":837,"_72":838,"_118":839,"_143":914,"_145":841,"_147":148,"_127":128,"_149":842,"_151":843,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-11-10T15:06:06Z",{"_162":148,"_163":148,"_164":148},"**关键词**：代码平台渲染设计\n\n**渲染设计**\n\n渲染核心本质就是： [schema] + [组件] = [页面]\n\n### 整体架构如下\n\n![01](https://img.alicdn.com/imgextra/i1/O1CN01i4IiSR1cMtUFXaWQq_!!6000000003587-2-tps-1686-1062.png)\n\n- **协议层**：基于《低代码引擎搭建协议规范》产出的 Schema 作为我们的规范协议。\n- **能力层**：提供组件、区块、页面等渲染所需的核心能力，包括 Props 解析、样式注入、条件渲染等。\n- **适配层**：由于我们使用的运行时框架不是统一的，所以统一使用适配层将不同运行框架的差异部分，通过接口对外，让渲染层注册/适配对应所需的方法。能保障渲染层和能力层直接通过适配层连接起来，能起到独立可扩展的作用。\n- **渲染层**：提供核心的渲染方法，由于不同运行时框架提供的渲染方法是不同的，所以其通过适配层进行注入，只需要提供适配层所需的接口，即可实现渲染。\n- **应用层**：根据渲染层所提供的方法，可以应用到项目中，根据使用的方法和规模即可实现应用、页面、区块的渲染。\n\n\n### 设计模式渲染（Simulator）\n\n设计模式渲染就是将编排生成的《搭建协议》渲染成视图的过程，视图是可以交互的，所以必须要处理好内部数据流、生命周期、事件绑定、国际化等等。\n也称为画布的渲染，画布是 UI 编排的核心，它一般融合了页面的渲染以及组件/区块的拖拽、选择、快捷配置。 \n画布的渲染和预览模式的渲染的区别在于，画布的渲染和设计器之间是有交互的。\n所以在这里我们新增了一层 Simulator 作为设计器和渲染的连接器。 \nSimulator 是将设计器传入的 DocumentModel 和组件/库描述转成相应的 Schema 和组件类。再调用 Render 层完成渲染。我们这里介绍一下它提供的能力。\n\n![02](https://img.alicdn.com/imgextra/i2/O1CN017cYBAp1hvJKPUVLbx_!!6000000004339-2-tps-1500-864.png)\n\n- **Project**：位于顶层的 Project，保留了对所有文档模型的引用，用于管理应用级 Schema 的导入与导出。\n- **Document**：文档模型包括 Simulator 与数据模型两部分。Simulator 通过一份 Simulator Host 协议与数据模型层通信，达到画布上的 UI 操作驱动数据模型变化。通过多文档的设计及多 Tab 交互方式，能够实现同时设计多个页面，以及在一个浏览器标签里进行搭建与配置应用属性。\n- **Simulator**：模拟器主要承载特定运行时环境的页面渲染及与模型层的通信。\n- **Node**：节点模型是对可视化组件/区块的抽象，保留了组件属性集合 Props 的引用，封装了一系列针对组件的 API，比如修改、编辑、保存、拖拽、复制等。\n- **Props**：描述了当前组件所维系的所有可以「设计」的属性，提供一系列操作、遍历和修改属性的方法。同时保持对单个属性 Prop 的引用。\n- **Prop**：属性模型 Prop 与当前可视化组件/区块的某一具体属性想映射，提供了一系列操作属性变更的 API。\n- **Settings**：SettingField 的集合。\n- **SettingField**：它连接属性设置器 Setter 与属性模型 Prop，它是实现多节点属性批处理的关键。\n- **通用交互模型**：内置了拖拽、活跃追踪、悬停探测、剪贴板、滚动、快捷键绑定。\n\n\n### 模拟器\n\n![03](https://img.alicdn.com/imgextra/i2/O1CN01GF1PMj288kxovvnK8_!!6000000007888-2-tps-1500-740.png)\n\n- **运行时环境**：从运行时环境来看，目前我们有 React 生态、Rax 生态。而在对外的历程中，我们也会拥有 Vue 生态、Angular 生态等。\n- **布局模式**：不同于 C 端营销页的搭建，中后台场景大多是表单、表格，流式布局是主流的选择。对于设计师、产品来说，是需要绝对布局的方式来进行页面研发的。\n- **研发场景**：从研发场景来看，低代码搭建不仅有页面编排，还有诸如逻辑编排、业务编排的场景。\n\n\n### 参考\n\nhttps://lowcode-engine.cn/site/docs/guide/design/renderer\n",{"_54":919,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/630/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/630/timeline",{"_54":922,"_56":57,"_58":923,"_60":924,"_62":925,"_64":926,"_66":927,"_68":928,"_70":929,"_72":930,"_74":931,"_107":932,"_127":128,"_129":26,"_130":-5,"_131":935,"_133":936,"_155":148,"_149":938,"_151":939,"_154":-5,"_158":159,"_160":940,"_165":-5,"_166":941,"_168":942,"_180":944,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/629","https://api.github.com/repos/pro-collection/interview-question/issues/629/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/629/comments","https://api.github.com/repos/pro-collection/interview-question/issues/629/events","https://github.com/pro-collection/interview-question/issues/629",1987774102,"I_kwDOJGDC6c52ewaW",629,"[低代码] 代码平台一般底层协议是怎么设计的【热度: 263】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[933,934],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":832,"_64":833,"_58":834,"_66":835,"_68":836,"_70":837,"_72":838,"_118":839,"_143":937,"_145":841,"_147":148,"_127":128,"_149":842,"_151":843,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-11-10T14:49:15Z","2023-11-10T14:54:26Z",{"_162":148,"_163":148,"_164":148},"**关键词**：代码平台协议设计\r\n\r\n低代码引擎体系基于三份协议来构建: \r\n- [《低代码引擎搭建协议规范》](https://lowcode-engine.cn/site/docs/specs/lowcode-spec)\r\n- [《低代码引擎物料协议规范》](https://lowcode-engine.cn/site/docs/specs/material-spec)\r\n- [《低代码引擎资产包协议规范》](https://lowcode-engine.cn/site/docs/specs/assets-spec)\r\n\r\n![01](https://img.alicdn.com/imgextra/i3/O1CN01axsOyW1s01YgXnT8z_!!6000000005703-2-tps-1888-1000.png)\r\n\r\n\r\n**参考文档**\r\nhttps://lowcode-engine.cn/site/docs/guide/design/specs\r\n",{"_54":943,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/629/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/629/timeline",{"_54":946,"_56":57,"_58":947,"_60":948,"_62":949,"_64":950,"_66":951,"_68":952,"_70":953,"_72":954,"_74":955,"_107":956,"_127":128,"_129":26,"_130":-5,"_131":959,"_133":960,"_155":148,"_149":962,"_151":962,"_154":-5,"_158":159,"_160":963,"_165":-5,"_166":964,"_168":965,"_180":967,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/628","https://api.github.com/repos/pro-collection/interview-question/issues/628/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/628/comments","https://api.github.com/repos/pro-collection/interview-question/issues/628/events","https://github.com/pro-collection/interview-question/issues/628",1987758731,"I_kwDOJGDC6c52esqL",628,"[低代码] 代码平台一般架构设计如何【热度: 517】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[957,958],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":832,"_64":833,"_58":834,"_66":835,"_68":836,"_70":837,"_72":838,"_118":839,"_143":961,"_145":841,"_147":148,"_127":128,"_149":842,"_151":843,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-11-10T14:40:13Z",{"_162":148,"_163":148,"_164":148},"**关键词**：代码平台\n\n代码平台 - 架构综述\n\n**分层架构描述**\n\n![01](https://img.alicdn.com/imgextra/i4/O1CN016l8gDo1z7zlRlW1P0_!!6000000006668-2-tps-1920-1080.png)\n\n自下而上分别是协议 - 引擎 - 生态 - 平台。\n\n- 底层协议栈定义的是标准，标准的统一让上层产物的互通成为可能。\n- 引擎是对协议的实现，同时通过能力的输出，向上支撑生态开放体系，提供各种生态扩展能力。\n- 生态就好理解了，是基于引擎核心能力上扩展出来的，比如物料、设置器、插件等，还有工具链支撑开发体系。\n- 最后，各个平台基于引擎内核以及生态中的产品组合、衔接形成满足其需求的低代码平台。\n\n**引擎内核简述**\n\n![02](https://img.alicdn.com/imgextra/i1/O1CN01QUUVu21LjTXqY6H8I_!!6000000001335-2-tps-1920-1080.png)\n\n**引擎生态简述**\n![03](https://img.alicdn.com/imgextra/i2/O1CN01LkRseZ23W31l8DPzS_!!6000000007262-2-tps-1920-1080.png)\n\n![04](https://img.alicdn.com/imgextra/i4/O1CN01PYBVfZ1hL82XPrXzX_!!6000000004260-2-tps-1920-1080.png)\n\n\n**参考**\n\nhttps://lowcode-engine.cn/site/docs/guide/design/summary\n",{"_54":966,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/628/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/628/timeline",{"_54":969,"_56":57,"_58":970,"_60":971,"_62":972,"_64":973,"_66":974,"_68":975,"_70":976,"_72":977,"_74":978,"_107":979,"_127":128,"_129":26,"_130":-5,"_131":982,"_133":983,"_155":148,"_149":985,"_151":986,"_154":-5,"_158":159,"_160":987,"_165":-5,"_166":988,"_168":989,"_180":991,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/623","https://api.github.com/repos/pro-collection/interview-question/issues/623/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/623/comments","https://api.github.com/repos/pro-collection/interview-question/issues/623/events","https://github.com/pro-collection/interview-question/issues/623",1985957071,"I_kwDOJGDC6c52X0zP",623,"对 babel 的理解？【热度: 551】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[980,981],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":984,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-11-09T16:07:53Z","2023-11-09T16:07:54Z",{"_162":148,"_163":148,"_164":148},"**关键词**：babel 作用、为何要使用 babel\n\nBabel 是一个非常流行的 JavaScript 编译器，用于将最新版本的 ECMAScript 代码转换为向后兼容的 JavaScript 代码，以便在旧版浏览器或环境中运行。\n\n以下是对 Babel 的理解：\n\n1. 语法转换：Babel 可以将使用了最新 ECMAScript 标准的代码转换为被广泛支持的旧版 JavaScript 代码。例如，将使用了箭头函数、解构赋值等语法的代码转换为使用 function 关键字和传统赋值的等效代码。\n\n2. Polyfill：Babel 可以通过添加 Polyfill 来支持新的全局函数、方法和对象，以确保代码在旧版本的浏览器中正常运行。通过使用 Polyfill，Babel 可以在浏览器中模拟缺失的特性，使旧版浏览器能够运行使用了这些特性的代码。\n\n3. 插件系统：Babel 的核心功能可以通过插件进行扩展和定制。Babel 提供了众多的插件，用于实现不同的转换和功能。开发者可以根据自己的需求选择和配置相应的插件，以便将代码转换为特定的目标环境。\n\n4. 预设（Presets）：Babel 提供了预设的概念，可以一次性地配置一组插件，以实现特定的转换目标。预设是一组插件的集合，可以根据应用程序的需要进行选择和配置。常见的预设包括 \"@babel/preset-env\"（根据目标环境自动选择转换规则）和 \"@babel/preset-react\"（用于处理 React 相关的代码）。\n\n5. 与构建工具的集成：Babel 可以与构建工具（如 webpack、Rollup 等）无缝集成，作为其转换代码的一部分。通过配置构建工具，可以让 Babel 在构建过程中自动处理源代码，将其转换为目标代码。\n\n总之，Babel 是一个功能强大的 JavaScript 编译器，可以将使用最新 ECMAScript 标准的代码转换为向后兼容的 JavaScript 代码，从而在旧版浏览器或环境中运行。通过插件和预设的配置，Babel 提供了高度的灵活性，使开发者能够根据项目需求定制转换规则。\n\n\n**追问：为何要使用 babel**\n\n使用 Babel 的主要原因是为了解决 JavaScript 代码的兼容性问题。以下是一些使用 Babel 的主要理由：\n\n- 兼容旧版浏览器：不同的浏览器对 JavaScript 的支持程度不同，特别是旧版浏览器可能不支持最新的 ECMAScript 标准。通过使用 Babel，可以将使用了最新语法的代码转换为等效的旧版 JavaScript 语法，使代码能够在旧版浏览器中正常运行。\n\n- 支持新特性：JavaScript 不断演进，每年都会发布新的 ECMAScript 标准，引入了很多有用的特性和语法糖。使用 Babel 可以提前使用这些新特性，而不用等待浏览器的支持。Babel 可以将这些新特性转换为旧版 JavaScript 语法，以便在当前的浏览器环境中使用。\n\n- 模块化支持：Babel 可以转换模块化导入和导出的语法，使得开发者可以在浏览器中使用模块化的方式组织和管理代码。这样可以提高代码的可维护性和重用性。\n",{"_54":990,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/623/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/623/timeline","pagination",{"_994":335,"_162":837},"value","actionData","errors"]