Mở rộng một phần tử DOM với jQuery

Question

Tôi muốn mở rộng một phần tử DOM mà không mở rộng tất cả chúng. Đó là, tôi muốn một lớp tùy chỉnh với các phương thức và thuộc tính riêng của nó, nhưng cũng có thể coi nó là một div. Ví dụ.

MyClass = function(){ 
    this.foo = "waaa"; 
} 
MyClass.prototype.changeText = function(newtext){ 
    // if this extended $(document.createElement("div")) something 
    // like this might be possible 
    this.html(newtext); 
} 
MyClass.prototype.alertFoo = function(){ 
    alert(this.foo); 
} 

var m = new MyClass(); 
$("body").append(m); 
m.changetext(); 

Điều này có khả thi không?

Answer 1

Bạn có thể làm cho lớp học của bạn một lớp con của jquery tạo DIV yếu tố:

function MyClass(){ 
    this.foo = "waaa"; 
} 
MyClass.prototype = $('<div/>'); 
MyClass.prototype.changeText = function(newtext){ 
    this.html(newtext); 
} 
MyClass.prototype.alertFoo = function(){ 
    alert(this.foo); 
} 

var m = new MyClass(); 
$("body").append(m); 
m.changeText('appletree'); 

Answer 2

jQuery sẽ không thể hiểu được m khi bạn chuyển nó vào dòng chắp thêm, bởi vì nó chỉ chấp nhận chuỗi và phần tử. MyClass của bạn có thể sẽ có một khóa cụ thể để giữ chính phần tử đó (ví dụ: this.el = document.createElement ("div");), nhưng jQuery sẽ không thể tự tìm thấy phần tử đó.

Answer 3

Bạn có thể tạo đối tượng của riêng mình, giống như bạn đang làm. Sau đó, bạn có thể sử dụng jQuery extend method để mở rộng phần tử.

Answer 4

Sự cố sẽ đến khi bạn muốn truy xuất phần tử sau này. Có lẽ bạn chỉ có thể lưu trữ các phần mở rộng như dữ liệu của nguyên tố này giống như ví dụ:

var new_div = $('<div id="new_div" />'); 
new_div.data('m', new MyClass()); 

Sau đó, để gọi các chức năng sau đó, bạn sẽ làm điều gì đó như:

new_div.data('m').changetext(new_div) 

Và vượt qua div như một cuộc tranh cãi.

Answer 5

Bạn cũng có thể làm điều đó như là một plugin:

jQuery.fn.myKindOfElement = function(msg) { 
    var foo = msg; // foo is basically a private member 
    this.alertFoo = function() { 
     alert(foo); 
    }; 
    this.setFoo = function(msg) { 
     foo = msg; 
    }; 
    this.changeText = function(text) { 
     // doesn't make sense because html already exists here 
     this.html(text); 
    }; 
}; 

Sau đó cho bất kỳ yếu tố:

var myKind = $('<div/>').myKindOfElement('bar'); 
$('body').append(myKind); 
myKind.alertFoo(); // alerts 'bar' 
myKind.changeText('blah'); // same as myKind.html('blah')