花圃

# 我们写的 JSX 最后变成了什么样子 # React17 之前 # 利用 babel 将 JSX 转换成 React.createElement 的函数的形式，从而转换成 ReactElement 原始的 jsx 代码 <div> <TextComponent /> <div>hello,world</div> let us learn React!</div> babel 转换之后的形式 React.createElement( 'div', null,...

# 前端埋点 sdk 搭建实践总结 # 前端搭建监控体系是为了什么？ # 及时发现问题 能够通过收集的性能指标，及时发现存在的性能问题 能够通过白屏监控，及时发现出现了白屏问题 能够通过通过 pv，uv 的变化，及时发现活跃量的变化；通过用户行为的监控，收集到用户的行为信息，从而进行针对性推荐和优化 能够异常上报，及时发现各种异常、 能够通过接口调用情况监控，及时发现流量大的后端服务，高频出错的后端服务 #...

# 1. 常见的 loader 资源加载处理 file-loader : 通常用来处理图片和字体，用来将文件输出到一个文件夹中，代码中通过相对 url 来引用输出的文件 url-loader ：和 file-loader 类似，不同的是可以设定一个阈值，小于这个阈值的返回它的 base-64 形式编码，大的交给 file-loader 处理 image-loader ：用来加载和压缩图片 svg-inline-loader ：用来将压缩后的 svg 内容注入到代码中 json-loader ：用来加载 json 代码加载处理转换 ts-loader : 用来将 ts 转换成...

# 什么是 BFC BFC 就是一个 css 布局区域，这个区域内元素布局有一定的规则 # 哪些元素是 BFC（怎么让元素成为 BFC） body 标签就是一个 bfc inline-block 是 bfc float 的元素 是 bfc 除了 static, relative 的定位元素 是 bfc overflow 设置为 hidden，auto 的元素 是 bfc # BFC 的规则，BFC 的特点 BFC 区域内的普通的块级元素垂直方向由上到下排列 我们平时写的 html 标签都在 body 标签里面，也就是都在 bfc...

# 什么是原子化 css 原子化 css 就是提供了很多 preset class （预设类），就是提前写好了很多类名，这些类名都有自己的样式，可以直接用这些类名，就不需要写 css 了（提供的预设类是足够的，完全不需要写 css） # 早期原子化 css 带来的问题（现在都解决了） 不能按需引入预设类，导致项目里有很多用不上的预设类，影响构建速度 解决方案：现在可以构建阶段扫描代码，能够按照代码中的实际使用情况生成工具类，解决了原子类使 CSS 产物膨胀问题。 不能使用提供的预设类来自定义类，导致不能完全脱离 css 代码 解决方案：针对原子类堆叠降低可读性的问题，提供了 @apply...

# 前端监控中发送数据通常有什么样的问题 前端监控中通常尝试在卸载（unload）文档之前向 Web 服务器发送数据。 过早的发送数据可能导致错过收集数据的机会。 然而，对于开发者来说保证在文档卸载期间发送数据一直是一个困难。 在 unload 时，无法保证数据被可靠的稳定的发送出去了，因为浏览器通常会忽略在 unload 事件处理器中产生的异步 XMLHttpRequest。 发送数据可能会迫使浏览器延迟卸载文档，并使得下一个导航出现的更晚。 # 各种技术发送数据时的优缺点 # XMLHttpRequest 或 Fetch API： # 优点： 支持各种请求方法：...

# 基础语法 # 分隔符和片段 # 概念： 分隔符是・，通过・得到的数组每一项是片段。 # 示例： src/index.js 有两个片段，分别是 src 和 index.js src/**/*.js 有三个片段，分别是 src 、 ** 和 *.js # 单个星号 # 概念： 单个星号 * 用于匹配单个片段中的零个或多个字符。 # 示例： src/*.js 表示 src 目录下所有以 js 结尾的文件，但是不能匹配 src 子目录中的文件，例如 src/login/login.js /home/*/.bashrc 匹配所有用户的 .bashrc 文件 需要注意的是， * 不能匹配分隔符...

# 创建本地 git 仓库 git init 会在当前目录下创建一个.git 隐藏文件夹 # 将本地仓库和远程仓库相关联 git remote add origin <registry-url> 将本地仓库和远程仓库相关联 git remote -v 查看关联的远程仓库 # 将本地对应的代码提交到暂存区： git add <file> 将指定的 file 提交到暂存区 git add . 将所有有变动的文件提交到暂存区 # 将暂存区的代码提交到本地 git 仓库： git commit -m...

# npm link 的应用场景 开发脚手架时，在本地调试命令 开发脚手架时，在项目所在目录，执行 npm link 命令，就可以在全局执行项目的 package.json 文件的 bin 属性里面配置的命令 可以在项目里，直接使用本地包，从而对本地包进行调试 当我们开发包 a 时，可以在发布前直接 npm link ，将包 a 链接到全局，然后在项目里 npm link a ，这样就可以在项目里面使用包 a ，从而对包进行调试 MultiRepo 多仓库多模块应用 本地开发时，多模块之间共享代码的一种解决方案 当仓库 a 要使用仓库 b 提供的代码的时候，可以在 b 仓库目录下， npm...

# Monolith 和 MultiRepo 存在什么问题 # Monolith 单仓库巨石应用 用一个 git 仓库来维护项目代码，随着业务复杂度的上升，代码量会急剧上升，最终项目会变得十分庞大，复杂， 难以继续维护，更新迭代，并且构建效率也会降低。 存在的问题： 代码耦合度非常高，可能改了这里，又会影响那里，并且当我们排查问题时，难度也变得非常高，可能很多时间都花在了找代码上面。 代码量非常大，项目构建的效率低下，明明只改了一点点代码，却要重新构建整个代码，构建花费的时间非常长。 # MultiRepo 多仓库多模块应用 将一个项目拆解为多个多个模块，放在多个 git...