[jQuery] Al mijn code herschrijven?

[Reveller]

Op mijn website gebruik ik een aantal scriptjes om clientside gegevens te valideren en om de layout wat te verfraaien. In de laatste categorie heb ik onder andere een scriptje dat de DOM doorloopt op fieldsets met class 'collapsible', zodat ik er een event aan kan hangen om de fieldset in/uit te klappen.

Een paar dagen geleden heb ik jQuery gedownload en ben er wat mee gaan rommelen. Mijn vraag is nu: moet ik deze code nu via jQuery API gaan herschrijven? En waar kan ik voorbeelden vinden van naar Query herschreven code?

JavaScript:

function collapseAutoAttach() {
  var fieldsets = document.getElementsByTagName('fieldset');
  var legend, fieldset;
  for (var i = 0; fieldset = fieldsets[i]; i++) {
    if (hasClass(fieldset, 'collapsible')) {
      legend = fieldset.getElementsByTagName('legend');
      legend = legend[0];
      var a = document.createElement('a');
      a.href = '#';
      a.onclick = function() {
        toggleClass(this.parentNode.parentNode, 'collapsed');
        toggleFieldSet(this.parentNode.parentNode);
        this.blur();
        return false;
      }
      a.innerHTML = legend.innerHTML;
      while (legend.hasChildNodes()) {
        removeNode(legend.childNodes[0]);
      }
      legend.appendChild(a);
      collapseEnsureErrorsVisible(fieldset);
    }
  }
}
 
function toggleFieldSet(node) {
  var legend = node.getElementsByTagName('legend');
  var field = legend[0].childNodes[0].childNodes[0].nodeValue;
  var expandedFieldSets = {};
  var cookiecontent = getCookie('expandedFieldSets');
  if (cookiecontent !== null) {
    var temp = cookiecontent.split(','), i = temp.length;
    while (i--) expandedFieldSets[temp[i]] = 1;
  }
  if (field in expandedFieldSets) delete(expandedFieldSets[field]);
  else expandedFieldSets[field] = 1;
  var temp = [];
  for (var fieldset in expandedFieldSets) {
    if (!Object.prototype[fieldset]) temp.push(fieldset);
  }
  setCookie('expandedFieldSets', temp.join(','));
}

function collapseEnsureErrorsVisible(fieldset) {
  if (hasClass(fieldset, 'collapsed')) {
    return;
  }
  var inputs = [];
  inputs = inputs.concat(fieldset.getElementsByTagName('input'));
  inputs = inputs.concat(fieldset.getElementsByTagName('textarea'));
  inputs = inputs.concat(fieldset.getElementsByTagName('select'));
  for (var j = 0; j<3; j++) {
    for (var i = 0; i < inputs[j].length; i++) {
      if (hasClass(inputs[j][i], 'error')) {
        return removeClass(fieldset, 'collapsed');
      }
    }
  }
}

addLoadEvent(collapseAutoAttach);

[Blaise]

Als het al werkt zou ik niks herschrijven. Scheelt hooguit een paar KB's, kost veel werk, en je hebt kans dat er fouten insluipen.

[Kiphaas7]

Je moet niks herschrijven, het zou enkel een probleem zijn als je een andere javascript library zou gebruiken zoals prototype die ook al $ gebruikt. Dan zou je noConflict moeten gebruiken.

Als je jQuery gaat gebruiken, zou ik het wel logisch vinden dat je code gaat herschrijven, anders voeg je de hele library voor niks toe...

Tsja, genoeg voorbeelden van jquery code op de jquery website, en als je zoekt met google.

http://docs.jquery.com/Main_Page
www.google.com

[Bosmonster]

De enige reden dat ik zoiets zou herschrijven is:

A. Als je tijd over hebt
B. Als je meer van jQuery wilt leren en een testcase wilt

Voor performance/bestandsgrootte is het vrij zinloos als je huidige code gewoon goed werkt xbrowser.

[_Thanatos_]

C. onderhoudbaarheid

die zou ik wel meerekenen.

[crisp]

