devfrontend.info

[Javascript] Rendre les variables et des fonctions déclarées dans des closures (publiques/privées) accessibles en-dehors de ces dernières

01/07/2022 / admin

Plusieurs sources pour cet article (car plusieurs techniques; à vous de choisir):

Avec le module pattern: How to avoid global variables in JavaScript?
Avec le Revealing module pattern
Avec window['varName'] = varName;: How to avoid global variables in JavaScript?
Un peu de culture générale sur les différentes façons de déclarer des variables en Javascript: Difference between variable declaration syntaxes in Javascript (including global variables)?

Avec le module pattern:

Je détaille celui-ci car il me plait bien 🙂 Mais voir également le Revealing module pattern juste en-dessous qui apporte quelques améliorations.

Variables et les fonctions privées: déclarées au sein d’une closure mais EN-DEHORS du scope du return
Variables et les fonctions publiques: déclarées au sein d’une closure mais DANS le scope du return

YAHOO.myProject.myModule = function () {

    //"private" variables:
    var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

    //"private" method:
    var myPrivateMethod = function () {
        YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
    }

    return  {
        myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."
        myPublicMethod: function () {
            YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

            //Within myProject, I can access "private" vars and methods:
            YAHOO.log(myPrivateVar);
            YAHOO.log(myPrivateMethod());

            //The native scope of myPublicMethod is myProject; we can
            //access public members using "this":
            YAHOO.log(this.myPublicProperty);
        }
    };

}(); // the parens here cause the anonymous function to execute and return

YAHOO.myProject.myModule = function () {

//"private" variables:

var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

//"private" method:

var myPrivateMethod = function () {

YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");

}

return {

myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."

myPublicMethod: function () {

YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

//Within myProject, I can access "private" vars and methods:

YAHOO.log(myPrivateVar);

YAHOO.log(myPrivateMethod());

//The native scope of myPublicMethod is myProject; we can

//access public members using "this":

YAHOO.log(this.myPublicProperty);

}

};

}(); // the parens here cause the anonymous function to execute and return

Avec le Revealing module pattern

Avec le Revealing module pattern, toutes les variables et toutes les fonctions sont d’abord déclarées en privé et on se sert du return pour lister celles qu’on rend ensuite publiques. C’est plus lisible et plus pratique à l’utilisation.

var myModule = (function() {
  'use strict';

  var _privateProperty = 'Hello World';
  var publicProperty = 'I am a public property';

  function _privateMethod() {
    console.log(_privateProperty);
  }

  function publicMethod() {
    _privateMethod();
  }

  return {
    publicMethod: publicMethod,
    publicProperty: publicProperty
  };
})();

myModule.publicMethod(); // outputs 'Hello World'
console.log(myModule.publicProperty); // outputs 'I am a public property'
console.log(myModule._privateProperty); // is undefined protected by the module closure
myModule._privateMethod(); // is TypeError protected by the module closure

var myModule = (function() {

'use strict';

var _privateProperty = 'Hello World';

var publicProperty = 'I am a public property';

function _privateMethod() {

console.log(_privateProperty);

}

function publicMethod() {

_privateMethod();

}

return {

publicMethod: publicMethod,

publicProperty: publicProperty

};

})();

myModule.publicMethod(); // outputs 'Hello World'

console.log(myModule.publicProperty); // outputs 'I am a public property'

console.log(myModule._privateProperty); // is undefined protected by the module closure

myModule._privateMethod(); // is TypeError protected by the module closure

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

01/02/2022 / admin

ATTENTION: la méthode décrite dans ce billet fonctionne très bien pour deux choses bien distinctes:

déléguer un événement à un élément du DOM créé dynamiquement
détecter l’événement click sur un SVG

Néanmoins, dans le 1er cas et pour des raisons de performance, il serait plutôt conseillé de se tourner vers une solution d’event bubbling.

Source: Detecting click events on SVGs with vanilla JS event delegation – Listening for clicks inside an element.

<div id="combinationSummaryList">
    <a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>
    <a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a> <!-- la délégation d'événement sert pour cet élément -->
</div>

<a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>

<a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a>

</div>

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-link' ) ) return;
    event.preventDefault();
    // code à exécuter
}, false );

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-link' ) ) return;

event.preventDefault();

// code à exécuter

}, false );

Javascript dans le cas d’un SVG:

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;
        event.preventDefault();
        const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );
}, false );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;

event.preventDefault();

const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );

}, false );

[Javascript] Envelopper du contenu existant dans un nouvel élément du DOM

11/01/2022 / admin

Source: Pure javascript method to wrap content in a div

function wrap(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}

// example: wrapping an element $_SUMMARY_CONTAINER into a new div element with class uk-offcanvas-bar
let $_OFFCANVAS_BAR = document.createElement( 'div' );
$_OFFCANVAS_BAR.className = "uk-offcanvas-bar";

wrap( $_SUMMARY_CONTAINER, $_OFFCANVAS_BAR );

function wrap(el, wrapper) {

el.parentNode.insertBefore(wrapper, el);

wrapper.appendChild(el);

}

// example: wrapping an element $_SUMMARY_CONTAINER into a new div element with class uk-offcanvas-bar

let $_OFFCANVAS_BAR = document.createElement( 'div' );

$_OFFCANVAS_BAR.className = "uk-offcanvas-bar";

wrap( $_SUMMARY_CONTAINER, $_OFFCANVAS_BAR );

[Javascript] Annuler la sélection d’un bouton radio

11/01/2022 / admin

Décocher un bouton radio sélectionné en cliquant dessus. Source: How to make a radio button unchecked by clicking it?

function deselectableRadios(rootElement) {
    if(!rootElement) rootElement = document;
    if(!window.radioChecked) window.radioChecked = {};
    window.radioClick = function(e) {
        const obj = e.target, name = obj.name || "unnamed";
        if(e.keyCode) return obj.checked = e.keyCode!=32;
        obj.checked = window.radioChecked[name] != obj;
        window.radioChecked[name] = obj.checked ? obj : null;
    }
    rootElement.querySelectorAll("input[type='radio']").forEach( radio => {
        radio.setAttribute("onclick", "radioClick(event)");
        radio.setAttribute("onkeyup", "radioClick(event)");
    });
}
deselectableRadios( $_IMPRINT_LIST );

function deselectableRadios(rootElement) {

if(!rootElement) rootElement = document;

if(!window.radioChecked) window.radioChecked = {};

window.radioClick = function(e) {

const obj = e.target, name = obj.name || "unnamed";

if(e.keyCode) return obj.checked = e.keyCode!=32;

obj.checked = window.radioChecked[name] != obj;

window.radioChecked[name] = obj.checked ? obj : null;

}

rootElement.querySelectorAll("input[type='radio']").forEach( radio => {

radio.setAttribute("onclick", "radioClick(event)");

radio.setAttribute("onkeyup", "radioClick(event)");

});

}

deselectableRadios( $_IMPRINT_LIST );

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

11/01/2022 / admin

Source: DYNAMICALLY Accessing nested JavaScript objects and arrays by string path et un petit jsFiddle pour la route.

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;

}

const priceTable = {
    "<=4": {
        "size": [
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" }, // <=4.size[4]['2000'] = 3.60
            { "100": "5.88", "250": "4.88",  "500": "4.88", "1000": "3.88", "2000": "3.88" }
        ]
    }
}

const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold; // PAS interprété comme une chaîne de caractères
const targetValue = Object.byString( priceTable, combinedPath );  // interprété comme une chaîne de caractères (<=4.size[4]['2000'])

