Un modèle de conception javascript pour les options avec des valeurs par défaut ?

Question

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

Ce qui précède semble terriblement verbeux. Quelle est la meilleure façon de gérer les options d'argument avec les paramètres par défaut ?

Answer 1

Il y a quelques nouvelles façons dans ES6/ES2015. Utilisation de l'affectation déstructurante :

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

Vous pouvez également utiliser des paramètres de fonction de déstructuration :

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

Utilisation de Object.assign :

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

Pas de dépendances !

Answer 2

Pour obtenir des options par défaut sans dépendances supplémentaires, j'utilise le modèle suivant :

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

Bien qu'un peu verbeux, je le trouve facile à lire, à ajouter/supprimer des options et à ajouter des valeurs par défaut. Quand il y a BEAUCOUP d'options, une version légèrement plus compacte est :

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

Answer 3

Et la version jQuery plus compacte :

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

Answer 4

Utilisation de l'opérateur de propagation ES6 sans utiliser de bibliothèques externes

 function Example(opts) {
   let defaults = { foo: 1, bar: 2 }
   opts = { ...defaults, ...(opts || {}) }
   console.log(opts);
}

Example({ bar: 3, baz: 4 })

// { foo: 1, bar: 3, baz: 4 }