it-swarm-vi.tech

Có cách nào tốt hơn để tạo một lớp hướng đối tượng với jQuery không?

Tôi sử dụng hàm jQuery extend để mở rộng một nguyên mẫu lớp.

Ví dụ:

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ó cách nào tốt hơn để làm điều này? Có cách nào sạch hơn để tạo lớp ở trên chỉ với một câu lệnh thay vì hai câu không?

70
Devon

Tôi khá thích John Resig's Kế thừa JavaScript đơn giản .

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

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

Lưu ý: Đối tượng "Lớp" được trình bày ở trên không được bao gồm trong chính jQuery - đó là đoạn trích 25 dòng từ chính ông jQuery, được cung cấp trong bài viết trên.

52
Jonny Buchanan

Tại sao không sử dụng đơn giản OOP mà chính JavaScript cung cấp ... rất lâu trước jQuery?

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

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

Sau đó, bạn chỉ cần tạo một thể hiện của lớp:

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

Đơn giản!

25
CrazyMerlin

Để tóm tắt những gì tôi đã học được cho đến nay:

Đây là hàm Base làm cho Class.extend () hoạt động trong jQuery (Được sao chép từ Kế thừa JavaScript đơn giản bởi 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;
  };
})();

Khi bạn đã chạy mã này, thì mã đó sẽ tạo ra từ câu trả lời của insin có thể:

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

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

Đây là một giải pháp tốt đẹp, sạch sẽ. Nhưng tôi quan tâm xem liệu có ai có giải pháp không yêu cầu thêm bất cứ điều gì vào jquery không.

15
Devon

jQuery không cung cấp điều đó. Nhưng Nguyên mẫ hiện, thông qua Class.create .

3
noah

Tôi tìm thấy trang web này một trang web ấn tượng cho oops trong javascript Tại đây

0
Sam T

Điều này đã chết từ lâu, nhưng nếu có ai khác tìm kiếm lớp tạo jQuery - hãy kiểm tra plugin này: http://plugins.jquery.com/project/HJS

0
ola l martins