Comme promis voici quelques exemple concret de JavaScript non intrusif, outil polyvalent et puissant s'il est utilisé correctement. Le site / blog Ryan Johnson vous pouvez télécharger deux très bon exemple de JavaScript non intrusif:
- Control.Tabs: discrètes Tabs CSS pour Prototype
- Control.Modal: discrètes CSS fenêtres modales et Lightboxes pour Prototype
Ryan Johnson, dans son scénario, la bibliothèque utilise Prototype , comme beaucoup de repos. Il a aussi écrit quelques extensions à la relativement Prototype , a ensuite présenté - sous une forme différente - dans la dernière version de la bibliothèque.
Utilisez Prototype pour illustrer le fonctionnement du code JavaScript discrète est généralement plus à l'aise - comme nous le verrons plus tard, cependant voici un premier exemple brut qui ne nécessite pas de bibliothèques externes. Nous commençons par rappeler que le concept derrière le JavaScript discrète est de commencer à partir de n'importe quelle page HTML (standard et pas nécessairement écrit par nous - plus important point fort) et utiliser le langage Javascript pour apporter quelques modifications.
Schematimamente le concept est de réaliser une fonction qui analyse les fichiers HTML, puis traverse le DOM et en particulier les points d'ajouter ou de modifier les fonctionnalités. Normalement utiliser deux méthodes pour exécuter du code JavaScript pour charger une page: le premier est ce que vous ne placez pas le code dans n'importe quelle fonction, puis laisser le navigateur d'exécuter du code immédiatement transféré au point où l'appel apparaît:
Le même résultat est obtenu en incluant le code:
1 |
Cependant, quand il doit fonctionner sur le DOM d'une page qu'elle suppose une charge complète, que tout le TAG de la page est présent et disponible pour être suivis. Donc, la meilleure solution devient l'un pour être sûr que la page est terminée. Ceci est possible en engageant l'événement onload de la balise body, par exemple, qui est libérée lorsque le chargement de la page est terminée.
1 2 3 | miafunzione ; fenêtre onload = mafonction.; / / Ou, qui est le même function ( ) { alert ( "Hello" ) ; } . fenêtre onload = function () {alert ("Bonjour");} |
Être évité, bien sûr, la solution canonique qui serait un euphémisme de l'appeler intrusive:
1 | "miafunzione()" > < corps onload = "mafonction ()"> |
Une autre technique, plus grossièrement et aussi intrusive (comme il serait forcer l'utilisateur final de placer le code dans un endroit particulier), est d'insérer notre script à la fin du document avant la balise body de clôture, désormais obsolète et technique utilisée dans de rares cas (voir Google Analytics!).
Encore mieux est d'utiliser la méthode ci-dessous:
1 2 3 4 5 6 7 | window. addEventListener ) { si (méthode addEventListener window.) { "load" , miafunzione , false ) ; fenêtre. addEventListener ("load", mafonction, false) ¾ Í ( window. attachEvent ) { } Else if (window. attachEvent) { "onload" , miafunzione ) ; fenêtre. attachEvent ("onload", mafonction) ¾ Í { Else {} createSubMenus; fenêtre. onload = ¾ createSubMenusÍ } |
Même ce morceau de code est enfermé dans une fonction. Il va ajouter un écouteur d'événements pour l'événement de chargement de la fenêtre, appelant notre fonction miafunzione() . . Les navigateurs modernes comme Firefox par exemple, utiliser la fonction addEventListener() définie dans DOM niveau 2, tandis qu'Internet Explorer utilisera sa fonction exclusive attachEvent() . Cependant nous ne sommes pas à la perfection de cette manière, en fait, il remplacera tout - le cas échéant - des événements onload créés par d'autres scripts, ce qui n'est pas vraiment "non-intrusive."
Pour résoudre ce problème rapidement, qu'en raison de la différence de comportement du navigateur serait moins compliqué à expliquer ici, vous devez utiliser comme libreirie Prototype procédé de fourniture de un'elengantissimo pour surmonter le problème:
1 | window , 'load' , function ( ) { alert ( "Hello" ) ; } ) ; . Événement Observer (fenêtre, «charge», function () {alert ("Bonjour");}); |
La syntaxe est très évidente et spectaculaire! L'avantage pour ceux qui n'avaient pas compris, c'est que vous pouvez écrire:
1 2 | window , 'load' , function ( ) { alert ( "Hello 1" ) ; } ) ; . Événement Observer (fenêtre, «charge», function () {alert ("Bonjour 1");}); window , 'load' , function ( ) { alert ( "Hello 2" ) ; } ) ; . Événement Observer (fenêtre, «charge», function () {alert ("Bonjour 2");}); |
Le chargement de la page seront indiqués avant l'alerte "Bonjour 2", puis l'alerte "Bonjour 1". Fondamentalement, vous chargez dans un FILO (premier Input Output dernier) d'une pile, tout en veillant à l'exécution de tous les événements branchés pour charger le document exactement ce qui était souhaité. De cette manière, une page peut charger - presque - sans fin JavaScript discrète que le crochet pour charger le document.
Mais qu'est-ce que vous pouvez faire grâce à cette technique? Beaucoup de choses intéressantes. Un exemple que nous pouvons commenter (voir aussi Prototype: l'utilisation du signe double dollar ($) ) vient de Tobie Langel . Avec quelques lignes de code et le téléchargement des bibliothèques Prototype et Scriptaculous , vous pouvez donner un bel effet à l'ancre classique de nos pages. D'abord, créez une page HTML avec le code suivant:
1 2 3 4 5 6 7 8 | = "#capitolo1" > Vai al capitolo 1 < / a >< / p > < p > < une href = "# chapitre 1"> Vai dans le chapitre 1 </ une > </ p > < / p > < p > </ p > < / p > < p > </ p > .... < / p > .... beaucoup »de < p > </ p > .... tout comme un exemple "capitolo1" > Capitolo 1 < / h1 > < h1 id = "chapitre 1"> Chapitre 1 </ h1 > |
Inclure la page:
1 2 3 4 5 6 7 8 9 10 11 12 | "prototype.js" type = "text/javascript" charset = "utf-8" >< / script > < script de src = "prototype.js" type = "text / javascript" charset = "utf-8"> </ script de > "scriptaculous-js-1.7.0/src/effects.js" type = "text/javascript" charset = "utf-8" >< / script > < script de src = "scriptaculous-js-1.7.0/src/effects.js" type = "text / javascript" charset = "utf-8"> </ script de > "text/javascript" language = "javascript1.2" > < script de type = "text / javascript" language = "JavaScript1.2"> Event.observe (fenêtre, «charge», function () { $ $ ('A [href ^ = #]: pas ([href = #])') Chaque (function (element) {. element.observe («clic», function (event) {new Effect.ScrollTo (this.hash.substr (1)); Event.stop (event); bindAsEventListener (élément)) }) }) </ script de > |
Merci à "utiliser Event.observe() fonction et de deux dollars ($ $), vous pouvez facilement modifier le comportement de l'ancre classique. Dans ce cas, une nouvelle fonction est accroché à des chargements de page HTML. Lorsque vous prenez l'événement de chargement est tracée tous les liens dans les DOM (Tag <A>) avec href qui commence par un dièse (#, à l'exclusion l'un avec seulement de hachage!). Pour ces éléments est une fonction attachée à l'événement click, semblable à ce qui a été fait avec la charge du document. À ce stade qu'entre en jeu Scriptaculous qui produit un effet de défilement vers le punatato élément de notre lien - modifié!
undolog  »Blog Archive » Exemples de Javascript discret ...
Comme promis voici quelques exemple concret de JavaScript non intrusif, outil polyvalent et puissant s'il est utilisé correctement. Le site / blog Ryan Johnson vous pouvez télécharger deux très bon exemple de JavaScript non intrusif:
* Control.Ta ...