Question

我正在创建jQuery插件：

$.fn.myGrid = function () {

    return ???;
}

我希望myGrid的返回值包含一个add函数，以便我可以按以下方式使用它;

var grid = $(".myGrid").myGrid();
grid.add();

我该怎么做？我如何声明添加功能？我需要在myGrid插件中返回什么内容？

我也很乐意拥有像这样的东西;

$.myGrid.add();

有可能吗？

Answer 1

您可以使用的一种方法就是这个;

$.fn.myGrid = function () {
    var that = this;

    return {
        add: function () {
            that.after('<h2>Here I am, adding something'); // Note `that` rather than `this`.
        },
        remove: function () {
            that.next().remove();
        }
    };
}

捕获this变量很重要，因为否则return函数中myGrid()对象上的方法将无法访问jQuery对象调用了myGrid()。

请参阅此处的操作代码; http://jsfiddle.net/HpeS8/

Answer 2

通常，编写插件的最佳惯例是这样的：

$.fn.pluginName = function(){
    // return the same object to preserve chainability
    // and also apply the plugin's functionality to all the
    // dom elements in this jquery collection
    return this.each(function(i,el){
       // do whatever you want with $(el)
    });
};

如果您正在编写一个返回值而不是以某种方式操作当前对象（例如width工作）的插件，则应返回该值而不是当前对象引用（this ）：

$.fn.maxWidth = function(){
    var max = 0;
    this.each(function(i,el){
       var w = $(el).width(); 
       if(w > max)
           max = w;
    });
    return max;
};

如果您想让用户可以访问＆amp;修改你的插件功能，你应该保留可链接性（我的意思是返回this而不是包含你插件的api的其他对象）并通过jQuery元素的data方法将插件的API公开给用户。登记/> 这是一个例子。让我们说我们正在制作一个视频播放器jquery插件。我们希望保留可链接性，但仍然能够访问此插件的核心功能执行此操作的正确方法将是这样的：

$.fn.videoPlayer = function(){
    var api = {
        play : function(){/*...*/},
        pause : function(){/*...*/},
        stop : function(){/*...*/}
    };  

    return this.each(function(i,el){
       $(el).data('videoPlayerApi',api);
    });
};

一个用法示例，它说明了我的观点：

$('video')
    // initialising the plugin
    .videoPlayer()
    // the return value is the original jQuery object,
    // so we can still call jQuery methods on it
    .css('opacity',1)
    // select the first video
    .eq(0)
        // access the first video's plugin api
        .data('videoPlayerApi')
            // start only the first video
            .start();

Answer 3

        (function ($) {
             var methods = {
                init: function () {
                  //Initilize
             },
             var add = {
                 //Do something
             }
              $.fn.myGrid= function (method) {
                    if (methods[method]) { 
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
                   }
                   else if (typeof method === 'object' || !method) { 
                        return methods.init.apply(this, arguments); 
                   }
        else { $.error('Method ' + method + ' does not exist on jQuery.myGrid'); }
    };
})(jQuery);

像这样打电话

var grid = $(".myGrid").myGrid();
grid.myGrid("add");

如何创建一个返回另一个对象的jQuery函数？

3 个答案: