Betere javascript/jquery notatie?

[Thmz159]

Hallo Tweakers,

Ik heb een project dat voornamelijk bestaat uit javascript /jquery. Nu begint het nogal te groeien en mijn javascript wordt onoverzichtelijk.
Nu zou ik iets als dit hebben:

code:

autoSnelheid = 100;
autoAantal = 5;

autoDraaiLinks = function(snelheid){
   /*Doe iets*/
}
autoDraaiLinks(autoSnelheid);

vrachtwagenSnelheid = 60;
vrachtwagenAantal = 10

vrachtwagenLaadUit = function(){
}

vrachtwagenLaadUit();

Wat ik wil hebben is:

code:

auto = [
   snelheid = 100
   aantal = 5
   draaiLinks = function(){
      /* doe iets */
   }
] 
auto.draaiLinks(auto.snelheid)

vrachtwagen = [
   /*hetzelfde.... */
]

Nu is dat geen valide code. Hoe kan dit wel goed? Ik dacht eerst om van 'auto' een array te maken, maar dan kan ik geen functie erin stoppen en aanroepen. Ik meen me te herinneren dat ik iets als dit gezien had, maar ik heb al op google gezocht naar 'javascipt dot notation' etc en dat geeft niets nuttigs.

[keejoz]

Ik ben niet zo familiar met JS/JQ maar als je van je auto een object maakt zal dit wel snor zitten.

[michiel_hc]

Volgens mij zoek je zoiets:
http://www.phpied.com/3-ways-to-define-a-javascript-class/

[Thmz159]

Dankje voor die link, een object is precies wat ik zoek.

var apple = {
type: "macintosh",
color: "red",
getInfo: function () {
return this.color + ' ' + this.type + ' apple';
}
}

Bedankt!

[Kiphaas7]

Wat ik de laatste tijd nogal veel gebruik voor jQuery:

JavaScript:

function Constructor (variable) {
  this.foo = variable;
  this.create();
}

$.extend(Constructor, {
  instances: []
});

