使用 Webpack 时需避免循环引用

paulquei 发布于2019-08-20 14:40 / 1233人阅读

摘要：然则明明是定义了的，只是验证两个类文件的话，均未出现任何语法错误。打开开发者工具，勾上，观察发生异常时的状况，一遍又一遍，我渐渐意识到，发生这个错误的时候，还未能在的环境中完成注册。

开发日历控件的时候，对方变更了一下需求，基本上将最终产品分成两个：

选择连续时间段

选择多个不连续时间

那么我们知道，对于这种大部分功能一致，只有若干函数逻辑不同的产品，最合适的就是状态模式。于是很自然的，我就拿“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使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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