如何创建带有附加功能的jQuery选择器？

Question

I am trying to understand how to work jQuery and other libraries. I would like to know how to create a selector with this format:

$("#selector").get(); 

By the moment, I am trying the next, but i don't know how to run internal functions (get(), set()):

var $ = (function() {

    var jQuery = {
        get: function() {
            console.log("get() function!!");
            return this;
        },
        set: function() {
            console.log("set() function!!");
            return this;
        }
    };

    return function(el) {
        return document.querySelector(el);
    }       
})();

I have read something about modular pattern design in JavaScript, but I don't understand all.

Answer 1

The way to make chainable functions, is to first and foremost create instances with the new keyword.

This can be done "automatically" by making sure the this value of the called function is an instance of itself, if not explicitly call it with new .

Then it's just a matter of returning the instance and using prototyped methods.

 var $ = function(selector) { if (! (this instanceof $) ) { return new $(selector); } this.el = document.querySelectorAll(selector); return this; } $.prototype.css = function(prop, val) { this.el.forEach(function(element) { element.style[prop] = val; }); return this; } $('#test').css('color', 'red').css('font-size', '30px') 

 <div id="test">test</div> 

Answer 2

const $ = function(selector) {
    if (!(this instanceof $)) {
        return new $(selector);
    };
    this.el = document.querySelectorAll(selector);
};
$.prototype.css = function(obj) {
    this.el.forEach(function(element) {
        element.style[Object.keys(obj)[0]] = Object.values(obj);
    });
};
$.prototype.click = function(callback) {
    this.el.forEach(function(element) {
        element.addEventListener('click', callback, false);
    });
};

Answer 3

jQuery this or $(selector) is array like [div, div] not object {el: [div, div]} , so its not using this.el to modified the elements, here simplified version

 if (window.$ === undefined) window.$ = (function () { var $, fun = {}, emptyArray = []; function Z(dom, selector) { var i, len = dom ? dom.length : 0; for (i = 0; i < len; i++) this[i] = dom[i]; this.length = len; this.selector = selector || ''; } fun.Z = function (dom, selector) {return new Z(dom, selector);}; fun.init = function (selector, context) { if (!selector) return fun.Z(); var dom = document.querySelectorAll(selector); return fun.Z(dom, selector); }; Z.prototype = { splice: emptyArray.splice, forEach: emptyArray.forEach, html: function (str) { return this.forEach(function (el) { el.innerHTML = str; }); }, css: function(obj, value){ if(typeof obj == 'object'){ // like: .css({background: 'red'}) for(var k in obj){ return this.forEach(function (el) { el.style[k] = obj[k]; }); } } else{ // called: .css('background', 'red') return this.forEach(function (el) { el.style[obj] = value; }); } } }; $ = function (sel, ctx) {return fun.init(sel, ctx); }; return $; })(); 

 <div class="test"> AAAA </div> <div class="test"> BBBB </div> <button onclick="$('.test').css({background: 'red'})">red</button> <button onclick="$('.test').css('background', 'blue')">blue</button> <br /> <button onclick="console.log($('.test'))">log to console</button>