$.extend(Constructor.prototype, {
  create: function() {

  },

  fooMethod: function() {

  }
}

Om gedrag te binden aan event handlers.

JavaScript:

$('#my-id').on('click', function() {
  Constructor.instances.push(new Constructor(variable));
});

(Constructor en instances natuurlijk hernoemen naar iets zinvols)

[ Voor 8% gewijzigd door Kiphaas7 op 05-09-2012 05:07 ]

[R4gnax]

Kiphaas7 schreef op woensdag 05 september 2012 @ 05:05:
Wat ik de laatste tijd nogal veel gebruik voor jQuery:

JavaScript:

function Constructor (variable) {
  this.foo = variable;
  this.create();
}

$.extend(Constructor, {
  instances: []
});

$.extend(Constructor.prototype, {
  create: function() {

  },

  fooMethod: function() {

  }
}

Om gedrag te binden aan event handlers.

JavaScript:

$('#my-id').on('click', function() {
  Constructor.instances.push(new Constructor(variable));
});

(Constructor en instances natuurlijk hernoemen naar iets zinvols)

Ooit al eens gekeken naar $.widget? De jQuery UI widget factory doet dit een stukje beter en formeler en is los te gebruiken van de rest van jQuery UI.

(Overigens; als 'variable' een referentie naar een DOM element is dan creeërt jouw patroon dat instances op de constructor functie opslaat een memory leak in Internet Explorer. Ook iets wat de widget factory voorkomt...)

[ Voor 11% gewijzigd door R4gnax op 05-09-2012 08:53 ]

[IceM]

Ik heb daar dit script voor gebruikt als basis toen ik veel javascript moest gebruiken in een applicatie. Ik gebruik javascript normaal nauwlijks en was opzoek naar een eenvoudige manier om classes te creëren. Of dit impact heeft op de performance weet ik niet, maar ik vond het erg makkelijk in gebruik.

[ Voor 4% gewijzigd door IceM op 05-09-2012 09:02 ]

[Kiphaas7]

R4gnax schreef op woensdag 05 september 2012 @ 08:52:
[...]


Ooit al eens gekeken naar $.widget? De jQuery UI widget factory doet dit een stukje beter en formeler en is los te gebruiken van de rest van jQuery UI.

(Overigens; als 'variable' een referentie naar een DOM element is dan creeërt jouw patroon dat instances op de constructor functie opslaat een memory leak in Internet Explorer. Ook iets wat de widget factory voorkomt...)

Nee . Maar dat ga ik nu wel zeker doen!

wbt de mem leak: Heb je een relevante link? want googlen naar memory leak en IE levert, ahum, nogal veel resultaten op. Ik neem aan dat je doelt op het feit dat een reference naar een DOM element in IE niet verwijderd wordt als het DOM element zelf verwijderd wordt?

EDIT: $.widget net bekeken: ziet er inderdaad goed uit, maar 15 kb source... Gaat misschien dan wel naar 7 minified, maar is nog steeds relatief veel

[ Voor 8% gewijzigd door Kiphaas7 op 05-09-2012 10:14 . Reden: $.widget ]

[Manuel]

Werk je nog op een inbelverbinding dat 15KB te veel is?

Edit:
Met de verbindingen van nu is het geen enkel probleem om eenmalig 7KB over de lijn te sturen, de browser cachet het toch wel. Hetzelfde met de jQuery lib, die is twee keer zo groot alleen ook nog compressed (1.6.4 via Google Api @ 31.4KB) en daar doet men niet moeilijk over.

[ Voor 72% gewijzigd door Manuel op 05-09-2012 10:21 ]

[Kiphaas7]

Manuel schreef op woensdag 05 september 2012 @ 10:17:
Werk je nog op een inbelverbinding dat 15KB te veel is?

Edit:
Met de verbindingen van nu is het geen enkel probleem om eenmalig 7KB over de lijn te sturen, de browser cachet het toch wel. Hetzelfde met de jQuery lib, die is twee keer zo groot alleen ook nog compressed (1.6.4 via Google Api @ 31.4KB) en daar doet men niet moeilijk over.

Lekker zinvol. Als je iets voor mobile wil maken gaan die kb's tellen. Niet zozeer alleen downloaden, maar ook verwerking van de code. Daarnaast, behalve dat die widget factory me een standaard manier geeft om mee te werken voegt het 0 toe aan de manier die ik al gebruik. Dus mag ik het dan veel code vinden voor wat formalisatie?

(even los van de mem leak waar ik terdege geïnteresseerd ben, of andere dingen die mis zijn met de door mij gestelde aanpak, waar ik terdege geïnteresseerd ben en wat de widget factory beter zou doen)

Ik ben op de hoogte van caching. Je vergeet trouwens in je betoog te vermelden dat die 32 kb met gzip is . Caching doet alleen iets voor download tijd, niet verwerkingssnelheid.

[ Voor 3% gewijzigd door Kiphaas7 op 05-09-2012 11:35 ]

[Manuel]

Eenmalig 15KB van je databundel noem ik alsnog niet echt 'shocking'. Als je nagaat dat een normaal databundel, in Nederland, zo rond de ~200MB ligt mag je heel wat websites gaan bezoeken. Mierenneuken over een paar KB vind ik zinloos.

Besparen op een paar KB's welke het doel hebben je het makkelijker te maken vind ik een kul argument. Je bent meer tijd om de bug zelf te vinden dan een bewezen library te gebruiken.

Als je al gebruik maakt van jQuery Mobile zit een aangepaste versie van jQuery UI er reeds bij in. Zie ook: http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.js voor een leesbare versie.

---

Maar goed, dit heeft niet veel met de TS zijn vraag te maken en wat mij betreft is het ook klaar.

[Rekcor]

Weet niet of je hier iets aan hebt, maar ik gebruik deze boilerplate regelmatig:

http://stefangabos.ro/jqu...in-boilerplate-revisited/

[Kiphaas7]

Manuel schreef op woensdag 05 september 2012 @ 12:08:
Eenmalig 15KB van je databundel noem ik alsnog niet echt 'shocking'. Als je nagaat dat een normaal databundel, in Nederland, zo rond de ~200MB ligt mag je heel wat websites gaan bezoeken. Mierenneuken over een paar KB vind ik zinloos.

Besparen op een paar KB's welke het doel hebben je het makkelijker te maken vind ik een kul argument. Je bent meer tijd om de bug zelf te vinden dan een bewezen library te gebruiken.

Als je al gebruik maakt van jQuery Mobile zit een aangepaste versie van jQuery UI er reeds bij in. Zie ook: http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.js voor een leesbare versie.

---

Maar goed, dit heeft niet veel met de TS zijn vraag te maken en wat mij betreft is het ook klaar.

Je blijft maar doorgaan over bandbreedte terwijl ik daar nog niet eens een punt van maak. Maar goed, laten we het hier maar bij houden.