blog.roxing.net

jQuery WebGL Ripples

Pierrox — 2018-09-11T20:40:22Z

[Vue.js] Collections de filtres

placido — 2017-10-16T13:06:25Z

// formater une date (necessite moment.js)
Vue.filter('formatDate', function(value,input,output) { if (value) { var input = input || 'MM-DD-YYYY'; var output = output || 'DD/MM/YYYY'; return moment(String(value),input).format(output) }
}) // formater un prix Vue.filter('formatCurrency', function(value,currency) { var value = parseFloat(value); var currency = currency || 'BRL'; if ( typeof(value) === 'number') { value = value.toLocaleString(undefined, {style: 'currency', currency: currency, minimumFractionDigits: 2, maximumFractionDigits: 2}) } return value
}) // inverser l'ordre d'un tableau
Vue.filter('reverse', function(value) { return value.slice().reverse();
})

Testeur d'expressions régulières en ligne

Pierrox — 2016-03-27T15:54:14Z

Un outil en ligne très pratique pour tester et commenter les expressions régulières.

- signets / php, javascript, regex

Bonnes pratiques JQuery

placido — 2014-09-18T14:14:52Z

Charger le contenu depuis un CDN

Plutôt que de stocker JQuery sur votre serveur, vous pouvez choisir un CDN [1] notoire. Cela devrait réduire le temps de chargement de la page.

Voici une liste de CDN fournissant un accès à la bibliothèque JQuery :

Les bonnes pratiques ne concernent pas seuelement JQuery ; les éléments d'affichage - type CSS ou autre - peuvent aussi être chargés parallèlement.

Prévoir une méthode de chargement alternative en cas de défailllance du CDN

Préférer les versions compressées

Placer l'appel au script en fin de page plutôt qu'en en-tête



...




...



...

Utiliser des URLs en chemins relatif

Pas besoin de spécifier le protocole http ou https. Le navigateur optera de lui-même pour le protocole https s'il se trouve déjà dans un environemment sécurisé.

Raccourci pour l'événement ready

// Appel classique
$(document).ready(function() {
...
});
// Version rapide
$(function() {
});

Garder le $ lors de la déclaration d'une variable de type jQuery.

Grâce à cette convention de nommage, on distingue facilement la nature de l'objet JQuery.

// :(
var form = $('#contactForm');
// :)
var $form = $('#contactForm');

Du bon usage de $this

La variable $this s'utilise avantageusement au début des fonctions non déclarées, par exemple dans une boucle de type each.

// :(
$('li').each(function() {
$(this).on('click', function() {
$(this).addClass('active');
});
});
// :)
$('li').each(function() {
var $this = $(this);
$this.on('click', function() {
$this.addClass('active');
});
});

Certains préfèrent utiliser that ou self. Attention de ne pas oublier qu'il s'agit d'un objet jQuery.

Mettre en cache les objets jQuery

Si un objet jQuery est utilisé plusieurs fois, le mettre en cache permet d'optimiser les performances.

// :(
$('.menu li').each(function() { ... });
$('.menu li').each(function() { ... });
// :)
var $items = $('.menu li');
$items.each(function() { ... });
// on recycle :)
$items.each(function() { ... });

Enchaînement des fonctions

C'est asssurément l'une des fonctionalités les plus appréciée de jQuery. On peut ainsi appeler une série de méthodes dans la même foulée.

"Write less, do more", garder en tête le slogan de jQuery

// :(
var $a = $('#about');
$a.hide();
$a.addClass();
$a.fadeIn();
$a.hide();
// :)
$('#about').hide().addClass().fadeIn().hide();
// c'est mieux
// Retour à la ligne et identation améliorent la visibilité
$('#about')
.hide()
.addClass()
.fadeIn()
.hide();

Déclarer un nouvel élément

Lors de la création d'un élément, faîtes en sorte de manipuler les éléments via les méthodes jQuery plutôt que d'insérer du code HTML brut.

