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，就很少說了。