Benediximus
获得徽章 0
#挑战每日一条沸点# DAY18：文章主要内容涵盖了 JavaScript 中用于判断变量类型的方法，包括typeof、instanceof以及Object.prototype.toString.call()。
1、typeof：
①typeof用于判断变量的基本类型，返回一个字符串表示变量的类型。
②可以识别的类型有：number、string、object、boolean、symbol、function、undefined、bigInt。
③实现原理是通过检查变量的机器码的低位，最初版本使用类型标记位来判断数据类型。
2、instanceof：
①instanceof用于判断一个实例是否属于某一类型，返回布尔值。
②适用于复杂引用数据类型判断，无法准确判断基本数据类型。
③实现原理是通过在原型链上查找，比较实例的原型与目标类型的原型是否相等。
3、Object.prototype.toString.call()：
①通过调用对象的原型上的 toString 方法来判断数据类型，返回一个描述类型的字符串。
②可以准确判断复杂引用数据类型和基本数据类型（除了 null）。
③适用于通用检测数据类型的场景。
4、注意：
①typeof 和 instanceof 都有一些局限性，不能完全满足所有类型判断的需求。
②instanceof 只能判断复杂引用数据类型，无法准确判断基本数据类型。
③typeof 无法判断除了函数以外的引用数据类型。
④对于通用的数据类型检测，可以使用 Object.prototype.toString.call() 方法。
总之，虽然 typeof 和 instanceof 在特定情况下可以使用，但在处理多样化的数据类型判断时，Object.prototype.toString.call() 是一个更为通用且可靠的方法。
1、typeof：
①typeof用于判断变量的基本类型，返回一个字符串表示变量的类型。
②可以识别的类型有：number、string、object、boolean、symbol、function、undefined、bigInt。
③实现原理是通过检查变量的机器码的低位，最初版本使用类型标记位来判断数据类型。
2、instanceof：
①instanceof用于判断一个实例是否属于某一类型，返回布尔值。
②适用于复杂引用数据类型判断，无法准确判断基本数据类型。
③实现原理是通过在原型链上查找，比较实例的原型与目标类型的原型是否相等。
3、Object.prototype.toString.call()：
①通过调用对象的原型上的 toString 方法来判断数据类型，返回一个描述类型的字符串。
②可以准确判断复杂引用数据类型和基本数据类型（除了 null）。
③适用于通用检测数据类型的场景。
4、注意：
①typeof 和 instanceof 都有一些局限性，不能完全满足所有类型判断的需求。
②instanceof 只能判断复杂引用数据类型，无法准确判断基本数据类型。
③typeof 无法判断除了函数以外的引用数据类型。
④对于通用的数据类型检测，可以使用 Object.prototype.toString.call() 方法。
总之，虽然 typeof 和 instanceof 在特定情况下可以使用，但在处理多样化的数据类型判断时，Object.prototype.toString.call() 是一个更为通用且可靠的方法。
展开
评论
点赞
#挑战每日一条沸点# DAY17：文章主要内容讨论了在 Vue 中为什么不推荐使用索引（index）作为 key 属性，以及涉及到的虚拟 DOM、key 的作用以及 diff 算法等概念。
1、key 属性的作用：
key 是 Vue 中在使用 v-for 遍历元素列表时需要加上的一个属性，它在虚拟 DOM 中用来标识唯一的节点。通过 key，Vue 的 diff 算法能更准确、高效地定位需要进行比较和更新的节点，从而提升性能。
2、虚拟 DOM：
Vue 中使用虚拟 DOM 技术来减少对真实 DOM 的频繁操作，从而提高性能。虚拟 DOM 是一个以 JavaScript 对象为基础的树状结构，描述了页面的结构和状态，可以在数据发生变化时，通过比较新旧虚拟 DOM 来确定需要更新的部分，然后再将这些变更应用到真实 DOM。
3、Diff 算法：
Diff 算法是虚拟 DOM 的核心部分，它用于比较新旧虚拟 DOM，找出差异并更新页面。通过比较新旧虚拟 DOM 树的节点，Diff 算法能够尽可能地复用已有的 DOM 节点，从而减少 DOM 操作的次数，提高性能。
4、为什么不推荐使用索引作为 key：
在 Vue 中，不推荐使用索引作为 key 的原因有几点：
①复用性问题： 使用索引作为 key 会导致 Vue 在更新时难以区分不同的元素，可能会引发一系列 bug，尤其在列表中元素被添加、删除或排序时。
②性能问题： 使用索引作为 key 会降低 diff 算法的效率，因为它不能准确地判断节点的变化情况，从而可能导致不必要的 DOM 更新。
③无法识别节点： 索引作为 key 无法正确识别节点，如果列表中的元素发生改变，Vue 无法正确地定位并更新对应的节点，可能导致错误的更新结果。
总之，虽然在某些简单的场景下，使用索引作为 key 可能看起来方便和直观，但从整体性能和代码稳定性的角度考虑，不推荐这种做法。更好的做法是使用唯一且稳定的标识符作为 key，例如每个元素的唯一 id，从而确保 diff 算法能够准确识别和更新节点。
1、key 属性的作用：
key 是 Vue 中在使用 v-for 遍历元素列表时需要加上的一个属性，它在虚拟 DOM 中用来标识唯一的节点。通过 key，Vue 的 diff 算法能更准确、高效地定位需要进行比较和更新的节点，从而提升性能。
2、虚拟 DOM：
Vue 中使用虚拟 DOM 技术来减少对真实 DOM 的频繁操作，从而提高性能。虚拟 DOM 是一个以 JavaScript 对象为基础的树状结构，描述了页面的结构和状态，可以在数据发生变化时，通过比较新旧虚拟 DOM 来确定需要更新的部分，然后再将这些变更应用到真实 DOM。
3、Diff 算法：
Diff 算法是虚拟 DOM 的核心部分，它用于比较新旧虚拟 DOM，找出差异并更新页面。通过比较新旧虚拟 DOM 树的节点，Diff 算法能够尽可能地复用已有的 DOM 节点，从而减少 DOM 操作的次数，提高性能。
4、为什么不推荐使用索引作为 key：
在 Vue 中，不推荐使用索引作为 key 的原因有几点：
①复用性问题： 使用索引作为 key 会导致 Vue 在更新时难以区分不同的元素，可能会引发一系列 bug，尤其在列表中元素被添加、删除或排序时。
②性能问题： 使用索引作为 key 会降低 diff 算法的效率，因为它不能准确地判断节点的变化情况，从而可能导致不必要的 DOM 更新。
③无法识别节点： 索引作为 key 无法正确识别节点，如果列表中的元素发生改变，Vue 无法正确地定位并更新对应的节点，可能导致错误的更新结果。
总之，虽然在某些简单的场景下，使用索引作为 key 可能看起来方便和直观，但从整体性能和代码稳定性的角度考虑，不推荐这种做法。更好的做法是使用唯一且稳定的标识符作为 key，例如每个元素的唯一 id，从而确保 diff 算法能够准确识别和更新节点。
展开
评论
点赞
#挑战每日一条沸点# DAY16：上文介绍了微前端的概念以及不同的实施方式，特别是对于iframe这一实现方式进行了详细的讨论。微前端是一种类似于微服务的架构，将微服务的思想应用于前端，将单一的前端应用拆分为多个小型前端应用，实现独立运行、开发和部署。微前端的目的包括减少团队等待时间、摆脱前端巨石架构等。
在介绍微前端的实施方式时，文章提到了几种常见的方法，包括路由分发式微前端、iframe、ajax、Web Component、single-spa、qiankun、以及micro-app。这些方法各有优缺点，可以根据具体情况进行选择。文章还特别深入讨论了iframe实现方式，介绍了其优点、缺点以及可能面临的问题。
此外，文章还提到了微前端蓝图的概念，即为新团队提供一个示例项目，包括技术细节和项目细节，以帮助团队快速上手微前端开发，提高开发效率。
在介绍微前端的实施方式时，文章提到了几种常见的方法，包括路由分发式微前端、iframe、ajax、Web Component、single-spa、qiankun、以及micro-app。这些方法各有优缺点，可以根据具体情况进行选择。文章还特别深入讨论了iframe实现方式，介绍了其优点、缺点以及可能面临的问题。
此外，文章还提到了微前端蓝图的概念，即为新团队提供一个示例项目，包括技术细节和项目细节，以帮助团队快速上手微前端开发，提高开发效率。
展开
评论
点赞
#挑战每日一条沸点# DAY15：文章是一篇关于如何使用阿里的开源表单框架 Formily.js 快速实现一个登录表单的教程。以下是内容的简要总结：
Formily.js 是阿里巴巴开源的表单框架，它提供了一个解决方案来处理复杂的表单场景，具有高性能、跨端能力、联动逻辑实现等优势。
核心优势包括高性能、开箱即用、联动逻辑高效实现、跨框架和跨终端复用以及动态渲染能力。
Formily.js 可以解决复杂场景下的表单性能问题，实现复杂的表单联动逻辑，管理表单状态，实现表单的场景化复用，甚至后端也能使用它来搭建前端表单。
Formily.js 提供了三种渲染模式，分别是 JSX、Markup Schema 和 JSON Schema，其中 Markup Schema 和 JSON Schema 可以描述表单结构。
通过使用 @formily/core 和 @formily/react 包，可以基于 JSON Schema 渲染表单结构，同时也支持自定义表单组件。
在 Formily.js 中，可以使用 x-reactions 参数实现表单项之间的联动展示和校验，主动联动和被动联动分别用于不同情况。
表单项的联动校验也可以通过在 x-reactions 中使用函数实现，根据表单项的值进行判断并设置错误信息。
Formily.js 还提供了模型 inspector 工具，用于查看表单字段的内置状态，以便进行开发和调试。
另外，Formily.js 还支持拖拽开发和可视化表单开发。
综上所述，Formily.js 是一个适用于复杂表单场景的表单框架，提供了丰富的功能和特性，使表单开发变得更加高效和灵活。
Formily.js 是阿里巴巴开源的表单框架，它提供了一个解决方案来处理复杂的表单场景，具有高性能、跨端能力、联动逻辑实现等优势。
核心优势包括高性能、开箱即用、联动逻辑高效实现、跨框架和跨终端复用以及动态渲染能力。
Formily.js 可以解决复杂场景下的表单性能问题，实现复杂的表单联动逻辑，管理表单状态，实现表单的场景化复用，甚至后端也能使用它来搭建前端表单。
Formily.js 提供了三种渲染模式，分别是 JSX、Markup Schema 和 JSON Schema，其中 Markup Schema 和 JSON Schema 可以描述表单结构。
通过使用 @formily/core 和 @formily/react 包，可以基于 JSON Schema 渲染表单结构，同时也支持自定义表单组件。
在 Formily.js 中，可以使用 x-reactions 参数实现表单项之间的联动展示和校验，主动联动和被动联动分别用于不同情况。
表单项的联动校验也可以通过在 x-reactions 中使用函数实现，根据表单项的值进行判断并设置错误信息。
Formily.js 还提供了模型 inspector 工具，用于查看表单字段的内置状态，以便进行开发和调试。
另外，Formily.js 还支持拖拽开发和可视化表单开发。
综上所述，Formily.js 是一个适用于复杂表单场景的表单框架，提供了丰富的功能和特性，使表单开发变得更加高效和灵活。
展开
评论
点赞
#挑战每日一条沸点# DAY14：文章讨论了WebAssembly（WASM）是否可以取代容器化技术，以及WASM的发展历程和特点。文章指出，尽管WASM和容器化技术都有各自的优势和应用场景，但WASM在某些情况下可以作为一种替代性选择。WASM具有跨平台性、更好的资源控制、包含所有必要组件等特点，使其在Web前端开发和其他领域具有广泛应用和潜力。然而，文章也强调了容器化技术的优势，包括高部署效率、可移植性、灵活性、资源利用率、安全性等，适用于复杂的企业应用和多环境部署需求。最后，文章总结了WASM的前景和发展趋势，认为它将在各个领域继续发挥重要作用。
展开
评论
点赞
#挑战每日一条沸点# DAY13：Mock.js是一个JavaScript库，用于模拟接口请求和生成随机数据，在前端开发中发挥重要作用。它的原理是通过拦截网络请求如XMLHttpRequest或fetch，并根据定义的规则返回模拟数据。这使得前端开发者可以在没有真实接口的情况下进行开发和调试。
安装Mock.js很简单，只需通过npm安装并在需要的地方引入。使用Mock.mock()方法可以定义接口的模拟数据，例如模拟GET请求的用户接口。
Mock.js提供了丰富的数据生成规则，如@boolean、@integer、@float等，用于生成各种类型的随机数据。可以通过这些规则在模拟数据中按需生成真实性和多样性的数据。
Mock.js还提供了配置选项和拦截请求的能力，可以使用Mock.setup()来配置全局行为，拦截请求并返回模拟数据。
在Vue.js项目中，与Mock.js的集成很简单，通过在入口文件引入Mock.js并定义接口的模拟数据，可以实现前后端解耦、独立开发。
需要注意的是，Mock.js主要用于开发和调试阶段，不应在生产环境中使用。在生产环境中，应移除Mock.js的配置和拦截器。此外，在使用Mock.js生成模拟数据时，要确保生成的数据符合实际业务要求。
总之，Mock.js在前端开发中的优势包括独立开发、快速原型验证、异常和边界条件测试，以及数据格式一致性。其简单直观的用法使得开发者能够便捷地进行接口模拟和数据生成。
安装Mock.js很简单，只需通过npm安装并在需要的地方引入。使用Mock.mock()方法可以定义接口的模拟数据，例如模拟GET请求的用户接口。
Mock.js提供了丰富的数据生成规则，如@boolean、@integer、@float等，用于生成各种类型的随机数据。可以通过这些规则在模拟数据中按需生成真实性和多样性的数据。
Mock.js还提供了配置选项和拦截请求的能力，可以使用Mock.setup()来配置全局行为，拦截请求并返回模拟数据。
在Vue.js项目中，与Mock.js的集成很简单，通过在入口文件引入Mock.js并定义接口的模拟数据，可以实现前后端解耦、独立开发。
需要注意的是，Mock.js主要用于开发和调试阶段，不应在生产环境中使用。在生产环境中，应移除Mock.js的配置和拦截器。此外，在使用Mock.js生成模拟数据时，要确保生成的数据符合实际业务要求。
总之，Mock.js在前端开发中的优势包括独立开发、快速原型验证、异常和边界条件测试，以及数据格式一致性。其简单直观的用法使得开发者能够便捷地进行接口模拟和数据生成。
展开
评论
点赞
#挑战每日一条沸点# DAY12：文章主要介绍了如何使用 Electron、Vue 3 和 Vite 搭建一个桌面应用的步骤。作者提到了一个名为 electron-vite 的脚手架，它旨在简化 Electron 项目的配置和开发流程，解决了一些常见的问题。以下是主要内容的概括：
背景和问题：
作者指出了使用 Vite 来构建 Electron 项目的好处，但也提到了一些问题，如配置复杂、需要辅助脚本、无法灵活选择前端框架等。
创建项目：
使用脚手架 electron-vite 可以快速初始化 Electron 项目。作者提供了使用不同包管理工具的命令，用户可以选择 Vue 作为前端框架，是否添加 TypeScript，是否添加 Electron 更新插件等。
开发调试：
项目的 package.json 中包含了一些预定义的脚本，如 start 和 dev，分别用于启动预览和开发模式。start 脚本将静态文件打包后，启动 Electron 加载本地文件，用于预览。dev 脚本则启动本地服务器，然后启动 Electron 加载服务页面，用于开发。
项目配置：
作者提供了一个示例的 package.json 文件，其中包含了项目的基本信息、脚本命令、依赖和开发依赖。其中使用到了一些关键的工具和库，如 electron-builder 进行打包，electron-vite 用于集成 Electron 和 Vite。
打包 exe 文件：
作者介绍了如何打包生成 exe 文件。通过运行 npm run build:win 命令，会触发打包过程。在打包前，可能需要手动下载一些资源文件，然后放置在指定的目录。打包完成后，生成的 exe 文件在项目的 dist 目录下。
个性化需求：
作者提到了根据个性化需求，可能需要参考官方文档进行更深入的配置和调整，以满足项目的特定要求。
背景和问题：
作者指出了使用 Vite 来构建 Electron 项目的好处，但也提到了一些问题，如配置复杂、需要辅助脚本、无法灵活选择前端框架等。
创建项目：
使用脚手架 electron-vite 可以快速初始化 Electron 项目。作者提供了使用不同包管理工具的命令，用户可以选择 Vue 作为前端框架，是否添加 TypeScript，是否添加 Electron 更新插件等。
开发调试：
项目的 package.json 中包含了一些预定义的脚本，如 start 和 dev，分别用于启动预览和开发模式。start 脚本将静态文件打包后，启动 Electron 加载本地文件，用于预览。dev 脚本则启动本地服务器，然后启动 Electron 加载服务页面，用于开发。
项目配置：
作者提供了一个示例的 package.json 文件，其中包含了项目的基本信息、脚本命令、依赖和开发依赖。其中使用到了一些关键的工具和库，如 electron-builder 进行打包，electron-vite 用于集成 Electron 和 Vite。
打包 exe 文件：
作者介绍了如何打包生成 exe 文件。通过运行 npm run build:win 命令，会触发打包过程。在打包前，可能需要手动下载一些资源文件，然后放置在指定的目录。打包完成后，生成的 exe 文件在项目的 dist 目录下。
个性化需求：
作者提到了根据个性化需求，可能需要参考官方文档进行更深入的配置和调整，以满足项目的特定要求。
展开
评论
点赞
#挑战每日一条沸点# DAY11：使用 Pinia 这个状态管理库来实现一个用户登录的案例。以下是文章中提到的主要步骤和内容概要：
1、初始化工程：使用 Vite 脚手架创建一个 Vue 项目，并安装相关依赖。
2、Mock 的用法：使用 vite-plugin-mock 插件进行数据模拟，创建一个用户登录接口的模拟服务。
3、使用 Pinia：Pinia 是一个状态管理库，类似 Vuex，但更简单，提供了类似 Composition API 的风格。主要核心概念包括 store、state、getters、actions。
4、创建 pinia：创建一个 Pinia 插件实例，并在项目入口文件中注册。
5、创建用户 store：使用 defineStore 方法创建用户相关的 store，定义 state、getters、actions。
6、在组件中使用 Pinia：在组件中实例化 store，使用其中的 state、getters、actions。
7、pinia 状态持久化：介绍了如何使用 pinia-plugin-persistedstate 插件将状态持久化到本地存储。
1、初始化工程：使用 Vite 脚手架创建一个 Vue 项目，并安装相关依赖。
2、Mock 的用法：使用 vite-plugin-mock 插件进行数据模拟，创建一个用户登录接口的模拟服务。
3、使用 Pinia：Pinia 是一个状态管理库，类似 Vuex，但更简单，提供了类似 Composition API 的风格。主要核心概念包括 store、state、getters、actions。
4、创建 pinia：创建一个 Pinia 插件实例，并在项目入口文件中注册。
5、创建用户 store：使用 defineStore 方法创建用户相关的 store，定义 state、getters、actions。
6、在组件中使用 Pinia：在组件中实例化 store，使用其中的 state、getters、actions。
7、pinia 状态持久化：介绍了如何使用 pinia-plugin-persistedstate 插件将状态持久化到本地存储。
展开
评论
点赞
#挑战每日一条沸点# DAY10：关于如何使用 Pinia 进行状态管理的登录案例。Pinia 是一个下一代的 Vuex，它在简化概念和数据流程方面进行了改进，核心概念包括 store、state、getters、actions。以下是主要内容的简述：
1、初始化工程：使用 Vite 脚手架创建一个 Vue 项目，安装相关依赖包，包括 Pinia、Axios、vite-plugin-mock 和 pinia-plugin-persistedstate。
2、Mock 数据：介绍了如何使用 vite-plugin-mock 创建 mock 接口，以模拟用户登录请求。
3、使用 Pinia：Pinia 提供了更简单的 API 和 Composition API 风格的使用，核心概念包括 store、state、getters 和 actions。
4、创建 pinia：通过创建 pinia 实例并在项目入口文件中注册，启动 Pinia。
5、创建用户 store：使用 defineStore 方法创建用户 store，定义 state、getters 和 actions，展示了如何在 actions 中发送异步请求并修改状态。
6、组件中使用 Pinia：展示了如何在组件中实例化 store，调用 actions 处理登录和登出逻辑，并在模板中使用状态。
7、pinia 状态持久化：介绍了如何使用 pinia-plugin-persistedstate 插件实现状态持久化，让数据在页面刷新时不丢失。
1、初始化工程：使用 Vite 脚手架创建一个 Vue 项目，安装相关依赖包，包括 Pinia、Axios、vite-plugin-mock 和 pinia-plugin-persistedstate。
2、Mock 数据：介绍了如何使用 vite-plugin-mock 创建 mock 接口，以模拟用户登录请求。
3、使用 Pinia：Pinia 提供了更简单的 API 和 Composition API 风格的使用，核心概念包括 store、state、getters 和 actions。
4、创建 pinia：通过创建 pinia 实例并在项目入口文件中注册，启动 Pinia。
5、创建用户 store：使用 defineStore 方法创建用户 store，定义 state、getters 和 actions，展示了如何在 actions 中发送异步请求并修改状态。
6、组件中使用 Pinia：展示了如何在组件中实例化 store，调用 actions 处理登录和登出逻辑，并在模板中使用状态。
7、pinia 状态持久化：介绍了如何使用 pinia-plugin-persistedstate 插件实现状态持久化，让数据在页面刷新时不丢失。
展开
评论
点赞
#挑战每日一条沸点# DAY9：在前端实现对于不同格式（主要是docx和pdf）的文件进行在线预览，并将这些功能封装成一个预览组件：
1、文件预览需求：在业务中，可能需要实现文档管理类的功能，其中之一是在线预览文件。为了满足这个需求，需要使用第三方库来实现预览功能。
2、docx 文件预览：使用 docx-preview 插件实现。首先，需要在容器标签中创建一个用于显示预览内容的 <div> 标签。然后，通过引入 renderAsync 函数来进行预览渲染。可以设置不同的选项，如样式类名、渲染宽度、渲染高度等。
3、pdf 文件预览：使用 pdfjs-dist 插件来实现。需要在页面上创建多个 <canvas> 元素，每个元素对应 pdf 的一页。pdf 渲染数据需要是 ArrayBuffer 格式的数据。使用 getPage 方法获取页面，然后通过设置 canvas 的属性和上下文，将页面内容渲染到 canvas 上。支持放大和缩小功能，可以通过调整缩放比例来处理源文件大小和内容模糊的问题。
4、多格式文件渲染映射：为了处理不同格式文件的渲染，采用了一个处理映射的方式。通过一个 handle 对象，根据文件格式的不同，选择对应的渲染处理函数来预览不同格式的文件。
5、不支持文件类型提示：对于不支持的文件类型，如 "other" 格式，提供一个提示，告知用户不支持该格式的在线预览，并建议下载或转换为支持的格式。
1、文件预览需求：在业务中，可能需要实现文档管理类的功能，其中之一是在线预览文件。为了满足这个需求，需要使用第三方库来实现预览功能。
2、docx 文件预览：使用 docx-preview 插件实现。首先，需要在容器标签中创建一个用于显示预览内容的 <div> 标签。然后，通过引入 renderAsync 函数来进行预览渲染。可以设置不同的选项，如样式类名、渲染宽度、渲染高度等。
3、pdf 文件预览：使用 pdfjs-dist 插件来实现。需要在页面上创建多个 <canvas> 元素，每个元素对应 pdf 的一页。pdf 渲染数据需要是 ArrayBuffer 格式的数据。使用 getPage 方法获取页面，然后通过设置 canvas 的属性和上下文，将页面内容渲染到 canvas 上。支持放大和缩小功能，可以通过调整缩放比例来处理源文件大小和内容模糊的问题。
4、多格式文件渲染映射：为了处理不同格式文件的渲染，采用了一个处理映射的方式。通过一个 handle 对象，根据文件格式的不同，选择对应的渲染处理函数来预览不同格式的文件。
5、不支持文件类型提示：对于不支持的文件类型，如 "other" 格式，提供一个提示，告知用户不支持该格式的在线预览，并建议下载或转换为支持的格式。
展开
评论
点赞
#挑战每日一条沸点# DAY8：Islands 架构主要用于在 SSR 应用中实现一种灵活的组件渲染方式，将页面划分为静态组件和可交互组件（孤岛），从而在渲染性能和用户体验之间寻找平衡。Islands 架构的实现原理在不同的框架中有所差异，但核心思想是在 SSR 渲染过程中标识出可交互的组件，然后在客户端进行 hydration（注水）时，只针对可交互的组件进行动态渲染，而静态组件则直接使用服务端渲染的 HTML 内容。
展开
评论
点赞
#挑战每日一条沸点# DAY7：在Vue3项目中进行屏幕适配的两种方案：基于rem的适配方案和基于scale的适配方案。这两种方案旨在解决不同场景下的屏幕适配问题，让页面在不同设备上都能有良好的显示效果。
1、基于rem的适配方案：
rem单位：rem是相对于根元素（html/body）字体大小的单位，通常根元素的字体大小设置为10px，这样1rem就相当于10px。
适用场景：适用于不固定宽高比的Web应用，适合绝大部分业务场景。
依赖安装：需要安装 postcss-pxtorem 插件用于将像素单位生成rem单位，autoprefixer 用于处理浏览器前缀，以及 amfe-flexible 作为可伸缩布局方案。
配置文件：在项目根目录创建 postcss.config.js 文件，配置插件参数，包括对不同浏览器的兼容性。
项目重启：需要重启项目使配置生效。
2、基于scale的适配方案：
transform属性：使用CSS3的transform属性中的scale()方法实现元素的缩放效果，包括scaleX()、scaleY()和scale()。
适用场景：适用于固定宽高比的Web应用，如大屏或固定窗口业务应用。
新建resize.ts/js文件：新建一个用于处理窗口大小变化的函数，通过计算当前窗口大小与设计稿尺寸的比例，来决定是否进行缩放以保持固定比例。
设计稿尺寸和比例：指定设计稿的宽度和高度，计算所需保持的比例。
calcRate函数：根据窗口宽高比和设计稿比例，计算缩放值并应用到外层容器。
resize函数：在窗口大小改变时重新计算缩放值，通过定时函数避免频繁计算。
windowDraw和unWindowDraw函数：监听和取消监听窗口大小变化，分别绑定和解绑resize函数。
界面引入resize.ts/js：在相关界面中引入resize函数，根据缩放值来适配页面内容。
1、基于rem的适配方案：
rem单位：rem是相对于根元素（html/body）字体大小的单位，通常根元素的字体大小设置为10px，这样1rem就相当于10px。
适用场景：适用于不固定宽高比的Web应用，适合绝大部分业务场景。
依赖安装：需要安装 postcss-pxtorem 插件用于将像素单位生成rem单位，autoprefixer 用于处理浏览器前缀，以及 amfe-flexible 作为可伸缩布局方案。
配置文件：在项目根目录创建 postcss.config.js 文件，配置插件参数，包括对不同浏览器的兼容性。
项目重启：需要重启项目使配置生效。
2、基于scale的适配方案：
transform属性：使用CSS3的transform属性中的scale()方法实现元素的缩放效果，包括scaleX()、scaleY()和scale()。
适用场景：适用于固定宽高比的Web应用，如大屏或固定窗口业务应用。
新建resize.ts/js文件：新建一个用于处理窗口大小变化的函数，通过计算当前窗口大小与设计稿尺寸的比例，来决定是否进行缩放以保持固定比例。
设计稿尺寸和比例：指定设计稿的宽度和高度，计算所需保持的比例。
calcRate函数：根据窗口宽高比和设计稿比例，计算缩放值并应用到外层容器。
resize函数：在窗口大小改变时重新计算缩放值，通过定时函数避免频繁计算。
windowDraw和unWindowDraw函数：监听和取消监听窗口大小变化，分别绑定和解绑resize函数。
界面引入resize.ts/js：在相关界面中引入resize函数，根据缩放值来适配页面内容。
展开
评论
1
#挑战每日一条沸点# DAY6：Islands 架构，该架构是一个在 SSR (Server-Side Rendering) 应用中用于提升性能的方案。它的核心思想是在页面中将交互性组件和静态内容分开处理，以优化首屏加载性能、SEO、路由和状态管理等方面的问题。与传统的 MPA (Multi-page application) 和 SPA (Single-page application) 方案相比，Islands 架构在一些特定场景下表现更优。
主要内容包括：
1、MPA 和 SPA 的区别： MPA 是多页应用，每个页面都是独立的，适合首屏加载性能，但后续页面加载和交互较弱；SPA 是单页应用，通过 JavaScript 动态加载页面内容，适合后续页面加载和交互，但首屏性能和 SEO 有一定问题。
2、Islands 架构的优势：
性能： MPA 的首屏加载性能好，SPA 在后续页面加载和交互方面表现更好。
SEO： MPA 对 SEO 更友好，SPA 对搜索引擎不利。
路由： MPA 在浏览器端不需要路由，SPA 需要 JS 控制路由。
状态管理： SPA 中的状态管理较复杂，MPA 页面间相互独立，状态管理相对简单。
3、Islands 架构实现原理： 文中介绍了两个具体的框架实现案例：Astro 和 Fresh。
Astro： Astro 支持不同框架的组件，通过自定义标记来标识交互性组件，在构建时只注入 Islands 组件的代码，然后在浏览器中完成各个框架组件的 hydration。
Fresh： Fresh 是基于 Preact 和 Deno 的全栈框架，使用 Islands 架构。它在 SSR Runtime 阶段拦截组件创建，记录 Islands 组件的信息；在 Build Time 阶段分析组件依赖并打包；在 Client Runtime 阶段使用特定脚本激活 Islands 组件。
4、Islands 架构的适用性： Islands 架构可以用于多种框架，不仅限于 React。文中也指出 VitePress 已经实现了类似的优化，Vue 框架下的 Shell 优化方案则针对特定情况。
主要内容包括：
1、MPA 和 SPA 的区别： MPA 是多页应用，每个页面都是独立的，适合首屏加载性能，但后续页面加载和交互较弱；SPA 是单页应用，通过 JavaScript 动态加载页面内容，适合后续页面加载和交互，但首屏性能和 SEO 有一定问题。
2、Islands 架构的优势：
性能： MPA 的首屏加载性能好，SPA 在后续页面加载和交互方面表现更好。
SEO： MPA 对 SEO 更友好，SPA 对搜索引擎不利。
路由： MPA 在浏览器端不需要路由，SPA 需要 JS 控制路由。
状态管理： SPA 中的状态管理较复杂，MPA 页面间相互独立，状态管理相对简单。
3、Islands 架构实现原理： 文中介绍了两个具体的框架实现案例：Astro 和 Fresh。
Astro： Astro 支持不同框架的组件，通过自定义标记来标识交互性组件，在构建时只注入 Islands 组件的代码，然后在浏览器中完成各个框架组件的 hydration。
Fresh： Fresh 是基于 Preact 和 Deno 的全栈框架，使用 Islands 架构。它在 SSR Runtime 阶段拦截组件创建，记录 Islands 组件的信息；在 Build Time 阶段分析组件依赖并打包；在 Client Runtime 阶段使用特定脚本激活 Islands 组件。
4、Islands 架构的适用性： Islands 架构可以用于多种框架，不仅限于 React。文中也指出 VitePress 已经实现了类似的优化，Vue 框架下的 Shell 优化方案则针对特定情况。
展开
评论
点赞
#挑战每日一条沸点# DAY5：package.json 文件中的常见配置，分为七大类：
1、描述配置：包括项目的基本信息，如名称、版本、描述、仓库、作者等。这些信息会展示在 npm 官网上，让人们能够快速了解项目。
2、文件配置：涉及项目所包含的文件以及入口等信息。files 字段用于控制在 npm 包发布时需要一起发布的内容，type 字段用于指定 ES 模块的文件后缀，main 字段用于指定项目的入口文件。
3、脚本配置：指定项目的一些内置脚本命令，这些命令可以通过 npm run 来执行。可以使用 pre 和 post 钩子来在执行命令前后添加操作。
4、依赖配置：包含项目的运行依赖和开发依赖。dependencies 用于指定项目的运行时依赖，devDependencies 用于指定开发时需要的依赖。
5、发布配置：与项目发布相关的配置，包括 private 字段用于标识项目是否为私有项目，publishConfig 用于指定发布时使用的配置。
6、系统配置：涉及项目关联的系统配置，如 node 版本、操作系统兼容性等。engines 字段用于指定项目对 node 版本的要求。
7、第三方配置：涉及与第三方库或应用相关的配置，如 types 或 typings 字段用于指定 TypeScript 类型定义的入口文件，unpkg 和 jsdelivr 字段用于配置 CDN 服务，browserslist 字段用于指定浏览器兼容性。
1、描述配置：包括项目的基本信息，如名称、版本、描述、仓库、作者等。这些信息会展示在 npm 官网上，让人们能够快速了解项目。
2、文件配置：涉及项目所包含的文件以及入口等信息。files 字段用于控制在 npm 包发布时需要一起发布的内容，type 字段用于指定 ES 模块的文件后缀，main 字段用于指定项目的入口文件。
3、脚本配置：指定项目的一些内置脚本命令，这些命令可以通过 npm run 来执行。可以使用 pre 和 post 钩子来在执行命令前后添加操作。
4、依赖配置：包含项目的运行依赖和开发依赖。dependencies 用于指定项目的运行时依赖，devDependencies 用于指定开发时需要的依赖。
5、发布配置：与项目发布相关的配置，包括 private 字段用于标识项目是否为私有项目，publishConfig 用于指定发布时使用的配置。
6、系统配置：涉及项目关联的系统配置，如 node 版本、操作系统兼容性等。engines 字段用于指定项目对 node 版本的要求。
7、第三方配置：涉及与第三方库或应用相关的配置，如 types 或 typings 字段用于指定 TypeScript 类型定义的入口文件，unpkg 和 jsdelivr 字段用于配置 CDN 服务，browserslist 字段用于指定浏览器兼容性。
展开
评论
点赞
#挑战每日一条沸点# DAY4：1、position: sticky：介绍了如何使用这个属性实现吸顶效果，使元素在滚动时保持固定位置。
2、:empty 选择器：展示了如何使用:empty伪类选择器来针对内容为空的容器添加样式，以便在没有数据的情况下提供提示。
3、gap 属性：介绍了gap属性的应用，该属性可以用于在网格布局、弹性布局等中实现元素之间的间隔。
4、background-clip: text：演示了如何使用这个属性实现带背景的文字效果，使背景图像显示在文字内部。
5、user-select：说明了如何使用user-select属性来禁用在网页中选中文本的能力，使其在视觉上类似于移动应用。
6、:invalid 伪类：展示了如何使用:invalid伪类来匹配未通过验证的表单元素，从而通过CSS为其添加样式，用于表单校验提示。
7、:focus-within 伪类：介绍了:focus-within伪类，该伪类可以用于匹配父元素在其自身或子元素获得焦点时的情况，实现更灵活的样式改变。
8、mix-blend-mode:difference：展示了如何使用mix-blend-mode:difference属性实现颜色的差值混合，用于创造视觉上的特殊效果。
总之，这些不太常见的CSS属性可以为前端开发人员提供更多创造性的样式设计和交互效果的机会。
2、:empty 选择器：展示了如何使用:empty伪类选择器来针对内容为空的容器添加样式，以便在没有数据的情况下提供提示。
3、gap 属性：介绍了gap属性的应用，该属性可以用于在网格布局、弹性布局等中实现元素之间的间隔。
4、background-clip: text：演示了如何使用这个属性实现带背景的文字效果，使背景图像显示在文字内部。
5、user-select：说明了如何使用user-select属性来禁用在网页中选中文本的能力，使其在视觉上类似于移动应用。
6、:invalid 伪类：展示了如何使用:invalid伪类来匹配未通过验证的表单元素，从而通过CSS为其添加样式，用于表单校验提示。
7、:focus-within 伪类：介绍了:focus-within伪类，该伪类可以用于匹配父元素在其自身或子元素获得焦点时的情况，实现更灵活的样式改变。
8、mix-blend-mode:difference：展示了如何使用mix-blend-mode:difference属性实现颜色的差值混合，用于创造视觉上的特殊效果。
总之，这些不太常见的CSS属性可以为前端开发人员提供更多创造性的样式设计和交互效果的机会。
展开
评论
点赞
#挑战每日一条沸点# DAY3：使用fabric.js开发一个图片编辑器，文章涵盖了架构设计、初始化fabric实例和事件发射器、背景设置、插入元素、属性调整、元素对齐以及其他功能，如分组、层级调整、快捷键、画布缩放、导入/导出等。通过mixins和事件发射器，成功实现了选中状态的管理和通知，同时提供了丰富的代码示例和步骤，使开发者能够轻松理解和实现一个基于fabric.js的图片编辑器。
展开
评论
点赞