6

我想用这样的 API 创建一个 jQuery 插件：

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

而不是这些：

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

基本上，我不想为每个与 jQuery 中的方法相似的方法命名，我想将这些方法“限定”到自定义 api，其中$("#chart).pluginName()将返回一个对象，这样get, attr,find和其他一些将被完全重写.

我确信这不是一个受欢迎的想法，因为它打破了约定（是吗？），但它比上面的两个选项更容易、更易读，并且可能更优化。你怎么认为？

4

1 回答 1

2

我正在试验这个想法。

似乎您可以只修改插件接收的 jQuery 对象的函数，然后返回它。

像这样的东西：

$.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/ （从原始更新到覆盖 .html() 以及）

$.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');​

编辑：

或者，如果您要缓存应该应用自定义方法的元素，您可以.apply()在使用它们之前先使用这些方法。

以上面的示例为基础：

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

​</p>

于 2010-06-15T21:15:29.640 回答