Question

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

工作流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.js 文件中导出extend函数，如export function extend(.....)。但是，我并不是100％确定如何将工作流程设计器和 utils.js 转换为es6模块。

我怀疑我需要像下面那样将我的workflow-designer.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不是函数”的错误消息

在调试模式下，我可以看到此功能在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);
  });
};

将代码转换为ES6模块

1 个答案: