• Accueil / Salesforce / Partage de code…
, Partage de code JavaScript dans les composants Lightning Aura et gel des prototypes JavaScript &#8211; Douglas C. Ayers<span class="wtr-time-wrap after-title"><span class="wtr-time-number">9</span> minutes de lecture</span>

Partage de code JavaScript dans les composants Lightning Aura et gel des prototypes JavaScript – Douglas C. Ayers9 minutes de lecture


Mise à jour du 20 janvier 2019:

Lecteurs, veuillez accepter mes excuses. Au moment où j’ai publié cet article pour la première fois le 30 décembre 2018, je croyais comprendre que l’activation de Freeze JavaScript Prototypes empêcherait les développeurs de définir des propriétés et des fonctions personnalisées sur le window objet. Ce n’est pas correct.

Le paramètre Freeze JavaScript Prototypes empêche les développeurs de redéfinir existant propriétés et fonctions sur un objet prototype. Par exemple, il empêche le code malveillant de redéfinir le comportement de window.open() ou console.log(), mais cela n’empêche pas les développeurs de définir leurs propres propriétés et fonctions personnalisées sur les objets, telles que window.sum = function( a, b ) { return a + b; }.

J’ai corrigé mes déclarations dans cet article sur l’impact du paramètre Figer les prototypes JavaScript, en précisant que le paramètre a un impact beaucoup moins négatif que je ne le pensais initialement lorsque les clients et les éditeurs de logiciels indépendants partagent du code JavaScript entre des composants à l’aide d’objets partagés.

Dans cet article de blog, vous allez:

  • Découvrez les fonctionnalités de sécurité Lightning pour atténuer les risques de code JavaScript malveillant.
  • Découvrez comment partager du code JavaScript entre les composants Aura à l’aide d’objets partagés et de composants de service.
  • Découvrez comment la fonctionnalité Winter ’19 «Freeze JavaScript Prototypes» influence la manière dont vous choisissez de partager le code JavaScript entre les composants

Nouveau sur les composants Lightning? Vérifiez Principes de base des composants Lightning module sur Trailhead.

Service Lightning Locker

, Partage de code JavaScript dans les composants Lightning Aura et gel des prototypes JavaScript – Douglas C. Ayers<span class="wtr-time-wrap after-title"><span class="wtr-time-number">9</span> minutes de lecture</span>

Étant donné que les composants Lightning s’affichent tous ensemble sur la page, le code JavaScript d’un composant peut techniquement affecter – pour le meilleur ou pour le pire –autres composants«Code ou objets JavaScript partagés, comme le window objet, sur la page.

Aussitôt que Printemps ’16, Salesforce Security introduit Service Lightning Locker pour remédier à cet environnement non sécurisé et atténuer les risques de code JavaScript malveillant. Le service de casier se concentre particulièrement sur la prévention des effets directs des composants restreindre certaines API DOM. Par exemple, Locker Service limite l’utilisation de document.append () fonction.

, Partage de code JavaScript dans les composants Lightning Aura et gel des prototypes JavaScript – Douglas C. Ayers<span class="wtr-time-wrap after-title"><span class="wtr-time-number">9</span> minutes de lecture</span>
Tableau de compatibilité de l’API Locker

Composants enregistrés avec la version API de 40.0 ou version ultérieure activer et appliquer automatiquement le service Lightning Locker.

Partager le code en toute sécurité

, Partage de code JavaScript dans les composants Lightning Aura et gel des prototypes JavaScript – Douglas C. Ayers<span class="wtr-time-wrap after-title"><span class="wtr-time-number">9</span> minutes de lecture</span>

Il existe trois façons principales de partager du code JavaScript entre vos composants Lightning développés avec le modèle de programmation Aura que je souhaite aborder dans cet article de blog et comment Service Lightning Locker et le Figer les prototypes JavaScript (nouvelle dans Hiver ’19) peut affecter l’option que vous choisissez.

  1. Partage de code JavaScript dans un ensemble de composants
  2. Partage de code JavaScript à l’aide d’objets partagés
  3. Partage de code JavaScript à l’aide de composants de service

Partage de code JavaScript dans un ensemble de composants

