utils.js

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Applicatiebeheerder CRM

Heb jij als allround applicatiebeheerder een sterke affiniteit met CRM systemen en heb je kennis van het verbinden van applicaties middels een Hybrid Integration Platform, dan is deze functie jou op het lijf geschreven! Wat ga je doen? Samen met je collega’s ben je verantwoordelijk voor een beschikbaar en goed functionerend applicatielandschap van ongeveer 150 zowel On-Premise als Cloud applicaties. Een uitdagende functie waarbij jij een actieve rol krijgt bij de implementatie van een nieuw CRM systeem. Je zal van het begin af aan deelnemen aan het CRM projectteam waarbij je vanuit jouw specialisme vragen beantwoordt en meedenkt over functionele,

Bekijk vacature »

Senior Fullstack .NET developer

Wil jij samen met gemotiveerde en slimme collega’s bouwen aan ons geavanceerde landschap in Azure? En vind je het ook nog eens leuk om jouw kennis te delen met junior- en medior devs? Dan heb je wellicht interesse in de positie van: Senior fullstack .NET developer voor ons kantoor in Alkmaar Over de positie: Bij SnelStart werken we in een AGILE-structuur om de productie meer focus en impact te geven. Met je collega’s kom je tot de beste resultaten door onderlinge discussie, goede refinement sessies, reviews en écht teamwork. Je hebt de vrijheid om de dingen te doen zoals jij

Bekijk vacature »

Full-stack Java Developer/ Web development/ 4.000

Functieomschrijving Ben jij een full-stack java developer die graag een cruciaal platform (door) ontwikkelt? Schroom jij het niet om jouw brede skillset in te zetten om verbeterslagen aan te dragen en uit te voeren? Lees dan snel verder! Bouwen van nieuwe functionaliteiten; Door ontwikkelen van de online omgeving; Bug fixing; Testen van (jouw) code, handmatig-, unit-, integratie- en browser tests. Functie-eisen Minimaal een MBO-diploma met HBO werk- en denkniveau; Minimaal 1 jaar werkervaring met Java; Kennis van frameworks zoals: Spring (MVC), Struts, Hibernate, Junit, etc.; Kennis van tooling zoals: IntelliJ, GIT, Jenkins, Gradle; Kennis van front-end technieken zoals: JavaScript, Bootstrap

Bekijk vacature »

Senior Java Developer vacature

Senior Java Developer Jij volgt ontwikkelingen op de voet. Sterker nog: jij bent er onderdeel van. Jij loopt voorop. Jij denkt met klanten mee en helpt hen innoveren. Bijvoorbeeld met de ontwikkeling van de Rabobank-app, een verbetering van de beveiliging van treinen voor Pro-rail of geef je een boost aan de website van ING! Focus op Java Wij bouwen State of the Art applicaties met de nieuwste Java technologie en frameworks. Dit doen we door ons te richten op de open source-oplossingen binnen de wereld van Java, alle nieuwe ontwikkelingen te volgen en onze kennis te delen binnen onze eigen

Bekijk vacature »

.NET C# web developer gezocht, inhouse project dev

Ben je een ervaren .NET C# web developer en op zoek naar een leuke baan in het zuiden van Zuid-Holland? Een inhouse functie maar met de afwisseling van verschillende projecten en klanten? Projecten die uitdagend zijn door de complexiteit van de systemen? Lees dan verder! Voor een bedrijf in Goeree-Overflakkee zijn we momenteel op zoek naar een ervaren .NET C# web developer. Het bedrijf bestaat uit iets meer dan 20 werknemers en verschillende ervaren software developers. De software projecten zijn uiteenlopend, maar altijd maatwerk oplossingen en veelal complex en bedrijfskritisch van karakter. De bedrijven waarvoor je software ontwikkeld kunnen variëren

Bekijk vacature »

Senior Fullstack .NET developer

Wil jij samen met gemotiveerde en slimme collega’s bouwen aan ons geavanceerde landschap in Azure? En vind je het ook nog eens leuk om jouw kennis te delen met junior- en medior devs? Dan heb je wellicht interesse in de positie van: Senior fullstack .NET developer voor ons kantoor in Alkmaar Over de positie: Bij SnelStart werken we in een AGILE-structuur om de productie meer focus en impact te geven. Met je collega’s kom je tot de beste resultaten door onderlinge discussie, goede refinement sessies, reviews en écht teamwork. Je hebt de vrijheid om de dingen te doen zoals jij

Bekijk vacature »

Senior .NET developer/ architect gezocht, api deve

Ben je een ervaren .NET developer en op zoek naar baan waarbij je je ook meer kunt gaan richten op architectuur? Binnen een leuke, sociale en betrokken werkomgeving? Met technieken als .NET Core en Azure? Dan zou deze baan wellicht iets voor jou kunnen zijn. Voor een organisatie in Rotterdam zijn we op zoek naar eens senior .NET ontwikkelaar/ architect. De organisatie bevindt zich in de financiële branche en is een van de grotere spelers in hun vakgebied. De organisatie bestaat uit circa 600 medewerkers en heeft verschillende vestigingen in Nederland. Het hoofdkantoor zit in Rotterdam en daar is ook

