資訊專欄INFORMATION COLUMN
摘要：然則明明是定義了的，只是驗證兩個類文件的話，均未出現(xiàn)任何語法錯誤。打開開發(fā)者工具，勾上，觀察發(fā)生異常時的狀況，一遍又一遍，我漸漸意識到，發(fā)生這個錯誤的時候，還未能在的環(huán)境中完成注冊。
開發(fā)日歷控件的時候，對方變更了一下需求，基本上將最終產(chǎn)品分成兩個：
選擇連續(xù)時間段
選擇多個不連續(xù)時間
那么我們知道，對于這種大部分功能一致，只有若干函數(shù)邏輯不同的產(chǎn)品，最合適的就是狀態(tài)模式。于是很自然的，我就拿“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() 放到了父類里面，通過判斷參數(shù)確定應該返回哪一類實例。代碼寫完，測試的時候卻報錯：
Super expression must either be null or a function, not undefined
這個意思很明顯，被繼承的父類不能未定義。然則 DatePicker 明明是定義了的，只是驗證兩個類文件的話，均未出現(xiàn)任何語法錯誤。
遇事不決先 Google，還真找到很多結果，不過大多數(shù)都和 React.Component 有關，翻了半天一無所獲，只好自力更生。打開 Chrome 開發(fā)者工具，勾上“Pause on Exceptions”，觀察發(fā)生異常時的狀況，一遍又一遍，我漸漸意識到，發(fā)生這個錯誤的時候，DatePicker 還未能在 webpack 的環(huán)境中完成注冊。問題找到了！
與其它編譯類語言不同，JS 是動態(tài)語言，所有 JS 代碼都是放到統(tǒng)一的環(huán)境里跑的，類的代碼如此，import 也是如此。所以對于其他語言，比如 ActionScript、Java，循環(huán)引用，即 A 引用 B，B 也引用 A，是沒問題的，因為類的代碼都會編譯到執(zhí)行文件，執(zhí)行的時候，都已經(jīng)在環(huán)境中；而 JS 是邊執(zhí)行邊置入環(huán)境，具體到我這里，在將父類 DatePicker 放入環(huán)境時，會先 import 子類 RangeDatePicker 的代碼，而子類又會要求 import 父類的代碼，父類的代碼正在引入中，于是便產(chǎn)生了問題。
想明白這點，后面就好辦了，直接創(chuàng)建一個工廠類，把工廠方法放到里面執(zhí)行，問題便解決了：
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：當年寫依賴注入和包管理工具的時候，就卡在這個地方，怎么都想不通，于是一直也沒寫完。沒想到這些個濃眉大眼有頭發(fā)的，也都這么不負責任，這種問題都不解決就搞出來讓全世界人用了。
也見我的博客，兩邊同步更新。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/81830.html
摘要：打包出來的代碼快照如下，注意看注釋中的時序實際上，的處理同相差無幾，只是在定義模塊和引入模塊時會去處理標識，從而兼容其在語法上的差異。 前言 隨著 Web 技術的蓬勃發(fā)展和依賴的基礎設施日益完善，前端領域逐漸從瀏覽器擴展至服務端（Node.js），桌面端（PC、Android、iOS），乃至于物聯(lián)網(wǎng)設備（IoT），其中 JavaScript 承載著這些應用程序的核心部分，隨著其規(guī)模化和...
摘要：插入迭代器如前面兩條語句可以寫成使用直接量替換為替換為替換為如果要創(chuàng)建具有一些特性的一般對象，也可以使用字面量，如下前面的代碼可用對象字面量來改寫成這樣使用優(yōu)化多次一旦需要更新請考慮使用文檔碎片來構建結構，然后再將其添加到現(xiàn)存的文檔中。 好贊，收藏自 總結的js性能優(yōu)化方面的小知識（不喜勿噴） 前言 一直在學習javascript，也有看過《犀利開發(fā)Jquery內核詳解與實踐》，對...
摘要：由于新建項目發(fā)版打包時間大概需要分鐘，發(fā)版時嚴重拖慢下班時間，所以特意查看了相關文檔來優(yōu)化打包速度，爭取早點下班，。分析打包文件要優(yōu)化，先分析。 由于新建項目發(fā)版打包時間大概需要30分鐘，發(fā)版時嚴重拖慢下班時間，所以特意查看了相關文檔來優(yōu)化打包速度，爭取早點下班，^_^。 分析打包文件 要優(yōu)化，先分析。我們先要知道到底是哪里拖慢我們的打包速度呢？ 打包后生成文件分析 可以利用webpa...
摘要：本期推薦文章類內存泄漏及如何避免，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。四種常見的內存泄漏劃重點這是個考點意外的全局變量未定義的變量會在全局對象創(chuàng)建一個新變量，如下。因為老版本的是無法檢測節(jié)點與代碼之間的循環(huán)引用，會導致內存泄漏。 （關注福利，關注本公眾號回復[資料]領取優(yōu)質前端視頻，包括Vue、React、Node源碼和實戰(zhàn)、面試指導） 本周正式開始前端進階的第一期，本周的主題...
閱讀 2343·2021-09-30 09:47
閱讀 2963·2019-08-30 11:05
閱讀 2536·2019-08-29 17:20
閱讀 1923·2019-08-29 13:01
閱讀 1731·2019-08-26 13:39
閱讀 1258·2019-08-26 13:26
閱讀 3215·2019-08-23 18:40
閱讀 1833·2019-08-23 17:09
