插件初始化后如何在jQuery插件內部調用函數

Question

我正在創建自己的jQuery插件，該插件可以分配給文檔中的多個元素。 在某些情況下，我想為該特定元素調用插件內部的函數，但是一切都令我發瘋。 插件本身可以工作，但是存在外部調用問題。

簡單的插件：

(function ( $ ) {
    $.fn.myPlugin = function (options) {
        var settings = $.extend({
            someOption: ""
        }, options);
        return this.each(function () {
            _init();
            _load();
        });
        function _init() {
            //some action..
        }
        function _load() {
            //some action..
        }
    };
    $.fn.myPlugin.reload = function () {
        _load(); //or this._load();
    }
}( jQuery ));

並在html中：

<div id="div1"></div>
<button id="button1">Click to reload</div>
<script>
    $(document).ready(function() {
        var A=$("div1").myPlugin({
            someOption:"someValue"
        });
        $("#button1").click(function(){
            A.reload();
        });
    });
</script>

返回總是_load（）是未定義的...任何想法將不勝感激。

Answer 1

您在定義函數之前先返回，如果_load不在更高的范圍內，也無法從_load對其進行訪問：

(function ( $ ) {
//function definitions:
    function _init() {
        //some action..
    }
    function _load() {
        //some action..
    }


 $.fn.myPlugin = function (options) {
     var settings = $.extend({
        someOption: ""
    }, options);

    return this.each(function () {
        _init();
        _load();
    });

};
$.fn.myPlugin.reload = function () {
    _load(); //
}
}( jQuery ));

請注意，可以這樣訪問它：

 $.myPlugin.reload();

重新加載不是myPlugin實例的一部分。

如果要為每個實例返回一個自定義對象，請執行以下操作：

 (function ( $ ) {
 $.fn.myPlugin = function (options) {
     var settings = $.extend({
        someOption: ""
    }, options);

     //function definitions:
    function _init() {
        //some action..
    }
    function _load() {
        //some action..
    }
    //iterate
    this.each(function () {
        _init();
        _load();
    });

   return {
     reload:_load,
   };
};
}( jQuery ));

現在你可以做

$("test").myPlugin().reload();

Answer 2

A持有對jQuery對象的引用，因此具有$.fn所有方法。 但是，您的reload不是$ .fn的方法，而是$ .fn.myPlugin的方法。 如果您解決此問題並考慮到喬納斯的回答，那么它應該可以工作；）