// Don't
var $hidden = $('').appendTo('#form');
// :)
var $hidden = $('')
.addClass('form-control')
.attr('type', 'hidden')
.attr('name', 'foo')
.val('bar')
.appendTo('#form');
// ou bien
var $hidden = $('', {
class: 'form-control',
type: 'hidden',
name: 'foo',
value: 'bar'
}).appendTo('#form');

Garder le CSS loin des manipulations de jQuery

Pas la peine de déclarer le style CSS directement à un élément. Le recours aux classes est fait pour ça.

// :(
$('#button').css({
'background-color': '#5cb85c',
'border-color': '#4cae4c'
});
// :)
.success {
background-color: #5cb85c;
border-color: #4cae4c;
}
$('#button').addClass('success');

Choisir le bon sélecteur

Le sélecteur désignant l'id est le plus rapide

Pour retrouver un élément du DOM en fonction de son id, jQuery utilise la méthode native document.getElementById() qui s'avère bien plus efficace que Sizzle.

Sizzle is a pure-JavaScript CSS selector engine used by jQuery

// :(
$('#wrapper #inner');
$('div#inner');
$('.wrapper #inner');
// :)
$('#inner');

Du coup, mieux vaut introduire une recherche sur un id, quitte à enchaîner les recherches.

// :(
$('#container .row');
// + rapide
$('#container').find('.row');

Sélecteurs restrictifs

Il faut être spécifique sur le partie gauche de votre sélecteur, et moins en début.

// pas glup
$('div.data .gonzalez');
// glup glup
$('.data td.gonzalez');

Éviter le recours aux sélecteurs universels

// moins rapide
$('div.container > *');
// Plus rapide
$('.container').children();

Mieux vaut faire précéder les sélecteurs pseudo-class (ex :before) avec un tag ou un autre sélecteur. Car, si ce n'est pas le cas, le sélecteur universel * est implicitement employé.

// :(
$('.category :radio');
// :)
$('.category input:radio');

Privilégiez les méthodes de tri plutôt que les pseudos-sélecteurs.

Lorsque cele est possible, utiliser la méthode de tri jQuery plutôt que des pseudos-sélecteurs. La méthode querySelectorAll s'avère là encore plus rapide que la méthode Sizzle.

// :(
$('.item:first')
// :)
$('.item').eq(0)

Pas de javascript inline sur les élements HTML

Mieux vaut attacher un écouteur d'événement à l'objet.



// :)
$('#saveButton').on('click', function() {
...
});

Choisir un namespace personnalisé pour les événements

Ainsi il est plus facile de désactiver un événement sans affecter les autres écouteurs d'événements assignés à l'élément.

$('#saveButton').on('click.bv', function() { ... });
//Plus tard, on peut retirer sans crainte l'écouteur l'événement
$('#saveButton').off('click.bv');

Ne pas passer les paramètres Ajax "en dur"

Lorsque d'un requête de type xmlHttpRequest, il faut utiliser le paramètre data, et non concaténer l'information au sein de l'URL.

// :(
$.ajax({
url: '/remote/url?param1=value1&param2=value2...'
}});
// :)
$.ajax({
url: '/remote/url',
data: {
param1: 'value1',
param2: 'value2'
...
}
});

