[Javascript] Utiliser reduce pour obtenir la somme de toutes les valeurs d’une clé spécifique dans un tableau (ou un objet)

30/06/2022 / admin

Source: How to sum all of values from specific key in object?

J’ai cet objet:

var arr = [{ 'credit': 1, 'trash': null }, { 'credit': 2, 'trash': null}]

1	var arr = [{ 'credit': 1, 'trash': null }, { 'credit': 2, 'trash': null}]

…et je veux effectuer la somme de toutes les valeurs de la clé credit (ce qui me retournerait « 3 » dans le cas de mon tableau).

arr.reduce((total, obj) => obj.credit + total,0)
// 3

1 2	arr.reduce((total, obj) => obj.credit + total,0) // 3

[Javascript] Comment appeler une fonction à partir d’une chaîne de caractères (string) sans utiliser la méthode Eval

23/06/2022 / admin

Problème:

J’essaye de pusher une fonction dans un tableau array. Cette fonction est constituée notamment d’une partie dynamique (son argument itemValue) qui doit être interprété avant que la fonction ne soit poussée dans le tableau. J’utilise les templates literals pour ça.

filterCurrentSelection.push(`({ ${itemValue} }) => ${itemValue} === 1`);

1	filterCurrentSelection.push(`({ ${itemValue} }) => ${itemValue} === 1`);

Les templates literals ont bien été interprétés dans la fonction présente dans le tableau, mais cette dernière est stockée sous forme de string (chaîne de caractères – cf. les guillemets autour de la fonction dans ma capture) et ne peut donc pas être ré-exécutée!

Solution: utiliser Function à la place d’eval()

Source: N’utiliser eval() qu’en dernier recours !

Avec eval() et des template literals

filterCurrentSelection.push(eval(`({ ${itemValue} }) => ${itemValue} === 1`));

1	filterCurrentSelection.push(eval(`({ ${itemValue} }) => ${itemValue} === 1`));

Avec Function et sans template literals

Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')();

1	Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')();

Inclus dans mon push push():

