关于数据表:有人可以用非常简单的方式帮助解释jQuery扩展吗?

Can someone help explain jQuery extend in a very simple way?

我有以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
     $.extend($.fn.dataTableExt.oSort, {
       "datetime-uk-pre": function (a) {
            from = a.split(' ');
            var ukDatea = from[0].split('/');
            var ukTimea = from[1].split(':');
            return (ukDatea[2] + ukDatea[1] + ukDatea[0] + ukTimea[1] + ukTimea[0]) * 1;
        },
       "datetime-uk-asc": function (a, b) {
            return ((a < b) ? -1 : ((a > b) ? 1 : 0));
        },
       "datetime-uk-desc": function (a, b) {
            return ((a < b) ? 1 : ((a > b) ? -1 : 0));
        }
    });

    $.extend($.fn.dataTableExt.oSort, {
       "date-uk-pre": function (a) {
            var ukDatea = a.split('/');

            return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
        },
       "date-uk-asc": function (a, b) {
            return ((a < b) ? -1 : ((a > b) ? 1 : 0));
        },
       "date-uk-desc": function (a, b) {
            return ((a < b) ? 1 : ((a > b) ? -1 : 0));
        }
    });

我读到有关延伸但仍然不明白它在做什么。 有人可以帮忙解释一下。 我正在寻找的是尽可能简单的解释。 我也可以用某种方式组合这两个代码块。

这是为数据表提供不同排序方式的代码。 但是这是什么意思:

1
$.fn.dataTableExt.oSort


DataTables在基础包中提供了几个排序选项。您正在查看的那个称为基于类型的列排序,它基本上将尝试根据其类型对列进行排序。 DataTables已经为最常见的类型提供了默认排序函数,例如DateNumericHTML。它们在名为oSort的对象中注册为属性,可以使用$.fn.dataTableExt.oSort访问。这个对象看起来像这样:

1
2
3
4
5
6
7
8
oSort = {
 "string-pre": function ( a ) {
    // ...
  },
 "numeric": function ( a ) {
    // ...
  }
}

但是,如果需要自定义类型的自定义排序功能,则可以通过向oSort对象添加其他键或属性来扩展oSort对象。

例如,要添加名为date-uk-pre的新类型,您可以使用:

1
2
3
$.fn.dataTableExt.oSort['date-uk-pre'] = function ( a ) {
  // ...
}

也就是说,您正在使用名为date-uk-pre的新属性扩展oSort。 jQuery的$.extend()只不过是这个的捷径。不是手动为每个新类型添加每个属性,而是传递一个新对象,所有新类型(例如,date-uk-predatetime-uk-pre和jQuery将它们与现有的oSort对象合并,有效地扩展它新功能。你甚至可以将$.extend()组合成一个:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$.extend($.fn.dataTableExt.oSort, {
   "date-uk-pre": function (a) {
        var ukDatea = a.split('/');

        return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    },
   "date-uk-asc": function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
   "date-uk-desc": function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    },
   "datetime-uk-pre": function (a) {
        from = a.split(' ');
        var ukDatea = from[0].split('/');
        var ukTimea = from[1].split(':');
        return (ukDatea[2] + ukDatea[1] + ukDatea[0] + ukTimea[1] + ukTimea[0]) * 1;
    },
   "datetime-uk-asc": function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
   "datetime-uk-desc": function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

extend函数将第二个参数中定义的属性添加到第一个参数中的对象。通常它用于向插件添加更多功能,就像在上面的代码中一样。上面的代码为$.fn.dataTableExt.oSort对象添加了六个函数。来自谷歌搜索的是这个插件。扩展插件后,您可以执行以下操作:

1
$('selector').dataTableExt.oSort.date-uk-pre();


像这样:

1
2
3
4
5
6
7
8
9
10
11
12
var m1 = {'a':'a','b':'b'};
var m2 = {'c':'c','d':'d'};
var m3 = {'e':'e','f':'f'};

$.extend(m1,m2,m3);

console.log("m1:");
console.log(m1);

//Result :
//m1:
//{'a':'a','b':'b','c':'c','d':'d','e':'e','f':'f'};

另外,对于一个argumnt:

1
$.extend(m1)

相当于

1
$.extend($, m1);

要么

1
jQuery.extend(jQuery, m1);

所以jQuery会被扩展。然后jQuery将在我上面的特定示例中包含两个附加属性:'a':'a'和'b','b'。所以$ .a会返回'a'。

有关更多信息,请参阅http://api.jquery.com/jQuery.extend/。