javascript - 无法找到自定义 jQuery 插件

Question

我在 myPlugin.js 中开发了一个 jQuery 插件，如下所示:

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

        var defaults = {};

        var settings = $.extend(defaults, options);

        return this.each(function () {
            this.sayHello = function () {
                alert('Hello!');
            };
        });
    };
})(jQuery);

我从另一个文件 call.js 调用 sayHello() 方法，如下所示:

myPlugin.sayHello();

myPlugin.js 和 call.js 都包含在我的 HTML 文件中。当编译器到达 myPlugin.sayHello(); 行时，它会报告错误 Uncaught ReferenceError: myPlugin is not Defined。

我的代码有什么问题？

更新

我找到了解决方案。我在代码中的一个地方初始化了特定元素上的插件，例如。 $('#someElement').myPlugin();。我只需要使用 someElement.sayHello(); 调用插件函数即可。

另一个解决方案是@antyrat建议的。

Answer 1

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

        var defaults = {};

        var settings = $.extend(defaults, options);

        return this.each(function () {
            this.sayHello = function () {
                alert('Hello!');
            };
        });
    };
})(jQuery);

$( 'body' ).myPlugin();
console.log($( 'body' ))
$( 'body' )[0].sayHello();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您已使用 fn 快捷方式 ( prototype ) 扩展了 jQuery 对象。所以你需要以 jQuery 方法调用你的插件:

$.myPlugin.sayHello();

<小时/>

更新

从我从你的代码中看到的，如果你想调用 sayHello 函数，你需要在某个元素上初始化它，例如:

$( 'body' ).myPlugin();

然后调用你的方法:

$( 'body' )[0].sayHello();

[0] 我们需要因为 this.sayHello = function () { 引用 DOM 元素，而不是 jQuery