it-swarm.it

Esiste un modo migliore per creare una classe orientata agli oggetti con jQuery?

Uso la funzione jQuery estende per estendere un prototipo di classe.

Per esempio:

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();

C'è un modo migliore per farlo? C'è un modo più pulito per creare la classe sopra con solo un'istruzione invece di due?

javascriptjquery
70
Devon

Mi piace piuttosto John Resig 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: L'oggetto "Class" mostrato sopra non è incluso in jQuery stesso: è uno snippet di 25 righe dello stesso Mr. jQuery, fornito nell'articolo precedente.

52
Jonny Buchanan

Perché non usare semplicemente il semplice OOP che JavaScript stesso fornisce ... molto prima di jQuery?

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

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

Quindi basta creare un'istanza della classe:

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

Semplice!

25
CrazyMerlin

Per riassumere ciò che ho imparato finora:

Ecco la funzione Base che fa funzionare Class.extend () in jQuery (copiato da Simple JavaScript Inheritance di 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;
  };
})();

Una volta eseguito questo codice, ciò rende possibile il seguente codice da insin's answer :

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

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

Questa è una soluzione piacevole e pulita. Ma sono interessato a vedere se qualcuno ha una soluzione che non richiede l'aggiunta di nulla a jquery.

15
Devon

jQuery non lo offre. Ma prototipo lo fa, tramite Class.create .

3
noah

Ho trovato questo sito web impressionante per oops in javascript Qui

0
Sam T

Questo è morto da tempo, ma se qualcun altro cerca la classe di creazione jQuery - controlla questo plugin: http://plugins.jquery.com/project/HJS

0
ola l martins