Tạo một Plugin jQuery, Làm cách nào để thực hiện các phạm vi tùy chỉnh?

Question

Tôi muốn tạo ra một plugin jQuery với một cái gì đó API như thế này:

$("#chart").pluginName().attr("my_attr"); 

Thay vì những:

$("#chart").pluginName_attr("my_attr"); 
$.pluginName.attr("#chart", "my_attr"); 

Về cơ bản, thay vì phải không gian tên mọi phương pháp có tác dụng tương tự như những người thân trong jQuery, tôi muốn "phạm vi" các phương thức cho api tùy chỉnh, trong đó $("#chart).pluginName() sẽ trả về một đối tượng sao cho get, attr, find và một số khác sẽ được viết lại hoàn toàn.

Tôi chắc chắn đây không phải là một ý tưởng hay khi nó phá vỡ quy ước (không?), Nhưng nó dễ dàng hơn và dễ đọc hơn, và có lẽ được tối ưu hóa hơn, so với hai tùy chọn ở trên. Quan điểm của bạn là gì?

Answer 1

Tôi đang thử nghiệm ý tưởng.

Có vẻ như bạn chỉ có thể sửa đổi các chức năng cho đối tượng jQuery mà plugin nhận được và trả lại điều đó.

Something như thế này:

$.fn.tester = function() { // The plugin 

    this.css = function() { // Modify the .css() method for this jQuery object 
     console.log(this.selector); // Now it just logs the selector 
     return this;  // Return the modified object 
    } 
    return this; // Return the modified object 

} 

---

http://jsfiddle.net/EzzQL/1/(cập nhật từ gốc để ghi đè lên .html() cũng)

$.fn.tester = function() { 
    this.css = function() { 
     console.log(this.selector); // This one logs the selector 
     return this; 
    } 
    this.html = function() { 
     alert(this.selector); // This one alerts the selector 
     return this; 
    } 
    return this; 
}; 

// Because .css() and .html() are called after .tester(), 
// they now adopt the new behavior, and still return a jQuery 
// object with the rest of the methods in tact 
$('#test1').tester().css().html().animate({opacity:.3}); 


// .css() and .html() still behave normally for this one 
// that doesn't use the plugin 
$('#test2').css('backgroundColor','blue').html('new value');​ 

---

EDIT:

Hoặc, nếu bạn định cache các phần tử mà phương pháp tùy chỉnh sẽ được áp dụng, bạn có thể .apply() các phương pháp trước khi sử dụng chúng.

Để xây dựng dựa trên ví dụ trên:

var $test1 = $('#test1'); // Cache the elements 

$.fn.tester.apply($test1,[this]); // apply() the new methods 

$test1.css().html().animate({opacity:.3}); // Use the new methods