const priceTable = {

"<=4": {

"size": [

{ "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" },

{ "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" }, // <=4.size[4]['2000'] = 3.60

{ "100": "5.88", "250": "4.88", "500": "4.88", "1000": "3.88", "2000": "3.88" }

]

}

const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold; // PAS interprété comme une chaîne de caractères

const targetValue = Object.byString( priceTable, combinedPath ); // interprété comme une chaîne de caractères (<=4.size[4]['2000'])

[UIKit v3] Mettre à jour les options d’un composant

11/01/2022 / admin

Source: Is it possible to update the options of a component?. ATTENTION: le code d’illustration donnée dans l’issue Git est FAUX! Mais il m’a mis sur la bonne piste. Reportez-vous au code ci-dessous:

//init accordion component with options
var accordion = UIkit.accordion(element, {collapse:true});

//change options on the fly
accordion.collapse = false;

//init accordion component with options

var accordion = UIkit.accordion(element, {collapse:true});

//change options on the fly

accordion.collapse = false;

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

21/12/2021 / admin

Source: Accessing nested JavaScript objects and arrays by string path et demo.

Mon chemin dynamique était, par exemple, de ce type: const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold;. Le problème venait du fait qu’il n’était pas interprété par javascript comme un chemin mais comme une chaîne de caractères (un console.log m’affichait quelque chose d’aplati du style: priceTable.<=2.size[0].100 au lieu de m’afficher la valeur stockée dans l’objet priceTable qui correspondait au chemin <=2.size[0].100).

Afin que le chemin construit dynamiquement via javascript ne soit pas interprété comme une chaîne de caractères, nous pouvons utiliser la fonction suivante:

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

1	Object.byString(someObj, 'part3[0].name');

[Twig] Utiliser le tag Set et la fonction Include pour récupérer les informations d’un fichier JSON dans un template Twig

27/05/2021 / admin

Source: Set twig variable to json file as an include.

Fichier _data/test.json:

{ "name":"John", "age":30, "car":null }

1	{ "name":"John", "age":30, "car":null }

Fichier template.twig:

{% set json %}
    {% include "_data/test.json" %}
{% endset %}

[...]

<h1>{{ json }}</h1>

{% set json %}

{% include "_data/test.json" %}

{% endset %}

[...]

[Webpack Encore] Générer des fichiers HTML à partir de templates Twig

18/05/2021 / admin

Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0). Source principale: TWIG + WEBPACK sur dgrigg.com (version PDF).

Les fichiers assets source à placer à la racine de votre projet (Pimcore dans mon cas).

Exécuter les commandes de récupération et de sauvegarde des paquets twig-html-loader et html-webpack-plugin:

yarn add twig-html-loader --save
yarn add html-webpack-plugin --save
yarn add fs --save

yarn add twig-html-loader --save

yarn add html-webpack-plugin --save

yarn add fs --save

webpack.config.js:

const Encore = require('@symfony/webpack-encore');
[...]
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');

const Encore = require('@symfony/webpack-encore');

[...]

const HtmlWebpackPlugin = require('html-webpack-plugin');

const fs = require('fs');

// create a list of twig files to generate
// filter out anything that starts with an underscore or is not a twig file
function walk(dir) {
    let results = [];
    const list = fs.readdirSync(dir);
    list.forEach(file => {
        file = `${dir}/${file}`;
        const stat = fs.statSync(file);
        if (stat && stat.isDirectory() && path.basename(file).indexOf('_') !== 0) {
            /* Recurse into a subdirectory */
            results = results.concat(walk(file));
        } else if (
            stat &&
            !stat.isDirectory() &&
            path.extname(file) === '.twig' &&
            path.basename(file).indexOf('_') !== 0
        ) {
            /* Is a file */
            results.push(file);
        }
    });
    return results;
}

//start looking in the main twig folder
const files = walk('./assets/twig');

// generate html plugins to export
const htmlPlugins = files.map(
    file =>
        // Create new HTMLWebpackPlugin with options
        Encore.addPlugin(new HtmlWebpackPlugin({
            filename: '../html/' + file.replace('./assets/twig/', '').replace('.twig', '.html'),
            template: path.resolve(__dirname, file),
            publicPath: '../build/',
            hash: true,
        }))
);

