代码之家 › 专栏 › 技术社区 › choise

用函数扩展jquery插件对象

function plugins jquery javascript

choise · 技术社区 · 15 年前

我正在尝试编写一个新的jQuery插件。

base(这不是我的插件,只是为了更好地理解):

(function($) {
    $.fn.mySuperCoolPlugin = function(options) {

        // Build main options before element iteration
        var opts = $.extend({}, $.fn.mySuperCoolPlugin.defaults, options);

        var editText= 'pre ' + opts.text + ' post';


        return this.each(function() {
            $(this).html(editText);
        });

    }

    // Default settings
    $.fn.mySuperCoolPlugin.defaults = {
        text: 'hi'
    }

})(jQuery);

现在在运行我的插件后,我想对它做一些额外的功能。

var plug = $('.text').mySuperCoolPlugin({text: 'running it'});
plug.runAnotherFunction('blabla');
// this for example should set the html to "pre running it post blabla"

plug.runAnotherFunction 例如,现在应该扩展我以前的文本并添加我输入的文本。

你知道我的意思吗?如何添加额外的功能到我的插件?我只看到你用一些选项运行一次的插件。

3 回复 | 直到 11 年前

zbynour 15 年前

您需要创建包装器方法。还有一条重要的规则:它必须返回包装好的集合。所以您必须返回'this'(指包装的集合)以允许链接(您还需要什么)。可以使用以下模式执行此操作:

(function($){
  $.fn.runAnotherFunction = function() {
    // put your code here
    // but you have to return 'this' to allow the chaining
  }
})(jQuery);

或者,更好的说法是(为了迭代内部所有包装的集合):

(function($){
  $.fn.runAnotherFunction = function() {
    return this.each(function(){
      // put your code here
    });
  }
})(jQuery);

Brian Stoner 15 年前

只需在插件下添加函数:

   (function($) {
        $.fn.mySuperCoolPlugin = function(options) {

            // Build main options before element iteration
            var opts = $.extend({}, $.fn.mySuperCoolPlugin.defaults, options);

            var editText= 'pre ' + opts.text + ' post';


            return this.each(function() {
                $(this).html(editText);
            });

        }

        // Default settings
        $.fn.mySuperCoolPlugin.defaults = {
            text: 'hi'
        }

        $.fn.mySuperCoolPlugin.runAnotherFunction = function(){
            return "this is another function";
        }

    })(jQuery);

Vlad Nicula 14 年前

我试过:

return this.each(function(){
     this.myActionFunction = function() { /* code here */ };
}

但是密码是:

var myPluginObject = $(...).myPlugion({..});
myPluginObject.myActionFunction(); // faild
myPluginObject.first().myActionFunction(); //faild

所以我最终使用了一个对象来包装插件使用的对象。我的物体看起来像这样:

var myPlugin = function(args) {
   return this.init();
}

var myPlugin.prototype = {
    init : function(args) { 
         if(args !== undefinded)                
             this.target = args.target // this is the $(...) object
         this.target.pluginCall(args.pluginArgs); // call the plugin method
         return this;
    },

    myActionMethod : function() {
        var target = this.target;
        // do something with target, which is the actual plugin object returned from the
        // plugin code.
    }
}

var pluginInstance = new myPlugin({
     target : $("#myOjbect"),
     pluginArgs : {
        /* plugin args here */
     }
});

pluginInstance.myActionMethod(); // works!