Javascript 传统jquery插件与AMD jquery插件

我仍然无法用这个AMDjQuery插件动脑

// UMD dance - https://github.com/umdjs/umd
!function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(root.jQuery);
    }
}(this, function($) {
    'use strict';

    // Default options
    var defaults = {

    };

    // Constructor, initialise everything you need here
    var Plugin = function(element, options) {
        this.element   = element;
        this.options   = options;
    };

    // Plugin methods and shared properties
    Plugin.prototype = {
        // Reset constructor - http://goo.gl/EcWdiy
        constructor: Plugin,

        someMethod: function(options) {
            return options;
        }
    };

    // Create the jQuery plugin
    $.fn.plugin = function(options) {
        // Do a deep copy of the options - http://goo.gl/gOSSrg
        options = $.extend(true, {}, defaults, options);

        return this.each(function() {
            var $this = $(this);
            // Create a new instance for each element in the matched jQuery set
            // Also save the instance so it can be accessed later to use methods/properties etc
            // e.g. 
            //    var instance = $('.element').data('plugin');
            //    instance.someMethod();
            $this.data('plugin', new Plugin($this, options));
        });
    };

    // Expose defaults and Constructor (allowing overriding of prototype methods for example)
    $.fn.plugin.defaults = defaults;
    $.fn.plugin.Plugin   = Plugin;
});

一些测试,

console.log($('.some-element').plugin({
        test: 'option1',
        test2: 'option2'
    }));

我总是得到这个空的东西

Object[]

那么我如何使用这个空对象呢

我想访问插件中的方法

    var plugin = $('.element').plugin();
    var instance = $('.element').data('plugin',plugin);
    console.log(instance); // an empty object again!
    console.log(instance.someMethod("hello world"));

TypeError:instance.someMethod不是函数

log（instance.someMethod（“helloworld”）

那么，我应该如何在插件中运行该方法呢

它与传统的jquery插件非常不同。AMD的是如此难以理解。你知道我怎样才能让这款AMD像传统的一样工作吗

编辑：

最后我得到了一些东西

    var plugin = $('.element').plugin();
    var instance = $('.element').data('plugin');
    console.log(instance);
    console.log(instance.someMethod("hello world"));

    var plugin = $('.element').plugin();
    var instance = $('.element').data('plugin');
    console.log(instance);
    console.log(instance.someMethod("hello world"));

结果,

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

hello world

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

hello world

---

为什么评论和回答的人很难指出这一点！唉

在您使用

进行的测试中，如果
某个元素
您将得到一个空的jQuery对象。由于
$，因此某个元素
不匹配。fn.plugin

返回

此内容。每个（…）

返回和

jQuery。每个

函数返回的

jQuery

对象与调用的对象完全相同

关于如何获取实例，让我们先看一下每个步骤：

var plugin = $('.element').plugin();

如果

$（'.element'）

与任何内容都不匹配，则上面的行不会创建插件。可以肯定的是，您分配给

插件的值等于
$（'.element'）

在上下文中，上面的行相当于
var instance=$（'.element'）.data（'plugin'，$（'.element'））
和
jQuery.data（key，value）
的返回值是jQuery对象本身，因此这里的
instance
将等于
$（'.element'）

如果
$（'.element'）
与任何内容都不匹配，就会得到这样的结果

console.log(instance.someMethod("hello world"));

这肯定行不通

如何访问插件实例在代码中的注释中有详细说明：

        //    var instance = $('.element').data('plugin');
        //    instance.someMethod();

当然，要使其工作，
$（'.element'）
必须匹配一组非空的元素

AMD根本不是你问题中的一个因素。这里的所有问题都与如何使用jQuery以及如何编写jQuery插件有关

结果,

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

hello world

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

hello world

正如我在你的另一个问题中指出的，你只是错误地使用了
.data（）
方法。使用
var实例=$（'.element'）.data（'plugin'）是的，对不起，我太笨了。我现在正在读
.data（）
的文档。谢谢。谢谢你的详细解释<代码>如果$（'.element'）不匹配任何内容，则上面的行不会创建插件我不明白-它应该匹配什么？你的意思是我的html标记中必须有一个名为
.element
的元素吗？类似于
？
$（'.element'）
在页面中搜索所有DOM节点，这些节点是在其类名（类

属性中的名称列表）中包含

元素

（是的，没有前导点）的元素。它返回一个jQuery对象，该对象是找到的一组元素。如果没有匹配的元素，则集合为空。这是基本的jQuery内容。谢谢。嗯，我的HTML中有元素-

something

，但它仍然返回

null

。您是否测试了

$（'.element'）

本身返回的内容？我从未见过使用选择器调用

$（）

返回值

null

，当然

$（'.element'）

返回对象。但不是这个

instance.someMethod（）返回错误-
类型错误：instance.someMethod不是函数
。