Bekijk vacature »

Senior .Net Developer Duurzaamheid Maatwerkapplica

Functieomschrijving Ben je een ervaren .NET Developer en ben je op zoek naar een uitdagende rol met veel vrijheid? Wil jij aan de slag bij een bedrijf die duurzaamheid hoog in het vaandel heeft staan? Lees dan snel verder! Van scratch af aan applicaties bouwen; Testen van jouw code door middel van het uitvoeren van unittesten; Bug fixing; Contact onderhouden met klanten met klanten betreffende de door jouw ontwikkelde applicaties; Verbeteren en door ontwikkelen van maatwerkapplicaties. Functie-eisen Een afgeronde hbo/wo opleiding; Minimaal vijf jaar ervaring als fullstack .NET Developer; Uitgebreide technische kennis met oog voor praktische oplossingen; Ruime kennis van

Bekijk vacature »

Full-stack .Net Developer-Nieuw klant portaal, 2mi

Een bekende Nederlandse financiële organisatie in Heerlen bouwt een nieuw IT team om hun klanten portal flink uit te breiden. Na een reeks van fusies en overnames zijn verschillende klanten portalen in de DevOps omgeving samen gevoegd. Hierdoor is de behoefte ontstaan een uitgebreid overkoepelend klanten portal te bouwen. Het is het aan het nieuwe team dit vorm te geven en uit te breiden. Aan jou de taak de optimale klantbeleving voor 2+ miljoen gebruikers te bouwen! Hiervoor zoeken wij twee ervaren Fullstack .Net Developers voor het nieuwe IT scrum team, bestaande uit 8 gepassioneerde IT’ers. Je denkt hierbij mee

Bekijk vacature »

OutSystems Developer Gloednieuw Applicatiehuis

OutSystems Developer Functieomschrijving Heb jij als OutSystems Developer ruime ervaring met het ontwikkelen van diverse applicaties? Lijkt het jou gaaf om aan de vooravond te staan van de implementatie van een volledig nieuw applicatiehuis? Wil jij aan de slag binnen een uitdagende omgeving waarbij je de mogelijkheid krijgt jezelf verder te ontwikkelen? Lees snel verder! Jouw taken als OutSystems Developer zullen bestaan uit: Het van scratch af aan ontwikkelen van applicaties met OutSystems; Het aanhaken bij diverse projecten binnen de organisatie; Schakelen met de business; Meedenken over de mogelijkheden van het platform binnen de organisatie. Functie-eisen De eisen zijn: Hbo

Bekijk vacature »

PHP Developer Senior Complexe SaaS-oplossing

Functieomschrijving Ben jij een ervaren PHP Developer, focus jij je doorgaans op de back-end en loop jij warm voor het doorontwikkelen van een zeer grote applicatie met enorme MySQL databases en veel complexiteit? Lees dan snel verder! Het onderhouden, doorontwikkelen en testen van een zeer complexe SaaS-oplossing, zonder schaalbaarheid en platformonafhankelijkheid uit het oog te verliezen; Het ontwikkelen van maatwerk back-end oplossingen in PHP en participeren in een Scrumteam; Het participeren in een migratie naar het Symfony framework; Participeren in diverse projecten t.b.v. de optimalisatie van het SaaS-product; Het opzetten van API koppelingen met externe partijen;. Het wegwerken van legacy

Bekijk vacature »

Fullstack .NET developer voor het onderwijs

Functieomschrijving Onze klant bouwt SAAS oplossingen voor het onderwijs en ze hebben inmiddels een aantal innoverende applicaties in de markt staan. Je gaat samen met je team op Scrum basis aan de slag om deze .NET applicaties verder te verbeteren en uit te bouwen. Je team bestaat uit een aantal .NET developers en frontenders en naast technisch uitdagend development werk, ga je ook meedenken met de architectuur en zorg je dat de kwaliteit van de applicaties hoog zijn want ze moeten altijd stabiel en snel werken! Functie-eisen - Je hebt een afgeronde HBO opleiding (IT) - Je hebt ervaring met

Bekijk vacature »

Software Ontwikkelaar

Functieomschrijving Ben jij de Software Ontwikkelaar met 5 tot 10 jaar ervaring en heb je daarnaast ervaring met elektronica en pcb-platen? We vertellen graag meer over deze functie. Coderen en programma’s ontwerpen doe jij met je ogen dicht. Jij hebt alles in huis om applicaties zelfstandig slimmer dan voorheen te maken. Wat valt er nog meer als Software Ontwikkelaar onder je takenpakket? - Ontwerp, implementatie en testen van software modules op het gebied van betaalautomaten - Analyseren van veldproblemen - Ontwikkelen en opbouwen van kennis binnen het vakgebied - Integreren van software modules in het eindproduct - Deelnemen aan testen

