成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

使用 Webpack 時(shí)需避免循環(huán)引用

paulquei / 1406人閱讀

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

開發(fā)日歷控件的時(shí)候，對方變更了一下需求，基本上將最終產(chǎn)品分成兩個(gè)：

選擇連續(xù)時(shí)間段

選擇多個(gè)不連續(xù)時(shí)間

那么我們知道，對于這種大部分功能一致，只有若干函數(shù)邏輯不同的產(chǎn)品，最合適的就是狀態(tài)模式。于是很自然的，我就拿“2”作為標(biāo)準(zhǔn)模式，“1”作為新模式，將其重構(gòu)成父類和子類，大概關(guān)系如下：

// 父類
// 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 {

}

因?yàn)檫@個(gè)類只有兩個(gè)成員，所以我把工廠方法 .getInstance() 放到了父類里面，通過判斷參數(shù)確定應(yīng)該返回哪一類實(shí)例。代碼寫完，測試的時(shí)候卻報(bào)錯(cuò)：

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

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

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

與其它編譯類語言不同，JS 是動(dòng)態(tài)語言，所有 JS 代碼都是放到統(tǒng)一的環(huán)境里跑的，類的代碼如此，import 也是如此。所以對于其他語言，比如 ActionScript、Java，循環(huán)引用，即 A 引用 B，B 也引用 A，是沒問題的，因?yàn)轭惖拇a都會(huì)編譯到執(zhí)行文件，執(zhí)行的時(shí)候，都已經(jīng)在環(huán)境中；而 JS 是邊執(zhí)行邊置入環(huán)境，具體到我這里，在將父類 DatePicker 放入環(huán)境時(shí)，會(huì)先 import 子類 RangeDatePicker 的代碼，而子類又會(huì)要求 import 父類的代碼，父類的代碼正在引入中，于是便產(chǎn)生了問題。

想明白這點(diǎn)，后面就好辦了，直接創(chuàng)建一個(gè)工廠類，把工廠方法放到里面執(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：當(dāng)年寫依賴注入和包管理工具的時(shí)候，就卡在這個(gè)地方，怎么都想不通，于是一直也沒寫完。沒想到這些個(gè)濃眉大眼有頭發(fā)的，也都這么不負(fù)責(zé)任，這種問題都不解決就搞出來讓全世界人用了。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/81830.html

相關(guān)文章

  • Javascript 模塊化指北

    摘要：打包出來的代碼快照如下，注意看注釋中的時(shí)序?qū)嶋H上，的處理同相差無幾，只是在定義模塊和引入模塊時(shí)會(huì)去處理標(biāo)識，從而兼容其在語法上的差異。 前言 隨著 Web 技術(shù)的蓬勃發(fā)展和依賴的基礎(chǔ)設(shè)施日益完善，前端領(lǐng)域逐漸從瀏覽器擴(kuò)展至服務(wù)端（Node.js），桌面端（PC、Android、iOS），乃至于物聯(lián)網(wǎng)設(shè)備（IoT），其中 JavaScript 承載著這些應(yīng)用程序的核心部分，隨著其規(guī)?；?..

    enali 評論0 收藏0

  • javascript性能優(yōu)化方面的知識總結(jié)

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

    BlackHole1 評論0 收藏0

  • 【Vue項(xiàng)目總結(jié)】webpack常規(guī)打包優(yōu)化方案

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

    andong777 評論0 收藏0

  • 【進(jìn)階1-5期】JavaScript深入之4類常見內(nèi)存泄漏及如何避免

    摘要：本期推薦文章類內(nèi)存泄漏及如何避免，由于微信不能訪問外鏈，點(diǎn)擊閱讀原文就可以啦。四種常見的內(nèi)存泄漏劃重點(diǎn)這是個(gè)考點(diǎn)意外的全局變量未定義的變量會(huì)在全局對象創(chuàng)建一個(gè)新變量，如下。因?yàn)槔习姹镜氖菬o法檢測節(jié)點(diǎn)與代碼之間的循環(huán)引用，會(huì)導(dǎo)致內(nèi)存泄漏。 （關(guān)注福利，關(guān)注本公眾號回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)） 本周正式開始前端進(jìn)階的第一期，本周的主題...

    red_bricks 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<