前端甜糖
前端开发工程师
前端的一个小菜鸡
获得徽章 0
- #每天一个知识点# flexbox（弹性盒布局模型）是什么，适用什么场景？
Flexbox（弹性盒布局模型）是一种用于创建灵活且自适应的网页布局的 CSS 模块。它提供了一种在容器和其子元素之间建立灵活关系的方式，以实现多个元素的对齐、分布和调整大小。
适用场景
等高的多列布局：Flexbox 可以轻松创建等高的多列布局，使得每一列的高度相等，无论其内容的长度如何。
水平和垂直居中：Flexbox 提供了强大的对齐和居中功能，可以在容器中轻松实现水平和垂直居中元素。
自适应布局：Flexbox 具有弹性特性，可以根据可用空间自动调整项目的大小和位置，从而实现自适应的布局。
等间距的分布：通过使用 Flexbox 的 justify-content 和 align-items 属性，可以轻松地在容器中创建等间距的分布，使项目之间具有相等的间距。
响应式布局：Flexbox 是响应式设计的有力工具，可以通过简单的 CSS 更改来构建适应不同屏幕尺寸和设备类型的布局。
总结
Flexbox 是一种强大的 CSS 布局模块，适用于创建各种灵活和自适应的网页布局。它可以解决传统布局方式中的很多问题，并提供了更强大的对齐、居中和分布控制功能，使开发者能够更轻松地实现复杂的布局需求。展开赞过 评论3 - #每天一个知识点# 怎么让Chrome支持小于12px 的文字？
在默认情况下，Chrome 浏览器的最小字体大小限制为 12px，因此无法直接设置小于 12px 的文字大小。然而，可以通过以下方法绕过这个限制：
1、使用缩放比例：可以使用 CSS 的 transform 属性来缩放文本元素以达到小于 12px 的效果。例如，使用 transform: scale(0.8) 将文本缩放为 80% 的原始大小。请注意，这可能会导致文本外观变得模糊或失真。
2、使用 zoom：将容器或文本元素的 zoom 属性设置为小于 1 的值，例如 zoom: 0.8;。这会缩小文本元素及其容器，使得文本看起来更小。请注意，zoom 是非标准的 CSS 属性，不一定在所有浏览器中都有效。
3、使用 -webkit-text-size-adjust：将容器或文本元素的 -webkit-text-size-adjust 属性设置为 "none" 或 "auto" 可以控制 Chrome 浏览器对文本大小的调整行为。通过将其设置为 "none"，可以禁用 Chrome 浏览器的最小字体大小限制。请注意，-webkit-text-size-adjust 是针对 WebKit 内核（包括 Chrome 和 Safari）的私有属性。
4、使用图片替代：如果需要应用较小的文字大小，并且无法使用缩放，可以将文本转换为图像，并将其作为背景图像或内联图像插入到元素中。这样可以绕过浏览器的最小字体大小限制。但要注意，这将增加页面加载时间并且不利于可访问性和响应式设计。
无论选择哪种方法，都应该评估是否真正需要使用小于 12px 的文字大小，并确保在可读性、用户体验和跨浏览器兼容性方面做好测试和优化工作。展开赞过 13 - #每天一个知识点# 相比于npm和yarn，pnpm的优势是什么？
pnpm对比npm/yarn的优点：
更快速的依赖下载
更高效的利用磁盘空间
更优秀的依赖管理
pnpm 最近经常会听到，可以说是爆火。我梳理了下它爆火的原因：
npm2 是通过嵌套的方式管理 node_modules 的，会有同样的依赖复制多次的问题。
npm3+ 和 yarn 是通过铺平的扁平化的方式来管理 node_modules，解决了嵌套方式的部分问题，但是引入了幽灵依赖的问题，并且同名的包只会提升一个版本的，其余的版本依然会复制多次。
pnpm 则是用了另一种方式，不再是复制了，而是都从全局 store 硬连接到 node_modules/.pnpm，然后之间通过软链接来组织依赖关系。
这样不但节省磁盘空间，也没有幽灵依赖问题，安装速度还快，从机制上来说完胜 npm 和 yarn。
pnpm 就是凭借这个对 npm 和 yarn 降维打击的。展开等人赞过 55 - #每天一个知识点# 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？
1、异步执行：将函数调用转换为异步操作，使用setTimeout或requestAnimationFrame等方法将函数分散到多个时间片中执行。这样可以避免一次性执行大量函数造成的阻塞。
2、分批处理：将函数分批执行，而不是一次性执行所有函数。可以使用循环和计数器来控制每个批次的函数数量，并在每个批次之间添加适当的延迟，以确保主线程有足够的空闲时间处理其他任务。
3、Web Worker：将函数放入Web Worker中执行，以在后台线程中进行计算，避免阻塞主线程。Web Worker可以独立于主线程运行，并发出消息来与主线程通信。
4、函数优化：检查需要执行的函数是否可以进行优化，例如减少计算量、缓存结果、避免重复计算等。通过优化单个函数的执行效率，可以减少整体执行的时间和资源消耗。
5、任务调度库：使用第三方任务调度库，如async.js或p-queue等，来管理并行执行和限制同时执行的函数数量。这些库提供了更灵活的任务管理和控制，可以根据需求进行配置和调整。
具体的处理方式取决于应用程序的需求和场景，以及函数之间是否有依赖关系。选择最合适的方法时，需要综合考虑性能、可维护性和代码复杂度等因素，并进行必要的测试和性能评估。展开赞过 评论3 - #每天一个知识点# 什么是 CI/CD？
CI/CD是持续集成（Continuous Integration）和持续交付/持续部署（Continuous Delivery/Continuous Deployment）的缩写。
持续集成（Continuous Integration，CI）：CI是一种开发实践，通过频繁地将代码集成到共享的版本控制库中，并自动进行构建、测试和静态代码分析等过程，以早期发现和解决代码集成问题。主要目标是减少集成冲突和快速反馈，提高开发团队的协作效率和代码质量。
持续交付/持续部署（Continuous Delivery/Continuous Deployment，CD）：CD是在CI的基础上进一步自动化整个软件交付流程的实践。持续交付指将软件交付到可部署环境的过程，包括自动化构建、自动化测试、文档生成和打包等，以确保每次交付都是可靠和可重复的。持续部署则更进一步，指将软件自动部署到生产环境，从而减少人工干预和降低发布的风险。
CI/CD的目标是通过自动化和持续的流程来提高软件开发和交付的效率、质量和可靠性。它帮助团队集中精力于开发新功能，并能够快速、频繁地将这些功能交付给最终用户。CI/CD在现代软件开发中被广泛采用，为团队提供了一种更加可靠和高效的软件交付方式。展开赞过 评论2 - #每天一个知识点# 说说addEventListener 第三个参数
addEventListener 语法
addEventListener(type, listener); addEventListener(type, listener, options); addEventListener(type, listener, useCapture);
参数
type表示监听事件类型的大小写敏感的字符串。
listener当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。
options 可选一个指定有关 listener 属性的可选参数对象。可用的选项如下：
capture 可选一个布尔值，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
once 可选一个布尔值，表示 listener 在添加之后最多只调用一次。如果为 true，listener 会在其被调用之后自动移除。
passive 可选一个布尔值，设置为 true 时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
signal 可选AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。
useCapture 可选一个布尔值，表示在 DOM 树中注册了 listener 的元素，是否要先于它下面的 EventTarget 调用该 listener。当 useCapture（设为 true）时，沿着 DOM 树向上冒泡的事件不会触发 listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。如果没有指定，useCapture 默认为 false。展开赞过 评论2 - #每天一个知识点# object-fit 用法
object-fit CSS 属性指定可替换元素（例如：<img> 或 <video>）的内容应该如何适应到其使用高度和宽度确定的框。
你可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。
语法
object-fit: contain; object-fit: cover; object-fit: fill; object-fit: none; object-fit: scale-down; /* Global values */ object-fit: inherit; object-fit: initial; object-fit: revert; object-fit: revert-layer; object-fit: unset;
object-fit 属性由下列的值中的单独一个关键字来指定。
contain
被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover
被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
fill
被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
none
被替换的内容将保持其原有的尺寸。
scale-down
内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。展开赞过 评论2 - #每天一个知识点# 实现lodash的set和get方法
set 方法可以根据提供的路径（以点分隔）设置对象的值，如果路径上的嵌套对象不存在，则会递归创建。
get 方法会根据提供的路径获取对象中的值，如果路径上的某个键不存在或对象中断，返回 undefined。
下面是提供的参考：
function set(object, path, value) {
const keys = path.split('.');
let current = object;
for (let i = 0; i < keys.length - 1; i++) {
const key = keys[i];
if (!(key in current)) {
// Create nested objects if the key doesn't exist
current[key] = {};
}
current = current[key];
}
current[keys[keys.length - 1]] = value;
}
function get(object, path) {
const keys = path.split('.');
let current = object;
for (const key of keys) {
if (typeof current !== 'object' || !(key in current)) {
return undefined;
}
current = current[key];
}
return current;
}
下面是使用的示例：
const obj = {
foo: {
bar: {
baz: 'Hello, World!'
}
}
}
set(obj, 'foo.bar.baz', 'New Value');
console.log(get(obj, 'foo.bar.baz')); // Output: New Value展开赞过 12