filterCurrentSelection.push(Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')());

1	filterCurrentSelection.push(Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')());

Solution alternative

Source: How to Call a JavaScript Function From a String Without Using eval

Les deux exemples ci-dessous fonctionnent on their own, mais je n’ai pas réussi à adapter mon propre code pour les faire exploiter.

Fonction sans paramètre

// WITHOUT PARAMETERS:
function runMe(){ console.log("runMe!"); }

// function we want to run
var fnstring = "runMe";

// find object
var fn = window[fnstring];

// is object a function?
if (typeof fn === "function") fn();

// results in:
// "runMe!"

// WITHOUT PARAMETERS:

function runMe(){ console.log("runMe!"); }

// function we want to run

var fnstring = "runMe";

// find object

var fn = window[fnstring];

// is object a function?

if (typeof fn === "function") fn();

// results in:

// "runMe!"

Fonction avec trois paramètres

// WITH PARAMETERS:
function runMeParams(one, two, three){ 
  console.log("runMe!" + one);
  console.log("runMe!" + two);
  console.log("runMe!" + three);
}

// function name and parameters to pass
var fnstring = "runMeParams";
var fnparams = [1, 2, 3];

// find object
var fn = window[fnstring];

// is object a function?
if (typeof fn === "function") fn.apply(null, fnparams);

// results in:
// "runMe!1"
// "runMe!2"
// "runMe!3"

// WITH PARAMETERS:

function runMeParams(one, two, three){

console.log("runMe!" + one);

console.log("runMe!" + two);

console.log("runMe!" + three);

}

// function name and parameters to pass

var fnstring = "runMeParams";

var fnparams = [1, 2, 3];

// find object

var fn = window[fnstring];

// is object a function?

if (typeof fn === "function") fn.apply(null, fnparams);

// results in:

// "runMe!1"

// "runMe!2"

// "runMe!3"

[Javascript] Créer des chemins dynamiques vers des données contenues dans un objet ou un tableau

23/06/2022 / admin

Source: Accessing nested JavaScript objects and arrays by string path et la demo sur jsFiddle.net.

var someObject = {
    'part1' : {
        'name': 'Part 1',
        'size': '20',
        'qty' : '50'
    },
    'part2' : {
        'name': 'Part 2',
        'size': '15',
        'qty' : '60'
    },
    'part3' : [
        {
            'name': 'Part 3A',
            'size': '10',
            'qty' : '20'
        }, {
            'name': 'Part 3B',
            'size': '5',
            'qty' : '20'
        }, {
            'name': 'Part 3C',
            'size': '7.5',
            'qty' : '20'
        }
    ]
};

var someObject = {

'part1' : {

'name': 'Part 1',

'size': '20',

'qty' : '50'

'part2' : {

'name': 'Part 2',

'size': '15',

'qty' : '60'

'part3' : [

{

'name': 'Part 3A',

'size': '10',

'qty' : '20'

}, {

'name': 'Part 3B',

'size': '5',

'qty' : '20'

}, {

'name': 'Part 3C',

'size': '7.5',

'qty' : '20'

}

]

};

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Object.byString = function(o, s) {

s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties

s = s.replace(/^\./, ''); // strip a leading dot

var a = s.split('.');

for (var i = 0, n = a.length; i < n; ++i) {

var k = a[i];

if (k in o) {

o = o[k];

} else {

return;

}

return o;

}

Utilisation:

Object.byString(someObj, 'part3[0].name');
// Part 3A

1 2	Object.byString(someObj, 'part3[0].name'); // Part 3A

Source: How to create a dynamic nested object from array of properties.

PDF – How to create a dynamic nested object from array of properties · GitHub

Code source (zip)

[Javascript] Déclaration de condition If dynamique

23/06/2022 / admin

Source: Dynamic JavaScript If Statement

function compare(post, operator, value) {
  switch (operator) {
    case '>':   return post > value;
    case '<':   return post < value;
    case '>=':  return post >= value;
    case '<=':  return post <= value;
    case '==':  return post == value;
    case '!=':  return post != value;
    case '===': return post === value;
    case '!==': return post !== value;
  }
}
//...
compare(5, '<', 10); // true
compare(100, '>', 10); // true
compare('foo', '!=', 'bar'); // true
compare('5', '===', 5); // false

function compare(post, operator, value) {

switch (operator) {

case '>': return post > value;

case '<': return post < value;

case '>=': return post >= value;

case '<=': return post <= value;

case '==': return post == value;

case '!=': return post != value;

case '===': return post === value;

case '!==': return post !== value;

}

//...

compare(5, '<', 10); // true

compare(100, '>', 10); // true

compare('foo', '!=', 'bar'); // true

compare('5', '===', 5); // false

[Javascript] Transformer une fonction fléchée (arrow function) en fonction classique

23/06/2022 / admin

Comment transformer une fonction fléchée en fonction de Javascript à papa. Utile, par exemple, lorsqu’on travaille avec Magento 2.

Note: la fonction d’exemple provient de ce sujet sur stack overflow: best way to filter based on dynamic condition.

Fonction fléchée (arrow function)

const
    data = [{ name: "Sam", age: 25, location: 'deleware', new_employee: true, shift: 'day' }, { name: "John", age: 45, location: 'new york', new_employee: false, shift: 'day' }, { name: "Tony", age: 65, location: 'california', new_employee: true, shift: 'evening' }, { name: "Bruce", age: 23, location: 'california', new_employee: true, shift: 'evening' }, { name: "Tom", age: 34, location: 'texas', new_employee: false, shift: 'day' }, { name: "Rob", age: 51, location: 'ohio', new_employee: false, shift: 'day' }, { name: "Jacob", age: 21, location: 'ohio', new_employee: false, shift: 'evening' }, { name: "Steve", age: 38, location: 'deleware', new_employee: false, shift: 'day' }],
    filters = [
        ({ age }) => age < 30,
        ({ shift }) => shift === 'evening'
    ],
    result = data.filter(o => filters.every(fn => fn(o)));

console.log(result);

const

data = [{ name: "Sam", age: 25, location: 'deleware', new_employee: true, shift: 'day' }, { name: "John", age: 45, location: 'new york', new_employee: false, shift: 'day' }, { name: "Tony", age: 65, location: 'california', new_employee: true, shift: 'evening' }, { name: "Bruce", age: 23, location: 'california', new_employee: true, shift: 'evening' }, { name: "Tom", age: 34, location: 'texas', new_employee: false, shift: 'day' }, { name: "Rob", age: 51, location: 'ohio', new_employee: false, shift: 'day' }, { name: "Jacob", age: 21, location: 'ohio', new_employee: false, shift: 'evening' }, { name: "Steve", age: 38, location: 'deleware', new_employee: false, shift: 'day' }],

filters = [

({ age }) => age < 30,

({ shift }) => shift === 'evening'

result = data.filter(o => filters.every(fn => fn(o)));

console.log(result);

Fonction classique

function classicJS(myData, myFilters) {
    return myData.filter(function(o) {
        return myFilters.every(function(fn) {
            return fn(o);
        });
    });
}

console.log(classicJS(data, filters));

function classicJS(myData, myFilters) {

return myData.filter(function(o) {

return myFilters.every(function(fn) {

return fn(o);

});

}

console.log(classicJS(data, filters));

Autre exemple:

Fonction fléchée

getSumOfAllValuesFromSpecificKeyInObject: function(currentVisibleStoresArray, optionValue) {
    return currentVisibleStoresArray.reduce((total, obj) => helper.accessNestedObjectByStringPath(obj, optionValue) + total, 0);
}

getSumOfAllValuesFromSpecificKeyInObject: function(currentVisibleStoresArray, optionValue) {

return currentVisibleStoresArray.reduce((total, obj) => helper.accessNestedObjectByStringPath(obj, optionValue) + total, 0);

}

Fonction classique

getSumOfAllValuesFromSpecificKeyInObject: function(currentVisibleStoresArray, optionValue) {
    return currentVisibleStoresArray.reduce(function(total, obj) {
        return helper.accessNestedObjectByStringPath(obj, optionValue) + total;
    }, 0);
}

getSumOfAllValuesFromSpecificKeyInObject: function(currentVisibleStoresArray, optionValue) {

return currentVisibleStoresArray.reduce(function(total, obj) {

return helper.accessNestedObjectByStringPath(obj, optionValue) + total;

}, 0);

}

[Google Maps] Astuces et bonnes pratiques

21/06/2022 / admin

Tutoriaux Google map V3 en français: Créer un marker personnalisé, Insérer les coordonnées d’une adresse en BDD, Adresses au format JSON, Filtrer les markers par rapport à un périmètre, Récupérer le département ou le pays d’une adresse, Ajouter un type de carte – V3, Geocodage Inversé – V3, Géocoder une adresse – V3, Récupérer les limites de la carte – getBounds, Classe Map V3, Zoom automatique avec Fitbounds, classe MVCArray, classe MVCObject.

[Javascript] Méthode Filter: bonnes pratiques et astuces d’utilisation

17/06/2022 / admin

Guide to JavaScript’s filter() Method sur StackAbuse

Guide to JavaScript’s filter() Method – Version PDF. Une multitude d’exemples d’utilisation particulièrement utiles de la méthode Filter.

[SASS][LESS] BEM, Block Element Modifier, astuces et bonnes pratiques

16/06/2022 / admin

Ressources en ligne sur BEM, Block Element Modifier

Une liste de ressources qui m’ont aidé à comprendre la méthodologie BEM:

Example perso avec un store locator

Regarder notamment le principe d’imbrication de plusieurs BLOCKs et la présence de la classe helper .is-store--china (comment elle est utilisée dans le code LESS ensuite).

Code HTML

<div
    id="storeLocator"
    class="store-locator is-store--china">
        <div class="store-locator__map">
            <div id="mapControl" class="map-control">
                <input
                    type="text"
                    id="autocompleteField"
                    class="map-control--autocomplete__field"
                    placeholder="Enter a place">
                <button
                    id="geolocationButton"
                    class="map-control--geolocation__button">
                    <span>Me localiser</span>
                </button>
            </div>
            <div id="map" class="map">
                <?php // MUST remain empty; here comes the map ?>
            </div>
        </div>
        <div class="store-locator__result">
            <div class="result-filter"></div>
            <div class="result-list">
                <p>Result...</p>
            </div>
        </div>
    </div>
</div>

<div

id="storeLocator"

class="store-locator is-store--china">

<input

type="text"

id="autocompleteField"

class="map-control--autocomplete__field"

placeholder="Enter a place">

<button

id="geolocationButton"

class="map-control--geolocation__button">

<span>Me localiser</span>

</button>

</div>

<?php // MUST remain empty; here comes the map ?>

</div>

<p>Result...</p>

</div>

Code CSS (LESS)

Première explication sous forme de code commenté (pour comprendre)

…mais, ATTENTION: ce n’est pas comme ça que vous devez organiser votre code. Voir la section suivante.

.store-locator {} /* store-locator est un nouveau BLOCK */
.store-locator__map {} /* la map est un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

    .map-control {} /* map-control est un nouveau BLOCK, enfant du BLOCK store-locator */
        .map-control--autocomplete {} /* est un MODIFIER (autocomplete est un type/genre) de map-control comme la femme est un type/genre de personne */
            .map-control--autocomplete__field {} /* field est ELEMENT (une partie) de autocomplete */
        .map-control--geolocation {} /* est un MODIFIER (geolocation est un autre type/genre) de map-control */
            .map-control--geolocation__button {} /* button est un ELEMENT (une partie) de geolocation */

    .map {} /* map est un nouveau BLOCK, enfant du BLOCK store-locator */

.store-locator__result {} /* les result sont un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

    .result-filter {} /* result-filter est un nouveau BLOCK, enfant du BLOCK store-locator */

    .result-list {} /* result-list est un nouveau BLOCK, enfant du BLOCK store-locator (c'est une liste de boutiques ou de retailers mais, par principe d'abstraction, on ne le précise pas */

.store-locator {} /* store-locator est un nouveau BLOCK */

.store-locator__map {} /* la map est un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

.map-control {} /* map-control est un nouveau BLOCK, enfant du BLOCK store-locator */

.map-control--autocomplete {} /* est un MODIFIER (autocomplete est un type/genre) de map-control comme la femme est un type/genre de personne */

.map-control--autocomplete__field {} /* field est ELEMENT (une partie) de autocomplete */

.map-control--geolocation {} /* est un MODIFIER (geolocation est un autre type/genre) de map-control */

.map-control--geolocation__button {} /* button est un ELEMENT (une partie) de geolocation */

.map {} /* map est un nouveau BLOCK, enfant du BLOCK store-locator */

.store-locator__result {} /* les result sont un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

.result-filter {} /* result-filter est un nouveau BLOCK, enfant du BLOCK store-locator */

.result-list {} /* result-list est un nouveau BLOCK, enfant du BLOCK store-locator (c'est une liste de boutiques ou de retailers mais, par principe d'abstraction, on ne le précise pas */

Organisation du code LESS en composants/BLOCKs

Valable pour SASS/SCSS également.

L’organisation du code en parties représentant chacune un block/composant permet le respect du principe d’inception: pas plus de 3 niveaux d’imbrication (à l’exception de la déclaration de :pseudo-classes).

.store-locator {
    display: block;

    &__map {
        height: 100%;
    }

    &__result {}
}

.service-center {}

.boutique-selector {}

.map-control {
    max-width: 50%;

    &--autocomplete {

        &__field {}
    }

    &--geolocation {

        &__button {

            &:hover {}
        }
    }
}

.map {
    height: 100%;
}

.store-locator {

display: block;

&__map {

height: 100%;

}

&__result {}

}

.service-center {}

.boutique-selector {}

.map-control {

max-width: 50%;

&--autocomplete {

&__field {}

}

&--geolocation {

&__button {

&:hover {}

}

.map {

height: 100%;

}

Exploitation d’une classe helper `.is-store--china`

L’organisation du code en parties représentant chacune un block/composant est reprise. La classe helper s’intercale au besoin.

Pour <div class="store-locator">, toutes les bordures seront pink.

Pour <div class="store-locator is-store--china">, toutes les bordures seront red.

.store-locator {
    border: 12px solid pink;
    &.is-store--china {
        border: 12px solid red;
    }
    &__map {
        border: 12px solid pink;
        .is-store--china & {
            border: 12px solid red;
        }
    }
}

.map-control {
    border: 12px solid pink;
    &--autocomplete {
        &__field {
            border: 6px solid pink !important;
        }
    }
    .is-store--china & {
        border: 12px solid red;
        &--autocomplete {
            &__field {
                border: 6px solid red !important;
            }
        }
    }
}

.store-locator {

border: 12px solid pink;

&.is-store--china {

border: 12px solid red;

}

&__map {

border: 12px solid pink;

.is-store--china & {

border: 12px solid red;

}

.map-control {

border: 12px solid pink;

&--autocomplete {

&__field {

border: 6px solid pink !important;

}

.is-store--china & {

border: 12px solid red;

&--autocomplete {

&__field {

border: 6px solid red !important;

}

[Magento 2] Accéder aux custom attributes d’un produit dans du code JavaScript

14/06/2022 / admin

Attention: pas testé (pas eu besoin au final…), mais la méthode me parait propre en regard des bonnes pratiques de coding de Magento 2.

Source: How to access custom attributes from the current product in JavaScript?.

[Magento 2] Un widget JS toggle on/off accessible WCAG avec les attributs Hidden et Aria-Expanded

06/06/2022 / admin

Objectif: créer un widget Toggle flexible dont le rôle sera uniquement d’affiche/masquer des éléments du DOM lorsque les utilisateurs interagissent avec un autre élément d’interface (bouton, checkbox, autre…).

Source: Marking elements expandable using aria-expanded. Exemple d’utilisation sur l’élément HTML Button. Exemple d’utilisation sur l’élément HTML Checkbox.

Exemple d’utilisation sur l’élément HTML Checkbox:

Source: https://www.accessibility-developer-guide.com/.

<p>
  Please click the following checkbox.
</p>
<input id="checkbox" type="checkbox" /><label for="checkbox">Show tooltip</label>
<div hidden="" id="tooltip">
  Thanks for toggling! Please click again to hide me.
</div>

<p>

Please click the following checkbox.

</p>

<input id="checkbox" type="checkbox" /><label for="checkbox">Show tooltip</label>

Thanks for toggling! Please click again to hide me.

</div>

;(function () {
  $(document).ready(function () {
    var $checkbox, $tooltip
    $checkbox = $('input')
    $tooltip = $('#tooltip')
    return $checkbox.change(() => {
      if ($tooltip.attr('hidden') === 'hidden') {
        return $tooltip.removeAttr('hidden')
      } else {
        return $tooltip.attr('hidden', true)
      }
    })
  })
}.call(this))

;(function () {

$(document).ready(function () {

var $checkbox, $tooltip

$checkbox = $('input')

$tooltip = $('#tooltip')

return $checkbox.change(() => {

if ($tooltip.attr('hidden') === 'hidden') {

return $tooltip.removeAttr('hidden')

} else {

return $tooltip.attr('hidden', true)

}

})

}.call(this))

Fichier `wcag-toggle.js`:

// Source: https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/expanded/
define([
    'jquery',
    'jquery-ui-modules/widget'
], function($) {
    'use strict';

    $.widget('mage.wcagToggle', {
        options: {
            toggleableElement: ''
        },

        /**
         * Create widget
         * @private
         */
        _create: function() {
            // console.log("%c wcagToggle", "background: yellow");

            this.element.on('click', $.proxy(this._toggleOnOff, this));
            // ...is similar to:
            // this.element.on('click', this._toggleOnOff.bind(this));
        },

        /**
         * Toggle On/Off
         * @private
         */
        _toggleOnOff: function() {
            if ($(this.options.toggleableElement).attr('hidden') === 'hidden') {
                $(this.options.toggleableElement).removeAttr('hidden');
                this.element.attr('aria-expanded', true);
            } else {
                $(this.options.toggleableElement).attr('hidden', true);
                this.element.attr('aria-expanded', false);
            }
        }

    });

    return $.mage.wcagToggle;
});

// Source: https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/expanded/

define([

'jquery',

'jquery-ui-modules/widget'

], function($) {

'use strict';

$.widget('mage.wcagToggle', {

options: {

toggleableElement: ''

/**

* Create widget

* @private

_create: function() {

// console.log("%c wcagToggle", "background: yellow");

this.element.on('click', $.proxy(this._toggleOnOff, this));

// ...is similar to:

// this.element.on('click', this._toggleOnOff.bind(this));

/**

* Toggle On/Off

* @private

_toggleOnOff: function() {

if ($(this.options.toggleableElement).attr('hidden') === 'hidden') {

$(this.options.toggleableElement).removeAttr('hidden');

this.element.attr('aria-expanded', true);

} else {

$(this.options.toggleableElement).attr('hidden', true);

this.element.attr('aria-expanded', false);

}

});

return $.mage.wcagToggle;

});

Fichier `PHTML`:

Partie DOM (attention, je mets juste les grandes lignes). Se référer à l’example de code proposé par le site source.

<div class="field choice newsletter">
    <input type="checkbox" id="is_subscribed" />
    <label for="is_subscribed" class="label"></label>
</div>

<div id="is_subscribed_is_checked" hidden="">
</div>

</div>

</div>

    <script type="text/x-magento-init">
        {
            "#is_subscribed": {
                "wcagToggle": {
                    "toggleableElement": "#is_subscribed_is_checked"
                }
            }
        }
    </script>

{

"#is_subscribed": {

"wcagToggle": {

"toggleableElement": "#is_subscribed_is_checked"

}

</script>

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier `requirejs-config.js`:

var config = {
    map: {
        '*': {
            wcagToggle: 'Magento_Theme/js/widgets/wcag-toggle'
        }
    }
};

var config = {

map: {

'*': {

wcagToggle: 'Magento_Theme/js/widgets/wcag-toggle'

}

};

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Problème:

Solution: utiliser Function à la place d’eval()

Avec eval() et des template literals

Avec Function et sans template literals

Solution alternative

Fonction sans paramètre

Fonction avec trois paramètres

Fonction fléchée (arrow function)

Fonction classique

Autre exemple:

Fonction fléchée

Fonction classique

Guide to JavaScript’s filter() Method sur StackAbuse

Ressources en ligne sur BEM, Block Element Modifier

Example perso avec un store locator

Code HTML

Code CSS (LESS)

Première explication sous forme de code commenté (pour comprendre)

Organisation du code LESS en composants/BLOCKs

Exploitation d’une classe helper .is-store--china

Exemple d’utilisation sur l’élément HTML Checkbox:

Fichier wcag-toggle.js:

Fichier PHTML:

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier requirejs-config.js:

Exploitation d’une classe helper `.is-store--china`

Fichier `wcag-toggle.js`:

Fichier `PHTML`:

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier `requirejs-config.js`: