传统jquery插件vs AMD jquery插件

Conventional jquery plugin vs AMD jquery plugin

本文关键字：jquery 插件 AMD vs 传统      更新时间：2024-03-24

我仍然无法理解这个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（"helloworld"））；

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

它与传统的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

为什么那个些评论和回答的人很难指出这一点！叹气

在使用.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插件有关。

    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
相关文章：