Javascript jQuery插件+；AMD=如何访问功能？

我正在AMD环境中完成我的jQuery插件。这是我的样板

!function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(root.jQuery);
    }
}(this, function($) {

    var defaults = {
       target: ''
    };

    var myPlugin = function(options) {
        options = $.extend(true, {}, defaults, options);

        return options;
    };

    myPlugin.prototype = {
        init: function(options) {
            return options;
        }
    };

    $.fn.myPlugin = myPlugin;

});

console.log($.fn.myPlugin.init());

错误

TypeError:$.fn.myPlugin.init不是函数

log（$.fn.myPlugin.init（））

你知道我做错了什么吗？如何访问

myPlugin.prototype={…}

中的函数

编辑：

var plugin = $('.element').plugin();
    var instance = $('.element').data('plugin',plugin);
    console.log(instance); // returns - Object[]
    console.log(instance.someMethod("hello world"));

用这个测试,

结果,

Object[] // why is it empty?

hello world

Object { element={...}, options={...}, constructor=function(), more...}

hello world

及

结果,

Object[] // why is it empty?

hello world

Object { element={...}, options={...}, constructor=function(), more...}

hello world

TypeError:$.fn.plugin.someMethod不是函数

log（$.fn.plugin.someMethod（））

以及

结果,

Object[] // why is it empty?

hello world

Object { element={...}, options={...}, constructor=function(), more...}

hello world

以及

结果,

Object[] // why is it empty?

hello world

Object { element={...}, options={...}, constructor=function(), more...}

hello world

TypeError:实例为null//这意味着什么？它应该返回“你好，世界”，不是吗

someMethod（“hello world”）

编辑2:

var plugin = $('.element').plugin();
    var instance = $('.element').data('plugin',plugin);
    console.log(instance); // returns - Object[]
    console.log(instance.someMethod("hello world"));

结果,

Object[] // why is it empty?

hello world

Object { element={...}, options={...}, constructor=function(), more...}

hello world

TypeError:instance.someMethod不是函数

log（instance.someMethod（“helloworld”）

---

您似乎并没有实际创建myPlugin的实例，而是尝试静态访问这些方法，这些方法可能是您想要的，也可能不是您想要的

我发现每次使用插件时最好创建一个插件对象的实例。例如：

!function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(root.jQuery);
    }
}(this, function($) {
    'use strict';

    var defaults = {

    };

    var Plugin = function(element, options) {
        this.element = element;
        this.options   = options;
    };

    Plugin.prototype = {
        constructor: Plugin,

        someMethod: function() {

        }
    }

    // Create the jQuery plugin
    $.fn.plugin = function(options) {
        options = $.extend(true, {}, defaults, options);

        return this.each(function() {
            var $this = $(this);
            $this.data('plugin', new Plugin($this, options));
        });
    };

    // Expose defaults and Constructor
    $.fn.plugin.defaults = defaults;
    $.fn.plugin.Plugin   = Plugin;
});

从这里-

现在您可以像这样使用插件：

require(['jquery', 'jquery.plugin'], function($) {
    $('.test li').plugin({
        test: 'option1',
        test2: 'option2'
    });
});

对象的实例保存在数据属性中，因此始终可以访问它。使用此技术：

var instance = $('.tabs').herotabs().data('herotabs');
instance.nextTab();

---

您似乎并没有实际创建myPlugin的实例，而是尝试静态访问这些方法，这些方法可能是您想要的，也可能不是您想要的

我发现每次使用插件时最好创建一个插件对象的实例。例如：

!function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(root.jQuery);
    }
}(this, function($) {
    'use strict';

    var defaults = {

    };

    var Plugin = function(element, options) {
        this.element = element;
        this.options   = options;
    };

    Plugin.prototype = {
        constructor: Plugin,

        someMethod: function() {

        }
    }

    // Create the jQuery plugin
    $.fn.plugin = function(options) {
        options = $.extend(true, {}, defaults, options);

        return this.each(function() {
            var $this = $(this);
            $this.data('plugin', new Plugin($this, options));
        });
    };

    // Expose defaults and Constructor
    $.fn.plugin.defaults = defaults;
    $.fn.plugin.Plugin   = Plugin;
});

从这里-

现在您可以像这样使用插件：

require(['jquery', 'jquery.plugin'], function($) {
    $('.test li').plugin({
        test: 'option1',
        test2: 'option2'
    });
});

对象的实例保存在数据属性中，因此始终可以访问它。使用此技术：

var instance = $('.tabs').herotabs().data('herotabs');
instance.nextTab();

结果,

Object[] // why is it empty?

hello world

Object { element={...}, options={...}, constructor=function(), more...}

hello world

结果,

Object[] // why is it empty?

hello world

Object { element={...}, options={...}, constructor=function(), more...}

hello world

---

ex:$（body.myPlugin.init（{mobile:true}）；ex:$（body.myPlugin.init（{mobile:true}）；谢谢但我仍然不知道如何使用它。请看我的编辑上面。谢谢。你仍然在尝试静态使用它，而不是先创建插件。这是故意的吗？请参阅我的答案中的一部分，其中我向您展示了如何访问.nextTab（）方法作为示例。如果您真的想静态地使用它，那么

$.fn.plugin.plugin.prototype.someMethod（）

将起作用不，它不是。我只是对标准方式和RequireJS感到困惑。我还通过先创建插件的实例对其进行了测试，但仍然收到错误消息。请再次查看我的编辑。谢谢。啊，好的，对于这个

var实例=$（'.element'）.data（'plugin'）

要工作，您需要先调用插件，即

$（'.element'）.plugin（）

一旦调用，它会在数据属性中保存一个实例，如第44行所示-谢谢。但很抱歉我还是迷路了。你能再次看到我的编辑2吗？谢谢谢谢但我仍然不知道如何使用它。请看我的编辑上面。谢谢。你仍然在尝试静态使用它，而不是先创建插件。这是故意的吗？请参阅我的答案中的一部分，其中我向您展示了如何访问.nextTab（）方法作为示例。如果您真的想静态地使用它，那么

$.fn.plugin.plugin.prototype.someMethod（）

将起作用不，它不是。我只是对标准方式和RequireJS感到困惑。我还通过先创建插件的实例对其进行了测试，但仍然收到错误消息。请再次查看我的编辑。谢谢。啊，好的，对于这个

var实例=$（'.element'）.data（'plugin'）

要工作，您需要先调用插件，即

$（'.element'）.plugin（）

一旦调用，它会在数据属性中保存一个实例，如第44行所示-谢谢。但很抱歉我还是迷路了。你能再次看到我的编辑2吗？谢谢