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 ：測試檔案。
types ：這個檔案裡放了typescript的資料類，還沒找到哪裡用了這裡的類，歡迎大神留言指點

個人還是比較喜歡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;
}

可以看出命名規則是BEM 命名規範（了解更多）B(代表塊)__E(代表元素)--M(代表修飾符)

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;
    }
    &-wrapper-small &-prefix, &-wrapper-small &-suffix{
        i{
            font-size: 14px;
            line-height: @input-height-small;
        }
    }

命名也帶有B、E、M的意思但中間是

分開。

湊點文字篇幅，把Ant Design of React的項目結構也奉上把。

components :放置元件檔案（文檔、樣式都放在這裡面）。
components/demo :元件的api文檔。
components/tyle :元件的樣式檔案。
components/index.tsx :元件的入口檔案。
docs :Ant Design of React相關文檔。
scripts :打包的配置檔案。
site :公共檔案，包括樣式，js，語言配置檔案。
tests :測試檔案。

Ant Design of React的樣式的命名規則和iview差不多也是用less，就不多說了。