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組件

功能清單

總結

每一個功能一個小結，每一個小結帶上技巧分析 疑問 ##  ### 功能清單 ##

      好了，完成了第一個組件的探索，沉溺學習不可自拔哈哈，下篇就要探索「工程組織」搭建一個組件小實驗室，便於後續源碼探索與實驗。