[JavaScript] JNode: JavaScript Framework

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Murdoc, 14. Oktober 2011 .

Schlagworte:
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 14. Oktober 2011
    JNode: JavaScript Framework

    Hallo Community,

    wie der ein oder andere vielleicht weiß, hatte ich angefangen ein JavaScript Framework zu erstellen, welches ohne den Ballast für veraltete Browser daher kommt.

    Ich habe diesen Gedanken weiter gesponnen und das ganze nochmal von Grund auf neu und ohne zusätzlichen Schnickschnack (Class, Sizzle usw.) erstellt.

    Die API des Frameworks lehnt ein wenig an Prototype an ($ -> id, $$ -> selector), doch ich habe keinerlei Features übernommen und den Quelltext aufs nötigste reduziert (im Gegensatz zum Vorgänger JHP).

    Minified kommt das Script aktuell auf 38kb, gzipped auf 11kb - es eignet sich also auch für Mobile Webpages.

    Nun aber zu euch: Jeder der will und kann darf mitarbeiten und seine Ideen mit einfließen lassen.


    Derzeit unterstützt wird:
    - CSS Transitions
    - Ajax + Upload/FormData, JSONP
    - Eventmanagment
    - DOM Manipulationen

    Unterstützte Browser:

    - Firefox 3.6+ / Seamonkey 2 / Fennec
    - Chrome / Safari 3.2+ / MobileWebkit
    - Opera 10.5+
    - MSIE 8+

    Firefox < 4, Seamonkey < 2.1 und MSIE unterstützen keine CSS-Transitions (Fallback nicht in Planung).

    Download
    http://murdoc.eu/jnode/jnode.js (source)
    raidrush-dev/JNode · GitHub (GitHub)

    Unittests
    http://murdoc.eu/jnode/test.html
    http://murdoc.eu/jnode/effects.html

    JSDoc
    http://murdoc.eu/jnode/jsdoc/

    Beispiele
    Eine CSS3 Slideshow
    Lightbox2 portiert nach JNode (Nicht ganz so flüssig wie sie sein könnte, liegt aber an der schnellen Portierung)


    Klassen:

    JNode
    Beinhaltet alle Methoden zum verarbeiten/manipulieren von DOM-Elementen.

    JEvent (JNode.Event)
    Beinhaltet alle Methoden die einem das Arbeiten mit events erleichtern sollen.

    JList (JNode.List)
    Ist eine art NodeList mit drei eigenen Methoden:
    - pluck() liefert eine bestimmte Eigenschaft aller gefundenen Nodes als Array zurück.
    - invoke() ruft eine bestimmte Methode aller gefundenen Nodes auf.
    - each() ruft für jedes gefundene Element die angegebene Funktion auf

    JRequest (JNode.Request)
    Ist ein Wrapper für AJAX/JSONP Anfragen (WIP)

    API:

    $(element [, element2 [ ... elementN ]])
    Erweitert Elemente/Events oder sucht nach Elementen anhand der id.

    Beispiel:
    Code:
    $("id").listen('click', function(event) {
     $(event).stop(); // event stoppen
    
     alert("yada yada yada");
    });
    Rückgabewerte:
    $("id") -> JNode
    $(element) -> JNode
    $(event) -> JEvent (JNode.Event)
    $("id1", "id2", "id3") -> JList (JNode.List)


    $$(css_selector [, context = document [, first = false ]])
    Such anhand eines CSS-Selectors nach Elementen und gibt diese in einer JList oder als JNode zurück.

    Beispiel:
    Code:
    $$("div.foo, div#bar").each(function(node) {
     alert(node.prop('tagName'));
    });
    Rückgabewerte:
    - $$("#id") oder $$("tagname#div") -> JNode (da ids nur einmal existieren)
    - $$("body"), $$("html"), $$("head"), $("title") -> JNode (da diese Elemente nur einmalig vorhanden sind)
    - $$("selector", null, true) -> JNode (da nur der erste Fund angefordert wurde)
    - sonstiges -> JList (JNode.List)
     

  2. Anzeige
    Dealz: stark reduzierte Angebote finden.
  3. #2 28. Oktober 2011
  4. #3 2. November 2011
    AW: JNode: JavaScript Framework

    updates:

    - CSS Keyframe Animation support via .morph() / .anim()
    - CSS-Transforms support in MSIE via .morph() / .anim() ohne transitions
    - classList polyfill in JNode.prototype
    - bugfixes

    Alpha2:
    - div. Code- & Speicher-optimierungen
    - Verhaltensänderungen bei bestimmten Methoden, die sonst auf Grund Ihrer unerwarteten Rückgabe
    (z.b.: `null` statt Array) vorhandenen Code unterbrechen würden.
     
  5. #4 3. November 2011
    AW: JNode: JavaScript Framework

    jsdoc online.

    fehlerhaftes englisch bitte entschuldigen. inline gibt man sich nicht so die mühe ^^
    ich werd die doku aber in zukunft in deutsch erstellen.

    http://murdoc.eu/jnode/jsdoc/
     
  6. #5 8. November 2011
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
  7. #6 8. November 2011
    AW: JNode: JavaScript Framework

    nein, ist gefixt.

    falsch:
    Code:
    this.node.insertAdjacentElement(convertPosition(pos). content);
    richtig:
    Code:
    this.node.insertAdjacentElement(convertPosition(pos), content);
    wer findet den fehler? und nicht auf github schummeln ;)
     
  8. #7 8. November 2011
    AW: JNode: JavaScript Framework

    Ich sehe tote Kommas .. oder Punkte? :D
     
  9. #8 10. November 2011
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    AW: JNode: JavaScript Framework

    version++

    updates:
    - ne menge bugs behoben
    - dim(), width() und height() hinzugefügt
    - effekte hinzugefügt
    - morph() flog raus
    - anim() api geändert
    - JNode.Query (QueryString) hinzugefügt
     

  10. Videos zum Thema
Die Seite wird geladen...
Similar Threads - JavaScript JNode JavaScript
  1. Antworten:
    0
    Aufrufe:
    3.686
  2. Antworten:
    6
    Aufrufe:
    2.955
  3. Antworten:
    2
    Aufrufe:
    1.104
  4. JavaScript Cookie Manager

    leex , 4. September 2015 , im Forum: Webentwicklung
    Antworten:
    2
    Aufrufe:
    1.237
  5. Antworten:
    9
    Aufrufe:
    1.401
  • Annonce

  • Annonce