_Thanatos_ schreef op vrijdag 14 november 2008 @ 11:20:
C. onderhoudbaarheid

die zou ik wel meerekenen.

Mwa, herschrijf het dan op het moment dat je onderhoud moet doen

hoewel ik jQuery's chaining niet echt praktisch/leesbaar vind mbt onderhoud...

[_Thanatos_]

crisp schreef op vrijdag 14 november 2008 @ 11:30:
[...]

Mwa, herschrijf het dan op het moment dat je onderhoud moet doen

hoewel ik jQuery's chaining niet echt praktisch/leesbaar vind mbt onderhoud...

Kan zijn dat het dan al te laat is. Dat je dan opnieuw moet gaan verzinnen wat het ook al weer deed. Het minste wat je dan dus gedaan moet hebben, is een regeltje commentaar bij huge-ass functies, dat uitlegt wat jij als devver vindt dat die functie doet en/of zou moeten doen.

En als je jQuery niet praktisch vindt, dan moet je het natuurlijk niet gebruiken. Maar je kunt bijna niet ontkennen dat het minstens íets handiger is dan traditionele scripts zoals die van de TS

[crisp]

_Thanatos_ schreef op zaterdag 15 november 2008 @ 00:36:
[...]
En als je jQuery niet praktisch vindt, dan moet je het natuurlijk niet gebruiken. Maar je kunt bijna niet ontkennen dat het minstens íets handiger is dan traditionele scripts zoals die van de TS

TS heeft blijkbaar ook nog geen uitgebreide eigen toolkit

[Reveller]

crisp schreef op zaterdag 15 november 2008 @ 01:44:
[...]

TS heeft blijkbaar ook nog geen uitgebreide eigen toolkit

Een kleine idd, voor AJAX calls, wat DOM dingetjes, maar niet meer dan 300 lijnen bij elkaar...dus dan toch maar herschrijven, in de hoop dat deze keuze nu wat tijd kost, maar me in de toekomst een hoop tijd gaat opleveren. Na een hoop gepruts / lezen / voorbeelden bekijken, heb ik onderstaande code weten te vervangen door een eenvoudige jQuery functie:

JavaScript:

function addCaptionsToImages() {
  wrapImagesInDiv('snapshot', [], ['float']);
}

function wrapImagesInDiv(className, attributes, styles) {
  var images = document.getElementsByClassName(className);
  for (var i = 0; i < images.length; ++i ) {
    var img = images[i];
    var parent = img.parentNode;
    var frame = document.createElement('div');
    var txt = document.createTextNode(img.getAttribute('title'));

    parent.insertBefore(frame, img);
    parent.removeChild(img);
    frame.appendChild(img);
    frame.appendChild(txt);

    frame.style.width = img.width + 'px';
    frame.className = img.className;

    for (var j = 0; j < attributes.length; ++j) {
      frame.setAttribute(attributes[j], img.getAttribute(attributes[j]));
    }
    for (var j = 0; j < styles.length; ++j) {
      frame.style[styles[j]] = img.style[styles[j]];
    }
  }
}

addLoadEvent(addCaptionsToImages);

Alleen: de variabele width is 0 (logo.gif bestaat), weet iemand waarom?

HTML:

  <html>
  <head>
    <script type="text/javascript" src="jquery-1.2.6.js"></script>
    <script>
    $(document).ready(function(){
      $("img.caption").each(function(i) {
        var width  = $(this).width();
        var title  = $(this).attr('title');
        var align  = $(this).attr('align');
        $(this).wrap("<div class=\"image-caption-container\" style=\"float:" + align + "\"></div>");
        $(this).parent().width(width);
        $(this).parent().append("<div class=\"image-caption\">" + title + "</div>");
      });
    });
    </script>
  </head>
  <body>
    <img src="logo.gif" class="caption" title="scripting like a rockstar">
  </body>
  </html>

[ Voor 37% gewijzigd door Reveller op 15-11-2008 14:49 ]

[Verwijderd]

Reveller schreef op zaterdag 15 november 2008 @ 14:17:
Alleen: de variabele width is 0 (logo.gif bestaat), weet iemand waarom?

