Авторские плагины JQuery.Передача Методы против Вариантов

Question

Так что я пытаюсь создать свой первый плагин, который принимает методы и опции после init. Я читал учебное пособие по созданию плагинов на веб-сайте JQuery и придумал этот

Fiddle

(function($) {
    /* Default Options */
    var defaults = {
        column_sort_map: []
    };

    /* Global Scope */
    var sort_col = false;
    var sortMethods = {
        date: function(a, b) {
            var date1 = new Date($(a).find(":nth-child(" + sort_col + ")").html());
            var date2 = new Date($(b).find(":nth-child(" + sort_col + ")").html());
            if (date1 == date2) {
                return 0;
            }
            if (date1 < date2) {
                return -1;
            }
            return 1;
        },
        string_case: function(a, b) {
            var aa = $(a).find(":nth-child(" + sort_col + ")").html();
            var bb = $(b).find(":nth-child(" + sort_col + ")").html();
            if (aa == bb) {
                return 0;
            }
            if (aa > bb) {
                return 1;
            }
            return -1;
        },
        string_nocase: function(a, b) {
            var aa = $(a).find(":nth-child(" + sort_col + ")").html().toLowerCase();
            var bb = $(b).find(":nth-child(" + sort_col + ")").html().toLowerCase();
            if (aa == bb) {
                return 0;
            }
            if (aa > bb) {
                return 1;
            }
            return -1;
        },
        numeric: function(a, b) {
            var aa = $(a).find(":nth-child(" + sort_col + ")").html().replace(/\D/g, '');
            var bb = $(b).find(":nth-child(" + sort_col + ")").html().replace(/\D/g, '');
            if (isNaN(aa)) {
                aa = 0;
            }
            if (isNaN(bb)) {
                bb = 0;
            }
            return aa - bb;
        }
    };

    var methods = {
        init: function(options) {
            // extend options
            if (options) {
                $.extend(defaults, options);
            }
            alert(options.column_sort_map);
        },
        test: function() {
         alert("I am a Test");   
        }
    };
    $.fn.dataTable = function(method) {
        return this.each(function() {
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('Method ' + method + ' does not exist on jQuery.dataTable');
            }
        });
    };

})(jQuery);

и я звоню с

$("#tbl").dataTable({
    column_sort_map: [
        "numeric",
        "string_nocase",
        "string_nocase",
        "date",
        "string_nocase",
        "string_nocase",
        "numeric"
        ]
});

$("#tbl").dataTable("test");

HTML-код очень большой, и мне не хочется писать новую таблицу. Однако для моей проблемы это не требуется.

Я должен еще раз подчеркнуть, это один из моих первых случаев создания такого плагина, как этот. Возможно, я полностью неверно истолковал учебник, и у меня есть серьезные ошибки.

Моя проблема в том, что когда я пытаюсь получить доступ к options.column_sort_map, я получаю ошибку 'undefined'. Однако вызов функции к test работает как положено.

Answer 1

Ошибка в том, как вы пытаетесь расширить свои значения по умолчанию.

 $.extend(defaults, options);

Это на самом деле установка defaults для хранения вновь переданной опции, НЕ options.

Это исправление должно быть простым:

var options =  $.extend(defaults, options);
alert(options.column_sort_map);

$. Extend вернет вновь созданный объект, в дополнение к изменению первого параметра. Если вы не хотите влиять на настройки по умолчанию, сделайте следующее:

var options = $.extend({}, defaults, options);

Answer 2

Ваш звонок к плагину неверен. Он настроен на предоставление «метода» при вызове плагина, но вы не делаете этого для первого вызова. Вы должны использовать

$("#tbl").dataTable("init", . . .

и затем передайте свои варианты.