Element-UI库 源码架构浅析

Posted ygunoil

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element-UI库 源码架构浅析相关的知识,希望对你有一定的参考价值。

我们在系统地学习如何开发前端的SPA项目时,在搭建完脚手架之后,不得不绕开的一个框架那就是UI库。UI库是一套集成的前端页面UI组件,可以帮助开发者更好地搭建美观的网站,缩短开发周期。我最近花了很长时间整理了Element-ui库的源码架构细节,下面通过这篇长文分段分享给大家

系统架构

我们首先从README.md这个markdown文档中:

 

技术图片README.md

 

可以得出:element-ui的最终形式就是一个外部的新Vue组件,可以添加集成到Vue主组件中,element-ui这个组件内部也包含着很多的Vue组件,例如Select、Button等等。

  • 主入口文件./src/index.js,此入口文件继承了所有element-ui的组件,并为原型提供了一部分创建组件的捷径方法,也是webpack打包的入口文件。

  • 外部方法./src/utils/…,此文件夹包含了element-ui库的大部分外部方法,用于优化,便捷一些核心组件内部的业务逻辑。

  • 额外的外部方法./src/mixins/…,此文件夹包含了element-ui库的一些外部方法。

  • 交互操作方法./src/directives/…,此文件夹包含了交互操作所规定的一些方法。

  • 核心业务组件./packages/…,此文件夹包含了element-ui所提供的API的核心代码实现,也是element-ui库的关键。

我们下面讲解element-ui库代码就从上面的五个大模块入手,简要地解析这个element-ui的源码是如何一步一步地实现整个ui库框架的。

主入口文件

此入口文件继承了所有element-ui的组件,并为原型提供了一部分创建组件的捷径方法,也是webpack打包的入口文件。

./src/index.js

技术图片主入口文件

我们可以看到主入口文件对packages核心组件的大量引入,我们可以把主入口文件看作是一个组件产品的集成体,为开发者的实际项目提供服务。下面就通过主入口文件来对packages的核心组件进行分析,然后通过packages核心组件中的外部方法,来寻找相应的方法,在进行分析。

核心业务组件

核心业务组件位于 /src/packages/ 文件夹中。是整个element-ui库的核心,提供了大量的组件服务给开发者。我们从使用ui库常见的一个组件el-button开始,来先初步地了解ui库内部的核心组件是如何工作的。

./packages/button/index.js

 

./packages/button/src/button.vue

技术图片button.vue

./packages/button/src/button-group.vue

技术图片button-group.vue

我们从el-button组件的入口文件index.js中可以发现,el-button用于展现button按钮的组件来源于src文件夹,使用了install方法,来使开发者开发实际项目中可以使用Vue.use()来进行全局注册。

我们再来看button.vue文件,这是一个很典型的vue单文件组件。规定了用用户该拥有的所有属性,以及内部的span字段,封装了click方法。

其中还有一个特别值得关注的点就是:在script中,使用了inject方法。在Vue框架中,包含这些组合关系,常见的例子有this.$parents为Vue实例访问其父实例。Vue提供了provide/inject,主要在开发高阶插件/组件库这一类复杂项目中使用,一般情况下,普通项目是不会用到的,这对选项(provide/inject)一起使用,使得祖先组件可以对其后代组件注入依赖。

  • provide:> Object | () => Object

  • inject: > Array | {[key:string]:string | Symbol | Object}

上面给出了所可能情况下的数据类型,provide返回的应该是一个对象或者一个对象返回的函数,该对象包含着组件注入后代组件的属性,无论层次有多深始终生效。
inject则是一个字符串数组或者一个对象,对象的key是本地的绑定名在可用的注入内容中搜索用的 key (字符串或 Symbol),或一个对象。我们的el-button例子中就继承了el-form和el-formitem的所有provide内容。

以上是关于Element-UI库 源码架构浅析的主要内容,如果未能解决你的问题,请参考以下文章

element-ui 源码架构

饿了么element-ui源码解读 button

vue中element-ui如何修改源码

element-ui 修改源码实践 --tranfer

在vue2.0中引用element-ui组件库

:Element-ui组件库