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);
  };
}
相关文章
|
1月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
22 2
|
3月前
|
JavaScript Android开发
AutoJs4.1.0实战教程---js文件打包发布成APK文件
AutoJs4.1.0实战教程---js文件打包发布成APK文件
102 0
AutoJs4.1.0实战教程---js文件打包发布成APK文件
|
3月前
|
分布式计算 JavaScript 前端开发
超级实用!详解Node.js中的lodash模块和async模块
超级实用!详解Node.js中的lodash模块和async模块
|
3月前
|
JSON JavaScript 前端开发
超级实用!详解Node.js中的util模块和express模块
超级实用!详解Node.js中的util模块和express模块
|
3月前
|
JavaScript
超级实用!详解Node.js中的path模块和events模块
超级实用!详解Node.js中的path模块和events模块
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
13天前
|
JavaScript 前端开发 API
框架分析(3)-Vue.js
框架分析(3)-Vue.js
|
28天前
11_nest.js模块
11_nest.js模块
24 0
|
1月前
|
监控 JavaScript 安全
监控内网电脑软件设计与实现:基于Node.js的服务器端架构分析
在当今信息技术高度发达的时代,监控内网电脑的需求日益增长。企业需要确保网络安全,个人用户也需要监控家庭网络以保护隐私和安全。本文将介绍一种基于Node.js的服务器端架构,用于设计和实现监控内网电脑软件。
102 0
|
1月前
|
JavaScript
Node.js之http模块
Node.js之http模块