Vanilla JS: $(selector)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Inter Kode

Inter Kode

20/06/2016 13:53:05
Quote Anchor link
Hey,

jQuery $() selector in vanilla JS:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php //Javascript
// Main selector

function $(selector) {
  // Initialize array to store element(s)
  var array = [];
  // If there are multiple selectors we split by ','
  var selectors = selector.split(','), i;
  // Loop over each selector
  for (i = 0; i < selectors.length; i++) {
    // Convert the node list to an array and append the array
    array.push.apply(array, Array.prototype.slice.call(document.querySelectorAll(selectors[i].trim())));
  }

  // If our array has 1 or more elements return the whole array, else we only return the single element
  return array.length > 1 ? array : array[0];
}

?>

Minified 171 bytes :P
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
function $(t){var e,r=[],l=t.split(",");for(e=0;e<l.length;e++)t=l[e].trim(),"#"==t.substr(0,1)&&!t.indexOf(" ")>=0?r.push(document.getElementById(t.substr(1))):r.push.apply(r,Array.prototype.slice.call(document.querySelectorAll(t)));return r.length>1?r:r[0]}
?>

Gebruiksaanwijzing:
Quote:
$('#id');
$('.class');
$('button > span');
$('#id, .class, button > span');

En bij meerdere elementen krijg je een array terug.

Ik dacht ik deel dit zodat andere mensen dit kunnen gebruiken of te verbeteren.
Hoor graag jullie mening!

Extra!
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php

Element.prototype.hide = function() {
  this.style.display = 'none';
}

Array.prototype.each = function(callback) {
  var
i = this.length;
  while(i--) {
    callback(this[i], i);
  }
}


//$('.foo').each(function(e) {
// e.hide();
//});


?>
Gewijzigd op 20/06/2016 15:14:27 door Inter Kode
 
PHP hulp

PHP hulp

16/08/2018 18:22:13
 

20/06/2016 14:09:13
Quote Anchor link
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.
 
Inter Kode

Inter Kode

20/06/2016 14:18:35
Quote Anchor link
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
Gewijzigd op 20/06/2016 14:19:53 door Inter Kode
 

20/06/2016 14:21:14
Quote Anchor link
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! :-)
 
Inter Kode

Inter Kode

20/06/2016 14:27:22
Quote Anchor link
Haha, ik heb toch even me script geupdate en zou nu cross-browser compatible zijn :-)
 

20/06/2016 14:30:24
Quote Anchor link
Soms zou ik graag bij de 1,2 miljoen Nederlanders horen die geen internet willen en/of kunnen gebruiken...
 
Wouter J

Wouter J

20/06/2016 15:39:35
Quote Anchor link
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
$=(s,e)=>{return(e||document).querySelectorAll(s);};

Moet je browser wel ECMA6 ondersteunen overigens, anders:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
$=function(s,e){return(e||document).querySelectorAll(s);};


mocht je het tweede argument nooit gebruiken kan t nog simpeler:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
var $ = document.querySelectorAll.bind(document);





Vaak gebruik ik zelf:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
(function ($, $$) {

    // ... mijn code

})(
    function (selector, elem) { return (elem || document).querySelector(selector); },
    function (selector, elem) { return (elem || document).querySelectorAll(selector); }
);
Gewijzigd op 20/06/2016 15:46:02 door Wouter J
 
Inter Kode

Inter Kode

20/06/2016 23:54:00
Quote Anchor link
jQuery in a vanilla JS nutshell

Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
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]
Gewijzigd op 20/06/2016 23:55:05 door Inter Kode
 

01/07/2016 11:01:23
Quote Anchor link
Ik geloof dat jullie code bewijzen dat jQuery overbodig is tegenwoordig :)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.