常规 jquery 插件 vs AMD jquery 插件

Question

我仍然无法理解这个 AMD jquery 插件。

// 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 不是函数

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

那么我该怎么做才能运行插件里面的方法呢？

它与传统的 jquery 插件有很大的不同。 AMD的太难理解了。知道如何让这个 AMD 像传统的一样工作吗！？？

编辑：

终于有收获了，

    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

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

Answer 1

在您使用.some-element 进行的测试中，如果.some-element 不匹配任何内容，您将得到一个空的jQuery 对象，因为$.fn.plugin 返回this.each(...) 返回的内容，而jQuery.each 函数返回与它完全相同的jQuery 对象被召唤了。

至于如何获取实例，我们来逐一介绍：

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

如果$('.element') 不匹配，上述行将不会创建插件。可以肯定的是，您分配给plugin 的值等于$('.element')。

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

在上下文中，上面一行相当于var instance = $('.element').data('plugin', $('.element'));，而jQuery.data(key, value)的返回值就是jQuery对象本身，所以这里instance将等于$('.element')。

console.log(instance); // an empty object again!

如果$('.element') 不匹配，您会得到这样的结果。

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

这绝对行不通。

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

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

当然，要让它工作，$('.element') 必须匹配一组非空元素。

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