jquery - jquery插件的优化

Question

我没有问题，但我想要一些建议：我已经阅读了一些帮助来做一些 jquery 插件，我刚刚做了我的第一个。它有助于生成动态数据表：用一些 JSON 数据自动填充表，并创建一些触发器来添加或修改一些行。我有一个表格，它会添加一些行，单击表格中的一行将更改该行以显示一些输入和一个保存按钮。我将通过以下方式调用我的插件：

$("table#listClient").dataTableAuto();

一切正常！但是由于我的第一个 JQuery 插件，我想要一些建议来优化它，并使其尽可能干净......有没有更好的方法来做到这一点？

这里是 ：

(function($) {
    var PLUGIN_NS = 'dataTableAuto';

    var Plugin = function ( target, options ) { 
        this.$T = $(target); 
        this._init( target, options ); 
        return this; 

        /** the options */
        this.options= $.extend(
            true, {
                DEBUG: false
            },
            options
        );

    }
    /* Init */
    Plugin.prototype._init = function ( target, options ) { 
        /* all default values are generated with the table id, but can be changed if needed */
        var field = $(target).attr("id").split("_")[1];
        defaultAutoOptions = {
            formClassName:  "form_" + field,
            jsonFile:   "/json/json_" + field + ".json",
            submitEvtFct: this._submitEvtFct,
            clickEvtFct: this._clickEvtFct
        }
    this.options = $.extend(defaultAutoOptions, Plugin.defaults, options);
    this.dataTableAuto = this._dataTableAuto(target);
    /* Add some events, which can be change if needed */
    this.options.clickEvtFct(this);
    this.options.submitEvtFct(this);

    return this;
};

/* Default val */
Plugin.defaults = {
    events: function(_, callback){ callback([]) }
};

/* Init the datatable */
Plugin.prototype._dataTableAuto = function ( target, options ) { 
    var _this = this;
    /* Get some data used to init the datatable */
    var infosTable = this._getInfosColumn(target); 
    return tableDT = $(this.$T).DataTable({
        "ajax": {
            'type': 'GET',
            'url': this.options.jsonFile,
            'data':  function ( d ) {
            }
        },
        destroy: true,
        info: false,
        rowId: "lineID",
        'columnDefs': infosTable.listColumnDef,
        "columns": infosTable.listColumn,
        'paging' : false,
        "searching": false,
        "initComplete": function( settings, json ) {
            if (typeof json['eval']!='undefined'){
                eval(json['eval']);
            }
        },
        createdRow: function( row, data, dataIndex ) {
            _this._setClickableRow(target, row);
        }
    });
}

/* get column data used for datatable */
Plugin.prototype._getInfosColumn = function ( target) {
    listColumn = [];
    listColumnDef = [];
    attr = $(" > thead > tr th:first-child", $(target[0])).attr("id");
    if (typeof attr === typeof undefined || attr === false) {
        listColumn.push({ "data": "control" });
        listColumnDef.push({ className: 'control', targets: 0 });
    }
    $(" > thead > tr th", $(target[0])).each(function(index) {
        if ($(this).attr("id") != undefined) {
            listColumnDef.push({ responsivePriority: $(this).attr("id") == "col_buttons" ? 1 : index, targets: index});
            if ($(this).hasClass("isDate"))
                listColumn.push(
                    { "data": $(this).attr("id").split("_")[1],
                        render: function ( data, type, row ) {
                           return (data.split("-").length == 3 ? moment(data).format("DD/MM/YYYY") : data);
                        } 
                    }
                )
            else
                listColumn.push({ "data": $(this).attr("id").split("_")[1] })
        }
    })
    return {listColumnDef: listColumnDef, listColumn: listColumn};
}

/* Add a class on cell which can be clicked (depend of the head table line) */
Plugin.prototype._setClickableRow = function (target, row) {
    $(" > thead > tr th", $(target[0])).each(function(index) {
        if ($(this).hasClass("clickable")) {
            $("td:eq(" + index + ")", row).addClass('clickable');
        }
        if ($(this).attr("id") != undefined)
            $("td:eq(" + index + ")", row).addClass($(this).attr("id").split("_")[1]);
    })
}


/* trigger onclick on cells */
Plugin.prototype._clickEvtFct = function ( target, options) {
    $(target.$T).on("click", "tr td.clickable", function() {
        var theRowObject = target.dataTableAuto.row($(this).closest('tr'));
        $.getJSON( target.options.jsonFile, {
            command: "modLigne", 
            lineID: $(this).closest("tr").attr("id").split("_")[1]
        })
        .done(function( data ) {
            data = data.data[0];
            target.dataTableAuto.row(theRowObject).data(data).draw();
            $("tr#" + data.lineID + " td.clickable").addClass("pausedClick").removeClass("clickable");
        });
    })
}

/* trigger send form to add or update line */
Plugin.prototype._submitEvtFct = function ( target) {
    $("body").on("submit",  "form." + target.options.formClassName, function(e) {
        e.preventDefault();
        $.getJSON( target.options.jsonFile, $(this).serialize() + "&command=saveData&lineID=" + ($(this).closest("tr").length > 0 ? $(this).closest("tr").attr("id").split("_")[1] : 0))
        .done(function( datas ) {
            data = datas.data[0];
            var _tr = $("tr#" + data.lineID);
            if (_tr.length > 0) {
                target.dataTableAuto.row($("tr#" + data.lineID).index()).data(data).draw();
                $("tr#" + data.lineID + " td.pausedClick").addClass("clickable").removeClass("pausedClick");
            }
            else {
                target.dataTableAuto.row.add( data ).node().id = data.lineID;
                target.dataTableAuto.draw();
            }
            if(typeof datas['eval']!='undefined')eval(datas['eval']);
        });
    })  
}

/* Remove a line of datatable (called by the ajax call, when a line is deleted) */
Plugin.prototype.removeLine = function ( target, options) {
    this.dataTableAuto.row('#' + options[0]).remove().draw(); 
}

Plugin.prototype.DWARN = function () {
    this.DEBUG && console.warn( arguments );    
}


$.fn[ PLUGIN_NS ] = function( methodOrOptions ) {
    if (!$(this).length) {
        return $(this);
    }
    var instance = $(this).data(PLUGIN_NS);

    if ( instance 
            && methodOrOptions.indexOf('_') != 0 
            && instance[ methodOrOptions ] 
            && typeof( instance[ methodOrOptions ] ) == 'function' ) {

        return instance[ methodOrOptions ](this,  Array.prototype.slice.call( arguments, 1 ) ); 


    } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {

        instance = new Plugin( $(this), methodOrOptions ); 
        $(this).data( PLUGIN_NS, instance );
        return $(this);

    // CASE: method called before init
    } else if ( !instance ) {
        $.error( 'Plugin must be initialised before using method: ' + methodOrOptions );

    // CASE: invalid method
    } else if ( methodOrOptions.indexOf('_') == 0 ) {
        $.error( 'Method ' +  methodOrOptions + ' is private!' );
    } else {
        $.error( 'Method ' +  methodOrOptions + ' does not exist.' );
    }
};
})(jQuery);

谢谢，马修

标签： jquery