[FRAGE] Eigene Library wie jQuery

[eBoy]

Hallo Zusammen,

ich habe zuletzt ein wenig mit diversen Hilfen im Internet eigene Klassen und kleine Funktionen geschrieben.

• Event Delegation
• Router
• PubSub

Nun würde ich diese gerne erweiterbar in eine eigene Klasse / Library zusammenführen.
Als Basis sollte eine Funktionalität wie bei jQuery stehen, die ja noch anhand diverser Beispiele sehr einfach nachzubilden ist.

• https://www.freecodecamp.org/news/h...nes-of-code-learn-about-the-dom-e9fb99dbc8d2/
• https://github.com/remy/min.js/blob/master/dist/$.js
• https://github.com/dciccale/ki.js/

Einiges habe ich damit auch schon experimentiert. Auch z.B. einen Proxy einzubauen, welcher mir hilft die Node Funktionalitäten direkt für die Nodelist verfügbar zu machen

$(selector).setAttribute(attr, val)

Nun kann man in JavaScript ja auf sehr vielen Wegen diese Library / Klasse aufbauen. Hier habe ich noch ein wenig meine Verständnisprobleme, spätestens wenn es an Plugins geht.

Im Prinzip soll

1. Ready Funtion vorhanden sein
2. das Objekt als Funktion nutzbar sein. Hierzu habe ich dann statt einer Klasse mit einer Funktion gearbeitet, welche ein Objekt zurückgibt
3. Die Methoden, welche auf die Nodelist angewendet werden können, als Plugins hinzugefügt werden können ("$(selector).<PLUGIN>")
4. Bereits initial Methoden auch direkt an das Objekt gebunden werden können ("$.<METHOD>")

Das meiste ist recht einfach nachzubauen oder zu übernehmen. Gibt es eine Möglichkeit das Objekt wie im letzten Punkt initial bereits zu erweitern? An dem Punkt hatte ich die meisten Probleme...
Das ganze darf auch gerne als "richtige Klasse" aufgebaut sein, welche man initial mittels "new" ein Objekt erstellt. Dadurch wäre die Variable nicht z.B. auf "$" festgenagelt und selbst zuordenbar, aber wichtig wäre halt, dass man sowohl das Objekt (<OBJECT>.<CORE_EXTENSION>) und auch die Funktionalitäten der Nodelist / Plugins (OBJECT(selector).plugin()) flexibel erweitern könnte.

Könnt ihr mir hier eine Grundstruktur empfehlen, welche initial ausgeführt und beide Punkte erweiterbar sind?

- - - Aktualisiert - - -

Also im Prinzip habe ich die gesuchte Funktionalität hier:

!function(namespace, document, window) {
    var
    /**
     * Shortcut
     */
    _toArray = Array.from,

    /**
     * Ready function
     */
    _Ready = (executeCodeOnReady) => document.addEventListener('DOMContentLoaded', executeCodeOnReady, {once: true}),
    
    /**
     * Simple query selector function
     */
    _Query = (selector) => selector.nodeType ? [selector] : document.querySelectorAll(selector),
    
    /**
     * Mapping calls to Nodelist and Plugins
     */
    _ProxyHandler = {
        set: (target, property, val) => {
            console.log('SET', target, property, val)
            if ($fnPlugins[property]) {
                console.log('SET', `CALL PLUGIN "${property}" with args:`, val, '\n!!! Maybe need to map to elements to simplify plugins or just unneeded here in SET???')
                return $fnPlugins[property].call(target, val)
            } else {
                console.log('SET', `MAP "${property}" to value:`, val);
                return _toArray(target).map(item => item[property] = val)
            }
        },
        get: (target, property, receiver) => {
            console.log('GET', target, property, receiver)
            if (typeof target[0][property] === 'function') {
                return (...args) => {
                    console.log('GET', `MAP CALL "${property}" with args:`, args);
                    return _toArray(target).map(node => node[property].call(node, ...args))
                }
            } else if ($fnPlugins[property]) {
                // execute plugin function from $_ handlers / plugins
                return (...args) => {
                    // ToDo: Map each node to plugin or let the plugin do the job?!
                    console.log('GET', `CALL PLUGIN "${property}" with args:`, args);
                    return $fnPlugins[property].call(target, ...args)
                }
            }
            console.log('GET', `MAP "${property}" values`);
            return _toArray(target).map(item => item[property])
        }
    },

    /**
     * Create Core Object
     */
    $jNode = (selector) => {
        return /^f/.test(typeof selector) ? _Ready(selector) : new Proxy($jNode.q(selector), _ProxyHandler) // new jNode(selector)
    },

    /**
     * Extend core functionality
     * $.plugin()
     */
    $jNode_Extend /*= window[namespace].extend */ = (extension, callback, target = window[namespace]) => {
        if (target.prototype) { 
            target.prototype[extension] = callback //Add the member for public access (when supported)
        }
        target[extension] = callback //Add the member for static access
    },

    /**
     * Plugins / jQuery like extendable Core methods based on returned nodelist "$(selector).plugin()"
     */
    $fnPlugins = {}

    /**
     * Self register jNode Core
     */
    $jNode_Extend(namespace, $jNode, window) 
    
    /**
     * Register Core methods
     */
    $jNode_Extend('fn', $fnPlugins)             // proxy plugin handler
    $jNode_Extend('extend', $jNode_Extend)      // Core extender
    $jNode_Extend('q', _Query)                  // expose _Query function to enable replace
}('$', document, window)

Aber da fehlt mir die Erfahrung und auf mich wirkt das sehr... "gebastelt"

Habe auch noch einen alternativen Ansatz begonnen, hier bekomme ich aber noch keine "Plugins" hinzugefügt runtime.

            $ = function(selector, callback = null, core = false) {
                function jQ(selector) { 
                    var nodelist = document.querySelectorAll(selector)
                    return {
                        nodelist: nodelist,
                        selector: selector,
                        html: (v) => {
                            console.log('val', v)
                            console.log('this', this)
                            console.log('selector', selector)
                            console.log('nodelist', nodelist)
                            return nodelist[0].innerHTML = v || nodelist[0].innerHTML
                        }
                    }
                }
                /**
                 * Extend Core!
                 * ToDo: nodelist functions
                 */
                if (callback != null) {
                    return core != false ? jQ.prototype.selector = callback : $[selector] = callback
                }
                /**
                 * DOM Ready part...
                 */
                if (/^f/.test(typeof selector)) {
                    return document.addEventListener('DOMContentLoaded', selector, {once: true})
                }
                /**
                 * Query selector and return nodelist methods...
                 */
                return new jQ(selector)
            }