element-ui 源碼架構

一、項目結構

二、src下的入口文件

https://github.com/ElemeFE/element/blob/dev/src/index.js

入口文件實現的功能爲：

（1）國際化配置

（2）組件全局註冊

（3）在prototype上掛載共用方法

三、自定義指令directives

自定義指令directives主要定義了2種情形：

（1）mousewheel.js

mousewheel.js主要使用mousewheel.js（https://github.com/basilfx/normalize-wheel）來實現鼠標滾輪事件。

mousewheel.js應用在table組件中，如「固定表頭」，「流體高度」中。

 

（2）repeat-click.js

repeat-click.js就是「函數防抖」！請參考http://www.javashuo.com/article/p-oluohvzp-kt.html。

主要用在InputNumber 計數器中，控制用戶點擊頻率。

四、locale文件夾設置國際化語言

五、mixins

（1）emitter.js

emitter.js中定義2個函數：

broadcast(componentName, eventName, params)：廣播給子組件（向子組件方向傳遞）

dispatch(componentName, eventName, params)：分發給父組件（向父組件方向傳遞）

這2個函數在組件中使用很是多，因此不少組件中都定義了「componentName」自定義屬性，便於廣播和分發。

（2）focus.js

使dom元素獲取焦點

（3）locale.js

國際化輸出。

 

//使用 
import Locale from 'element-ui/src/mixins/locale'; {{ t('el.colorpicker.clear') }}

 （4）migrating.js

migrating.js 主要目的是在瀏覽器控制檯輸出 element ui已經移除的一些屬性

 六、collapse-transition.js

函數式組件（待研究）

 七、utils通用庫

（1）clickoutside.js

點擊元素外面纔會觸發的事件。

  import Clickoutside from 'element-ui/src/utils/clickoutside'; //自定義指令
directives: { Clickoutside }, //使用
v-clickoutside="close"

（2）date.js

日期格式化js。修改自fecha：https://github.com/taylorhakes/fecha

 

（3）dom.js

對dom元素進行操做，如hasClass，addClass，removeClass，getStyle，setStyle，on（綁定事件），off（解除事件）

（4）util.js

util.js定義一些經常使用函數：hasOwn，getValueByPath，valueEquals。

（5）vdom.js

vnode判斷，vodne獲取。

 八、能夠分模塊加載

如：import { Button, Select } from 'element-ui';

緣由是：每一個模塊都有install函數

import ElButton from './src/button'; /* istanbul ignore next */ ElButton.install = function(Vue) { Vue.component(ElButton.name, ElButton); }; export default ElButton;