効果的な JavaScript 項目 55 設定オブジェクトを関数パラメータとして受け入れる

関数が受け入れるパラメーターの順序を維持することは重要ですが、関数が受け入れることができるパラメーターの数が一定の数に達すると、ユーザーにとっては頭痛の種にもなります:

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

関数が再構築され続けるにつれて、進化すると、受け入れられるパラメータはどんどん増えていき、最終的には上記の例のようになります。

この場合、JavaScript は構成オブジェクトを使用して上記のパラメーターをすべて置き換えることができます:

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});

これによりコードが少し冗長になりますが、その利点が明らかであることは間違いありません: 構成オブジェクトの各パラメーター属性の名前は、この属性が何に使用されるかをユーザーに伝えるドキュメントのようなものです。特にブール値の場合、true と false だけを渡しても真意を判断するのは困難です。

このメソッドを使用するもう 1 つの利点は、すべての属性がオプションであることです。プロパティが構成オブジェクトに表示されない場合は、代わりにデフォルト値が使用されます。

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

関数が必要なパラメータを受け入れる必要がある場合は、次のように設定オブジェクトの外に置くのが最善です:

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

設定オブジェクト内のすべてのプロパティは関数が受け入れることができるオプションのパラメータであり、アプリとメッセージはパラメータですそれは渡されなければなりません。

設定オブジェクトの処理については、次のようになります。

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;
}

オプションの設定オブジェクトについては、まず項目 54 で紹介した方法を使用します。真理値判定で false を返した場合は、空のオブジェクトに置き換えます。

上記のコードには、オブジェクトの拡張やマージ関数の使用など、さらに最適化する余地がまだあります。多くの JavaScript ライブラリとフレームワークには、ターゲット オブジェクトとソース オブジェクトを受け入れ、ソース オブジェクトのプロパティをターゲット オブジェクトにコピーする extend 関数があります。

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;
}

extend 関数を使用すると、常に各属性を更新して判断します。上記のコードの最初の extend 関数は、幅と高さのプロパティが設定されていない場合にデフォルト値を設定するために使用されます。これは、これらのプロパティが 2 番目の extend 関数でそれらに基づいて計算されるためです。

最終的にすべてのプロパティがこのオブジェクトに割り当てられる場合、上記のコードは次のように簡略化できます:

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);
}

extend 関数の実装は通常、ソース オブジェクトのプロパティを走査し、プロパティの値が未定義ではなく、ターゲット オブジェクトにコピーします:

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

概要

API をより読みやすくするには、オプションの設定オブジェクトを使用します。

設定パラメータの属性は、関数のオプションのパラメータである必要があります。

extend ユーティリティ関数を使用して、構成オブジェクトを使用してコードを簡素化します。