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插件有关。

Answer 2

    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

传统的jquery插件vs AMD jquery插件

2 个答案: