SynDOM


Projektkategorie(n): , ,

Beschreibung

SynDOM ist ein JavaScript Framework für einfache DOM Operationen, Event Handling, simple Animationen (durch requestAnimationFrame [MDN Artikel]), Ajax und eine rudimentäre Implementierung eines Module Loaders (ohne Abhängigkeiten).

Es entstand durch meine Arbeit bei Synlight für eine einfache, kleine Alternative zu jQuery (SynDOM ist ungefähr 1,5KB groß, gzipped, jQuery 2.1.3 immerhin 28.87KB [Quelle]). Es sollte weniger eine Konkurrenz, als vielmehr eine Alternative zu jQuery für kleine Projekte werden.

Features

  • Kleiner 1,5KB gzipped
  • DOM Elemente auswählen
  • Events binden
  • Manipulieren von CSS-Klassen
  • DOM Operationen
  • DOM-Elemente animieren
  • Ajax
  • Einfacher Module Loader

Auszug aus dem Quellcode von SynDOM

Umsetzung

Geschrieben in ES5 und dem Build-Prozess per Grunt ist es eine Alternative zu den „großen“ für kleine Webseiten und WebApps.

Inspiriert durch salt.js ist in SynDOM noch ein Caching für Selektoren sowie die Möglichkeit eines Selektorkontext enthalten.

Beispiele

Hier eine kleine Auswahl an Möglichkeiten mit SynDOM.

DOM-Elemente selektieren

S('#idName');
S('.className');
S('.className .anotherClass');
S('.className:first-child');
S('a[data-url]');

Kontext

// Kontext holen
var myContext = S('#wrapper');

// Kontext übergeben
var rows = S('.rows', myContext);

// Cache leeren
S.flush();

Klassen manipulieren

var el = S('.element');

S.addClass(el, 'class1');
S.addClass(el, ['class2', 'class3']);

S.removeClass(el, 'class2');

S.addClass([el, S('#ele2')], 'my-class');

Elemente verändern

var el = S('#myElement');

var value = S.attr(el, 'attrName'); // Attributwert erhalten

S.attr(el, 'id', 'value'); // Attributwert setzen

S.remove(el); // Element entfernen

Events

var elList = [
    S('input'),
    S('textarea'),
    S('select')
];

S.on(elList, 'focus', function (event) {
    // ...
});

Module laden

S.require.config({
    basePath: 'js/'
});

S.require('lib/myScript'); // Läd die Datei js/lib/myScript.js

Ausprobieren

Wer es sich selbst mal ansehen möchte findet das Projekt auf GitHub: https://github.com/MartinHelmut/SynDOM

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.