是否可以为 jQuery 函数创建自定义前缀或命名空间？

Question

这是一个 jQuery 函数/插件：

$.fn.greenify = function() {
    this.css( "color", "green" );
}

$("a").greenify();

我想要一个前缀来申请我的功能，例如这样的：

$("a").colors.greenify();

在 JavaScript 函数中，我可以创建一个包含我的函数的对象：

var colors = new Object();
colors.greenify = function(el) {
    $(el).css( "color", "green" );
};

colors.greenify("a");

是否可以在 jQuery 上创建一个自定义前缀并拥有类似 $("a").colors.greenify(); 的函数？

感谢您的帮助！

Answer 1

您可以获得的最接近（无需更改 jquery 本身）是使 $.fn.colors 成为一个函数，该函数返回一个包含您想要的方法的对象。

(function ($) {

    $.fn.colors = function () {
        var $this = this, ret = {
            greenify: function(){
                return $this.css("color", "green");
            }            
        };
        $this.data("colors",ret);
        return ret;
    };    

}(jQuery));

$("#demo").colors().greenify();

var colors = $("#demo").colors();
colors.greenify();

var colors = $("#demo").colors().data("colors");
colors.greenify();

http://jsfiddle.net/ftLXh/

如果在colors 之后没有()，您将无法访问$("#demo") 选择的元素，而不会对jquery 核心进行重大更改（您必须连接到核心才能让每个jquery 选择更新一个属性$.fn.colors)

Answer 2

您可以扩展 jQuery 命名空间，然后在设置插件时在颜色命名空间中存储对插件的引用。

$.fn.colors = function () {
    return this;
};
$.fn.greenify = $.fn.colors.greenify = function() {
    this.css( "color", "green" );
};

现在您可以拨打$('a').colors().greenify();。

Answer 3

正如 Cookie Monster 所指出的，您可以编写一个 jquery 插件来执行此操作：

(function($) {

    // here we go!
    $.colours = function(element, options) {

        // plugin's default options
        // this is private property and is  accessible only from inside the plugin
        var defaults = {
        }

        // to avoid confusions, use "plugin" to reference the 
        // current instance of the object
        var plugin = this;

        // this will hold the merged default, and user-provided options
        // plugin's properties will be available through this object like:
        // plugin.settings.propertyName from inside the plugin or
        // element.data('pluginName').settings.propertyName from outside the plugin, 
        // where "element" is the element the plugin is attached to;
        plugin.settings = {}

        var $element = $(element), // reference to the jQuery version of DOM element
             element = element;    // reference to the actual DOM element

        // the "constructor" method that gets called when the object is created
        plugin.init = function() {

            // the plugin's final properties are the merged default and 
            // user-provided options (if any)
            plugin.settings = $.extend({}, defaults, options);
        }

        // public methods
        // these methods can be called like:
        // plugin.methodName(arg1, arg2, ... argn) from inside the plugin or
        // element.data('pluginName').publicMethod(arg1, arg2, ... argn) from outside 
        // the plugin, where "element" is the element the plugin is attached to;
        plugin.greenify = function() {
            $element.css( "color", "green" );

        }


        // fire up the plugin!
        // call the "constructor" method
        plugin.init();

    }

    // add the plugin to the jQuery.fn object
    $.fn.colours = function(options) {

        // iterate through the DOM elements we are attaching the plugin to
        return this.each(function() {

            // if plugin has not already been attached to the element
            if (undefined == $(this).data('colours')) {

                // create a new instance of the plugin
                // pass the DOM element and the user-provided options as arguments
                var plugin = new $.colours(this, options);

                // in the jQuery version of the element
                // store a reference to the plugin object
                // you can later access the plugin and its methods and properties like
                // element.data('pluginName').publicMethod(arg1, arg2, ... argn) or
                // element.data('pluginName').settings.propertyName
                $(this).data('colours', plugin);

            }

        });

    }

})(jQuery);

这允许你这样称呼它：

$("a").colours();
$("a").data('colours').greenify();

Fiddle

结构取自boilerplate code