Tôi làm cách nào để có được các đối tượng dựa trên lớp trong JavaScript bằng jQuery?

Question

Tôi đang cố gắng chuyển từ Prototype sang jQuery và có một điều cuối cùng tôi không thể tìm ra cách thực hiện trong thư viện mới.

Dưới đây là những gì tôi đã từng làm với Prototype:

MyClass = Class.create(); 

MyClass.prototype = { 
    initialize: function(options) { 
    } 
} 

Sau đó, tôi có thể tạo ra một mới MyClass với:

var mc = new MyClass({}); 

Liệu jQuery có bất cứ điều gì như Prototype của Class.create()? Và nếu không, làm thế nào để tôi có được cùng một loại điều mà không có một thư viện?

Answer 1

Tôi sử dụng chức năng 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(); 

Lưu ý: Tôi hỏi một related question về cùng một chủ đề này.

Answer 2

Không bao giờ thực hiện, nhưng tôi hình dung xem một số trình cắm như Thickbox có thể hữu ích.

Answer 3

jQuery sử dụng chức năng javascript chuẩn để tạo lớp mới.

Có một số ví dụ tốt trên web, nhưng tôi khuyên bạn nên xem sách của David Flanagan Javascript: The Definitive Guide.

Object-Oriented JavaScript

JavaScript and Object Oriented Programming (OOP)

---

Tôi xin lỗi, tôi hoàn toàn hiểu lầm bài gốc của bạn. Tôi đoán rằng bạn thực sự muốn biết làm thế nào để mở rộng đối tượng jQuery $. Điều này là dễ dàng làm được, có một số lượng lớn các plugin trên mạng để làm như vậy. Có một hướng dẫn trên trang web jQuery để làm điều này: Getting Started With jQuery

Về cơ bản, tuy nhiên, bạn sử dụng

jQuery.fn.foobar = function() { 
    // do something 
}; 

Answer 4

tuyệt vời Plugin Classy Query John Resig của cung cấp chính xác những gì bạn đang tìm kiếm:

http://ejohn.org/blog/classy-query/

Answer 5

Trong JavaScript, một chức năng thường xuyên đóng vai trò như một constructor nếu sử dụng với từ khoá 'mới'.

Vì vậy, bạn có thể làm,

function MyClass(options) 
{ 
    this.options = options; 
}; 

MyClass.prototype.initialize = function() { } ; 

MyClass.prototype.sayHello = function() { alert('Hello!'); }; 

var item = new MyClass({ id : 10 }); 
item.sayHello(); //alerts Hello! 
alert(item.options.id); //alerts 10. 

tôi sẽ đề nghị bạn nên cố gắng tìm hiểu làm thế nào JavaScript thực sự hoạt động. Hãy thử understand prototype inheritance as opposed to class based inheritance. Hiểu biết tốt về JavaScript sẽ giúp bạn khai thác sức mạnh của ngôn ngữ.

Answer 6

Bạn có thể sử dụng tiêu chuẩn JavaScript:

MyClass = function(options) { 
    console.log(options); 
}; 

var mc = new MyClass([1,2,3]); 

Bạn có thể sử dụng jQuery để cung cấp thừa kế: http://docs.jquery.com/Utilities/jQuery.extend#deeptargetobject1objectN

Answer 7

Bạn về cơ bản có thể sao chép các phần có liên quan từ mã nguồn mẫu và rời khỏi phần về việc gia hạn. http://github.com/sstephenson/prototype/blob/add69978e09653808aedec43ed551df22818ee30/src/lang/class.js

jQuery không có hệ thống để tạo và mở rộng đối tượng, vì toàn bộ hệ thống dường như phụ thuộc vào chuỗi jQuery (để jeresig: xin lỗi nếu tôi nhầm). Vì vậy, bạn phải tạo hệ thống của riêng bạn.

Để có được một ý tưởng, Douglas Crockford có một mẫu nổi tiếng để tạo các đối tượng và kế thừa trong JavaScript. http://javascript.crockford.com/prototypal.html

Answer 8

jQuery không xác định nguyên gốc OOP, do đó bạn đang tự làm. Nhưng nó rất dễ dàng để làm những gì bạn muốn với đồng bằng JavaScript:

MyClass = function(options){ 
    // whatever were in your initialize() method 
}; 

Và bạn có thể tạo ra các trường hợp như bạn sử dụng để:

var mc = new MyClass({}); 

Nếu bạn đã từng có những thứ ở những mẫu bạn có thể thêm chúng như bạn sử dụng để:

MyClass.prototype = { 
    // no need for initialize here anymore 
    /* 
    initialize: function(options) { 
    }, 
    */ 

    // the rest of your methods 
    method1: function() { /*...*/ }, 
    method2: function() { /*...*/ } 
} 

Hoặc bạn có thể thêm các phương pháp của bạn tự động:

$.extend(MyClass.prototype, { 
    method1: function() { /*...*/ }, 
    method2: function() { /*...*/ } 
}); 

Và cuối cùng bạn có thể cung cấp tạo lớp rất riêng của bạn:

var CreateClass = function(){ 
    return function(){ this.initialize.apply(this, arguments); }; 
}; 

// the rest is a copy from your example 

MyClass = CreateClass(); 

MyClass.prototype = { 
    initialize: function(options) { 
    } 
} 

var mc = new MyClass({}); 

Answer 9

Một giải pháp tốt bởi John Resig: Simple JavaScript Inheritance

Answer 10

bạn có thể thử JS.Class (di động, mô-đun thư viện lớp JavaScript) - http://jsclass.jcoglan.com/

Answer 11

tôi nghĩ rằng, theres một cách easyer ...

function Dashboard() { 
    var dashboard = this; 
    dashboard.version = 'Version 0.1'; 
    dashboard.__init = function() { 
      console.log('init'); 
    }; 
    dashboard.__init(); 
} 
var dash = new Dashboard(); 

will log 'init'