Question

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

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

而不是：

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

基本上，我不想命名与jQuery中的方法类似的每个方法，而是将方法“范围”为自定义api，其中$("#chart).pluginName()将返回一个对象{{1 }}，get，attr以及其他一些内容将被完全重写。

我确信这不是一个很受欢迎的想法，因为它违反惯例（是吗？），但它比上面的两个选项更容易，更易读，也可能更优化。你有什么想法？

Answer 1

我正在尝试这个想法。

好像你可以修改插件接收的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

创建一个jQuery插件，我该如何做自定义范围？

1 个答案: