Benediximus
获得徽章 0
- #挑战每日一条沸点# 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 - #挑战每日一条沸点# 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 优化方案则针对特定情况。展开评论点赞 - #挑战每日一条沸点# 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 字段用于指定浏览器兼容性。展开评论点赞 - #挑战每日一条沸点# 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属性可以为前端开发人员提供更多创造性的样式设计和交互效果的机会。展开评论点赞 - #挑战每日一条沸点# DAY3：使用fabric.js开发一个图片编辑器，文章涵盖了架构设计、初始化fabric实例和事件发射器、背景设置、插入元素、属性调整、元素对齐以及其他功能，如分组、层级调整、快捷键、画布缩放、导入/导出等。通过mixins和事件发射器，成功实现了选中状态的管理和通知，同时提供了丰富的代码示例和步骤，使开发者能够轻松理解和实现一个基于fabric.js的图片编辑器。展开评论点赞
- #挑战每日一条沸点# DAY2：传统 MultiRepo 开发方式存在许多问题，包括代码复用困难、版本管理混乱以及项目基建重复等痛点。在 MultiRepo 中，不同仓库之间的割裂导致代码复用成本高、依赖管理困难，同时每个项目需要维护独立的开发环境和基础设施，增加了开发和维护成本。通过统一放置所有项目在一个仓库下，实现了代码复用的便利，修改公共代码只需一处改动，同时依赖管理更为简单，项目间的工作流和基建成本得到降低，团队协作也更加容易。在实际场景中，要落地 Monorepo 需要一套完整的工程体系来支撑，包括依赖分析、依赖安装、构建流程、测试流程、CI 及发布流程等。社区已经提供了一些成熟的方案如lerna、nx、rushstack等，可以作为基础，或者根据需求进行定制。展开评论点赞
- #挑战每日一条沸点# DAY1：可以利用ChatGPT这样的AI语言模型作为辅助工具，帮助解读源代码。虽然ChatGPT并不完美，但对于阅读源代码中的某些部分，它可以提供一些有用的信息和指导。在使用ChatGPT的帮助下，不只是被动地接受信息，而是在阅读源代码的过程中进行了积极的思考和探索，从中体会到学习编程和理解源代码的过程中，自主学习和思考的重要性。展开评论点赞