http://manu.habite.la/js-cest-pas-que-jquery

Le JavaScript, c'est pas que jQuery




Par @Leimina pour les Human Talks Angers février 2013, fait avec reveal.js.

jQuery, c'est génial mais...


  • il aide pour le DOM, Ajax, les évènements : mais comment structurer son code ?

  • a-t-on vraiment besoin de tout ce qu'il nous propose, en particulier sur des petits projets ?

Structurer son code



Le JavaScript est un langage SANS DEC ?, et un langage, ça s'apprend


Structurer son code



Une "classe" en JavaScript

var humanTalk = function(ville) { //constructeur
	this.lieu = ville;
};

humanTalk.prototype.afficheOùJeSuis = function() { //méthode
	alert(this.lieu);
};

var angersTalk = new humanTalk('Angers'); //instanciation de ma classe humanTalk
angersTalk.afficheOùJeSuis(); //affiche un alerte avec "Angers" dedans

Structurer son code

S'il le faut, on s'équipe :


BEAUCOUP d'aide


Juste un peu d'aide, ça va :


Pas besoin d'aide :

  • Slide précédente !

Et si on avait carrément pas besoin de jQuery ?

Plus les navigateurs évoluent, plus ils proposent des méthodes cool.

Séléctionner un élément dans la page



jQuery

$('.item[data-active=1]');

JS natif IE8+

document.querySelectorAll('.item[data-active=1]');

Gérer les classes

jQuery

var youpi = $('#youpi');
	youpi.addClass('cool');
	youpi.removeClass('cool');
	youpi.toggleClass('cool');

JS natif IE10+

var youpi = document.getElementById('youpi');
	youpi.classList.add('cool');
	youpi.classList.remove('cool');
	youpi.classList.toggle('cool');

Gérer les classes

#jsnatifpourtous

var hasClass = function (el, cl) {
		var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
		return !!el.className.match(regex);
	},

	addClass = function (el, cl) {
		el.className += ' ' + cl;
	},

	removeClass = function (el, cl) {
		var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
		el.className = el.className.replace(regex, ' ');
	},

	toggleClass = function (el, cl) {
		hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl);
	};

	var youpi = document.getElementById('addClass');
	youpi(youpi, 'cool');
	removeClass(youpi, 'cool');
	toggleClass(youpi, 'cool');

Évènements

jQuery

$('#youpi').on('click', function(event) {
		alert('CLICKLILILICK');
	});

JS natif IE9+

document.getElementById('youpi').addEventListener('click', function(event) {
		alert('CLIIIICKLILILILDDAAAAAAA');
	}, false);

Évènements


#jsnatifpourtous

var addEvent = (function () {
		if (document.addEventListener) {
			return function (el, type, fn) {
				el.addEventListener(type, fn, false);
			};
		}
		return function (el, type, fn) {
			el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
		};
	})();

	addEvent(document.getElementById('youpi'), 'click', function(event) {
		alert('CLIICKOULCICKCLILICLICK');
	});

Ne pas trop s'ennuyer avec du natif : alternatives directes à jQuery

Alternatives "plug and play" : Zepto et Tire


  • beaucoup plus légères (zepto 8.5kb, tire 4.5kb, jQuery 32kb min+gzip)

  • basées sur la même API, avec moins de méthode : seules les plus fréquentes sont là

  • moins de compatibilité avec anciens navigateurs (zepto incompatible IE, tire incompatible IE7-)

Zepto/Tire avec jQuery derrière pour IE

<script>
	document.write(
		'<script src=' + 
			('__proto__' in {} ? 'zepto' : 'jquery') + 
		'.js><\/script>'
	)
</script>

Alternatives au cas par cas : microjs.com


Exemples à voir chez vous pépère en deux minutes pour illustrer tout ça en deux deux




http://github.com/Leimi

FING