LOADING

问题回答

2023/5/3

svg 改颜色

svg 改颜色是改 fill 属性

nvm

nvm 是 node 版本管理工具

uitls 和 hooks 的区别

utils是通用的工具函数，一般是纯函数 ，工具类方法；而hooks是对utils的一种封装，用于在组件中共享状态逻辑和副作用，带有生命周期或者是 vue api 的，涉及到变量保存等，通过使用 hooks，我们可以将组件的状态和生命周期方法提取出来，并在多个组件之间共享和重用。这样可以减少代码重复，提高代码的可读性和可测试性。hooks 里会用到 vue 的一些方法，比如 ref，watch，调用 pinia 数据等。

JavaScript 和 json

JSON 语法支持三种类型的值，分别是简单值，对象，数组，特殊值 undefined 不可以。

json 格式的 key 必须是字符串(“ “),其他使用无区别。

可以使用 JSON.stringify()和 JSON.parse()进行转换

JSON

JavaScript Object Notation JS 对象表示法

JSON 和 JS 对象的格式一样，只不过 JSON 字符串中的属性名必须加双引号

其他的和 JS 语法一致

json –> js 对象

JSON.parse()

可以将以 JSON 字符串转换为 js 对象

它需要一个 JSON 字符串作为参数，会将该字符串转换为 JS 对象并返回

var o = JSON.parse(json);

JS 对象 —> JSON

JSON.stringify()

可以将一个 JS 对象转换为 JSON 字符串

需要一个 js 对象作为参数，会返回一个 JSON 字符串

var str = JSON.stringify(obj3);

requestAnimationFrame

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行 顾名思义，请求动画帧，也称 帧循环。 其实就是该 API 能以浏览器的显示频率来作为其动画动作的频率，比如浏览器每 16.7ms 刷新一次，动画回调也每 16.7ms 调用一次，这样就不会存在过度绘制的问题，动画不会掉帧，自然流畅。

回调函数执行次数通常是每秒 60 次，但在大多数遵循 W3C 建议的浏览器中，回调函数执行次数通常与 浏览器屏幕刷新次数 相匹配。 屏幕刷新频率（次数）： 屏幕每秒出现图像的次数。普通笔记本为 60Hz。

相对定时器的优势

由系统决定回调函数的执行时间,保证回调函数在屏幕每次的刷新间隔中只被执行一次,不丢帧,不卡顿.

CPU 节能

定时器：当页面被隐藏或最小化时,后台仍在执行动画任务,浪费资源,

requestAnimationFrame：在页面处理为未激活的状态下,屏幕刷新任务也会被系统暂停,因此跟着屏幕刷新率走的 requestAnimationFrame 也会停止渲染,当页面再次被激活时,动画再次从上次停留的地方继续执行,节省 CPU 开销

函数节流

保证每个刷新间隔期间的刷新只被执行一次,既保证流畅性,又节省函数执行的开销,假设屏幕是 60hz 的刷新率,那么显示器每 1000/60≈16.7 毫秒刷新一次,多次绘制并不会在屏幕表现出来.

定义
let i = 0;
function step(timestamp) {
   console.log(i++);
   window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);


清除
let myReq;
let i = 0;
function step(timestamp) {
   console.log(i++);
   myReq = window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);

document.onclick = function(){
   window.cancelAnimationFrame(myReq);    // 专属清除方式
}

内存泄露

如果一个东西浏览器检测到你永远都不会再用了，那他就会清理垃圾，否则如果一个东西被引用，但你不会去用，那你就要手动释放

icofont 与 svg 图片的选择

当在代码中选择使用 Iconfont 图标还是 SVG 图片时，有几个方面需要考虑：

1. 性能

  • Iconfont：
    • 优点：加载较快，因为图标被合并成一个字体文件，浏览器只需下载一次，并且字体文件通常较小。图标是以字体的形式存在，因此减少了 HTTP 请求。
    • 缺点：如果图标集很大，可能会导致字体文件的大小增加，从而影响加载时间。对于只需要少量图标的场景，这通常不是问题。
  • SVG：
    • 优点：单个 SVG 文件通常比较小，而且可以进行压缩。SVG 文件是矢量图形，因此在不同分辨率下不会失真。
    • 缺点：每个 SVG 文件都需要单独加载，可能会增加 HTTP 请求次数，尽管使用 SVG Sprites 可以解决这个问题。

2. 可维护性

  • Iconfont：
    • 优点：如果使用 Iconfont 的图标库，图标的管理和维护比较集中。修改图标或替换图标库时，通常只需更新字体文件。
    • 缺点：定制图标时可能不够灵活，如果需要使用不在图标库中的图标，可能需要重新生成字体文件。
  • SVG：
    • 优点：SVG 图标通常易于定制，可以直接编辑 SVG 文件以更改颜色、大小等属性。SVG 图标可以嵌入到 HTML 中，也可以作为外部文件引入，提供了更多灵活性。
    • 缺点：管理多个 SVG 文件可能会变得复杂，尤其是当有很多图标时。

3. 样式和交互

  • Iconfont：
    • 优点：可以通过 CSS 样式轻松控制图标的颜色、大小、阴影等。图标作为字体的一部分，因此可以使用类似于文本的样式。
    • 缺点：对复杂交互的支持有限。如果需要复杂的动画效果或交互，可能需要额外的 JavaScript 和 CSS 处理。
  • SVG：
    • 优点：SVG 支持丰富的样式和交互效果。你可以通过 CSS 和 JavaScript 控制 SVG 图标的细节，例如应用渐变、动画等。SVG 图标可以非常灵活地与页面元素互动。
    • 缺点：复杂的 SVG 文件可能会增加代码复杂性。

4. 兼容性和支持

  • Iconfont：
    • 优点：广泛兼容，几乎所有现代浏览器都支持字体图标。
    • 缺点：老旧浏览器或某些特定环境下的支持可能不如 SVG。
  • SVG：
    • 优点：现代浏览器普遍支持 SVG，包括对 SVG 的动画和交互支持。
    • 缺点：老旧浏览器的支持较差，不过在现代 Web 开发中，这通常不是主要问题。

5. 访问性

  • Iconfont：
    • 优点：可以通过 CSS 添加aria-label等属性来改善访问性，但这需要额外的工作。
    • 缺点：图标作为字体可能不如 SVG 直接支持访问性特性。
  • SVG：
    • 优点：SVG 本身可以包含aria-label、role等访问性标签，使得屏幕阅读器更容易识别和解释图标。
    • 缺点：需要确保正确使用访问性标签，否则可能会影响使用屏幕阅读器的用户。

总结

  • 如果你需要快速、简洁的图标集，并且对样式和交互要求不高，Iconfont可能是一个合适的选择。
  • 如果你需要高度自定义的图标，并且需要复杂的样式和交互，SVG可能更适合你。

最终的选择取决于你的具体需求，包括项目的复杂性、性能要求和可维护性等因素。