Effektiver JavaScript-Punkt 55 Akzeptieren Sie Konfigurationsobjekte als Funktionsparameter

Obwohl es wichtig ist, die Reihenfolge der von der Funktion akzeptierten Parameter beizubehalten, verursacht es beim Benutzer auch Kopfschmerzen, wenn die Anzahl der Parameter, die die Funktion akzeptieren kann, eine bestimmte Zahl erreicht:

var alert = new Alert(100, 75, 300, 200,
    "Error", message,
    "blue", "white", "black",
    "error", true);

Während die Funktion weiter rekonstruiert wird und sich weiterentwickelt, können die Parameter, die sie akzeptieren kann, immer mehr werden, schließlich genau wie im obigen Beispiel.

In diesem Fall kann JavaScript ein Konfigurationsobjekt verwenden, um alle oben genannten Parameter zu ersetzen:

var alert = new Alert({
    x: 100, y: 75,
    width: 300, height: 200,
    title: "Error", message: message,
    titleColor: "blue", bgColor: "white", textColor: "black",
    icon: "error", modal: true});

Obwohl dadurch der Code etwas ausführlicher wird, besteht kein Zweifel daran Vorteile Es liegt auf der Hand: Der Name jeder Eigenschaft im Konfigurationsobjekt ist wie ein Dokument, das dem Benutzer sagt, wofür diese Eigenschaft verwendet wird. Insbesondere bei booleschen Werten ist es schwierig, ihre wahre Absicht allein durch die Übergabe von wahr und falsch zu beurteilen.

Ein weiterer Vorteil dieses Ansatzes besteht darin, dass alle Attribute optional sind. Wenn eine Eigenschaft nicht im Konfigurationsobjekt erscheint, wird stattdessen der Standardwert verwendet.

var alert = new Alert(); // use all default parameter values

Wenn die Funktion notwendige Parameter akzeptieren muss, platzieren Sie sie am besten außerhalb des Konfigurationsobjekts, wie folgt:

var alert = new Alert(app, message, {
    width: 150, height: 100,
    title: "Error",
    titleColor: "blue", bgColor: "white", textColor: "black",
    icon: "error", modal: true});

Alle Eigenschaften im Konfigurationsobjekt. Sie sind vorhanden Alle optionalen Parameter, die die Funktion akzeptieren kann, während app und message Parameter sind, die übergeben werden müssen.

Für die Verarbeitung von Konfigurationsobjekten können Sie wie folgt vorgehen:

function Alert(parent, message, opts) {
    opts = opts || {}; // default to an empty options object
    this.width = opts.width === undefined ? 320 : opts.width;
    this.height = opts.height === undefined
                ? 240
                : opts.height;
    this.x = opts.x === undefined
            ? (parent.width / 2) - (this.width / 2)
            : opts.x;
    this.y = opts.y === undefined
            ? (parent.height / 2) - (this.height / 2)
            : opts.y;
    this.title = opts.title || "Alert";
    this.titleColor = opts.titleColor || "gray";
    this.bgColor = opts.bgColor || "white";
    this.textColor = opts.textColor || "black";
    this.icon = opts.icon || "info";
    this.modal = !!opts.modal;
    this.message = message;
}

Für optionale Konfigurationsobjekte verwenden Sie zunächst die in Punkt 54 eingeführte Methode, wenn diese im Wahrheitswert false zurückgibt Urteil, ersetzen Sie es durch ein leeres Objekt.

Der obige Code bietet noch Raum für weitere Optimierungen: durch die Verwendung von Objekterweiterungs- oder Zusammenführungsfunktionen. In vielen JavaScript-Bibliotheken und Frameworks gibt es eine Erweiterungsfunktion, die ein Zielobjekt und ein Quellobjekt akzeptiert und dann die Eigenschaften im Quellobjekt in das Zielobjekt kopiert:

function Alert(parent, message, opts) {
    opts = extend({
        width: 320,
        height: 240
    });
    opts = extend({
        x: (parent.width / 2) - (opts.width / 2),
        y: (parent.height / 2) - (opts.height / 2),
        title: "Alert",
        titleColor: "gray",
        bgColor: "white",
        textColor: "black",
        icon: "info",
        modal: false
    }, opts);    this.width = opts.width;    this.height = opts.height;    this.x = opts.x;    this.y = opts.y;    this.title = opts.title;    this.titleColor = opts.titleColor;    this.bgColor = opts.bgColor;    this.textColor = opts.textColor;    this.icon = opts.icon;    this.modal = opts.modal;
}

Über die Erweiterungsfunktion Es ist nicht mehr notwendig, jedes Attribut ständig zu beurteilen. Die erste Erweiterungsfunktion im obigen Code wird verwendet, um Standardwerte festzulegen, wenn die Eigenschaften „Breite“ und „Höhe“ nicht festgelegt sind, da sie in der zweiten Erweiterungsfunktion auf dieser Grundlage berechnet werden.

Wenn letztendlich alle Eigenschaften diesem Objekt zugewiesen werden, kann der obige Code wie folgt vereinfacht werden:

function Alert(parent, message, opts) {
    opts = extend({
        width: 320,
        height: 240
    });
    opts = extend({
        x: (parent.width / 2) - (opts.width / 2),
        y: (parent.height / 2) - (opts.height / 2),
        title: "Alert",
        titleColor: "gray",
        bgColor: "white",
        textColor: "black",
        icon: "info",
        modal: false
    }, opts);
    extend(this, opts);
}

Die Implementierung der Erweiterungsfunktion durchläuft normalerweise die Eigenschaften des Quellobjekts , und dann Wenn der Wert der Eigenschaft nicht undefiniert ist, wird er in das Zielobjekt kopiert:

function extend(target, source) {
    if (source) {
        for (var key in source) {
            var val = source[key];
            if (typeof val !== "undefined") {
                target[key] = val;
            }
        }
    }
    return target;
}

Zusammenfassung

Verwenden Sie optionale Konfigurationsobjekte, um die API besser lesbar zu machen.

Die Attribute in den Konfigurationsparametern sollten optionale Parameter der Funktion sein.

Verwenden Sie die Extend-Dienstprogrammfunktion, um Code zu vereinfachen, der Konfigurationsobjekte verwendet.