rollup打包JavaScript class模块的处理分析

简介: rollup打包JavaScript class模块的处理分析

模块源文件

简单写一个模块源文件,用于后续的分析。

class PmsLib {
  constructor(option) {
    ///
  }
  getBaseData() {
    return this.baseData;
  }
  static _jQueryInterface() {
    return new PmsLib(option);
  }
}

class转换

要说JavaScript里面没有类的概念那是真的。class也只不过是语法糖。

var PmsLib = /*#__PURE__*/function () {
    /// 从rollup转换后的代码上看,class的声明转化成了一个匿名函数
    /// 还特地加上了/*#__PURE__*/
}

constructor转换

这个就是constructor转化成了对应的函数。

var PmsLib = /*#__PURE__*/function () {
  /// 从rollup转换后的代码上看,class的声明转化成了一个匿名函数
  /// 还特地加上了/*#__PURE__*/
  
  /// constructor
  function PmsLib(option) {
    /// 其实构造函数就是构造了一个匿名函数闭包范围内的同名函数
    /// 后面在需要的时候由new操作符构造并返回
  }
}

非static函数转换

prototype是一个关键,也是JavaScript里无处不在的原型。rollup会生成一个_proto作为PmsLib的prototype,所有“非static”的函数都会被装进这个原型里。

var PmsLib = /*#__PURE__*/function () {
  /// 从rollup转换后的代码上看,class的声明转化成了一个匿名函数
  /// 还特地加上了/*#__PURE__*/
  
  /// constructor
  function PmsLib(option) {
    /// 其实构造函数就是构造了一个匿名函数闭包范围内的同名函数
    /// 后面在需要的时候由new操作符构造并返回
  }
  
  /// 非static的函数处理开始
  /// rollup帮我们自动加上这个原型
  var _proto = PmsLib.prototype;
  /// getBaseDate被装到这个原型里
  _proto.getBaseData = function getBaseData() {
      return this.baseData;
  };
}

static函数转换

非常清晰有没有?之前类里面的声明成static的同名函数,由rollup直接构造出来。

var PmsLib = /*#__PURE__*/function () {
  /// 从rollup转换后的代码上看,class的声明转化成了一个匿名函数
  /// 还特地加上了/*#__PURE__*/
  /// constructor
  function PmsLib(option) {
     /// 其实构造函数就是构造了一个匿名函数闭包范围内的同名函数
     /// 后面在需要的时候由new操作符构造并返回
  }
  
  /// 非static的函数处理开始
  /// rollup帮我们自动加上这个原型
  var _proto = PmsLib.prototype;
  /// getBaseDate被装到这个原型里
  _proto.getBaseData = function getBaseData() {
      return this.baseData;
  };
  
  /// static的函数处理开始
  PmsLib._jQueryInterface = function _jQueryInterface() {
    /// 这里new的是function对象,不是class,因为没有`class`
    return new PmsLib(option);
  };
}
相关文章
|
2月前
|
Web App开发 监控 JavaScript
监控和分析 JavaScript 内存使用情况
【10月更文挑战第30天】通过使用上述的浏览器开发者工具、性能分析工具和内存泄漏检测工具,可以有效地监控和分析JavaScript内存使用情况,及时发现和解决内存泄漏、过度内存消耗等问题,从而提高JavaScript应用程序的性能和稳定性。在实际开发中,可以根据具体的需求和场景选择合适的工具和方法来进行内存监控和分析。
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
788 1
|
2月前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
51 3
|
2月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
64 4
|
2月前
|
JavaScript 前端开发 API
Vue.js与Angular的优劣分析
Vue.js和Angular都是非常流行的JavaScript框架,它们在构建现代Web应用程序方面各有优劣
|
2月前
|
运维 监控 JavaScript
鸿蒙next版开发:分析JS Crash(进程崩溃)
在HarmonyOS 5.0中,JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash,包括异常捕获、日志分析和典型案例,帮助开发者定位问题、修复错误,提升应用稳定性。通过DevEco Studio收集日志,结合HiChecker工具,有效解决JS Crash问题。
63 4
|
2月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
353 9
|
2月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
61 1
|
2月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
49 1
|
3月前
|
JavaScript 中间件 Shell
Node.js JXcore 打包
10月更文挑战第8天
40 1