Question

我有jQuery 100+案例，如下所示，我想在面向对象中压缩或编写。

var shortcode = {
    init: function () {
    jQuery('.primary_select select').change(function () {
        jQuery('.secondary_select').hide();
        if (this.value != '') {
            if (
              jQuery('#secondary_' + this.value).show()
              .children('.tertiary_select')
              .size() == 0) {
                 jQuery('#secondary_' + this.value).show();
            }
        }
    }).change();

    jQuery('#sendtoeditor').click(function () {
        shortcode.sendToEditor();
    });

    jQuery('.secondaryselect select').change(function () {
        jQuery(this).closest('.secondary_select')
        .children('.tertiary_select').hide();
        if (this.value != '') {
            jQuery('#atp-' + this.value).show();
        }
    }).change();
},
generate: function () {
var type = jQuery('.primary_select select').val();

switch (type) {
    case 'dropcap':
    var type            = jQuery('[name="dropcap_type"]').val();
    var text            = jQuery('[name="dropcap_text"]').val();
    var text_color      = jQuery('[name="dropcap_textcolor"]').val();
    var bgcolor         = jQuery('[name="dropcap_bgcolor"]').val();
    var droptype        = jQuery('#dropcap_type').val();

    if ( type )     { type = ' type="' + type + '"'; }
    if ( text )         { text = ' letter="' + text + '"'; }
    if ( text_color )   { text_color = ' text_color="' + text_color + '"'; }
    if ( bgcolor )      { bgcolor = ' bgcolor="' + bgcolor + '"'; }

    if(droptype == 'dropcap3'){
        return '[dropcap'+ type + text_color + text +']';
    }else{
        return '[dropcap'+ type + bgcolor + text_color + text +']';
    }
break;

case 'icons':
    var style = jQuery('[name="icons_icon"]').val();
    var size = jQuery('[name="icons_size"]').val();
    var color = jQuery('[name="icons_color"]').val();
    if (style !== '') {
        style = ' style="' + style + '"';
    }
    if (size !== '') {
        size = '  size="' + size + '"';
    }
    if (color !== '') {
        color = ' color="' + color + '"';
    }

    return '\n[icons' + style + size + color + ']\n';
break;
default:
    return extra();
    }
},
sendToEditor: function () {
    send_to_editor(shortcode.generate());
}
}

让我这样说吧，我有所有输入名称属性，其值前缀为案例类型，后缀为其类型，文本，颜色等唯一名称。我想压缩它像这样

case 'dropcap':
    var type, text, text_color, bgcolor;
    jQuery('[name="+'case'+_var"]').val();

    var droptype        = jQuery('#dropcap_type').val();

    if ( var )  { var = ' var="' + getvalue + '"'; }

    if(droptype == 'dropcap3'){
        return '[dropcap'+ type + text_color + text +']';
    }else{
        return '[dropcap'+ type + bgcolor + text_color + text +']';
    }
break;
case 'icons':
    var style,size,color;
    if ( var )  { var = ' var="' + getvalue + '"'; }

    return '\n[icons' + style + size + color + ']\n';
break;

这是一个很好的做法，还是有更好的方法来做到这一点？如何压缩上面的代码？

Answer 1

您可以将数组中的属性名称列为类数组并循环遍历它们。在这里，我将answer改编为你的全班同学的另一个问题：

var shortcode = {
    allTypeAttributes: {
        'dropcap': ['type', 'text', 'text_color', 'bgcolor'],
        'icons': ['style', 'size', 'color']
    },

    init: function () {
        $('.primary_select select').change(function () {
            $('.secondary_select').hide();
            if (this.value != '') {
                if (
                    $('#secondary_' + this.value).show()
                        .children('.tertiary_select')
                        .size() == 0) {
                    // TODO: show() is already called in the if statement... fix it!
                    $('#secondary_' + this.value).show();
                }
            }
        }).change();

        $('#sendtoeditor').click(function () {
            this.sendToEditor();
        });

        $('.secondaryselect select').change(function () {
            $(this).closest('.secondary_select')
                .children('.tertiary_select').hide();
            if (this.value != '') {
                $('#atp-' + this.value).show();
            }
        }).change();
    },
    generate: function () {
        var type = $('.primary_select select').val(),
            typeAttributes = this.allTypeAttributes[type];

        if (typeAttributes !== undefined) {
            return this.createShortcode(type, typeAttributes);
        } else {
            return extra();
        }
    },
    createShortcode: function (name, typeAttributes) {
        var value;
        $.each(typeAttributes, function (id, attrib) {
            value = $('[name="' + name + '_' + attrib + '"]').val();
            if (value !== '') {
                ret += ' ' + attrib + '="' + value + '"';
            }
        });
        return '\n[' + name + ret + ']\n';
    },
    sendToEditor: function () {
        send_to_editor(this.generate());
    }
}

也许你可以从createShortcode而不是字符串返回一个数组并将其发送给编辑器？似乎有一个错误，我用TODO标记了它。

如前所述，如果你的DOM很大，你应该考虑selector optimisation。在选择元素名称之前，它还有助于限制范围：

jQuery('.inputContainer').find('[name="icons_' + attrib + '"]')

从所选输入中获取值并返回短代码

1 个答案: