utils.js
Maar uiteraard zijn reacties/aanvullingen/opmerkingen/... welkom.
jQuery is handig en leuk ... maar meestal nogal overkill.
Er is echter wel functionaliteit die je constant nodig hebt; op zich niet zo moeilijk, maar je moet het toch altijd zoeken en copy/pasten
Ik dacht een kleine file te maken die een paar dingen groepeert. Hiermee kan ik jQuery (en andere frameworks) meestal achterwege laten.
Ik focus me op twee dingen: Ajax en events binden.
utils.js
Code (php)
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/**
* @file baic utilities.
* If you don't feel like using a js framework, there is still a few utilities you constantly need.
* I thought of two functionalities: binding events & Ajax
* Feel free to expand/extend
*/
/**
* Ajax.
* made to look like jQuery's $.ajax(options);
* Not too many fancy options (You make a request; you expect a success callback to be executed. That's it); feel free to extend
* required options: url & success
* optional options (documentation: look at jQuery) : type ('get' or 'post'), dataType ('text', 'json', 'xml'), data
// Example of Usage
ajax({
url: 'ajax.htm',
success: display
});
function display(data) {
document.getElementById('result').innerHTML = data;
}
*/
var xmlhttp;
var ajax = function(options) {
if (typeof xmlhttp == 'undefined') {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
// merge options with defaults
options = {
url: options.url,
success: options.success,
type: typeof options.type != 'undefined' ? options.type : 'get',
data: typeof options.data != 'undefined' ? options.data : null,
dataType: typeof options.dataType != 'undefined' ? options.dataType : 'text'
}
// Ajax call
xmlhttp.open(options.type, options.url, true);
switch (options.dataType) {
default:
if (options.type == 'post') {
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
else {
xmlhttp.setRequestHeader('Content-type', 'text/plain;charset=UTF-8');
}
break;
case 'json':
xmlhttp.setRequestHeader('Content-type', 'application/json; charset=utf-8');
break;
case 'xml':
xmlhttp.setRequestHeader('Content-type', 'text/xml; charset=utf-8');
break;
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
switch (options.dataType) {
default:
options.success(xmlhttp.responseText);
break;
case 'json':
// @see http://en.wikipedia.org/wiki/JSON
var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
xmlhttp.responseText.replace(/"(\\.|[^"\\])*"/g, ''))) &&
eval('(' + xmlhttp.responseText + ')');
options.success(my_JSON_object);
break;
case 'xml':
options.success(xmlhttp.responseXML);
break;
}
}
}
xmlhttp.send(options.data);
return true;
}
/*
* Add event
* @see http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/
* @author: Jeffrey Way
// Example of Usage
var lis = document.getElementsByTagName('li');
addEvent( lis, 'click', function() {
this.style.border = '1px solid red';
});
*/
var addEvent = (function( window, document ) {
if ( document.addEventListener ) {
return function( elem, type, cb ) {
if ( (elem && !elem.length) || elem === window ) {
elem.addEventListener(type, cb, false );
}
else if ( elem && elem.length ) {
var len = elem.length;
for ( var i = 0; i < len; i++ ) {
addEvent( elem[i], type, cb );
}
}
};
}
else if ( document.attachEvent ) {
return function ( elem, type, cb ) {
if ( (elem && !elem.length) || elem === window ) {
elem.attachEvent( 'on' + type, function() { return cb.call(elem, window.event) } );
}
else if ( elem.length ) {
var len = elem.length;
for ( var i = 0; i < len; i++ ) {
addEvent( elem[i], type, cb );
}
}
};
}
})( this, document );
* @file baic utilities.
* If you don't feel like using a js framework, there is still a few utilities you constantly need.
* I thought of two functionalities: binding events & Ajax
* Feel free to expand/extend
*/
/**
* Ajax.
* made to look like jQuery's $.ajax(options);
* Not too many fancy options (You make a request; you expect a success callback to be executed. That's it); feel free to extend
* required options: url & success
* optional options (documentation: look at jQuery) : type ('get' or 'post'), dataType ('text', 'json', 'xml'), data
// Example of Usage
ajax({
url: 'ajax.htm',
success: display
});
function display(data) {
document.getElementById('result').innerHTML = data;
}
*/
var xmlhttp;
var ajax = function(options) {
if (typeof xmlhttp == 'undefined') {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
// merge options with defaults
options = {
url: options.url,
success: options.success,
type: typeof options.type != 'undefined' ? options.type : 'get',
data: typeof options.data != 'undefined' ? options.data : null,
dataType: typeof options.dataType != 'undefined' ? options.dataType : 'text'
}
// Ajax call
xmlhttp.open(options.type, options.url, true);
switch (options.dataType) {
default:
if (options.type == 'post') {
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
else {
xmlhttp.setRequestHeader('Content-type', 'text/plain;charset=UTF-8');
}
break;
case 'json':
xmlhttp.setRequestHeader('Content-type', 'application/json; charset=utf-8');
break;
case 'xml':
xmlhttp.setRequestHeader('Content-type', 'text/xml; charset=utf-8');
break;
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
switch (options.dataType) {
default:
options.success(xmlhttp.responseText);
break;
case 'json':
// @see http://en.wikipedia.org/wiki/JSON
var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
xmlhttp.responseText.replace(/"(\\.|[^"\\])*"/g, ''))) &&
eval('(' + xmlhttp.responseText + ')');
options.success(my_JSON_object);
break;
case 'xml':
options.success(xmlhttp.responseXML);
break;
}
}
}
xmlhttp.send(options.data);
return true;
}
/*
* Add event
* @see http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/
* @author: Jeffrey Way
// Example of Usage
var lis = document.getElementsByTagName('li');
addEvent( lis, 'click', function() {
this.style.border = '1px solid red';
});
*/
var addEvent = (function( window, document ) {
if ( document.addEventListener ) {
return function( elem, type, cb ) {
if ( (elem && !elem.length) || elem === window ) {
elem.addEventListener(type, cb, false );
}
else if ( elem && elem.length ) {
var len = elem.length;
for ( var i = 0; i < len; i++ ) {
addEvent( elem[i], type, cb );
}
}
};
}
else if ( document.attachEvent ) {
return function ( elem, type, cb ) {
if ( (elem && !elem.length) || elem === window ) {
elem.attachEvent( 'on' + type, function() { return cb.call(elem, window.event) } );
}
else if ( elem.length ) {
var len = elem.length;
for ( var i = 0; i < len; i++ ) {
addEvent( elem[i], type, cb );
}
}
};
}
})( this, document );
Simpel voorbeeldje van hoe het te gebruiken
Code (php)
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
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
<!doctype HTML>
<html>
<head>
<script src="utils.js"></script>
<style>
#click {
cursor: pointer;
}
</style>
</head>
<body>
<div id="click">click</div>
<script>
// simpel voorbeeld: we testen 1 event + 1 ajax call
// als op de <div></div> gedrukt wordt, wordt een ajax call gemaakt; de respons wordt als innerHTML van die div gezet
var click = document.getElementById('click');
// event binden
addEvent( click, 'click', function() {
// ajax call
var a = ajax({
url: 'ajax.htm',
success: display
});
});
// callback voor de ajax respons
function display(data) {
click.innerHTML = data;
}
</script>
</body>
</html>
<html>
<head>
<script src="utils.js"></script>
<style>
#click {
cursor: pointer;
}
</style>
</head>
<body>
<div id="click">click</div>
<script>
// simpel voorbeeld: we testen 1 event + 1 ajax call
// als op de <div></div> gedrukt wordt, wordt een ajax call gemaakt; de respons wordt als innerHTML van die div gezet
var click = document.getElementById('click');
// event binden
addEvent( click, 'click', function() {
// ajax call
var a = ajax({
url: 'ajax.htm',
success: display
});
});
// callback voor de ajax respons
function display(data) {
click.innerHTML = data;
}
</script>
</body>
</html>
Misschien even een overzichtje maken van wat je eigenlijk vaak gebruikt van jQuery en die isoleren is natuurlijk een geweldig idee.
We kunnen wel met elkaar wat opzetten, gewoon aparte bestandjes met elk een functie/functies om iets makkelijk voor elkaar te krijgen. Bijv. het gebruik van querySelector(All) of Sizzle als selector engine, Base.js voor OO javascript, enz.
Sowieso ontbreekt hier nog van alles.
Ik dacht toch vooral minimaal. Geen dingen zoals $.each (een for-loop kunnen we zelf wel maken); geen 10 wrapper functies voor ajax, die intern toch allemaal naar $.ajax leiden. ...
En ik heb het procedureel gemaakt; het kan even goed herschreven worden zodat het via 1 object gebeurt, zoals het jQuery ( of $ ) object.
Kwestie van smaak.
Gewijzigd op 13/07/2012 14:01:51 door Kris Peeters
Wouter J op 13/07/2012 13:51:56:
Erwin, als je jQuery wilt vervangen ben je nog wel even bezig
Ja duh... lijkt me een open deur.
Gewijzigd op 13/07/2012 16:08:23 door Wouter J
Ik zal eens naar Mootols kijken, trouwens.
Ter volledigheid, MooTools is ook makkelijk te customizen. Zoek in de source code naar jou functie en kijk vervolgens welke andere klassen daar voor nodig zijn, dit vind je in het commentaar boven zo'n class. Dit kopieer je in je eigen bestand en klaar ben je.
Gewijzigd op 12/09/2012 23:14:22 door Wouter J
Gewijzigd op 11/02/2013 11:56:11 door Kris Peeters
edit:
Ik zie nu pas dat Wouter hetzelfde antwoord gaf.
Gewijzigd op 11/02/2013 12:11:41 door Mebus Hackintosh
Maar dan nog, jquery werkt standaard met
$(elementen).evenement(callback);
Net niet wat ik probeer te doen.
Gewoon een paar functies om jQuery niet nodig te hebben; maar wel een paar elementaire wapens te hebben.