Ik vermoed dat de $(document).ready() wordt afgevuurd voor de IMG is ingeladen, itt een window.onload event. Probeer eens $(document).load(...).

[Reveller]

Verwijderd schreef op zaterdag 15 november 2008 @ 18:22:
[...]

Ik vermoed dat de $(document).ready() wordt afgevuurd voor de IMG is ingeladen, itt een window.onload event. Probeer eens $(document).load(...).

Blues, bedankt! $(window).load() werkt perfect. $(document).ready() werkte, zag ik zojuist, ook wel, maar alleen als de width property in de img-tag expliciet gezet is.

Dan heb ik nog een vraag. In mijn library(tje) heb ik een hoop kleine functies, zoals hieronder. Kan ik die, en zo ja kan iemand bij 1 van die functies een voorbeeld geven, herschrijven zodat ze beter geintegreerd raken met jQuery? Moet ik bv. op een andere manier de functie aanmaken?

JavaScript:

function select_goto(obj, base_url) {
  var selected = obj.options[obj.selectedIndex].value, url = '';
  url = (selected == 'ignore') ? base_url : base_url + '?type=' + selected;
  document.location.href = BASE_HREF + url;
}

function limitChars(obj) {
  obj.value = obj.value.replace(/[^-a-z0-9_]/ig,'');
  obj.value = obj.value.toLowerCase();
}

function arg(index) {
  var url = String(document.location).split("//");
  var pad = url[1].split("?");
  var arg = pad[0].split("/");

  return arg[index];
}

[zwippie]

Ik denk dat je dan het beste plugins kan maken, bijvoorbeeld eentje met al je string functies.
Zie: http://docs.jquery.com/Plugins/Authoring

Je functie

JavaScript:

function limitChars(obj) {
  obj.value = obj.value.replace(/[^-a-z0-9_]/ig,'');
  obj.value = obj.value.toLowerCase();
} 

zou dan worden (niet getest)

JavaScript:

jQuery.fn.limitChars = function() {
  return this.each(function(){
    (this).value = (this).value.replace(/[^-a-z0-9_]/ig,'');
    (this).value = (this).value.toLowerCase();
  });
};

zodat je

JavaScript:

$("div p").limitChars();

kan doen.
Zoals gezegd niet getest, maar ik vermoed dat dit de juiste aanpak is.

[Reveller]

@zwippie, wat toevallig...ging net naar GoT om mijn eigen oplossing te posten...iets anders dan de jouwe maar werkt ook Thanks!

JavaScript:

$(document).ready(function() {
  $("input.alnum").bind('keypress', function() {
    $(this).val($(this).val().toLowerCase().replace(/[^-a-z0-9_]/ig, ''));
  });
});

Nog een andere vraag. Ik gebruik nu het volgende:

JavaScript:

var base = document.getElementsByTagName("base");
var BASE_HREF = base[0].href;

function select_goto(obj, base_url) {
  var selected = obj.options[obj.selectedIndex].value, url = '';
  url = (selected == 'ignore') ? base_url : base_url + '?type=' + selected;
  document.location.href = BASE_HREF + url;
}

...met bijvoorbeeld...

HTML:

<select class="select goto" name="type" onchange="select_goto(this, 'admin/content')">
  <option value="ignore">kies...</option>
  <option value="foo">naar daar</option>
  <option value="bar">naar hier</option>
</select>

Ik wil nu ook dit unobtrusive maken, maar elke select heeft een andere url waar naar gesubmit moet worden (hier: "admin/content"). Hoe kan ik dit oplossen? Is het toegestaan / best practice om een eigen attribuut te verzinnen, bijvoorbeeld:

HTML:

<select class="select goto" url="admin/content">

... met iets als ...

JavaScript:

$(document).ready(function() {
  $("select.goto").change(function() {
    var selected = $("select option:selected").text();
    var url = (selected == 'ignore') ? base_url : base_url + selected;
    document.location.href = BASE_HREF + url;
  });
});

Graag jullie ideeen hiervoor!