0

質問：

過去 2 週間、オンとオフを問わず調査してきた一見単純な質問 (私はこれらすべてに慣れていないので、簡単に行ってください!):

Require.js と Revealing Module パターンを使用する場合、JavaScript で継承を適切に実装するにはどうすればよいでしょうか?

例：

以下は、ある種の ' Component'の基本クラスであるモジュールの例です。

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
   };

});

第一に、それが完全に理にかなっているのかどうかはわかりませんが、第二に、どこにでもこの冗長性があり、 andメソッドCakeComponentを「再公開」しなければならなかったため、私の CakeComponent は少し気持ち悪いです。initupdate

私は本当にこのようなものを好むでしょう（これは意味をなさないことに気づきました、それは本当に単なる疑似コードです）：

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;

});
4

1 に答える 1

0

Universal Module Definition と呼ばれる、以前に使用されたこのモデルを見たことがあります。

(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 */ }
    };
}));

「実際の」継承ではないこれを試すことができます-機能しない場合-環境によっては、基本関数も渡す必要がある場合がありますが、これは残念です:

(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 */ }
    };
}));

このトピックの詳細については、ユニバーサル モジュール定義に関するこの素晴らしい記事を参照してください。

于 2015-04-24T07:32:57.663 に答える