关于阅读element-ui源码的一些体会

2,565 阅读2分钟

element-ui 语义化做的太好了,命名与功能对应的非常贴切

针对某个具体的组件的源码阅读的建议:

  • 先看element-ui官网对应的文档;
  • 对于.vue .js 引入的文件也需要理解;
  • 在快速浏览一下组件的.vue文件,是自己对组件的基本结构有一个大致的了解;
  • 在浏览一下.js文件,对事件多少有个印象;
  • 在阅读时,留心自己的疑问,但不要死磕某个点,有些问题在了解组件的大致构成后,会很自然的得到答案;
  • 在文档上ctrl+F搜索看下,看文章时对照文档,可以获得更多信息,文章不是文档难免省略一些文档上的信息;

调试element-ui官网demo的两种方式:

  • 在官网的demo文档点击“在线运行”,可以在线编辑;
  • 推荐:下载源码,将源码在本地运行起来,将element-ui官网运行在本地,可以直接修改examples/docs下的文档demo,重要的是修改源码能够直接反应在文档的demo中,便于理解源码;
npm install
npm run dev

以el-dialog组件为例: 组件el-dialog的文档demo,element\examples\docs\zh-CN\dialog.md 组件源码:element-dev\packages\dialog\src\component.vue

最初的想法:

想阅读Element-UI 各个组件的方式来提高自己对vue api和高阶组件的掌握程度; 抽丝剥茧,逐渐深入; 先从简单的组件开始吧,布局组件没有任何事件;

初见交互复杂组件

在阅读element-ui源码的过程中发现,在复杂的组件中类、函数、mixinsprovide   inject、抽象的工具类均有使用,一个组件关联的文件太多了,以我现在的文笔实在写不清楚,只好暂时总结下在阅读中发现的一些有趣的点,以自问自答的形式记录下来;

熟悉了几个复杂组件后

在看几个了复杂组件后,对element-ui组件的基本组织结构有了大体上的认知,总算形成了有结构的文字;

PS:看了黄轶老师的element-ui技术解密,自己也试着理解element-ui,把软件里的笔记整理一下;

To Be Contuine

布局组件el-col el-row

表单组件el-form el-form-item

全局组件message

管理弹窗组件的工具类Popup,结合组件el-dialg