Element-UI 技术揭秘(1)- 前言

16,966 阅读3分钟

背景

如果你用 Vue 技术栈开发 PC 的 to B 业务,那么对 element-ui 一定不会陌生,我目前在 Zoom 工作,fork 了一份 element-ui 的源码做二次开发,对 element-ui 的源码也有了一定的研究。由于自研组件库并不是开源的,所以我也不能把它的技术细节分享出来,但是对于 element-ui,它本身是开源的,并且大部分人还是会直接使用它,为了让大家能够熟悉 element-ui 的原理,少踩坑,少加班,我打算写系列文章对 element-ui 的实现抽丝剥茧,分析组件库的实现细节。

相信经过系统的学习后,你不仅可以对它的实现了如执掌,还能学习到很多复杂组件的实现思路,提升自己的技术能力,甚至也能自己手撸一个大型组件库。

系列文章设计

我首先会写一篇文章整体介绍组件库的设计,接着以组件为粒度,去写每一篇文章,遇到复杂的组件,可能会写多篇文章。

对于每一个组件,我会首先分析组件的作用、使用方法,设计思路,然后再去分析它的实现细节和原理,不仅会包括 JS 部分,也包括它的布局和 CSS 部分,这里面也会融入一些我的思考。

element-ui本身也依赖了很多优秀的第三方库,我在分析组件的过程中如遇到依赖的第三方库,也会整理出单独的文章分享。

由于 element 官方也在维护组件库,代码可能会更新,因此文中的代码难免会与最新源码有出入,所以我会写每个组件的时候贴上对应的版本号,未来如果某些组件的分析文章与源码如果出入过大,则会更新对应的文章。

如何学习

对于这类系列文章,顺序学习自然是最好的,如果你对某个组件感兴趣,也可以直接看到相应的文章。

我了解很多人看微信公众号的文章都是利用碎片化时间,对于快餐类的文章是没有问题的,但是如果你想深入学习到技术,我建议你还是 clone 一份 element-ui 的源码,坐在电脑前对照学习。

本文并不是如何使用 element-ui 组件库的教材,如果你仅仅想知道如何使用,强烈建议去看官网文档。

学习过程中可能会遇到一些问题,欢迎在文章下留言。

适合人群

  1. 正在以及想使用 element-ui 开发,前端开发经验 1 年+。

  2. 熟悉 Vue.js 技术栈,使用它开发过几个实际项目。

  3. 对原理技术感兴趣,想进阶和提升的同学。

更新速度

保持每周更新 1-2 篇文章的节奏。

写在最后

如果你觉得这类文章有帮助,也欢迎把它推荐给你身边的小伙伴。

下一篇预告 :Element-UI 技术揭秘(2)— 组件库的整体设计。

另外,我最近刚开了公众号「老黄的前端私房菜」,《Element-UI 技术揭秘》系列文章会第一时间在公众号更新和发布,除此之外,我还会经常分享一些前端进阶知识,干货,也会偶尔分享一些软素质技能,欢迎大家关注喔~