jQuery插件，多种类型(值，控件ID，函数)选项 [英] jquery plugin, multi-type (value, control id, function) options

问题描述

我有一个正在编写的接受选项的插件.看起来像这样.

I have a plugin I am writing that accepts options. It looks something like this.

$('#myObject').myPlugin({
    option1: someValue
});

somevalue可以是值，控件ID或函数.

Where somevalue can either be a value, a control id, or a function.

我有这样定义的默认设置

I have a default settings defined like this

var settings = {
    option1: null
};

然后，在我的插件内部，使用它将用户传递的内容与我的空设置对象合并

Then, inside my plugin I use this to merge what the user passes in with my empty settings object

if (options) {
    $.extend(settings, options);
}

当该选项是控件ID或值时，此方法工作正常.

This works fine when the option is a control ID or value.

我的第一个问题是当我使用这样的函数

My first issue is when I use a function like this

$('#myObject').myPlugin({
    option1: function(){ return doStuff(); }
});

在这种情况下，

$.extend()似乎忽略了该功能. settings中的默认值总是传递到我的解析器中.当我传入值而不是控件ID时，我也遇到了问题.我解析设置以获取像这样的值

$.extend() seems to ignore the function in this case. The default value from settings is always passed into my parser. I'm also having a problem when I pass in a value instead of a control id. I parse the settings to get the value like this

function parseValue(value, defaultValue) {
    if ($.isFunction(value))
        return value();

    if (!value)
        return defaultValue ? defaultValue : '';

    if ($('#' + value))
        return $('#' + value).val();

    return value;
};

如果我输入日期或小数，则$('#' + value)计算为true.

if I pass in a date or a decimal, $('#' + value) evaluates to true.

关于我如何进行这项工作的任何想法?

Any ideas on how I make this work?

这可能是错误的，但这就是我定义插件的方式.实际上是插件的集合

This may be wrong, but this is how I defined my plugin. It's actually a collection of plugins

(function ($) {

    //shared methods here
    function parseValue(value, defaultValue) { /*...*/ }

    $.fn.myplugin = function (options) {
        var settings = { };

        $(this).live("submit", function (event) {
            //NEVER EVER EVER allow the form to submit to the server
            event.preventDefault();

            //logic for "posting" cross domain
        });
    };

    $.fn.myplugin2 = function (options) {
        var settings = { };

        $(this).live("submit", function (event) {
            //NEVER EVER EVER allow the form to submit to the server
            event.preventDefault();

            //logic for "posting" cross domain
        });
    };

})(jQuery);

插件劫持了一个表单，并使其通过jsonp get请求跨域提交.每个插件都会向不同的URL提交不同的数据，但是总体逻辑是相同的.

The plugins hijack a form and make it submit cross domain through a jsonp get request. Each plugin submits different data to a different url, but the overall logic is the same.

推荐答案

我发现自己做错了.

我正在做的选择器测试始终返回false，因为如果找不到任何内容，jquery不会返回undefined.因此，我将解析器更改为如下形式:

The selector test I was doing was always returning false because jquery doesn't return undefined if nothing was found. So, I changed my parser to look like this:

function parseValue(value, defaultValue) {
    if ($.isFunction(value))
        return value();

    if (!value)
        return defaultValue;

    if ($.type(value) === 'string' && $(value).length)
        return $(value).val();

    return value;
};

我的代码现在看起来像这样

and my code now looks something like this

$.fn.myPlugin= function (options) {

    var settings = {
        setting1: undefined
    }

    $(this).live('click', function{
        var setting = parseValue(settings.setting1, '');
    });
}

现在所有三种类型(值，选择器或函数)都可以作为我的查询选项传递.

and now all three types (value, selector, or function) can be passed in as my query options.

这篇关于jQuery插件，多种类型(值，控件ID，函数)选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！