前端成长之路
文章平均质量分 95
晒兜斯
这个作者很懒,什么都没留下…
展开
-
Vite 实战:手把手教你写一个 Vite 插件
哈喽,很高兴你能点开这篇博客,本博客是针对 Vite 的体验系列文章之实战篇,认真看完后相信你也能如法炮制写一个属于自己的 vite 插件。Vite 是一种新型的前端构建工具,能够显著提升前端开发体验。我将会从 0 到 1 完成一个 vite:markdown 插件,该插件可以读取项目目录中的 markdown 文件并解析成 html,最终渲染到页面中。如果你还没有使用过 Vite,那么你可以看看我的前两篇文章,我也是刚体验没两天呢。(如下)Vite + Vue3 初体验 —— Vite 篇原创 2022-03-16 20:51:26 · 7731 阅读 · 4 评论 -
Vite 源码解读系列(图文结合) —— 插件篇
哈喽,很高兴你能点开这篇博客,本博客是针对 Vite 源码的解读系列文章,认真看完后相信你能对 Vite 的工作流程及原理有一个简单的了解。Vite 是一种新型的前端构建工具,能够显著提升前端开发体验。我将会使用图文结合的方式,尽量让本篇文章显得不那么枯燥(显然对于源码解读类文章来说,这不是个简单的事情)。如果你还没有使用过 Vite,那么你可以看看我的前两篇文章,我也是刚体验没两天呢。(如下)Vite + Vue3 初体验 —— Vite 篇Vite + Vue3 初体验 —— Vue3原创 2022-03-05 15:22:15 · 4003 阅读 · 0 评论 -
Vite 源码解读系列(图文结合) —— 构建篇
哈喽,很高兴你能点开这篇博客,本博客是针对 Vite 源码的解读系列文章,认真看完后相信你能对 Vite 的工作流程及原理有一个简单的了解。Vite 是一种新型的前端构建工具,能够显著提升前端开发体验。我将会使用图文结合的方式,尽量让本篇文章显得不那么枯燥(显然对于源码解读类文章来说,这不是个简单的事情)。如果你还没有使用过 Vite,那么你可以看看我的前两篇文章,我也是刚体验没两天呢。(如下)Vite + Vue3 初体验 —— Vite 篇Vite + Vue3 初体验 —— Vue3原创 2022-02-25 13:15:27 · 1329 阅读 · 0 评论 -
Vite 源码解读系列(图文结合) —— 本地开发服务器篇
哈喽,很高兴你能点开这篇博客,本博客是针对 Vite 源码的解读系列文章,认真看完后相信你能对 Vite 的工作流程及原理有一个简单的了解。Vite 是一种新型的前端构建工具,能够显著提升前端开发体验。我将会使用图文结合的方式,尽量让本篇文章显得不那么枯燥(显然对于源码解读类文章来说,这不是个简单的事情)。如果你还没有使用过 Vite,那么你可以看看我的前两篇文章,我也是刚体验没两天呢。(如下)Vite + Vue3 初体验 —— Vite 篇Vite + Vue3 初体验 —— Vue3原创 2022-02-23 14:09:09 · 3244 阅读 · 0 评论 -
Vite + Vue3 初体验 —— Vue3 篇
在上一篇 Vite + Vue3 初体验 —— Vite 篇 博客中,我感受到了 Vite 带来的运行时效率提升,这一期再来感受感受 Vue3 带来的新变化 —— 关注点分离。Todo List 设计这次体验 Vue3,我想做一个能体验(部分) Vue3 新特性的功能模块。想了想,用一个 Todo List 应该是比较合适的。我们来规划一下它的功能清单吧。输入 Todo,按下回车即可添加一条新的 Todo Item。以列表的形式显示所有的 Todo Item。可以将 Todo Item 标记原创 2022-01-27 15:51:49 · 1623 阅读 · 1 评论 -
Vite + Vue3 初体验 —— Vite 篇
Vite 和 Vue3 在 2022 年应该不算个新事物了,但应该也有很多像我一样还没有接触过这两个 “新鲜玩意” 的。这两样(Vite + Vue3)给我的感觉是完完全全的新鲜玩具,是新时代的潮流。看着手里的 webpack + Vue2,想着会不会像几年前的 angularjs + gulp 一样,成为历史。临近年关,也有了一些闲暇时间,来认识一下被人安利多次的新型前端构建工具 Vite + 全新升级的 Vue3 吧!从 Vite 开始先来看看 Vite 的官方介绍吧。可以看出,在本地开发原创 2022-01-22 15:22:20 · 3627 阅读 · 2 评论 -
Axios 源码解读 —— 源码实现篇
在上两期,我们讲解了 Axios 的源码:Axios 源码解读 —— request 篇Axios 源码解读 —— 网络请求篇今天,我们将实现一个简易的 Axios,用于在 Node 端实现网络请求,并支持一些基础配置,比如 baseURL、url、请求方法、拦截器、取消请求…本次实现所有的源码都放在 这里,感兴趣的可以看看。Axios 实例本次我们将使用 typescript + node 来实现相关代码,这样对大家理解代码也会比较清晰。这里,先来实现一个 Axios 类吧。type原创 2022-01-18 19:02:08 · 959 阅读 · 0 评论 -
Axios 源码解读 —— 网络请求篇
上一章我们介绍了 Axios 源码解读 —— request 篇,这一章我们来介绍 Axios 实际发起网络请求的部分吧,也就是 dispatchRequest 方法。dispatchRequest这个方法定义也比较简单(如下图)第 29 行 —— 取消请求我们来逐行解析每一行代码所做的事情吧,首先是第 29 行的取消请求。(如下)throwIfCancellationRequested(config);这个动作不仅仅在发起正式请求前做了一次,而且在请求成功和请求失败时都做了一次。只要是被原创 2022-01-15 11:47:03 · 624 阅读 · 0 评论 -
Axios 源码解读 —— request 篇
Axios 是一个基于 promise 网络请求库,作用于 node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和 node.js 中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。从 Axios 的官方介绍可以得知,这是一个可以同时运行在浏览器客户端 + Node 服务端的网络请求库,在浏览器运行时,使用 XMLHttpRequests 构建请求,在 Node 环境时使用 node 的 htt原创 2022-01-09 18:29:01 · 6950 阅读 · 0 评论 -
盘一盘那些提效/创意的 vscode 插件
在前端开发中,vscode 是最常用的编辑器,而 vscode 有着各种实用插件,有些可以帮助我们提升效率,有些可以让我们的工作过程变得更加快乐。今天我们就来介绍一下这些好用的插件吧~提效类插件代码神器 - Power Mode首先,介绍的第一款插件是 Power Mode,它可以让你的编程过程变得更加快乐(如下图)。除了上面那种效果外,这个插件还有其他的几种效果,都是不错的。接下来我们来学习一下如何使用吧!首先我们在 vscode 插件栏搜索 Power Mode(如下图)。然后我们点击原创 2020-09-09 18:23:51 · 263 阅读 · 0 评论 -
图解跨域请求、反向代理原理,对前端更友好的反向代理服务器 - Caddy
写在开头本文采用图文解析、结合实战的方式进行网络原理解析,帮助大家去掌握一些网络知识,并了解 Caddy 的基本使用(见下图)。本人计划在近几年将持续输出深度好文,如果对这类文章感兴趣的话,还请您点个 关注 和 赞 支持一下吧!引言大家好呀~本篇文章主要是安利一个对前端更友好的 web 服务器 Caddy,我们会介绍 Caddy 的安装使用,并通过图文来解析其原理。Caddy 是唯一一个在默认情况下自动使用 HTTPS 的 Web 服务器,可以用来完成跨域请求、反向代理、静态文件服务器、部署.原创 2020-05-25 06:28:24 · 1702 阅读 · 1 评论 -
基于 qiankun 的微前端最佳实践(万字长文) - 从 0 到 1 篇
写在开头微前端系列文章:基于 qiankun 的微前端最佳实践(万字长文) - 从 0 到 1 篇基于 qiankun 的微前端最佳实践(图文并茂) - 应用间通信篇万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇)本系列其他文章计划一到两个月内完成,点个 关注 不迷路。计划如下:生命周期篇;IE 兼容篇;生产环境部署篇;性能优化、缓存方案篇;引言大家好~本文是基于 qiankun 的微前端最佳实践系列文章之 从 0 到 1 篇,本文将.原创 2020-05-13 19:01:55 · 4613 阅读 · 8 评论 -
基于 qiankun 的微前端最佳实践(图文并茂) - 应用间通信篇
大家好~本文是基于 qiankun 的微前端最佳实践系列文章之 应用间通信篇,本文将分享在 qiankun 中如何进行应用间通信。在开始介绍 qiankun 的应用通信之前,我们需要先了解微前端架构如何划分子应用。在微前端架构中,我们应该按业务划分出对应的子应用,而不是通过功能模块划分子应用。这么做的原因有两个:在微前端架构中,子应用并不是一个模块,而是一个独立的应用,我们将子应用按业务划分可以拥有更好的可维护性和解耦性。子应用应该具备独立运行的能力,应用间频繁的通信会增加应用的复杂度和耦合度.原创 2020-05-08 18:06:22 · 8522 阅读 · 2 评论 -
万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇
本文将针对微前端框架 qiankun 的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是 微前端。微前端 是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时,它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submod...原创 2020-04-06 11:54:25 · 5614 阅读 · 2 评论 -
万字长文+图文并茂+全面解析 React 源码 - render 篇
今天想了比较久的时间,准备开启这一系列的文章,旨在对 React 系列的源码进行深度解析,其中包含但不限于 react、react-dom、react-router... 等一系列优秀的 React 系列框架,最后再一一实现这些框架的简易版本。本篇文章将会是对 react 和 react-dom 渲染过程源码的深度解析,我们将从官方 API 以及一些简易 Demo 来进入 react 的内部世界...原创 2020-03-22 19:08:49 · 3811 阅读 · 0 评论 -
React 服务端渲染实战,Next 最佳实践
开门见山的说,服务端渲染有两个特点:响应快,用户体验好,首屏渲染快对搜索引擎友好,搜索引擎爬虫可以看到完整的程序源码,有利于SEO如果你的站点或者公司未来的站点需要用到服务端渲染,那么本文将会是非常适合你的一篇入门实战实践教学。本文采用 next 框架进行服务器渲染框架的搭建,最终将完成几个目标:项目结构的划分;SEO 优化以及首屏加载速度的提升;登录鉴权以及路由的处理;对报错...原创 2020-03-14 12:32:46 · 748 阅读 · 0 评论