web-dev-qa-db-ja.com

デフォルト値を持つオプションのJavaScriptデザインパターン？

// opt_options is optional
function foo(a, b, opt_options) {
  // opt_c, opt_d, and opt_e are read from 'opt_options', only c and d have defaults
  var opt_c = 'default_for_c';
  var opt_d = 'default_for_d';
  var opt_e; // e has no default

  if (opt_options) {
    opt_c = opt_options.c || opt_c;
    opt_d = opt_options.d || opt_d;
    opt_e = opt_options.e;
  }
}

上記は非常に冗長なようです。デフォルトパラメータで引数オプションを処理するより良い方法は何ですか？

javascriptdesign-patternsoptionoptional-parameters
64
ripper234

これは jQuery.extend を使用しますが、選択したライブラリまたはES6のObject.assignからのオブジェクトマージと交換できます。

function Module(options){
    var defaults = {
        color: 'red',
    };
    var actual = $.extend({}, defaults, options || {});
    console.info( actual.color );
}

var a = new Module();
// Red
var b = new Module( { color: 'blue' } );
// Blue

Edit： underscore または lodash ！

function Module(options){
    var actual = _.defaults(options || {}, {
         color: 'red',
    });
    console.info( actual.color );
}

var a = new Module();
// Red
var b = new Module( { color: 'blue' } );
// Blue

Javascript ES6では、 Object.assign を使用できます。

function Module(options = {}){
    let defaults = {
        color: 'red',
    };
    let actual = Object.assign({}, defaults, options);
    console.info( actual.color );
}
70
max

ES6/ES2015にはいくつかの新しい方法があります。 Object.assignを使用：

options = Object.assign({}, defaults, options);

破壊割り当ての使用：

const { a = 1, b = 2 } = options;

破壊関数のパラメーターも使用できます。

const ƒ = ({a = 1, b = 2, c = 3} = {}) => {
   console.log({ a, b, c });
};

依存関係はありません！

31
wprl

追加の依存関係なしでデフォルトオプションを取得するには、次のパターンを使用します。

var my_function = function (arg1, arg2, options) {
    options = options || {};
    options.opt_a = options.hasOwnProperty('opt_a') ? options.opt_a : 'default_opt_a';
    options.opt_b = options.hasOwnProperty('opt_b') ? options.opt_b : 'default_opt_b';
    options.opt_c = options.hasOwnProperty('opt_c') ? options.opt_c : 'default_opt_b';


    // perform operation using options.opt_a, options.opt_b, etc.
};

少し冗長ですが、読みやすく、オプションを追加/削除し、デフォルトを追加するのが簡単です。オプションがたくさんある場合、もう少しコンパクトなバージョンは次のとおりです。

var my_function = function (arg1, arg2, options) {
    var default_options = {
        opt_a: 'default_opt_a',
        opt_b: 'default_opt_b',
        opt_c: 'default_opt_c'};

    options = options || {};
    for (var opt in default_options)
        if (default_options.hasOwnProperty(opt) && !options.hasOwnProperty(opt))
            options[opt] = default_options[opt];

    // perform operation using options.opt_a, options.opt_b, etc.
};
20
Rick Deckard

そして、よりコンパクトなjQueryバージョン：

function func(opts) {
    opts = $.extend({
        a: 1,
        b: 2
    }, opts);

    console.log(opts);
}

func();            // Object {a: 1, b: 2} 
func({b: 'new'});  // Object {a: 1, b: "new"}
11
imbolc

多くの連続した機能でこれを行う必要がある場合、プロセスを標準化してスピードアップする方法は次のとおりです。

function setOpts (standard, user) {
  if (typeof user === 'object' {
    for (var key in user) {
      standard[key] = user[key];
    }
  }
}

次に、次のように関数を定義するだけです。

var example = function (options) {
  var opts = {
    a: 1,
    b: 2,
    c:3
  };
  setOpts(opts, options);
}

この方法では、デフォルト値を含む関数内で1つのオプションオブジェクトのみを定義します。

プロトタイプの継承を避ける に特別なチェックを加えたい場合、最初の関数は次のようになります：

function setOpts (standard, user) {
  if (typeof user === 'object') {
    Object.keys(user).forEach(function (key) {
      standard[key] = user[key];
    });
  }
}

後者の場合は、IE <9、Chrome <5、Firefox <4、Safari <5

（互換性テーブルを確認できます こちら ）

最後に、ECMAScript 6がこれを行う最良の方法を提供します： default parameters 。

これがブラウザ間で広くサポートされるまでには数ヶ月かかります。

2
Pensierinmusica

ステージ4提案のES6 （バベルなど）にアクセスできる場合は、スプレッドとデストラクチュアリングの割り当てでこれを達成できます。

const defaultPrintOptions = {
  fontName: "times",
  fontStyle: "normal",
  fontSize: 10,
  align: "left"
};

// Setting the null default isn't necessary but
// makes it clear that the parameter is optional.
// Could use {} but would create a new object
// each time the function is called.
function print(text, options = null) {
  let {
    fontName,
    fontStyle,
    fontSize,
    align
  } = {
    ...defaultPrintOptions,
    ...options
  };

  console.log(text, fontName, fontStyle, fontSize, align);
}

print("All defaults:");
print("Override some:", {
  fontStyle: "italic",
  align: "center"
});
print("Override all:", {
  fontName: "courier",
  fontStyle: "italic",
  fontSize: 24,
  align: "right"
});

これも機能します（ただし、より多くのオブジェクトを作成できます）。

function myFunction({ 
  text = "", 
  line = 0, 
  truncate = 100 
} = {}) {
  console.log(text, line, truncate);
}

（ David Walsh からの後者の例-@wprlの答えもこれに言及しています）

0
TrueWill

Object.assign はオプションをデフォルトとマージするための非常に簡単な方法ですが、いくつかの欠点があります：

  1. 三項演算子で条件付きオプションを設定する場合-undefined値に対してもデフォルトを上書きします：

    const options = {
  logging: isProduction ? 'none' : undefined
};
const defaults = {
  logging: 'verbose'
}
Object.assign({}, defaults, options); // {logging: undefined} !

  2. 間違ったオプション名を指定した場合、警告は表示されません。

    const options = {
  loging: 'none' // typo
};
const defaults = {
  logging: 'verbose'
}
Object.assign({}, defaults, options); // {logging: 'verbose', loging: 'none'} !

これらのケースをカバーするために、小さな flat-options パッケージを作成しました。
undefined値のデフォルトは上書きされません。

const options = {
  logging: isProduction ? 'none' : undefined
};
const defaults = {
  logging: 'verbose'
}
flatOptions(options, defaults); // {logging: 'verbose'}

間違ったオプション名について警告します：

const options = {
  loging: 'none' // typo
};
const defaults = {
  logging: 'verbose'
}
flatOptions(options, defaults); // throws "Unknown option: loging."

お役に立てれば！

0
vitalets
      var mergeOptions = function mergeOptions(userOptions) {

        // Default options
        var options = {
            height: "100px",
            width: "100px" ,
            color: "blue"
        }

        if (userOptions) {
            Object.keys(userOptions).forEach(function (key) {
                options[key] = userOptions[key]
            })
        }

        return options;
    }
0
Puyi Severino