it-swarm-eu.dev

Gibt es eine bessere Möglichkeit, mit jQuery eine objektorientierte Klasse zu erstellen?

Ich benutze die Funktion jQuery extend , um einen Klassenprototyp zu erweitern.

Beispielsweise:

MyWidget = function(name_var) {
  this.init(name_var);
}

$.extend(MyWidget.prototype, {
   // object variables
   widget_name: '',

   init: function(widget_name) {
     // do initialization here
     this.widget_name = widget_name;
   },

   doSomething: function() {
     // an example object method
     alert('my name is '+this.widget_name);
   }
});


// example of using the class built above
var widget1 = new MyWidget('widget one');
widget1.doSomething();

Gibt es einen besseren Weg, dies zu tun? Gibt es eine sauberere Möglichkeit, die obige Klasse mit nur einer Anweisung anstelle von zwei zu erstellen?

70
Devon

Ich mag John Resigs Simple JavaScript Inheritance .

var MyWidget = Class.extend({
  init: function(widget_name){
    this.widget_name = widget_name;
  },

  doSomething: function() {
    alert('my name is ' + this.widget_name);
  }
});

NB: Das oben gezeigte "Class" -Objekt ist nicht in jQuery selbst enthalten - es ist ein 25-Zeilen-Snippet von Mr. jQuery selbst, das im obigen Artikel bereitgestellt wird.

52
Jonny Buchanan

Warum nicht einfach das einfache OOP das JavaScript selbst bereitstellt ... lange vor jQuery?

var myClass = function(){};
myClass.prototype = {
    some_property: null,
    some_other_property: 0,

    doSomething: function(msg) {
        this.some_property = msg;
        alert(this.some_property);
    }
};

Dann erstellen Sie einfach eine Instanz der Klasse:

var myClassObject = new myClass();
myClassObject.doSomething("Hello Worlds");

Einfach!

25
CrazyMerlin

Um zusammenzufassen, was ich bisher gelernt habe:

Hier ist die Base-Funktion, mit der Class.extend () in jQuery funktioniert (kopiert von Simple JavaScript Inheritance von John Resig):

// Inspired by base2 and Prototype
(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

  // The base Class implementation (does nothing)
  this.Class = function(){};

  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;

    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;

    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;

            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];

            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);       
            this._super = tmp;

            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }

    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }

    // Populate our constructed prototype object
    Class.prototype = prototype;

    // Enforce the constructor to be what we expect
    Class.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;

    return Class;
  };
})();

Sobald Sie diesen Code ausgeführt haben, macht dies den folgenden Code aus Insins Antwort möglich:

var MyWidget = Class.extend({
  init: function(widget_name){
    this.widget_name = widget_name;
  },

  doSomething: function() {
    alert('my name is ' + this.widget_name);
  }
});

Dies ist eine schöne, saubere Lösung. Aber ich bin interessiert zu sehen, ob jemand eine Lösung hat, die es nicht erfordert, etwas zu jquery hinzuzufügen.

15
Devon

jQuery bietet das nicht an. Aber Prototype funktioniert über Class.create .

3
noah

Ich fand diese Website eine beeindruckende für oops in Javascript hier

0
Sam T

Dies ist längst erledigt, aber wenn jemand nach einer Klasse sucht, die jQuery erstellt, überprüfen Sie dieses Plugin: http://plugins.jquery.com/project/HJS

0
ola l martins