// create a list of twig files to generate

// filter out anything that starts with an underscore or is not a twig file

function walk(dir) {

let results = [];

const list = fs.readdirSync(dir);

list.forEach(file => {

file = `${dir}/${file}`;

const stat = fs.statSync(file);

if (stat && stat.isDirectory() && path.basename(file).indexOf('_') !== 0) {

/* Recurse into a subdirectory */

results = results.concat(walk(file));

} else if (

stat &&

!stat.isDirectory() &&

path.extname(file) === '.twig' &&

path.basename(file).indexOf('_') !== 0

) {

/* Is a file */

results.push(file);

}

});

return results;

}

//start looking in the main twig folder

const files = walk('./assets/twig');

// generate html plugins to export

const htmlPlugins = files.map(

file =>

// Create new HTMLWebpackPlugin with options

Encore.addPlugin(new HtmlWebpackPlugin({

filename: '../html/' + file.replace('./assets/twig/', '').replace('.twig', '.html'),

template: path.resolve(__dirname, file),

publicPath: '../build/',

hash: true,

}))

);

Encore
[...]
    .addLoader({
        test: /\.twig$/,
        type: 'asset/source',
        loader: 'twig-html-loader'
    })
;

Encore

[...]

.addLoader({

test: /\.twig$/,

type: 'asset/source',

loader: 'twig-html-loader'

})

;

Résultat:

Fichiers source:

Fichiers destination:

[JavaScript] Exécuter une fonction seulement une fois

11/05/2021 / admin

Mise à jour: 09/12/2021

Un autre moyen suggéré dans le chapitre 15 Handling Events du livre Eloquent Javascript.

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>

let button = document.querySelector("button");

function once() {

console.log("Done.");

button.removeEventListener("click", once);

}

button.addEventListener("click", once);

</script>

js/utils.js:

const executeOnlyOnce = ( function( callbackFunction ) {
    let alreadyExecuted = false;
    return function( callbackFunction ) {
        if ( !alreadyExecuted ) {
            alreadyExecuted = true;

            // Execute only once!
            callbackFunction();
        }
    };
})();

export { executeOnlyOnce }

const executeOnlyOnce = ( function( callbackFunction ) {

let alreadyExecuted = false;

return function( callbackFunction ) {

if ( !alreadyExecuted ) {

alreadyExecuted = true;

// Execute only once!

callbackFunction();

}

};

})();

export { executeOnlyOnce }

import { executeOnlyOnce } from './js/utils';

let hadPreviousBreakpointChanges = false;
console.log( hadPreviousBreakpointChanges ); // "false"

const onBreakpointChange = function(){
    hadPreviousBreakpointChanges = true;
};

import { executeOnlyOnce } from './js/utils';

let hadPreviousBreakpointChanges = false;

console.log( hadPreviousBreakpointChanges ); // "false"

const onBreakpointChange = function(){

hadPreviousBreakpointChanges = true;

};

executeOnlyOnce(onBreakpointChange);
console.log(hadPreviousBreakpointChanges); // "true"

1 2	executeOnlyOnce(onBreakpointChange); console.log(hadPreviousBreakpointChanges); // "true"

Articles récents

Catégories

Archives

Méta

[Javascript] Rendre les variables et des fonctions déclarées dans des closures (publiques/privées) accessibles en-dehors de ces dernières

Avec le module pattern:

Avec le Revealing module pattern

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

Javascript dans le cas d’un SVG:

[Javascript] Envelopper du contenu existant dans un nouvel élément du DOM

[Javascript] Annuler la sélection d’un bouton radio

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

[UIKit v3] Mettre à jour les options d’un composant

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

[Twig] Utiliser le tag Set et la fonction Include pour récupérer les informations d’un fichier JSON dans un template Twig

[Webpack Encore] Générer des fichiers HTML à partir de templates Twig

[JavaScript] Exécuter une fonction seulement une fois