前端领域的插件式设计
2023-10-23
阅读 8 分钟
571插件，是一个常见的概念。例如，当我们需要把我们前端代码中的 css 样式提取打包，我们可以用 webpack 的 mini-css-extract-plugin，或者你如果用 rollup 的话，可以选择 rollup-plugin-postcss。再比如我们可以给 babel 配置 @babel/plugin-proposal-decorators 插件来支持装饰器语法；除了上述打包编译相关的工具，我...
深度剖析 Vite 配置文件
2023-10-19
阅读 10 分钟
682我们知道，Vite 构建环境分为开发环境和生产环境，不同环境会有不同的构建策略，但不管是哪种环境，Vite 都会首先解析用户配置。那接下来，我就与你分析配置解析过程中 Vite 到底做了什么？即Vite是如何加载配置文件的。
超全面的前端工程化配置指南
2023-10-17
阅读 12 分钟
378前端工程化配置指南本文讲解如何构建一个工程化的前端库，并结合 Github Actions，自动发布到 Github 和 NPM 的整个详细流程。示例我们经常看到像 Vue、React 这些流行的开源项目有很多配置文件，他们是干什么用的？他们的 Commit、Release 记录都那么规范，是否基于某种约定？废话少说，先上图！上图标红就是相关的工程...
前端新特性：Compute Pressure API！！！
2023-10-16
阅读 4 分钟
391前几天，review 同事代码的时候发现了一个新的 JS API PressureObserver。 通过一番搜索，发现这个 API 是 Compute Pressure API 的一部分。 Compute Pressure API：[链接]它的作用是可以观察 CPU 的变化。这有什么用呢？举个例子：如果你在一个具有视频会议功能的网站上跟别人开会，会议里的人都开着摄像头。那么你的设...
实现一个自己的脚手架教程
2023-10-11
阅读 23 分钟
870脚手架并不实现，难的是最佳实践的整理和沉淀。本文不会涉及到最佳实践方面的内容，只是教会你如何实现一个最基础的脚手架，以此作为展示最佳实践的载体。
一文讲清楚webpack和vite原理
2023-10-10
阅读 10 分钟
584一、前言每次用vite创建项目秒建好，用vue-cli创建了一个项目，却有点久，那为什么用 vite 比 webpack 要快呢，这篇文章带你梳理清楚它们的原理及不同之处！文章有一点长，看完绝对有收获！目录：webpack基本使用webpack打包原理vite工作原理小结二、webpack基本使用webpack 的出现主要是解决浏览器里的 javascript 没有...
【前端工程化】配置React+ts企业级代码规范及样式格式和git提交规范
2023-10-10
阅读 17 分钟
1.1k目录前言代码规范技术栈创建react18+vite2+ts项目editorconfig统一编辑器配置prettier自动格式化代码eslint+lint-staged检测代码使用tsc检测类型和报错代码提交时使用husky检测代码语法规范代码提交时使用husky检测commit备注规范配置commitizen方便添加commit辅助备注信息stylelint规范样式和保存自动修复总结一、前言 ...
整会promise这8个高级用法，再被问倒来喷我
2023-09-27
阅读 6 分钟
725发现很多人还只会promise常规用法在js项目中，promise的使用应该是必不可少的，但我发现在同事和面试者中，很多中级或以上的前端都还停留在promiseInst.then()、promiseInst.catch()、Promise.all等常规用法，连async/await也只是知其然，而不知其所以然。但其实，promise还有很多巧妙的高级用法，也将一些高级用法在alo...
深入理解React中fiber
2023-09-27
阅读 6 分钟
617一、前言Fiber是对React核心算法的重写，Fiber是React内部定义的一种数据结构，将更新渲染耗时长的大任务，分为许多的小片。Fiber节点保存啦组件需要更新的状态和副作用，一个Fiber代表一个工作单元。二、Fiber在React做了什么在react中，主要做了下面这些操作：为每个增加了优先级，优先级高的任务可以中断低优先级的任...
一文讲清楚webpack和vite原理
2023-09-26
阅读 10 分钟
1.5k每次用vite创建项目秒建好，用vue-cli创建了一个项目，却有点久，那为什么用 vite 比 webpack 要快呢，这篇文章带你梳理清楚它们的原理及不同之处！文章有一点长，看完绝对有收获！
如何用一行 CSS 实现 10 种现代布局
2023-09-25
阅读 6 分钟
521一、前言现在微信小程序越来越火了，相信不少人都通过各种途径学习过微信小程序或者尝试开发，作者就是曾经由于兴趣了解开发过微信小程序，所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。二、主要内容springboot后端架构构建小程序项目构建小程序api调用后台resetful接口编写小程序调用后台接口免费的https...
15 个常用的正则表达式技巧
2023-09-25
阅读 5 分钟
564你对正则表达式有何看法？我猜你会说这太晦涩难懂了，我对它根本不感兴趣。是的，我曾经和你一样，以为我这辈子都学不会了。但我们不能否认它确实很强大，我在工作中经常使用它，今天，我总结了15个非常使用的技巧想与你一起来分享，同时也希望这对你有所帮助。那么，我们现在就开始吧。格式化货币我经常需要格式化货币...
超全面的前端工程化配置指南
2023-09-22
阅读 12 分钟
712前端工程化配置指南本文讲解如何构建一个工程化的前端库，并结合 Github Actions，自动发布到 Github 和 NPM 的整个详细流程。示例我们经常看到像 Vue、React 这些流行的开源项目有很多配置文件，他们是干什么用的？他们的 Commit、Release 记录都那么规范，是否基于某种约定？废话少说，先上图！上图标红就是相关的工程...
微前端架构的几种技术选型
2023-09-22
阅读 11 分钟
532微前端架构的几种技术选型随着SPA大规模的应用，紧接着就带来一个新问题：一个规模化应用需要拆分。一方面功能快速增加导致打包时间成比例上升，而紧急发布时要求是越短越好，这是矛盾的。另一方面当一个代码库集成了所有功能时，日常协作绝对是非常困难的。而且最近十多年，前端技术的发展是非常快的，每隔两年就是一个...
如何用一行 CSS 实现 10 种现代布局
2023-09-21
阅读 6 分钟
620现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局，它们实现了一些非凡的工作。
大厂为啥都要NODE去写中间层（BFF）
2023-09-20
阅读 3 分钟
1k前言BFF是一种Web架构，全名为Backends For Frontends，即为服务于前端的后端。这个词来源于Sam Newman的一篇文章：Pattern: Backends For Frontends[1]。BFF一般指的是在前端与后端之间加增加一个中间层。为什么要在前端和后端之间增加一个BFF层呢？
解析Node.js镜像原理，轻松构建高效CI/CD流程
2023-09-20
阅读 10 分钟
1.3k如果公司项目使用容器化部署，那么或多或少了解过nodejs镜像，因为前端项目或者基于nodejs的BFF项目在构建或者部署的过程中都会依赖nodejs镜像
北京小程序开发-微信小程序开发时间总结
2023-09-19
阅读 16 分钟
1.3k渲染线程使用 Webview 进行 UI 的渲染呈现。Webview 是一个完整的类浏览器运行环境，本身具备运行 JavaScript 的能力，但是小程序并不是将逻辑脚本放到 Webview 中运行，而是将逻辑层独立为一个与 Webview 平行的线程，使用客户端提供的 JavaScript 引擎运行代码，iOS 的JavaScriptCore、安卓是腾讯 X5 内核提供的 JsCor...
北京小程序开发：微信小程序原生、第三方、框架，哪种更适合你？
2023-09-19
阅读 2 分钟
769微信小程序是一种轻量级的应用程序，通过微信公众号平台提供服务，可以实现快速开发和发布。在微信小程序开发中，开发者可以选择不同的开发方式，包括原生开发、框架开发和第三方工具开发等。本文将详细介绍这些开发方式。