jQuery插件+ AMD =如何访问功能?(jQuery plugin + AMD = how t

2019-10-29 17:42发布

我在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());

错误,

类型错误:$ .fn.myPlugin.init不是一个函数

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

任何想法我错误地做了什么? 我怎样才能访问里面的功能myPlugin.prototype = {...}

编辑:

与此测试样板 ,

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

结果,

Object[] // why is it empty?

console.log($.fn.plugin.someMethod());

结果,

类型错误:$ .fn.plugin.someMethod不是一个函数

的console.log($ fn.plugin.someMethod());

和,

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

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

console.log($.fn.plugin.Plugin.prototype.someMethod("hello world"));

结果,

hello world

和,

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

结果,

类型错误:实例为null,//这是什么意思? 它应该返回“世界你好”,是不是?

instance.someMethod( “世界你好”);

编辑2:

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

结果,

类型错误:instance.someMethod不是一个函数

的console.log(instance.someMethod( “世界你好”));

Answer 1:

你似乎并不被实际创建为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;
});

从这里- https://gist.github.com/simonsmith/4353587

现在,你可以使用这样的插件:

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

该对象的实例保存在数据属性,因此它可以随时被访问。 Herotabs使用这种技术:

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


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 plugin + AMD = how to access functions?