Dans le cas où les paramètres à transmettre sont très long (ex : le contenu intégral d'un article), on privilégiera la méthode POST, à la fois pour Ajax et le traitement côté serveur.

Internet Explorer 8 (and earlier) limits 2083 characters in URL

Voir en ligne : Best jQuery practices · Programmer Tips

[1] Content Delivery Network : Un content delivery network (CDN) est constitué d'ordinateurs reliés en réseau à travers Internet et qui coopèrent afin de mettre à disposition du contenu ou des données (généralement du contenu multimédia volumineux) à des utilisateurs.

[SPIP] comment organiser ses fonctions javascript

placido — 2014-07-01T13:55:29Z

var App = function () { var fn1 = function() { } var fn2 = function() { } var fn3 = function() { } //########################## // Surveiller le scroll var spyScroll = function() { var scrollticker; $(window).on('scroll',function() { //Clear Timeout if one is pending if(scrollticker) { window.clearTimeout(scrollticker); scrollticker = null; } scrollticker=window.setTimeout(function(){ App.scroll(); }, 2500); // timeout }); } // Surveiller le resize var spyResize = function() { var resizeticker; window.onresize = function() { // Clear Timeout if one is pending window.clearTimeout(resizeticker); resizeticker=window.setTimeout(function(){ App.resize(); }, 2500); // timeout }; } // suivre ajaxcallback de spip var spySpipAjax = function() { if (typeof onAjaxLoad == 'function') { onAjaxLoad(App.reboot); } } //########################## return { //Attention à l'ordre d'appel des modules init: function () { fn1(); fn2(); fn3(); // les fonctions "espions" spySpipAjax(); spyScroll(); spyResize(); }, // ici les fonctions "ajaxcallback proof" reboot: function () { fn2(); }, // ici les fonctions qui réagissent au scroll scroll: function () { fn3(); }, // ici les fonctions qui réagissent au resize screen resize: function () { fn3(); } }; }(); //go ! $(function(){App.init();});

mis à jour le 21 février 2016

Attributs data-*

placido — 2014-06-10T01:25:46Z

Utilisation avec JavaScript

Du côté de jQuery

// Lire $("#moto").data("lieu"); // Modifier la valeur associée $("#moto").data("lieu","Strasbourg"); // Modifier l'attribut $("#moto").attr("data-lieu","Strasbourg");

Voir en ligne : Attributs data-* - Alsacreations

Code Snippets | CSS-Tricks

placido — 2014-06-08T19:00:55Z

HTML
CSS
htaccess
PHP
JavaScript
jQuery
WordPress

- signets / css, javascript, JQuery, snippet, html

ScrollToTop sans jQuery - via Ecyseo

placido — 2014-06-05T21:39:40Z

/* # ------------------ BEGIN LICENSE BLOCK ------------------ # # This file is part of SIGesTH # # Copyright (c) 2009 - 2014 Cyril MAGUIRE, (!Pragmagiciels) # Licensed under the CeCILL v2.1 license. # See http://www.cecill.info/licences.fr.html # # ------------------- END LICENSE BLOCK ------------------- */ ;(function(window,undefined) { 'use_strict'; var timeOut; var isIE = isIE(); var bodyTag = document.getElementsByTagName('body'); var idOfBody = bodyTag[0].getAttribute('id'); if (idOfBody == null) { idOfBody = 'top'; bodyTag[0].setAttribute('id', 'top'); } function isIE() { var nav = navigator.userAgent.toLowerCase(); return (nav.indexOf('msie') != -1) ? parseInt(nav.split('msie')[1]) : false; } function backToTop() { if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){ window.scrollBy(0,-50); timeOut=setTimeout('backToTop()',40); } else { clearTimeout(timeOut); } } function getScrollPosition() { return Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop); } function Remove(idOfParent,idToRemove) { if (isIE) { document.getElementById(idToRemove).removeNode(true); } else { var Node1 = document.getElementById(idOfParent); var len = Node1.childNodes.length; for(var i = 0; i < len; i++){ if (Node1.childNodes[i] != undefined && Node1.childNodes[i].id != undefined && Node1.childNodes[i].id == idToRemove){ Node1.removeChild(Node1.childNodes[i]); } } } } function addElement(idOfParent,idToAdd,htmlToInsert) { var DomParent = document.getElementById(idOfParent);//id of body var newdiv = document.createElement('div'); newdiv.setAttribute('id',idToAdd); newdiv.innerHTML = htmlToInsert; DomParent.appendChild(newdiv); } function displayBackButton() { var pos = []; var fleche = '\u21E7'; if (isIE) { fleche = '\u25B2'; } pos = getScrollPosition(); var topLink = document.getElementById('toplink'); if (pos[1] > 150) { if (topLink == null) { addElement(idOfBody,'toplink','<a href="#" onclick="backToTop();return false;">'+fleche+'</a>'); } } else { if (topLink != null) { Remove(idOfBody,'toplink'); } } } //add to global namespace window.onscroll = displayBackButton; window.displayBackButton = displayBackButton; window.backToTop = backToTop; })(window);

Et la CSS associée

#toplink { position: fixed; bottom: 20px; width: 100px; text-align: center; right:10px; } #toplink a { font-size: 40px; opacity: 0.8; }

Voir en ligne : ScrollToTop sans jQuery - Ecyseo

Filtrer une liste en pur javascript et sans jQuery - via Ecyseo

placido — 2014-06-05T21:29:27Z

/* # ------------------ BEGIN LICENSE BLOCK ------------------ # # This file is part of SIGesTH # # Copyright (c) 2009 - 2014 Cyril MAGUIRE, (!Pragmagiciels) # Licensed under the CeCILL v2.1 license. # See http://www.cecill.info/licences.fr.html # # ------------------- END LICENSE BLOCK ------------------- */ /* HTML Structure <label for="">Filtrer</label> <input id="inputFilterForwhatYouWantHere" name="inputName" type="text" placeholder="Find in the list" /> <ul id="filterForWhatYouChooseForInputAbove" class="filter"> <li><a>First element</a></li> </ul> */ ;(function(window,undefined){ 'use_strict'; var keyCode = 0; var isIE = isBrowserIE(); function isBrowserIE() { var nav = navigator.userAgent.toLowerCase(); return (nav.indexOf('msie') != -1) ? parseInt(nav.split('msie')[1]) : false; } // from http://www.javascripter.net/faq/onkeydown.htm function fromKeyCode (n) { if( 47<=n && n<=90 ) return unescape('%'+(n).toString(16)) if( 96<=n && n<=105) return 'NUM '+(n-96) if(112<=n && n<=135) return 'F'+(n-111) switch (n) { case (3): return 'Cancel' //DOM_VK_CANCEL case (6): return 'Help' //DOM_VK_HELP case (8): return 'Backspace' case (9): return 'Tab' case (12): return 'NUM 5' //DOM_VK_CLEAR case (13): return 'Enter' case (16): return 'Shift' case (17): return 'Ctrl' case (18): return 'Alt' case (19): return 'Pause|Break' case (20): return 'CapsLock' case (27): return 'Esc' case (32): return 'Space' case (33): return 'PageUp' case (34): return 'PageDown' case (35): return 'End' case (36): return 'Home' case (37): return 'Left Arrow' case (38): return 'Up Arrow' case (39): return 'Right Arrow' case (40): return 'Down Arrow' case (42): return '*' //Opera case (43): return '+' //Opera case (44): return 'PrntScrn' case (45): return 'Insert' case (46): return 'Delete' case (91): return 'WIN Start' case (92): return 'WIN Start Right' case (93): return 'WIN Menu' case (106): return '*' case (107): return '+' case (108): return 'Separator' //DOM_VK_SEPARATOR case (109): return '-' case (110): return '.' case (111): return '/' case (144): return 'NumLock' case (145): return 'ScrollLock' //Media buttons (Inspiron laptops) case (173): return 'Media Mute On|Off' case (174): return 'Media Volume Down' case (175): return 'Media Volume Up' case (176): return 'Media >>' case (177): return 'Media <<' case (178): return 'Media Stop' case (179): return 'Media Pause|Resume' case (182): return 'WIN My Computer' case (183): return 'WIN Calculator' case (186): return '; :' case (187): return '= +' case (188): return ', <' case (189): return '- _' case (190): return '. >' case (191): return '/ ?' case (192): return '` ~' case (219): return '[ {' case (220): return '\ |' case (221): return '] }' case (222): return '\' "' case (224): return 'META|Command' case (229): return 'WIN IME' case (255): return 'Device-specific' //Dell Home button (Inspiron laptops) } return null } function arrayCompare(a1, a2) { if (a1.length != a2.length) return false; var length = a2.length; for (var i = 0; i < length; i++) { if (a1[i] !== a2[i]) return false; } return true; } function inArray(needle, haystack) { var length = haystack.length; for(var i = 0; i < length; i++) { if(typeof haystack[i] == 'object') { if(arrayCompare(haystack[i], needle)) return true; } else { if(haystack[i] == needle) return true; } } return false; } var object = { init: function() { var input = document.getElementsByTagName('input'); for (var i = 0, c = input.length; i < c; i++) { this.addEventListener(input[i],"keypress", this); this.addEventListener(input[i],"keydown", this); }; }, field:'', idPressed: '', fieldVal: '', addEventListener: function(el, eventName, handler) { if (el.addEventListener) { el.addEventListener(eventName, handler, false); } else { el.attachEvent('on' + eventName, object.handleEvent); } }, handleEvent: function(e) { var obj = Object; var evt = e ? e:event; var chrTyped, chrCode = 0; if (evt.charCode!=null) chrCode = evt.charCode; else if (evt.which!=null) chrCode = evt.which; else if (evt.keyCode!=null) chrCode = evt.keyCode; if (chrCode==0) chrTyped = 'SPECIAL KEY'; else chrTyped = String.fromCharCode(chrCode); if (evt.keyCode==8) chrTyped = 'Backspace'; if (isIE) { obj = object; } else { obj = this; } obj.field = evt.target || evt.srcElement; obj.idPressed = obj.field.getAttribute('id'); obj.fieldVal = obj.field.value; if (chrTyped != 'SPECIAL KEY') { obj.action(chrTyped); } }, action: function(a) { var obj = Object; if (isIE) { obj = object; } else { obj = this; } var id = obj.idPressed; if (id == null) return true; var val = obj.fieldVal; var idList = id.substring(14,id.length); //we remove "inputFilterFor" from input id var list = document.getElementById('filterFor'+idList); //to find list associated with input if (list == null) return true; var listItem = list.getElementsByTagName('li'); if (listItem == null) return true; var span = null; //text filled in input form if (a != 'Backspace') { //we add key because input value is filled after key is up val += a; } else { val = val.substring(0, val.length-1);//we remove last char because input value is updated after key is up } // if empty, all the list is display if(val == ''){ for(var i =0, count = listItem.length; i < count; i++) { listItem[i].style.display = 'list-item'; } return true; } // regex build from what is filled in form : (.*)e(.*)x(.*)e(.*)m(.*)p(.*)l(.*)e(.*) var regexp = '\b(.*)'; for(var i =0, count = val.length; i < count; i++){ if (inArray(val[i],['.','?','*','+','/'])) {regexp += '(\'+val[i]+')(.*)';} else if (val[i] != '') {regexp += '('+val[i]+')(.*)';} } regexp += '\b'; // for each item of the list for(var i =0, count = listItem.length; i < count; i++) { listItem[i].style.display = 'list-item'; // we looking for span tag wrapped by link tag var links = listItem[i].getElementsByTagName('a'); for (var k = 0, c= links.length; k < c; k++) { var span = links[k].getElementsByTagName('span'); } // we take the first one if (span[0] != undefined) { span = span[0]; if(span.innerHTML.match(new RegExp(regexp,'i'))) { listItem[i].style.display = 'list-item'; } else { listItem[i].style.display = 'none'; } } } return true; } }; // Init object.init(); })(window);

Voir en ligne : Filtrer une liste en pur javascript et sans jQuery - Ecyseo