前端列表可編輯的實現與最佳化（下）

妙9999發表於2024-04-15
前端

方案三的最佳化

  本來這件事已經過去了，如果不是那天在閱讀同事原始碼，表格可編輯也不會再想著去最佳化了；至於為什麼會去閱讀同事的程式碼呢？是因為這個客戶端和這個二次封裝元件庫都沒有使用文件，所以從入職開始就是一直請教老同事和閱讀老同事的原始碼；因為看得太多了，一有空就看看同事程式碼，以至於後來光看程式碼都可以推測出是誰寫的；這個最終方案就是從同事程式碼中得來的，他的實現思路給小弟最大的靈感就是重寫表格項 cell 的渲染函式--renderCell；實在想不到怎麼發現這個的介面，無奈大佬好像一直在忙，在等了好幾天後，看準時機，馬上去請教，大佬只提了句Element-UI文件有提到這個。看來確實是小弟心粗智劣。但回去看了半天文件，查了七八個版本，都是隻有一個renderHeader啊；先按大佬的思路來最佳化以下方案三；

  只要重寫每個表格元件例項的columns陣列物件--column的renderCell。

  原理

至於大佬是怎麼知道了，已經不得而知了。小弟只能硬著頭皮去查原始碼。

  Element-UI中，日期選擇器和表格這兩個元件都是用大量的程式碼搭建的幾乎完美的元件，檔案都有十五個以上了；上次閱讀也是因為太過龐大複雜而半途而廢；而表格元件的程式碼中，使用 template、jsx、渲染函式 這三種方法來建立虛擬節點，其中更是使用了函式式風格，和對Vue框架的擴充套件，才使得這個元件在呼叫上簡單又不失去靈活，功能完備又極具擴充套件性；充分得體現的這些開發工程師的深厚的功力，把對JavaScript和Vue的理解和使用展現的淋漓盡致；更表現出其對工程一絲不苟的態度和對全域性的把控，細節的注重；確實讓人佩服啊。沒有足夠的耐性和沉穩，無法完成這樣的工程啊。回想自己，漸漸慚愧起來。

  在table.vue檔案中，用 table-body來完成主體的構建，table-body中最終使用rowRender來生成每行的<TableRow>的虛擬節點，接著在 table-row.js 檔案中使用父元件的columns陣列物件的column；該物件的就宣告瞭renderCell，呼叫這個物件的renderCell生成該行的每個表格項的虛擬節點；但是這個renderCell又在定義了呢？繼續繞回去，再回去在 table-row.js 檔案搜尋，還是沒有，繼續上找，翻完這四個大元件，都沒有宣告這個函式啊？太繞了；

    renderCell: function(h, { $index, column }) {
      let i = $index + 1;
      const index = column.index;

      if (typeof index === 'number') {
        i = $index + index;
      } else if (typeof index === 'function') {
        i = index($index);
      }

      return <div>{ i }</div>;
    }

  人家都有這麼強大的耐心來做工程，小弟居然練閱讀的耐心都沒有嗎？想到這裡，實在汗顏啊！暗暗給自己加把勁，向大佬學習！要耐住性子！

  columns陣列最終table.vue檔案匯入的Vuex倉庫例項中，但是也沒有這個函式；試下檔案搜尋吧，在這個table元件的資料夾中搜尋renderCell；生成表格項的renderCell原始碼 ，在node_modules/element-ui/packages/table/src/config.js；繼續搜尋這個config.js檔案；在table-column.js檔案被呼叫，但這個檔案居然在這個table元件的資料夾中沒有被呼叫，奇了怪啊；納悶了好久，原來在另外的table-column資料夾中被組成為全域性元件。

import ElTableColumn from '../table/src/table-column';

/* istanbul ignore next */
ElTableColumn.install = function(Vue) {
  Vue.component(ElTableColumn.name, ElTableColumn);
};

  差不多理解了，接著重寫這個函式，

相關文章