Question

我正在使用jeditable大约30-40个不同类型的字段，这就是为什么我必须编写一些块

$(".editable-...type of element...").editable(method, {parameters})

表示我在表单中的不同类型的元素（字符串，整数，不同的下拉列表）。例如，以下是字符串：

$(".editable-jedit-string").editable("/Controller/Method",
    {
        submitdata: {
            ItemId: '@ViewData["ItemId"]'
        },
        cssclass: 'inherit',
        indicator: 'wird gespeichert...',
        style: 'display:inline',
        height: '15px',
        width: '150px',
        placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
        tooltip: 'Zum Bearbeiten doppelklicken...',
        event: 'dblclick',
        submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
    });

和下拉列表

**$(".editable-jedit-string-welle")**.editable("/Controller/Method",
    {
        submitdata: {
            ItemId: '@ViewData["ItemId"]'
        },
        **data: " {'A':'A','B':'B','C':'C'}",**
        type: "select",
        cssclass: 'inherit',
        indicator: '<span class="muted">wird gespeichert...</span>',
        style: 'display:inline',
        height: '15px',
        **width: '15px',**
        placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
        tooltip: 'Zum Bearbeiten doppelklicken...',
        event: 'dblclick',
        submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
    });

所以，大多数参数一直在重复，而有些（我试图在这里使它们变粗，但它们在星号中......）是不同的。

我的问题是，如何让代码更紧凑？我有大约6个这样的声明，我认为代码可以重构为更好看。

我可以为所有可重复元素创建参数（按钮声明，标签，样式），但是我仍然需要声明.editable（）六次... 我想知道，如果可以声明$（。class）.editable（）一次，然后更改其中的参数？通过这种方式，我可以先声明所有可重复的参数，然后遍历元素并添加其他数据......

感谢任何想法！

Answer 1

您可以先创建一个包含所有默认选项的对象，然后使用$.extend()合并更改/新属性。

var myDefaults = {
    submitdata: {
        ItemId: '@ViewData["ItemId"]'
    },
    cssclass: 'inherit',
    indicator: 'wird gespeichert...',
    style: 'display:inline',
    height: '15px',
    width: '150px',
    placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
    tooltip: 'Zum Bearbeiten doppelklicken...',
    event: 'dblclick',
    submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
};

$(".selector").editable("/Controller/Method", $.extend(true, {}, myDefaults, {
    data: " {'A':'A','B':'B','C':'C'}",
    width: '15px'
});

$ .extend（）语法有点棘手，所以你可以使用.bind()来推广自己的语法。

// create a function with your default parameters for $.extend()
var editableParams = $.extend.bind({}, true, {}, myDefaults); 

// usage
$(".selector").editable("/Controller/Method", editableParams({
    data: " {'A':'A','B':'B','C':'C'}",
    width: '15px'
});

http://jsfiddle.net/6GQ9Y/

演示 http://api.jquery.com/jQuery.extend/

上的

$.extend()个文档

.bind()引用（和垫片）：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

更新

上面的.bind（）方法基本上只是创建新函数的一种奇特方式。但是，似乎 IE 8及更早版本不支持它。使用以下代码可以实现相同的“快捷方式”：

function editableParams(options) {
    return $.extend(true, {}, myDefaults, options);
}

Answer 2

您可以将公共属性提取到公共对象中。

var defaultEditableConfig = {
    width: 15px,
    height: 15px,
    ...
}

然后

$('.editable-class').editable($.extend({}, defaultEditableConfig, {
    data: { 'A' : 'a', 'B' : 'b' }
});

当然，您可以将其包装在实用程序方法或其他内容中，以便更容易使用以下签名进行调用：

makeEditable(jQueryElementString, options);

如何使这样的jquery声明更紧凑？

2 个答案:

更新