utils.js

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Randstad - Salesforce Developer (Freelance/ZZP)

Startdate: ASAP As part of our strategy, Randstad is strengthening its digital capabilities and strives to work more closely with the 38 Randstad countries in collective leadership. The program that will bring many of these developments together is Connect IT. The program will start with the implementation in the Netherlands and will become the main platform for all operating companies (opcos) of Randstad in the coming years. The platform is synchronized with omnichannel, data, marketing and IT service solutions and is based on Salesforce and Bullhorn technology. The challenge is to keep all roadmaps and priorities aligned as the core

Bekijk vacature »

Senior developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Randstad - Salesforce Developer (Freelance/ZZP)

Startdate: ASAP As part of our strategy, Randstad is strengthening its digital capabilities and strives to work more closely with the 38 Randstad countries in collective leadership. The program that will bring many of these developments together is Connect IT. The program will start with the implementation in the Netherlands and will become the main platform for all operating companies (opcos) of Randstad in the coming years. The platform is synchronized with omnichannel, data, marketing and IT service solutions and is based on Salesforce and Bullhorn technology. The challenge is to keep all roadmaps and priorities aligned as the core

Bekijk vacature »

Randstad - Fullstack Java Developer (Freelance/ZZP

Start date: ASAP Duration: 1 year initially Hours per week: 40 (32 minimum) Dutch is mandatory Max hourly rate: 85€ Strong communicator There is a vacancy in the Corporate Client Solutions (CCS) team. This team works closely together with the Online Client Solutions (OCS) team and the product owner on the client portal. Through the web portal, the various services from the business are delivered to the clients of Randstad Group Netherlands. CCS works for the corporate customers of Randstad and OCS works for customers in the SME segment. Both teams consist of a number of full stack developers, an

Bekijk vacature »

Randstad - Fullstack Java Developer (Freelance/ZZP

Start date: ASAP Duration: 1 year initially Hours per week: 40 (32 minimum) Dutch is mandatory Max hourly rate: 85€ Strong communicator There is a vacancy in the Corporate Client Solutions (CCS) team. This team works closely together with the Online Client Solutions (OCS) team and the product owner on the client portal. Through the web portal, the various services from the business are delivered to the clients of Randstad Group Netherlands. CCS works for the corporate customers of Randstad and OCS works for customers in the SME segment. Both teams consist of a number of full stack developers, an

Bekijk vacature »

Randstad - Fullstack Java Developer (Freelance/ZZP

Start date: ASAP Duration: 1 year initially Hours per week: 40 (32 minimum) Dutch is mandatory Max hourly rate: 85€ Strong communicator There is a vacancy in the Corporate Client Solutions (CCS) team. This team works closely together with the Online Client Solutions (OCS) team and the product owner on the client portal. Through the web portal, the various services from the business are delivered to the clients of Randstad Group Netherlands. CCS works for the corporate customers of Randstad and OCS works for customers in the SME segment. Both teams consist of a number of full stack developers, an

Bekijk vacature »

Senior Robotics Developer (Freelance/ZZP)

Duur opdracht: 12 mnd (met optie tot verlenging) We zoeken senior profielen. Die junioren kan bijscholen op de technische skills. Wordt 1x per week op kantoor (Eindhoven) gewerkt. Voertaal is Nederlands & Engels. Start datum: ZSM Max tarief: 74€ Wij zijn ter versterking van het RPA team van Operations Financieren per direct op zoek naar een RPA Engineer die ons kan helpen bij de ontwikkeling van de robots. Bij voorkeur kennis van cq. ervaring met Kofax Kapow en ervaring met het werken in grote organisaties met complexe systemen. Het RPA Team team zorgt voor de verdere optimalisatie van de processen

Bekijk vacature »

Randstad - Salesforce Developer (Freelance/ZZP)

Startdate: ASAP As part of our strategy, Randstad is strengthening its digital capabilities and strives to work more closely with the 38 Randstad countries in collective leadership. The program that will bring many of these developments together is Connect IT. The program will start with the implementation in the Netherlands and will become the main platform for all operating companies (opcos) of Randstad in the coming years. The platform is synchronized with omnichannel, data, marketing and IT service solutions and is based on Salesforce and Bullhorn technology. The challenge is to keep all roadmaps and priorities aligned as the core

Bekijk vacature »

Frontend Developer

Functie Het team waarmee je samenwerkt bestaat uit ongeveer 10 developers, waarvan 1 front-end developer, 1 DevOps en back-end developers. Jij wordt gekoppeld aan de andere front-end developer binnen het team om samen te gaan werken aan verschillende projecten. Deze kunnen verschillen van hun eigen complexe SaaS platform tot aan maatwerk softwaresystemen. Er zijn klanten die aan de lopende band verzoeken hebben. Dit kan erg variëren, het kan namelijk gaan om pagina’s op websites, maar ook om de webshops. Gemiddeld ben je in 1 week met 2 projecten bezig. Door de vele variatie aan diverse complexe softwaresystemen, wordt er wel

Bekijk vacature »

Senior front-end developer (React)

Functie Momenteel zijn ze op zoek naar een ervaren front-end developer. Als senior werk je nauw samen met 5 collega developers. Een klein scrum team dus, met korte lijnen waardoor jouw ideeën snel tot uitvoering gebracht kunnen worden. De huidige applicaties worden veelal ontwikkeld met o.a. React, Redux, TypeScript. Ze zijn echt op zoek naar een kartrekker in het team. Naast het meedenken over, opzetten en uitvoeren van bijvoorbeeld de architectuur of toepassing van nieuwe technieken krijg je ook veel tijd om de meer junior (front-end) developers te begeleiden. Hierin nemen ze graag de tijd om mensen de ruimte te

Bekijk vacature »

Wolters Kluwer - PHP Developer (Freelance/ZZP)

Voorstellen met CV en korte toelichting 2 dagen naar kantoor (di + do) Ontwikkelen van producten van Schulinck. Product: https://gripop.schulinck.nl/ Startdatum: ZSM Max tarief: 90€ per uur Procedure: Gesprek en test: code en analyse (oplossingsvermogen). Periode is tenminste 6 maanden met optie op verlenging Fullstack PHP Developer Ben jij een ervaren Fullstack PHP Developer die op zoek is naar een nieuwe uitdaging? Vind je het belangrijk om werk te doen waarmee je het verschil maakt in de maatschappij? En wil je onderdeel worden van ons ervaren IT-team? Lees dan snel verder! Schulinck, onderdeel van Wolters Kluwer Schulinck (onderdeel van Wolters

Bekijk vacature »

Randstad - Fullstack Java Developer (Freelance/ZZP

Start date: ASAP Duration: 1 year initially Hours per week: 40 (32 minimum) Dutch is mandatory Max hourly rate: 85€ Strong communicator There is a vacancy in the Corporate Client Solutions (CCS) team. This team works closely together with the Online Client Solutions (OCS) team and the product owner on the client portal. Through the web portal, the various services from the business are delivered to the clients of Randstad Group Netherlands. CCS works for the corporate customers of Randstad and OCS works for customers in the SME segment. Both teams consist of a number of full stack developers, an

Bekijk vacature »

KPN - Backend Developer - Product Master (Freelanc

Must: Scala and Akka Senior positon Start date: ZSM End date: 01-07-2023 Max hourly rate: 79,25€ Your job as a Backend Developer Many KPN employees in all different types of processes rely on accurate and complete product data. The product master will be a new master data management implementation within KPN for the business market. It supports the goals of KPN to become the best service provider, simplification in processes and IT, digitalization and most of all to become a data driven organization. The essence is to have a single master platform that embodies all the needed product data in

Bekijk vacature »

Low Code Ontwikkelaar

In het kort Als Low Code Developer werk je aan projecten bij en voor onze klanten, waarbij je voor het ontwikkelen van de oplossingen een technisch low-code platform gebruikt. Samen met het team streef je naar de beste oplossing en bepalen jullie de juiste aanpak. Je rol is divers en je bent van begin tot eind betrokken bij de ontwikkeling zowel de back-end en de front-end van de applicatie. Naast de ontwikkeling en oplevering, breng je ook advies uit aan de klant waarom bepaalde keuzes worden gemaakt. Je bent dan ook communicatief sterk en kunt je keuzes goed (inhoudelijk) onderbouwen.

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

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

19/08/2022 20:09:50
 
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.