Comment puis-je utiliser Google Closure Stylesheet renommage avec une bibliothèque de Javascript externe comme jQuery?

Je regarde la fonctionnalité de renommage de la feuille de style de Google et je ne sais pas comment réécrire mes sélecteurs jquery. Je n'ai pas trouvé le document très clair à ce sujet.

Si j'ai un code qui ressemble à ceci:

<div class="MyClass"></div> <div id="MyID"></div> $('.MyClass').someFunc(); $('#MyID').someFunc(); 

Comment le HTML et le javascript doivent-ils être écrits afin que le renommage CSS fonctionne?

Merci pour vos suggestions.

Pour que les feuilles de style de fermeture fonctionnent en combinaison avec une bibliothèque externe comme jQuery, vous devrez également utiliser la bibliothèque de fermeture pour ajouter de la prise en charge de goog.getCssName . Cependant, car la bibliothèque de fermeture est écrite pour utiliser au maximum l'élimination du code mort du compilateur de fermeture, seule une très petite quantité du code de la bibliothèque sera incluse dans la sortie finale (environ 1 Ko dans cet exemple).

Étape 1 – Configurer votre projet

Vous aurez besoin des outils suivants:

  • Bibliothèque de fermeture
  • Compilateur de fermeture
  • Modèles de fermeture
  • Feuilles de style

Étape 2 – Configurer vos fichiers source

Stylesheet Source (sample.gss)

 @def BG_COLOR rgb(235, 239, 249); @def DIALOG_BORDER_COLOR rgb(107, 144, 218); @def DIALOG_BG_COLOR BG_COLOR; .MyClass { background-color: BG_COLOR; height:100px; } #MyId { background-color: DIALOG_BG_COLOR; border: 1px solid DIALOG_BORDER_COLOR; height:100px; } 

Source du modèle de clôture (sample.soy)

 {namespace ClosureSample} /** * SampleHtml */ {template .SampleHtml autoescape="false"} <div class="{css MyClass}"></div> {/template} 

Source Javascript ( sample.js )

 goog.require('ClosureSample'); document.write(ClosureSample.SampleHtml()); $(function() { $('.' + goog.getCssName('MyClass')).css('background-color', 'pink'); }); 

Source HTML ( development.htm )

 <!DOCTYPE html> <html> <head> <title>Closure stylesheets with External Library</title> <link rel="Stylesheet" media="all" href="sample.css" /> <script type="text/javascript" src="sample_renaming_map.js"></script> <script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script> <script type="text/javascript"> goog.require('goog.soy'); goog.require('goog.string.StringBuffer'); </script> <script type="text/javascript" src="soyutils_usegoog.js"></script> <script type="text/javascript" src="sample-templates.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <script type="text/javascript" src="sample.js"></script> <div id="MyId"></div> </body> </html> 

Étape 3 – Compilez votre feuille de style et vos modèles

En utilisant les outils téléchargés à partir des projets de modèles et de feuilles de style, vous devez compiler les fichiers sample.gss et sample.soy . Voici les commandes utilisées pour cet exemple:

 java -jar closure-stylesheets.jar \ --pretty-print \ --output-file sample.css \ --output-renaming-map-format CLOSURE_UNCOMPILED \ --rename CLOSURE \ --output-renaming-map sample_renaming_map.js \ sample.gss java -jar SoyToJsSrcCompiler.jar \ --shouldProvideRequireSoyNamespaces \ --shouldGenerateJsdoc \ --outputPathFormat {INPUT_FILE_NAME_NO_EXT}.js \ --cssHandlingScheme goog \ sample.soy 

Avec ces fichiers, vous pouvez tester le renommage lors du développement. Voir l'exemple .

Étape 4 – Compiler le projet de production

Prière de recompiler vos feuilles de style pour produire une carte de renommage en utilisant l'option "CLOSURE_COMPILED":

 java -jar closure-stylesheets.jar \ --output-file sample.css \ --output-renaming-map-format CLOSURE_COMPILED \ --rename CLOSURE \ --output-renaming-map sample_renaming_map.js \ sample.gss 

Ensuite, vous devrez calculer les fichiers de dépendance de la Clôture-bibliothèque et compiler tous les fichiers javascript source dans une seule source.

Remarque: puisque jQuery n'est pas compatible avec ADVANCED_OPTIMISATIONS de Closure-compilator, il ne sera pas inclus comme entrée. Au lieu de cela, faites référence au fichier externe jQuery approprié trouvé dans le dossier contrib / externs du compilateur de fermeture .

Le script calcdeps.py dans le projet Closure-library peut être utilisé pour appeler également le compilateur de fermeture sur les fichiers d'entrée qu'il détermine.

 python calcdeps.py \ -i sample.js \ -p PATH_TO_CLOSURE_LIBRARY_FOLDER \ -p sample-templates.js \ -o compiled \ -c compiler.jar \ -f --js=sample_renaming_map.js -f --compilation_level=ADVANCED_OPTIMIZATIONS \ -f --warning_level=VERBOSE \ -f --externs=jquery-1.7-externs.js \ -f --js_output_file=sample_compiled.js 

Voir le résultat final: version compilée .

Notes finales

Comme vous pouvez le voir, l'utilisation de Google Closure Stylesheets nécessite non seulement des pièces de la gamme complète d'outils de fermeture, mais elle est tout à fait impliquée.

  • La publication de l'utilisation requise HTML des modèles Google Closure. Dans cet exemple, j'ai utilisé un appel document.write pour produire le HTML avec la classe renommée, mais il existe des techniques plus élégantes et plus durables pour le code de production.
  • Les fenêtres de fermeture ne changent pas les sélecteurs d'ID, donc le code pour une ID n'est pas affecté.
  • Pour faciliter l'affichage, l'exemple compilé fait référence à la bibliothèque jQuery hors Google CDN. Cependant, il serait également possible de concaténer la bibliothèque jQuery et la source compilée dans un fichier source JS unique.