1. 程式人生 > >element-ui 源碼架構

element-ui 源碼架構

國際 date 獲取 value normal ear nbsp ram params

1、項目結構

技術分享圖片

技術分享圖片

2、src下的入口文件

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

入口文件實現的功能為:

(1)國際化配置

(2)組件全局註冊

(3)在prototype上掛載共用方法

技術分享圖片

3、自定義指令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就是“函數防抖”!請參考https://www.cnblogs.com/mengfangui/p/9515993.html。

技術分享圖片

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

技術分享圖片

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

5、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已經移除的一些屬性

6、collapse-transition.js
函數式組件(待研究)

7、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獲取。

技術分享圖片

element-ui 源碼架構