, Partage de code JavaScript dans les composants Lightning Aura et gel des prototypes JavaScript – Douglas C. Ayers<span class="wtr-time-wrap after-title"><span class="wtr-time-number">9</span> minutes de lecture</span>
Ensemble de composants pour un composant «Carte»

Un composant Lightning paquet développé avec le modèle de programmation Aura peut avoir trois fichiers JavaScript: controller.js, helper.js, et renderer.js.

le assistant Le fichier est spécialement conçu pour partager du code dans un seul ensemble de composants à utiliser par le contrôleur et les fichiers de rendu. Pour accéder au code partagé du helper.js fichier, référencez le assistant argument passé aux fonctions de votre controller.js et renderer.js fichiers comme indiqué dans ce essentiel.

/ * controller.js * /
({
onActionConfirmed: fonction(composant, un événement, assistant) {
assistant.callServer();
})
/ * helper.js * /
({
callServer: fonction(composant) {
var action = composant.avoir(« c.someApexMethod »);
$ A.enqueueAction(action);
}
})
/ * renderer.js * /
({
afterRender: fonction(composant, assistant) {
ce.superAfterRender();
assistant.callServer();
}
})

Sommaire

Si vous avez besoin de partager du code uniquement dans le bundle de composants lui-même, utilisez le helper.js file est l’approche recommandée.

Si votre cas d’utilisation consiste à partager du code entre un plus grand nombre de composants, vous avez besoin d’une solution différente de celle helper.js ressource, comme indiqué dans la prochaine approche.

Partage de code JavaScript à l’aide d’objets partagés

, Partage de code JavaScript dans les composants Lightning Aura et gel des prototypes JavaScript – Douglas C. Ayers<span class="wtr-time-wrap after-title"><span class="wtr-time-number">9</span> minutes de lecture</span>

Compte tenu des restrictions que Locker Service applique aux API DOM, il permet toujours aux développeurs d’ajouter des fonctions et des propriétés personnalisées aux objets JavaScript partagés, comme le window objet.

Par conséquent, une autre approche du partage de code consiste à télécharger un fichier JavaScript en tant que ressource statique, telle qu’une bibliothèque tierce ou votre propre fichier personnalisé, qui ajoute des fonctions personnalisées à objets JavaScript partagés. Ensuite, chargez votre ressource statique dans chacun de vos composants à l’aide du pour rendre les fonctions personnalisées disponibles pour tous vos composants sur la page, comme indiqué dans ce essentiel.

/ * SharedLibrary.js, télécharger en tant que ressource statique * /
la fenêtre.somme = fonction(une, b) {
revenir ( une + b );
}
aura: composant>
ltng: exiger scripts= « {! $ Resource.SharedLibrary}« 
afterScriptsLoaded= « {! c.getSum}« />
aura: composant>
/ * YourComponentController.js * /
({
obtenir la somme: fonction(composant, un événement, assistant) {
laisser somme = la fenêtre.somme(2, 3); // utilise la fonction partagée sur l’objet `window`
console.Journal(somme); // 5
}
})

Sommaire

Si vous avez besoin d’utiliser du code d’une bibliothèque tierce par un ou plusieurs composants, le chargement d’une ressource statique est l’approche recommandée.

Si votre besoin est d’utiliser vos propres fonctions partagées ou simplement de modulariser votre base de code de composant, bien que l’approche des ressources statiques fonctionne, je vous recommande la prochaine approche utilisant la composition de composants.

Partage de code JavaScript à l’aide de composants de service

, Partage de code JavaScript dans les composants Lightning Aura et gel des prototypes JavaScript – Douglas C. Ayers<span class="wtr-time-wrap after-title"><span class="wtr-time-number">9</span> minutes de lecture</span>

Une autre approche pour partager du code entre plusieurs composants est les «composants de service». Non, nous ne parlons pas de la console de service, mais plutôt de composants développé à dessein sans balisage visuel et définissez à la place balises pour exposer les fonctions JavaScript qu’un composant conteneur peut appeler.

Plutôt que de modifier les objets JavaScript partagés, cette approche utilise la composition des composants. Ce essentiel montre un exemple de composant de service qui ajoute deux nombres ensemble et renvoie la somme.

aura: composant>
aura: méthode Nom= « somme » action= « {! c.handleSum}« >
aura: attribut Nom= « une » type= « Entier » obligatoire= « vrai« />
aura: attribut Nom= « b » type= « Entier » obligatoire= « vrai« />
aura: méthode>
aura: composant>
/ * ServiceComponentController.js * /
({
handleSum: fonction(composant, un événement, assistant) {
const paramètres = un événement.getParam( ‘arguments’ );
revenir ( paramètres.une + paramètres.b );
}
})
aura: composant>
c: Composant de service aura: id= « serviceComponent« />
éclair: bouton étiquette= « Ajouter des numéros » sur clic= « {! c.handleClick}« />
aura: composant>
/ * TryServiceComponentController.js * /
({
poignéeCliquez: fonction(composant, un événement, assistant) {
const un service = composant.trouver(« serviceComponent »);
laisser somme = un service.somme(2, 3);
console.Journal(somme); // 5
}
})

L’ajout de deux nombres est un exemple trivial. Voici quelques exemples de composants de service plus pratiques que j’aime beaucoup:

Sommaire

Si vous copiez et collez du code dans plusieurs composants, cela peut être un bon indicateur pour déplacer le code commun vers un ou plusieurs composants de service afin de réduire la duplication et d’améliorer la maintenabilité en suivant Principes DRY.

Figer les prototypes JavaScript

, Partage de code JavaScript dans les composants Lightning Aura et gel des prototypes JavaScript – Douglas C. Ayers<span class="wtr-time-wrap after-title"><span class="wtr-time-number">9</span> minutes de lecture</span>

La version Winter ’19 introduit un nouveau paramètre de session Figer les prototypes JavaScript pour une sécurité et une stabilité améliorées. Dans cette section, je tiens à souligner comment cela peut affecter la façon dont vous choisissez de partager le code entre les composants.

Par le Documentation,

En JavaScript, chaque objet a un objet prototype. Un objet hérite des méthodes et des propriétés de son objet prototype. Les prototypes sont partagés entre tous les objets du même type. Si un auteur de composant modifie un prototype JavaScript d’un objet partagé, il peut introduire un comportement inattendu et des problèmes de sécurité potentiels. Le gel des prototypes JavaScript empêche les auteurs de composants Lightning de modifier les prototypes JavaScript d’objets globaux partagés entre les espaces de noms. Cette restriction permet une meilleure séparation du code entre les composants et empêche la falsification malveillante ou accidentelle d’objets partagés, tels que les API JavaScript ou les API DOM.

Notes de version de l’hiver 2019 sur le nouveau paramètre de session «Freeze JavaScript Prototypes»

Cela signifie que si vos bibliothèques personnalisées ou tierces reposent sur la modification, par exemple, window.prototype ou Array.prototype et ainsi de suite, pour définir des fonctions spéciales ou polyfills ou cales, alors ce code ne fonctionnera probablement pas lorsque ce paramètre est activé.

Prenons un exemple.

Avec Freeze JavaScript Prototypes désactivée alors l’extrait de code ci-dessous est autorisé – non recommandé – mais est autorisé:

console.log = function( message ) {
  alert( 'I've taken over console.log, muwahaha!' );
}

Avec Freeze JavaScript Prototypes activée alors cet extrait de code serait bloqué et le comportement d’origine de console.log serait préservé.

Dans cet exemple, j’affiche simplement une alerte, mais des développeurs plus malveillants peuvent envoyer vos données à un autre serveur ou détourner votre session. Et comme tout composant Lightning ou ressource statique JavaScript chargée sur la page peut remplacer les comportements des objets standard, c’est pourquoi ce paramètre de sécurité est important et vous devez envisager de l’activer. Sachez simplement qu’une partie de votre code * peut * cesser de fonctionner, et si tel est le cas, vous devrez peut-être rechercher où le code modifie les prototypes et rechercher des solutions alternatives.

Ressources



Source de l’article traduit automatiquement en Français

Besoin d'aide ?
Voulez-vous utiliser Pardot à sa capacité maximale et avoir
+ DE LEADS QUALIFIÉS

Notre analyse de votre Pardot offerte dès aujourd'hui
Merci, vous pouvez compléter notre questionnaire
Nous allons revenir vers vous rapidement !

Fermer