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，就不多說了。