web-dev-qa-db-fra.com

JavaScript "conditionnel"

Je travaille sur un morceau de code JavaScript qui cherche dans sa page Hôte des références provenant d'une certaine source et qui, lorsqu'il est survolé, affiche la définition/le texte référencé dans une info-bulle (quelque chose comme Google Dicitionary ou RefTagger )

Mon problème ne réside pas dans la fonctionnalité elle-même, mais dans la gestion des nuances spécifiques au navigateur dans la mise en œuvre. Je veux créer au moins trois "éditions", avec des différences petites mais importantes:

  • une version "autonome" à intégrer aux sites Web sous la forme d'une balise <script src="..."/>
  • un plugin Chrome
  • un plugin Firefox.

Comment puis-je gérer cette situation? Existe-t-il une sorte de préprocesseur JS qui comprend les sections conditionnelles? Quelque chose comme C-like #ifdef serait utile pour éliminer les parties non pertinentes.

(Un problème spécifique, à titre d'exemple:

Le code principal est presque identique pour tous, les plugins ont besoin de fonctions supplémentaires pour gérer leurs paramètres, mais ceux-ci se trouvent dans des fichiers séparés. Mais l'injection du contenu doit se faire d'au moins deux manières différentes:

  • innerHTML fonctionnerait dans n'importe quel navigateur moderne, mais les instructions supplémentaires pour Firefox interdisent son utilisation (je comprends les raisons et accepte cette politique)
  • Des méthodes de manipulation DOM pourraient être utilisées à la place, mais comme le contenu à injecter peut contenir des éléments HTML, je dois l’analyser puis le recréer (avec un filtrage basé sur une liste blanche). Cela peut être fait par DOMParser , mais si je veux utiliser text/html comme type de contenu, il faut ajouter beaucoup de code de compatibilité pour prendre en charge IE <10.

Donc, fondamentalement, je pourrais utiliser innerHTML n'importe où sauf le plugin Firefox ou la méthode DOM avec beaucoup de choses supplémentaires que je ne veux pas ajouter à la version autonome (pour minimiser le délai de chargement de la page). Ce serait bien d’implémenter toutes ces éditions dans un seul fichier avec quelque chose comme des sections conditionnelles pour différentes versions.)

javascripttoolscross-browserautomation
2
molnarm

Ok, je l'ai compris en utilisant PowerShell (n'hésitez pas à ajouter des informations sur bash):

Le script permettant de supprimer les régions de code inutiles (et tous les balises conditionnelles):

[Regex]::Replace(
    [Regex]::Replace(
        (Get-Content $source -Raw),
        '(?sm)// #if ((!' + $condition + ')|(?!' + $condition + ')[A-Z]+).*?// #endif \1',
        ''
    ),
    '// #(end)?if !?[A-Z]+',
'') |
Set-Content $output

Le fichier d'entrée (défini dans $source) peut contenir des sections similaires à celles-ci:

if(cache[reference]){
// #if FIREFOX
    addContent(cache[reference]);
// #endif FIREFOX
// #if !FIREFOX
    tooltip.innerHTML = cache[reference];
// #endif !FIREFOX
    return;
}

Pour obtenir la version spécifique à Firefox, utilisez le script comme ceci (après avoir ajouté la déclaration params et l'avoir enregistré dans script.ps1):

powershell -File script.ps1 input.js output.js FIREFOX
0
molnarm