elementUi原始碼解析 1 專案結構篇

因為在忙其他事情好久沒有更新iview的原始碼，也是因為後面的一些元件有點複雜在考慮用什麼方式把複雜的功能邏輯簡單的展示出來，還沒想到方法，突然想到element的元件基本也差不多，內部功能的邏輯也差不多，就一起來看原始碼，element用的css預處理器是sass。

build：放置webpack的配置檔案。

examples：放置element api的頁面文件。

packages：放置element的元件(css樣式放置在這個目錄下theme-chalk下)。

src/directives：放置自定義指令。

src/locale：放置語言的配置檔案。

src/mixins：放置元件用的混合檔案。

src/transitions：放置動畫配置檔案。

src/utils：放置用到工具函式檔案。

src/index.js：元件註冊的入口檔案。

test：測試檔案。

個人還是比較喜歡iview的專案結構(iview原始碼解析(1))，感覺更清晰一點，專案結構的目的還是有序的管理**,根據團隊實際習慣選擇哪種結構。index.js的元件註冊和iview的差不多，這裡就不重複了。

樣式element的樣式用的是sass，而且在class的命名上和iview有點差別。

element的樣式：

@include when(disabled) {

.el-input__inner {

background-color: $--input-disabled-fill;

border-color: $--input-disabled-border;

color: $--input-disabled-color;

cursor: not-allowed;

&::placeholder {

color: $--input-disabled-placeholder-color;

.el-input__icon {

cursor: not-allowed;

在看下最後編譯的class命名：

.el-input--medium .el-input__inner {

height: 36px;

line-height: 36px;

.el-input--suffix .el-input__inner {

padding-right: 30px;

iview的樣式**：

// prefix & suffix

&-prefix, &-suffix{

width: 32px;

height: 100%;

text-align: center;

position: absolute;

left: 0;

top: 0;

z-index: 1;

i{font-size: 16px;

line-height: @input-height-base;

color: @subsidiary-color;

&-suffix{

left: auto;

right: 0;

i{font-size: 14px;

line-height: @input-height-small;

elementUi原始碼解析 1 專案結構篇

因為在忙其他事情好久沒有更新iview的原始碼，也是因為後面的一些元件有點複雜在考慮用什麼方式把複雜的功能邏輯簡單的展示出來，還沒想到方法，突然想到element的元件基本也差不多，內部功能的邏輯也差不多，就一起來看原始碼，element用的css預處理器是sass。個人還是比較喜歡iview的專案...

Qt原始碼解析 1

本文 感謝原創者分享 如果你閱讀了 qt 的源 你會看到一堆奇奇怪怪的巨集，例如 q d，q q。我們的qt原始碼之旅就從理解這些巨集說起。下面先看乙個c 的例子。cpp class person person string name void setname string name int age...

jquery原始碼解析1

學了很久的js也寫了很長時間的jquery了，這裡來以學習的態度來看大牛的思想和架構。使用的是當前最新版本 3.1.1 就不考慮煩人的ie 6 7 8了，輕鬆愉快。其實一上來不知所措，這都是啥？function global,factory return factory w else typeof ...