javascript - 将代码转换为 ES6 模块

Question

我刚刚开始学习es6模块系统。我有一些 es5 javascript 代码，我想将其转换为 es6 模块。有3个javascript文件

workflow-designer.js

var WorkflowDesigner = (function () {
  var constructor = function (element, options) {
    var component = this;
    if ($(element).hasClass('panel')) {
      component.panel = $(element);
    } else {
      component.panel = $(element).closest('.panel');
    }
  };

  extend(Object, constructor, {
    getWorkflowName: function () {
      return 'WorkflowName001';
    },

    nextStep: function () {
      var o = {};
      o['id'] = -1;
      //some code here
      return o;
    },

    prevStep: function () {
      var o = {};
      o['id'] = -1;
      //some code here
      return o;
    }
  });

  return constructor;

})();

(function ($) {    
    $.fn.createWorkflowDesigner = function (options) {
        debugger;
        return this.map(function (index, element) {
            return new WorkflowDesigner($(element), options);
        });
    };

}(jQuery));

extend.js

function extend(parent, child, methods) {
    debugger;
    let Surrogate = function () {};
    Surrogate.prototype = parent.prototype;
    child.prototype = new Surrogate();
    child.prototype.constructor = child;
    // Add a reference to the parent's constructor
    child.parentConstructor = parent;

    // Copy the methods passed in to the prototype
    for (let name in methods) {
        if (methods.hasOwnProperty(name)) {
            child.prototype[name] = methods[name];
        }
    }
    // so we can define the constructor inline
    return child;
}

还有第三个文件utils.js，其中包含扩展方法，例如

if (!Array.prototype.find) {
    Array.prototype.find = function (predicate) {
        //some code here

    }
}

if (!Array.prototype.doSomething) {
    Array.prototype.doSomething = function (predicate) {
        //some code here

    }
}

$(document).keyup(function (event) {
    //somthing here.        
});

我知道要将代码转换为 es6 模块，我可以简单地导出 extend功能类似于 export function extend(.....)在 extend.js 文件中。但是，我不是 100% 确定如何将 workflow-designer 和 utils.js 转换为 es6 模块。

我怀疑我需要像下面这样将我的工作流设计器.js 转换为 es6 模块:

export default function workflowDesigner() {
    let constructor = function (element, options) {
        options = options || {};
        let component = this;
        if ($(element).hasClass('panel')) {
            component.panel = $(element);
        } else {
            component.panel = $(element).closest('.panel');
        }
    };
    //rest of the code here....

    return constructor;

};

请告诉我我的方向是否正确。

更新:根据 @Bergi 的建议，我更改了 extend函数如下:

export default function extend(parent, child, methods) {

  child.prototype = Object.create(parent.prototype);
  child.prototype.constructor = child;

  // Add a reference to the parent's constructor
  child.parentConstructor = parent;

  // Copy the methods passed in to the prototype
  Object.assign(child, methods);

  // so we can define the constructor inline
  return child;
} 

但是，现在我收到错误消息“workflowDesigner.getWorkflowName 不是函数”

在 Debug模式下我可以看到这个函数在 workflowDesigner.__proto__.constructor.getWorkflowName 处可用。 。使用旧代码可以正常工作。

Answer 1

只需从模块模式中删除 IIFE - ES6 模块有自己的作用域。

import extend from './extend.js';

export default function WorkflowDesigner(element, options) {
  if ($(element).hasClass('panel')) {
    this.panel = $(element);
  } else {
    this.panel = $(element).closest('.panel');
  }
}

extend(Object, WorkflowDesigner, {
  getWorkflowName: () => 'WorkflowName001',
  …
});

const $ = jQuery; // you might want to solve this with a proper `import`
$.fn.createWorkflowDesigner = function (options) {
  debugger;
  return this.map(function (index, element) {
    return new WorkflowDesigner($(element), options);
  });
};