understanding chained functions, how to return jquery-like the element itself, how avoid "... is not a function"

Question

Completely experimental and only for learning I am trying to reinvent the wheel, a wheel called jquery. The original purpose of doing that was to understand chainable functions. So I wrote a function which is doing this, and very well as far as I can see, like so: (a bit shortened)

var $ = function(s) {
    var el = document.querySelectorAll(s);

    var myobj = {
        addClass(className) {
            el.forEach(elem => {elem.classList.add(className)});
            return this;
        },
        toggleClass(className) {
            el.forEach(elem => {elem.classList.toggle(className)});
            return this;
        },
        removeClass(className) {
            el.forEach(elem => {elem.classList.remove(className)});
            return this;
        },
        html(html) {
            if (typeof html == 'string') {
                el.forEach(elem => {elem.innerHTML = html});
                return this;
            } else {
                return el[0].innerHTML;
            }
        }
    };

    return myobj;
};

(this is really a working example) Now I can use jquery-like syntax for manipulate classes and html of an element (or a node list of elements) like so: $('#test').html('new html content'); or chained like $('a').html('my new link').addClass('newclassname');, which is really cool.

For those who are interested, here's the complete script snapshot of today including css() and attr(), and including the missing jquery function id().

My questions are:

• [RESOLVED] How can I get this function to return jquery-like just the element itself like var elm = $('div#test');, now I am getting back the entire object.

• [RESOLVED] (plz. see comments below) How can I write a fallback function, to prevent getting error message like $(...).animate is not a function, if I am using a method which is currently not covered in this function, like $('div#test').addClass('newclass').animate({top:'2.3em',background:'red'});, since animate() isn't implemented at the moment. In php there is a __get() function, is there something similar in javascript ?

Please don't ask me for why I am doing this all, as I mentioned it's for learning and understanding

Thanks.

Answer 1

How can I get this function to return jquery-like just the element itself like var elm = $('div#test');, now I am getting back the entire object.

jQuery always gives you back an entire jQuery object. If you’re referring to how the methods you’ve defined (addClass, …) don’t appear with the object in the browser console, that’s achieved by sharing those properties with a prototype instead of creating a new set of functions for every object. ES6 classes are a convenient way to make constructors that allow you to define a prototype with methods and create objects that inherit from it:

class MyElementCollection {
    constructor(el) {
        this.el = el;
    }

    addClass(className) {
        this.el.forEach(elem => {elem.classList.add(className)});
        return this;
    }

    // ⋮
}

var $ = function(s) {
    var el = document.querySelectorAll(s);

    return new MyElementCollection(el);
};

Then if you want it to show up like an array on Firefox and have elements accessible by index $('div#test')[0] like jQuery does, you assign the elements to those indexes and give your collection a length:

class MyElementCollection {
    constructor(el) {
        el.forEach((elem, i) => {
            this[i] = elem;
        });

        this.length = el.length;
    }

    each(action) {
        for (let i = 0; i < this.length; i++) {
            action(this[i]);
        }
    }

    addClass(className) {
        this.each(elem => {elem.classList.add(className)});
        return this;
    }

    // ⋮
}

Then if you want it to show up like an array on Chrome, you do the weird hack (still applicable in 2019) of defining a splice method, even if it doesn’t do the same thing that it does on arrays… or do anything at all:

class MyElementCollection {
    // ⋮

    splice() {
        throw new Error('Not implemented');
    }
}

How can I write a fallback function, to prevent getting error message like $(...).animate is not a function, if I am using a method which is currently not covered in this function, like $('div#test').addClass('newclass').animate({top:'2.3em',background:'red'});, since animate() isn't implemented at the moment. In php there is a __get() function, is there something similar in javascript ?

You can do this with proxies in JavaScript, but I wouldn’t recommend it – it’s not very clean. (Your object will pretend to have all properties instead of just ones existing in jQuery that you haven’t implemented, and there won’t be a list of them to find on the prototype. Proxies also come with performance and understandability penalties.) Instead, consider assigning all the unimplemented stuff the same implementation:

class MyElementCollection {
    // ⋮
}

const notImplemented = () => {
    throw new Error('Not implemented');
};

['animate', …].forEach(name => {
    MyElementCollection.prototype[name] = notImplemented;
});

Answer 2

Have a look into the github repo of jquery. The relevant files are these:

https://github.com/jquery/jquery/blob/master/src/core.js

https://github.com/jquery/jquery/blob/master/src/core/init.js

jQuery does it's stuff in a more complicated way than I will do here, so this is just a basic explanation.

The jQuery function (and the $ alias of it) call new jQuery.fn.init(selector, root) in their function bodies. This creates a new jQuery collection (that's the term they use in the documentation) from the jQuery.prototype. That prototype has all the usual jQuery methods attached to it (like on, find, animate, etc.).

They do this:

function jQuery (selector, root) {
  return new jQuery.fn.init(selector, root);
}

jQuery.fn = jQuery.prototype = { /* skipped */ }

jQuery.fn.init = function (selector, root) { /* skipped */ }
jQuery.fn.init.prototype = jQuery.fn;

The key here is the last line, where they make the jQuery.prototype also being the prototype of jQuery.fn.init (don't get confused by fn, it's just another alias they use so they don't have to type prototype all the time).

When you scan the jQuery.fn.init constructor function, you'll notice they store all matched DOM elements by their index into the new collection. Simplified:

jQuery.fn.init = function (selector, root) {
  let elms = Array.from(root.querySelectorAll(selector));
  elms.forEach((el, index) => {
    this[index] = el;
  }, this);
}

They do alot more stuff under the hood, but this basically explains what a jQuery collection is: A custom type of object which partially looks like a NodeList but with a custom prototype which has all the jQuery methods attached to it.

This means, your first question is based on the wrong assumption: Using $('div#test') will return a jQuery collection with a single element. You'll never get the "raw" DOM node from jQuery.

As for your second question: You can use proxies for that.