Vanilla JS: $(selector)

Ben het er mee eens. Ik heb me vroeger zo min mogelijk in JavaScript proberen te verdiepen, omdat ik dat inferieur achtte. En toen was JavaScript ook lastig, iedere browser had z'n eigen uitwerkingen. In die tijd kwamen er libraries als jQuery. Het is nu zelfs zo erg dat Microsoft z'n eigen JavaScript-stijl heeft uitgebracht onder de naam TypeScript. Ik snap het wel, maar als je voor iedereen (lees: moderne browsers) JavaScript wilt kunnen programmeren dan moet jQuery niet nodig zijn. Ook al zitten daar toch wel handige features in. ECMA-script is nu zo gestandaardiseerd met HTML5 dat het voor kleinere projecten ook helemaal niet nodig is om libraries te gebruiken. Dus je idee is een leuke aanvulling op het spectrum, scheelt weer zoeken als we minder 'verbose' JavaScript willen.

Klopt helemaal, als je aan mij vraagt waarom ik jQuery gebruik in productie is dat alleen voor cross-browser compatibility.
Mijn script is ook nog niet helemaal af want er is 1 functie die dus niet cross-browser is.
http://caniuse.com/#search=getElementsByClassName
IE8, hier moet ik nog even wat op verzinnen

IE8? Zou ik laten ziten. Kijk maar eens naar de usage statistics op caniuse.com voor Nederland. Ruimschoots onder de 1%. IE8 is dood aan het gaan en zo moet het ook zijn. Eindelijk gerechtigheid! :-)

Haha, ik heb toch even me script geupdate en zou nu cross-browser compatible zijn :-)

Soms zou ik graag bij de 1,2 miljoen Nederlanders horen die geen internet willen en/of kunnen gebruiken...

[code lang=js]$=(s,e)=>{return(e||document).querySelectorAll(s);};[/code]
Moet je browser wel ECMA6 ondersteunen overigens, anders:
[code lang=js]$=function(s,e){return(e||document).querySelectorAll(s);};[/code]

mocht je het tweede argument nooit gebruiken kan t nog simpeler:
[code lang=js]var $ = document.querySelectorAll.bind(document);[/code]

[hr]

Vaak gebruik ik zelf:
[code lang=js]
(function ($, $$) {

// ... mijn code

})(
function (selector, elem) { return (elem || document).querySelector(selector); },
function (selector, elem) { return (elem || document).querySelectorAll(selector); }
);
[/code]

jQuery in a vanilla JS nutshell

[code lang=js]
function $(selector) {
var array = [];
var selectors = selector.split(',');
for (var i = 0; i < selectors.length; i++) {
selector = selectors[i].trim();
if (selector.substr(0,1) == '#' && !selector.indexOf(' ') >= 0) {
array.push(document.getElementById(selector.substr(1)));
} else if (selector.substr(0,1) == '.' && !selector.indexOf(' ') >= 0) {
array.push.apply(array, document.getElementsByClassName(selector.substr(1)));
} else {
array.push.apply(array, [].slice.call(document.querySelectorAll(selector)));
}
}
return array.length > 1 ? array : array[0];
}
function setCookie(name, value, days){
document.cookie = name + '='+ value + '; expires=' + new Date((new Date).getTime()+days*24*60*60*1000).toUTCString() +'; path=/';
}
function deleteCookie(name){
createCookie(name,'',-1);
}
function getCookie(name){
var cookie = document.cookie.match('(^|;)\\s*'+name+'\\s*=\\s*([^;]+)');
return cookie ? cookie.pop() : null;
}
String.prototype.contains = function(value) {
return this.indexOf(value) >= 0;
}
Element.prototype.hide = function() {
this.style.display = 'none';
}
Element.prototype.show = function() {
this.style.display = '';
}
Element.prototype.disable = function(value) {
return value == null ? this.disabled : this.disabled = value;
}
Element.prototype.check = function(value) {
return value == null ? this.checked : this.checked = value;
}
Element.prototype.src = function(value) {
return !value ? this.src : this.src = value;
}
Element.prototype.css = function(value) {
return !value ? this.style : this.style = value;
}
Element.prototype.data = function(name, value) {
return !value ? this.getAttribute('data-' + name) : this.setAttribute('data-' + name, value);
}
Element.prototype.val = function(value) {
return !value ? this.value : this.value = value;
}
Element.prototype.html = function(value) {
return !value ? this.innerHTML : this.innerHTML = value;
}
Element.prototype.text = function(value) {
return !value ? this.textContent : this.textContent = value;
}
Element.prototype.empty = function() {
this.innerHTML = '';
}
Element.prototype.append = function(value) {
this.innerHTML += value;
}
Element.prototype.prepend = function(value) {
this.innerHTML = value + this.innerHTML;
}
Element.prototype.hasClass = function(value) {
return this.classList.contains(value);
}
Element.prototype.addClass = function(value) {
this.classList.add(value);
return this;
}
Element.prototype.removeClass = function(value) {
this.classList.remove(value);
return this;
}
Array.prototype.each = function(callback) {
for (var i = 0; i < this.length; i++) {
callback(this[i], i);
}
}
[code]

Ik geloof dat jullie code bewijzen dat jQuery overbodig is tegenwoordig :)