什么是使JQuery插件可扩展的方法？

我尝试了一些常见的应用程序的具体行动移到jQuery插件由：什么是使JQuery插件可扩展的方法？

$.fn.extpoint = function() {...}

但我不想申报的几个扩展点：

$.fn.extpoint1 = function() {...} 
$.fn.extpoint2 = function() {...} 
...

相反，我想使用语法糖，如：

$("#id").extpoint.func1().extpoint.func2()

随着定义：

$.fn.extpoint = {} 
$.fn.extpoint.func1 = function() { 
    this.val(); 
    this.data("ip"); 
    ... 
    return this; 
}

并调用：

$("#id").extpoint.func1(...)

this指向$.fn.extpoint（字典与func1，func2，...的元素），而不是原来的jQuery对象，当func1评价。

是否有可能使jQuery插件可扩展？

PS。可以将函数名称作为第一个参数传递给$.fn.extpoint，并实现$.fn.extpoint('extend', func)调用来扩展（保存到名称和实现之间的内部字典关联）扩展点。在这种情况下，使用情况是这样的：

$("#id").extpoint('func1', ...).extpoint('func2', ...)

，但我期待的方式让更多的语法糖...

来源

2013-03-13 gavenkoa

它不会以这种方式工作：'$（ “＃ID”）extpoint.func1（）extpoint.func2（）'因为FUNC1和FUNC2将不能访问'$（。 “#id”）' – 2013-03-13 15:14:47

@KevinB Yea，我明白了，但是想方设法避免这种情况，并且有一些未知的技巧...... +1 – gavenkoa 2013-03-13 17:44:06

一年或两年前，jQuery论坛上发布了一篇文章，其中有人想出了一个这样做的工作方式，但它非常复杂，我不记得它是如何完成的。我建议在那里搜索它，我找不到它。 – 2013-03-13 17:46:01

Here是创建插件的概述。我相信你所问的是“链接”。这正是jQuery如此易于使用的原因，并且您希望确保您正确实施它是一件好事。

关于链接开发插件时要记住的关键是从您的方法总是return this;。这是什么让你保持连锁行进。

来源

2013-03-13 15:15:21 BinaryTox1n

对不起，我不谈论链接。但关于制作** jQuery插件**可以以某种一致的方式扩展为** jQuery **本身... – gavenkoa 2013-03-13 17:42:47

我问的任务很难实现。

Official docs说：

在任何情况下应单插件不断要求多个命名空间中jQuery.fn对象：

(function($){ 
    $.fn.tooltip = function(options) { 
    // THIS 
    }; 
    $.fn.tooltipShow = function() { 
    // IS 
    }; 
    $.fn.tooltipHide = function() { 
    // BAD 
    }; 
})(jQuery);

这是一种劝阻，因为它杂波了$.fn命名空间。为了解决这个问题，你应该把所有插件的方法都收集到一个对象字面值中，并通过将该方法的字符串名称传递给插件来调用它们。

另一种方法是保持链接this在http://code.google.com/p/jquery-plugin-dev/source/browse/trunk/jquery.plugin.js

所以你的电话看起来像：

$.fn.addPlugin('test2', { 
    __construct : function(alertText) { alert(alertText); }, 
    alertAttr : function(attr) { alert($(this).attr(attr)); return this; }, 
    alertText : function() { alert($(this).text()); return this; } 
}); 

$('#test2').bind('click', function() { 
    var btn = $(this); 

    btn.test2('constructing...').alertAttr('id').alertText().jQuery.text('clicked!'); 

    setTimeout(function() { 
      btn.text('test2'); 
    }, 1000); 
});

一些相关链接：

旧风格的插件extention：

来源

2013-03-13 22:01:19 gavenkoa

什么是使JQuery插件可扩展的方法？

回答

相关问题