Bekijk vacature »

Mobile App Developer

Ons Mobile-ontwikkelteam zoekt een gedreven Mobile App Ontwikkelaar. Ben jij analytisch en heb je passie voor het ontwikkelen van apps? Dan zijn wij op zoek naar jou! Jouw baan ChipSoft heeft al diverse apps uitgebracht en het aantal gebruikers hiervan neemt snel toe. Je kunt hierbij denken aan apps voor verpleegkundigen, thuiszorgmedewerkers, de sterilisatieafdeling en - natuurlijk - de artsen zelf. Door jouw hands-on-mentaliteit, eigenwijsheid en technisch inzicht kun je nauwkeurig herbruikbare software schrijven. Die software sluit naadloos aan op onze ‘back end’ (HiX, onze ICT-totaaloplossing voor de zorg). Samen met je collega’s ben je verantwoordelijk voor het ontwerpen en

Bekijk vacature »

Developer / Techneut / Oracle APEX / Ondernemend

Functieomschrijving Ben jij een echte Techneut die het leuk vindt om in verschillende talen te ontwikkelen waarbij je als Ontwikkelaar te maken krijgt met 500 TB aan storage? Lees dan snel verder! Verbeteren van bestaande product; Ontwikkelen nieuwe modules; Achterhalen requirements bij de klanten; Installatie op locatie; Verwerken van maatwerk verzoeken. Functie-eisen Hbo-werk- en denkniveau; Minimaal 3 jaar relevante werkervaring; Kennis en ervaring van Oracle, het liefst Apex; Je bent bekend met Elasticsearch; Je bent ondernemend en communicatief vaardig. Bedrijfsomschrijving Binnen deze organisatie zal je terecht komen in een team van 7 techneuten. Wat al deze techneuten kenmerkt, is dat

Bekijk vacature »
Kris Peeters

Kris Peeters

13/07/2012 12:26:13
Quote Anchor link
Ik zit niet echt met een vraag of probleem; ik wil het vooral gewoon in de groep gooien.
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)
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
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 );


Simpel voorbeeldje van hoe het te gebruiken
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
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>
 
PHP hulp

PHP hulp

08/08/2020 23:42:07
 
Erwin H

Erwin H

13/07/2012 13:43:17
Quote Anchor link
Dus in feite maak je zo je eigen library/framework in plaats van JQuery. Niets mis mee lijkt mij.
 
Wouter J

Wouter J

13/07/2012 13:51:56
Quote Anchor link
Erwin, als je jQuery wilt vervangen ben je nog wel even bezig, alleen je gaat wel de goede kant op.

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.
 
Kris Peeters

Kris Peeters

13/07/2012 13:59:53
Quote Anchor link
Ja, daar gaat het vooral om. Eens zien waar mensen jQuery echt voor nodig hebben.
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
 
Erwin H

Erwin H

13/07/2012 16:01:28
Quote Anchor link
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.
 
Wouter J

Wouter J

13/07/2012 16:05:48
Quote Anchor link
Ik zou geen 1 object maken, maar zoals ze bij MooTools doen meerdere objecten. voorbeeldje
Gewijzigd op 13/07/2012 16:08:23 door Wouter J
 
Kris Peeters

Kris Peeters

13/07/2012 19:10:42
Quote Anchor link
Ja, dat ziet er wel proper uit.

Ik zal eens naar Mootols kijken, trouwens.
 
Wouter J

Wouter J

12/09/2012 19:54:36
Quote Anchor link
Even dit topic weer een zetje omhoog geven. Gister kwam ik langs een erg interessant artikel: Met behulp van node.js en grunt.js kun je je jQuery build customizen. Je kunt bijv. de AJAX of CSS module eruit halen of juist alleen de AJAX module en de functies die je daarvoor nodig hebt: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-your-own-custom-jquery/

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
 
Kris Peeters

Kris Peeters

13/09/2012 10:18:52
Quote Anchor link
Fijn
 
Kris Peeters

Kris Peeters

11/02/2013 11:55:14
Quote Anchor link
oops, verkeerd knopje...
Gewijzigd op 11/02/2013 11:56:11 door Kris Peeters
 
Mebus  Hackintosh

Mebus Hackintosh

11/02/2013 12:09:41
Quote Anchor link
Kan je dan niet alles appart selecteren bij het downloaden van jquery? Bij mootools kan dat wel namelijk (:

edit:

Ik zie nu pas dat Wouter hetzelfde antwoord gaf.
Gewijzigd op 11/02/2013 12:11:41 door Mebus Hackintosh
 
Kris Peeters

Kris Peeters

11/02/2013 12:16:32
Quote Anchor link
jQuery-ui wel (draggable; accordion; slider; ...); jQuery niet (voor zover ik weet).

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.
 



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.