it-swarm-id.com

Apakah ada cara yang lebih baik untuk membuat kelas berorientasi objek dengan jQuery?

Saya menggunakan fungsi jQuery extended untuk memperluas prototipe kelas.

Sebagai contoh:

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

Apakah ada cara yang lebih baik untuk melakukan ini? Apakah ada cara yang lebih bersih untuk membuat kelas di atas hanya dengan satu pernyataan, bukan dua?

70
Devon

Saya sangat menyukai John Resig's 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: Objek "Kelas" yang ditunjukkan di atas tidak termasuk dalam jQuery itu sendiri - ini adalah potongan 25 baris dari Mr. jQuery sendiri, yang disediakan dalam artikel di atas.

52
Jonny Buchanan

Mengapa tidak menggunakan sederhana OOP yang disediakan JavaScript sendiri ... jauh sebelum jQuery?

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

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

Maka Anda cukup membuat instance kelas:

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

Sederhana!

25
CrazyMerlin

Untuk meringkas apa yang telah saya pelajari sejauh ini:

Berikut adalah fungsi Basis yang membuat Class.extend () berfungsi di jQuery (Disalin dari Simple JavaScript Inheritance oleh 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;
  };
})();

Setelah Anda menjalankan kode ini, maka kode berikut dari jawaban insins mungkin:

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

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

Ini adalah solusi yang bagus dan bersih. Tapi saya tertarik untuk melihat apakah ada yang punya solusi yang tidak perlu menambahkan apa pun ke jquery.

15
Devon

jQuery tidak menawarkan itu. Tapi Prototipe tidak, via Class.create .

3
noah

Saya menemukan situs web ini mengesankan untuk oops di javascript Di Sini

0
Sam T

Ini sudah lama mati, tetapi jika orang lain mencari kelas membuat jQuery - periksa plugin ini: http://plugins.jquery.com/project/HJS

0
ola l martins