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?

Question

Tôi sử dụng hàm jquery extend để mở rộng 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 tốt hơn để tạo lớp ở trên chỉ với một câu lệnh thay vì hai?

Answer 1

Tôi khá giống 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: Đối tượng "Lớp" đã chứng minh ở trên không được bao gồm trong chính jQuery - đó là đoạn mã 25 từ chính bản thân jQuery, được cung cấp trong bài viết ở trên.

Answer 2

jQuery không cung cấp điều đó. Nhưng Prototype, thông qua Class.create.

Answer 3

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

Dưới đây là chức năng cơ bản mà làm Class.extend() làm việc trong jquery (Sao chép từ Simple JavaScript Inheritance 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 thực thi mã này, sau đó mà làm cho đoạn mã sau từ insin's answer 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 sạch đẹp. Nhưng tôi quan tâm để xem nếu có ai có một giải pháp mà không yêu cầu thêm bất cứ điều gì để jquery.

Answer 4

này qua lâu rồi chết, nhưng nếu bất cứ ai khác tìm kiếm jquery tạo lớp - kiểm tra plugin này: http://plugins.jquery.com/project/HJS

Answer 5

Tại sao không chỉ cần sử dụng OOP đơn giản rằng JavaScript tự cung cấp ... rất lâu trước khi 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!

Answer 6

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