在嵌套的 jquery 插件中调用函数答案

【问题标题】：call function inside a nested jquery plugin在嵌套的 jquery 插件中调用函数
【发布时间】：2010-11-23 00:53:16
【问题描述】：

有很多与我的问题相关的主题，我已经完成了大部分，但我没有做对。与我的问题最接近的帖子如下：

How to call functions that are nested inside a JQuery Plugin?

下面是我正在使用的 jquery 插件。调整大小时，将重新计算元素大小。我现在正在尝试从 jquery 插件外部调用函数 resizeBind()，它给了我错误

我尝试了以下组合调用函数

$.fn.splitter().resizeBind()

$.fn.splitter.resizeBind()

任何想法，我哪里出错了？

;(function($){  
$.fn.splitter = function(args){
//Other functions ......

$(window).bind("resize", function(){                    
resizeBind();  
});

function resizeBind(){  
   var top = splitter.offset().top;
   var wh = $(window).height();
   var ww = $(window).width();
   var sh = 0; // scrollbar height      
if (ww <0 && !jQuery.browser.msie ) 
    sh = 17;        
    var footer = parseInt($("#footer").css("height")) || 26; 
    splitter.css("height", wh-top-footer-sh+"px");
    $("#tabsRight").css("height", splitter.height()-30+"px");                       
    $(".contentTabs").css("height", splitter.height()-70+"px");             
    }   
return this.each(function() {
});
};
})(jQuery);

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我遇到了同样的问题。相关帖子上的那些答案也不适用于我的情况。我通过使用事件的方式解决了它。

下面的示例演示了调用一个函数，该函数将三个内部数据值乘以给定的乘数，并返回结果。要调用该函数，您需要触发一个事件。处理程序依次触发另一个包含结果的事件。你需要为结果事件设置一个监听器。

这是插件 - 主要是由在线向导创建的标准 jQuery 插件架构：

(function($){

    $.foo = function(el, options){

        // To avoid scope issues, use 'base' instead of 'this'
        var base = this;
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        // Add a reverse reference to the DOM object
        base.$el.data("foo", base);

        base.init = function(){

            base.options = $.extend({},$.foo.defaultOptions, options);

            // create private data and copy in the options hash
            base.private_obj = {};
            base.private_obj.value1 = (base.options.opt1);
            base.private_obj.value2 = (base.options.opt2);
            base.private_obj.value3 = (base.options.opt3);


            // make a little element to dump the results into
            var ui_element = $('<p>').attr("id","my_paragraph").html(base.private_obj.value1 +" "+ base.private_obj.value2+" " +base.private_obj.value3);
            base.$el.append(ui_element);                


            // this is the handler for the 'get_multiplied_data_please' event. 
            base.$el.bind('get_multiplied_data_please', function(e,mult) {  
                bar = {};
                bar.v1 = base.private_obj.value1 *mult;
                bar.v2 = base.private_obj.value2 *mult;
                bar.v3 = base.private_obj.value3 *mult;
                base.$el.trigger("here_is_the_multiplied_data", bar);
            });

        };

        base.init();
    }


    $.foo.defaultOptions = {
        opt1: 150,
        opt2: 30,
        opt3: 100
    };

    $.fn.foo = function(options){
        return this.each(function(){
            (new $.foo(this, options));
        });
    };

})(jQuery);

因此，当文档准备好时，您可以像往常一样将对象附加到元素上。并同时为结果事件设置处理程序。

$(document).ready(function(){   
    $('body').foo();

    $('body').live('here_is_the_multiplied_data', function(e, data){
        console.log("val1:" +data.v1);
        console.log("val2:" +data.v2);
        console.log("val3:" +data.v3);
        $("#my_paragraph").html(data.v1 +" "+ data.v2+" " +data.v3);
    });
})

剩下的就是触发事件并传递一个乘数值您可以将其输入控制台 - 或通过从另一个 UI 元素中选择乘数的按钮触发它

$('body').trigger('get_multiplied_data_please', 7);

免责声明 ;) - 我对 jQuery 很陌生 - 抱歉，如果这是用锤子敲碎坚果。

【讨论】：

:-) 无论如何，这很有创意。

【解决方案2】：

resizeBind 函数被定义为私有，因此您无法从其范围之外访问它。如果你想在其他范围内使用它，你需要这样定义它

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

那你就这样称呼它$(selector').resizeBind()

【讨论】：

我无法将 resizeBind 定义为单独的插件，因为有些值绑定到了拆分器插件。

【解决方案3】：

您在不同于全局范围的范围内定义了 resizeBind 函数。如果您不使用另一个 javascript 框架或任何其他使用 $ 函数的东西（以防止冲突），您可以删除

(function($){ 

...

})(jQuery);

语句，这样函数就可以在任何地方调用而不会出错

【讨论】：

【解决方案4】：

我没有测试它：

this.resizeBind = function() { .... }

【讨论】：