jQuery插件+AMD=如何访问函数

jQuery plugin + AMD = how to access functions?

本文关键字：访问 函数 何访问 插件 +AMD jQuery      更新时间：2024-02-29

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

错误，

TypeError:$.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());

结果，

TypeError:$.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");

结果，

TypeError:instance为null//这意味着什么？它应该返回"你好世界"，不是吗？

instance.someMethod（"helloworld"）；

编辑2:

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

结果，

TypeError：instance.someMethod不是函数

console.log（instance.someMethod（"helloworld"））；

您似乎并没有真正创建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();

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