使用 Webpack 時需避免循環引用

paulquei 發布于2019-08-20 14:40 / 1333人閱讀

摘要：然則明明是定義了的，只是驗證兩個類文件的話，均未出現任何語法錯誤。打開開發者工具，勾上，觀察發生異常時的狀況，一遍又一遍，我漸漸意識到，發生這個錯誤的時候，還未能在的環境中完成注冊。

開發日歷控件的時候，對方變更了一下需求，基本上將最終產品分成兩個：

選擇連續時間段

選擇多個不連續時間

那么我們知道，對于這種大部分功能一致，只有若干函數邏輯不同的產品，最合適的就是狀態模式。于是很自然的，我就拿“2”作為標準模式，“1”作為新模式，將其重構成父類和子類，大概關系如下：

// 父類
// DatePicker.js

import RangeDatePicker from "./RangeDatePicker";

class DatePicker {
  ....
  static getInstance(el, options) {
    if (options.scattered) {
      return new DatePicker(el, options);
    } else {
      return new RangeDatePicker(el, options);
    }
}


// 子類
// RangeDatePicker.js

import DatePicker from "./DatePicker";

class RangeDatePicker extends DatePicker {

}

因為這個類只有兩個成員，所以我把工廠方法 .getInstance() 放到了父類里面，通過判斷參數確定應該返回哪一類實例。代碼寫完，測試的時候卻報錯：

Super expression must either be null or a function, not undefined

這個意思很明顯，被繼承的父類不能未定義。然則 DatePicker 明明是定義了的，只是驗證兩個類文件的話，均未出現任何語法錯誤。

遇事不決先 Google，還真找到很多結果，不過大多數都和 React.Component 有關，翻了半天一無所獲，只好自力更生。打開 Chrome 開發者工具，勾上“Pause on Exceptions”，觀察發生異常時的狀況，一遍又一遍，我漸漸意識到，發生這個錯誤的時候，DatePicker 還未能在 webpack 的環境中完成注冊。問題找到了！

與其它編譯類語言不同，JS 是動態語言，所有 JS 代碼都是放到統一的環境里跑的，類的代碼如此，import 也是如此。所以對于其他語言，比如 ActionScript、Java，循環引用，即 A 引用 B，B 也引用 A，是沒問題的，因為類的代碼都會編譯到執行文件，執行的時候，都已經在環境中；而 JS 是邊執行邊置入環境，具體到我這里，在將父類 DatePicker 放入環境時，會先 import 子類 RangeDatePicker 的代碼，而子類又會要求 import 父類的代碼，父類的代碼正在引入中，于是便產生了問題。

想明白這點，后面就好辦了，直接創建一個工廠類，把工廠方法放到里面執行，問題便解決了：

import DatePicker from "./DatePicker";
import RangeDatePicker from "./RangeDatePicker";

export default {
  createDatePicker(el, options) {
    if (options.scattered) {
      return new DatePicker(el, options);
    } else {
      return new RangeDatePicker(el, options);
    }
  }
}

PS：當年寫依賴注入和包管理工具的時候，就卡在這個地方，怎么都想不通，于是一直也沒寫完。沒想到這些個濃眉大眼有頭發的，也都這么不負責任，這種問題都不解決就搞出來讓全世界人用了。

也見我的博客，兩邊同步更新。

云服務器 GPU云服務器 webpack引用jquery 如何避免c語言死循環循環引用 webpack使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81830.html

Javascript 模塊化指北

摘要：打包出來的代碼快照如下，注意看注釋中的時序實際上，的處理同相差無幾，只是在定義模塊和引入模塊時會去處理標識，從而兼容其在語法上的差異。前言隨著 Web 技術的蓬勃發展和依賴的基礎設施日益完善，前端領域逐漸從瀏覽器擴展至服務端（Node.js），桌面端（PC、Android、iOS），乃至于物聯網設備（IoT），其中 JavaScript 承載著這些應用程序的核心部分，隨著其規模化和...

enali 2019-08-23 11:44 評論0 收藏0
javascript性能優化方面的知識總結

摘要：插入迭代器如前面兩條語句可以寫成使用直接量替換為替換為替換為如果要創建具有一些特性的一般對象，也可以使用字面量，如下前面的代碼可用對象字面量來改寫成這樣使用優化多次一旦需要更新請考慮使用文檔碎片來構建結構，然后再將其添加到現存的文檔中。好贊，收藏自總結的js性能優化方面的小知識（不喜勿噴）前言一直在學習javascript，也有看過《犀利開發Jquery內核詳解與實踐》，對...

BlackHole1 2019-08-22 10:56 評論0 收藏0
【Vue項目總結】webpack常規打包優化方案

摘要：由于新建項目發版打包時間大概需要分鐘，發版時嚴重拖慢下班時間，所以特意查看了相關文檔來優化打包速度，爭取早點下班，。分析打包文件要優化，先分析。由于新建項目發版打包時間大概需要30分鐘，發版時嚴重拖慢下班時間，所以特意查看了相關文檔來優化打包速度，爭取早點下班，^_^。分析打包文件要優化，先分析。我們先要知道到底是哪里拖慢我們的打包速度呢？打包后生成文件分析可以利用webpa...

andong777 2019-08-23 17:59 評論0 收藏0
【進階1-5期】JavaScript深入之4類常見內存泄漏及如何避免

摘要：本期推薦文章類內存泄漏及如何避免，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。四種常見的內存泄漏劃重點這是個考點意外的全局變量未定義的變量會在全局對象創建一個新變量，如下。因為老版本的是無法檢測節點與代碼之間的循環引用，會導致內存泄漏。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題...

red_bricks 2019-08-23 13:47 評論0 收藏0