elementUI随笔

前言 

      忙里偷闲，身为一名搬砖农民工，想兢兢业业搬好每块砖，就需要巩固和提升自我技术水平，给自己定了个小目标帮助elementUI修复缺陷或提交一个PR，有了这个目标，我就先从阅读其源码开始落实。本文为阅读elementUI源码的笔记，完整个人注释在LearnElementUI 

水平有限，文章有错误实属正常 : ) 欢迎指出，互相探讨，共同进步，轻轻轻喷哈

项目的组成

      elementUI项目的组成我将其分为几大类主题：

      设计与交互：

            遵循一致性、反馈、效率和可控设计与交互原则。 

      工程组织：

            monorepo替代Multirepos的代码管理方式，通过lerna解决core repo、changeLog等人肉维护问题。cooking简化开发依赖。

       持续集成与发布：

             Karma 搭配 Mocha 和 Chai 等工具在 Travis CI 里做持续集成测试。

       风格：

             用BEM风格避免样式层级嵌套方便换肤等，用postcss落地css4风格语法。

       工具类：

             抽象并封装一系列工具方法，便于复用。

             外部工具： async-validator/deepmerge/normalize-wheel/throttle-debounce/popper 
             内部工具： directive/service/mixins/transitons/dom/popup/vue-popper/local/dateUtil/timeUtil 

      组件：

            独立可复用的vue实例，组成应用的最小颗粒。

            简单组件： scrollBar/popper/tooltip/formItem(validate)/collapse-transition
            复合组件： table/messageBox/dialog/select/menu/cascader/DateTimePicker  

------------------------------------------------------------------------------------------------

      我先探索“组件”和“风格”而“工程组织”下次再详细探讨。elementUI由如下组件和工具类构成。

                                                            图一：包含组件

                                                            图二：包含工具类

      探索一个组件需要完成什么功能，由什么构成，样式的分析，和其他组件配合时需要注意什么，完成过程中有没有什么好的技巧？由浅入难，我找了个复杂度中等的select组件，事不宜迟，带着问题开始阅读探索。

Select组件

构成与功能清单

          

                                                         图四：Select 组件构成

   

                                                         图三：Select 功能清单

Option组件

      Option组件承担了如下职责：是否可选、选中、显示选项值、可选项的数目。 Option完整注解 

Tag组件

      Tag组件承担了删除选项事件派发职责。Tag完整注解

Option-Group组件

      没有承担什么职责，主要做派发操作如：查询值变化、选项分组可选变化。

Select-dropdown组件

      Select-dropdown组件主要职责是作为popper容器，popper用于实现下拉浮动效果，所以我们先看看popper是如何实现的。

Popper 

       popper由下图构成并通过执行对应的modifier处理偏移数据。原作者的注释非常的完善，我就只着重的标识了些需要注意的地方。完整注释

改造Select组件

功能清单

总结

每个功能一个小结，每个小结带上技巧分析 疑问 ##  ### 功能清单 ##

      好了，完成了第一个组件的探索，沉溺学习不可自拔哈哈，下篇就要探索“工程组织”搭建一个组件小实验室，便于后续源码探索与实验。