运用 Webpack 时需防止轮回援用

2024年4月30日 243次阅读 来源: Meathill

开辟日历控件的时刻，对方变动了一下需求，基础大将终究产物分红两个：

  1. 挑选一连时候段

  2. 挑选多个不一连时候

那末我们晓得，关于这类大部分功用一致，只要多少函数逻辑差别的产物，最合适的就是状态形式。因而很天然的，我就拿“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：昔时写依靠注入和包管理东西的时刻，就卡在这个处所，怎样都想不通，因而一向也没写完。没想到这些个浓眉大眼有头发的，也都这么不负责任，这类题目都不处理就搞出来让全世界人用了。

也见我的博客，双方同步更新。

    原文作者：Meathill
    原文地址: https://segmentfault.com/a/1190000008530017
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