20240320 前端开发日报

纯 CSS 检测文本是否溢出；我为什么从WebStorm换到了VSCode？；马斯克开源Grok-1：3140亿参数迄今最大，权重架构全开放，磁力下载；一行代码引发的离奇问题，众多大佬纷纷参与点评，最终Typescript之父出手解决；比 Bun 还快的 JS 运行时来了WinterJS 1.0 发布；啥？线上css样式错乱了？我本地运行没问题啊；父爱如山-用vue3给女儿做做个10以内加减法练习工具–3/1000；Next.js v14 实现乐观更新，面向未来的 UI 更新方式，你可以不去做，但你不应该不了解

1. 纯 CSS 检测文本是否溢出

   介绍一个CSS检测文本溢出的小技巧。 一直以来，CSS 都无法很好的检测出一段文本是否溢出。但这又是一个非常普遍的需求，比如多行文本展开，展开按钮只有在文本溢出的时候才出现 由于无法直接CSS判断，这

2. 我为什么从WebStorm换到了VSCode？

   因为是后端Boy，所以一直用的是IDEA，于是在选择前端IDE的时候自然而然选择了全家桶中的WebStorm，但是在使用的过程中也是遇到了很多问题，于是

3. 马斯克开源Grok-1：3140亿参数迄今最大，权重架构全开放，磁力下载

   今天凌晨，马斯克旗下的大型模型公司 xAI 宣布正式开源了一款名为「Grok-1」的混合专家（MoE）模型，该模型包含着 3140 亿个参数，成为当前参数量最大的开源大语言模型之一。

4. 一行代码引发的离奇问题，众多大佬纷纷参与点评，最终Typescript之父出手解决

   故事的起因是这样的， 一个前端开发人员(也算是挺有名的，ariakit.org的作者， wrodPress的前维护者)在社交媒体上发了这么一条帖子。 短短几天就有了51.8万次的view。 简单的文案

5. 比 Bun 还快的 JS 运行时来了WinterJS 1.0 发布

   WinterJS 是一个非常快的、与 WinterCG 兼容的 Javascript 运行时，使用 Rust 编写，使用 SpiderMonkey 引擎执行 JavaScript，并使用 Tokio

6. 啥？线上css样式错乱了？我本地运行没问题啊

   记录一次线上问题，可以作为一个深入了解打包工具的切入点，阻止出现和测试同学扯皮不过的场景发生，提高前端同学的公信力

7. 父爱如山-用vue3给女儿做做个10以内加减法练习工具–3/1000

   背景 我可爱的女儿，现在正在幼儿园中班就读。她已经开始学习10以内的加减法了，为了帮助她学习与成长，所以我决定给她写一个练习工具，让她感受无边的父爱。

8. Next.js v14 实现乐观更新，面向未来的 UI 更新方式，你可以不去做，但你不应该不了解

   其实乐观更新并不是一个新潮的思想，但大家普遍不会去实现乐观更新，归根到底还是实现成本太高。所以本篇会结合 Next.js 和 useOptimistic 讲解如何低成本并考虑全面的实现一个乐观更新。

9. 免费开源、支持自建服务的团队协作、个人学习文档管理系统

10. 为什么面试官都爱问websocket？

11. React——组件通讯（不完整版）

    文章浏览阅读258次。组件中的状态是私有的，组件的状态只能在组件内部使用，无法直接在组件外使用，但是我们在日常开发中，通常会把相似、功能完整的应用才分成组件（工厂模式）利于我们的开发，而不同组件直接又需要传递数据，而这个过程就是组件通讯。

12. vue3+element Plus form 作为子组件，从父组件如何赋值？

    文章浏览阅读100次。vue3+element Plus form 输入框内输入内容不显示问题

13. 虚拟DOM是什么以及React 和Vue中有何区别

    文章浏览阅读193次，点赞4次，收藏6次。其中 UI 的状态被保存在内存中，作为一个（或者说是 JavaScript 对象），然后通过一个叫做 “对比（diffing）” 的过程来更新视图。这个模型的主要目标是，因为直接操作 DOM 通常比较慢，而在 JavaScript 中进行计算则相对较快。在 Vue.js、React 等前端框架中，虚拟 DOM 是一个核心的概念。当数据变化时，框架会创建一个新的虚拟 DOM，然后将新的虚拟 DOM 与旧的虚拟 DOM 进行对比，找出两者的差异。

14. Vue中import篇：模块、JS文件，阿里P8成长路线，web项目开发

    文章浏览阅读327次，点赞9次，收藏22次。引入流程1、先install安装npm install 插件名称 –save2、import导入3、其他配置全局引入的需要再main.js中配置，一般每个js库官网中会有说明二、引入函数方法========2.1 单个函数引入。

15. Vue 中如何引入第三方 JS 库，前端开发项目，前端简历项目经验

    文章浏览阅读118次，点赞4次，收藏4次。中引入 jQuery。我们只需要在 webpack 的配置文件中，在 resolve 中为 jQuery 添加一个。OK，咱们已经介绍两种方式了，它们有一个共同点：都需要在主入口页面 index.html 中，用。那么，我们就可以在任意组件中，通过 import 的方式来使用 jquery 了。然后，我们可以在 webpack 中配置一个 externals。二、绝对路径直接引入，配置后，import 引入后再使用。很好，没有任何问题，我们可以在这个组件中。这样，我们就可以在每一个组件中用。

16. Spring Boot + Vue + Electron跨平台应用介绍

    文章浏览阅读271次，点赞9次，收藏11次。虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，再加上Web开发的低成本、高效率的优势，这种跨平台方式越来越受到开发者的喜爱。Electron是一个基于Chromium和 Node.js，使用 HTML、CSS和JavaScript来构建跨平台应用的跨平台开发框架，兼容 Mac、Windows 和 Linux。目前，Electron已经创建了包括VScode和Atom在内的大量应用。

17. 前端开发使用 Vue 3 + TypeScript + Pinia + Element Plus + ECharts

    文章浏览阅读406次，点赞5次，收藏7次。本文档旨在介绍使用 Vue 3 结合 TypeScript、Pinia 状态管理、Element Plus UI 组件库以及 ECharts 图表库进行前端开发的技术细节和最佳实践。Vue 3: 一款流行的 JavaScript 框架，提供了响应式和组件化的开发方式，使得构建用户界面更加简单高效。TypeScript: 是 JavaScript 的一个超集，为 JavaScript 添加了静态类型检查，使得代码更加健壮、易维护。Pinia: 是一个简单、灵活且高效的状态管理库，专为 Vue 3 设计。

18. 【实例】React 组件传值方法: Props、回调函数、Context、路由传参

    文章浏览阅读374次，点赞4次，收藏6次。组件传参

19. Vue前端界面的创建和路由的配置

    文章浏览阅读254次，点赞7次，收藏3次。命名要求：XXXXXView.vue 例如：UserLoginView.vue。*在router目录下的index.js中配置路由（url与vue文件的对应关系）component:引入的名称。compontent:名称。*vue文件的页面结构，就是我们要在浏览器中实现的内容。*使用import引入需要的vue文件。*在js代码完成跳转。*配置url和组件的对应关系。*使用import引入vue文件。*位置：在view下面创建。