Question

问题：

一个看似简单的问题，我在过去的两周内一直在研究和关闭（请放轻松，因为我对这一切都是新手！）：

使用Require.js和Revealing Module Pattern时，如何在JavaScript中巧妙地实现继承？

实施例

这是一个示例模块，它是某种类型＆＃39; Component＆＃39;的基类：

define('Component', [], function () {
   "use strict";

   var _privateVar = 10;
   var _doPrivateThings = function () {  /* do stuff */ };    
   var init = function () { /* do stuff */ };
   var update = function () {  /* do stuff */ };

   return {
      init : init,
      update : update
   };

});

接下来我要实现CakeComponent，它应该继承Component中的所有内容，并允许我编辑/添加方法和属性：

define('CakeComponent', ['Component'], function (Component) {
   "use strict";

   // Setup inheritance
   var CakeComponent = function() {}
   CakeComponent.prototype = new Component();

   // Add/edit methods/properties
   CakeComponent.prototype.newMethod = function () { /* do stuff */ };

   return {
      init : CakeComponent.init,
      update : CakeComponent.update,
      newMethod : CakeComponent.newMethod
   };

});

首先，我不确定这是否完全合理，但其次，我的CakeComponent感觉有点严重，因为现在我已经到处都有CakeComponent冗余，而且我已经拥有了重新透露＆＃39; init和update方法。

我真的更喜欢这样的东西（我意识到这没有意义，它只是伪代码）：

define('CakeComponent', ['Component'], function (Component) {
   "use strict";

   this.extends(Component);
   var newMethod = function () { /* do stuff */ };

   return {
      newMethod : newMethod
   };

});

任何提示或建议都会非常感激。感谢。

进一步详情

也许我应该始终在define包装器中创建一个类对象？我见过人们这样做，但在我遇到这个问题之前似乎没必要。
在此上下文中，函数对象上的.call()方法是否有用？例如使用Component.call()
@Bergi请见下文：

define([], function () {
    "use strict";

    var Component = function () {

        var _privateVar = 10;
        var _doPrivateThings = function () {  /* do stuff */ };
        this.init = function () { /* do stuff */ };
        this.update = function () {  /* do stuff */ };

    };

    return Component;

});

Answer 1

我之前看过这个模型，称为通用模块定义：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['Component'], factory);
    } else {
        root.CakeComponent = factory(root.Component);
    }
}(this, function (Component) {
    return {
        newMethod: function(){ /* do stuff */ }
    };
}));

你可以试试这个，这不是真实的＆＃34;继承 - 如果它不起作用 - 取决于环境，你可能也需要传递基本函数，这是一个遗憾：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['Component'], factory);
    } else {
        root.CakeComponent = factory(root.Component);
    }
}(this, function (Component) {
    return {
        init: Component.init,
        update: Component.update,
        newMethod: function(){ /* do stuff */ }
    };
}));

您可以在这篇关于Universal Module Definition

的精彩文章中阅读更多内容

使用Require.js和Revealing Module Pattern进行JavaScript继承

问题：

实施例

进一步详情

1 个答案: