jQuery изнутри. Делаем селектор $, замыкание, $.css

На самом деле jQuery это просто набор функции Javascript, предоставленных в особом виде (с помощью функции $, jQuery). Так всеми любимый селектор происходит из стандартной javascript-функции document.querySelectorAll("div") Если Вы не знаете, что такое замыкание, то почитайте статью она может помочь. Обработчика CSS-селектора aka наша главная функция:

function myLib (arg){
    if(typeof arg=="string"){
        //превращает полученные объекты в массив и возвращает в собственную функцию
        return new myLib(Array.prototype.slice.call(document.querySelectorAll(arg)));
    }
    //обрабатывает массив объектов, записывает их 
    //в результирующий массив в удобном виде
    if(typeof arg!="string" && typeof arg!="undefined"){
      for(var i in arg){
          this[i]=arg[i];
      }
      //устанавлиевается для обработки полученного результата
      this.objects=arg;
      //сохраняется для удобного прохождение 
      //результата с помощью for (i=0; i<n; i++) 
      this.length=arg.length;
    }
    this.updateEnum();
    return this;
}

Это главная функция, она служит для обработки входящих jQuery запросов и превращает найденные элементы в массив. В прототипе храним функции и свойства для нашей библиотеки. Они наследуются при объявлении. При прохождении массива, объекты берутся из "специального" свойства "this.objects", DOM-элементы в которую заносятся в селекторе.

myLib.prototype=new function (arg){
  //обработка объектов функцией css
  this.css=function(a,b
    //Если !b, то есть если 1 аргумент
    if(!b){ 
        return eval("this.objects[0].style."+a);
    }else{
        //Иначе 2 аргумента
        for(var i in this.objects){
            eval("this.objects["+i+"].style."+a+"='"+b+"';");
        }
    }
    return this;
  } 
                                             
  //toArray возвращает обычным массивом все объекты 
  //(функция для примера)
  this.toArray=function(){return this.objects;}
  this.objects=[];
  this.length=0;
                                             
 //splice объявляется для того, чтобы в консоли
 //результат работы функции выдавался как массив
 //хотя на самом деле это другой объект
  this.splice=function(){};
                                             
  this.updateEnum=function(){
  for(var i in this){
    //изменение enumerable, для того, что for не проходил
    //по ненужным элементам возвращаемого объекта
    if(i*1!=i)
      Object.defineProperty(this, i, {
        value: this[i],
        enumerable: false,
        writable: false,
        configurable: false
      });
    }
  }
};

Оболочка нашей библиотеки _ Как селектор $ для jQuery Наш селектор будет вызываться с помощью _("#element-id") , например

1	`var` `_ =` `function` `(arg){` `return` `new` `myLib(arg); }`

Вызов нашей библиотеки выглядит следующим образом:

<font color="#000000">//получим "массив" c единственным объектом <div id='test-lib'></div>
_("#test-lib")
 
//применим пару css-свойств
_("#test-lib").css("padding","25px").css("background","#f00");
 
//проверим наш самописный "getter"
_("#test-lib")[0].innerHTML+="<br>padding of this = "+_("#test-lib").css("padding");</font><br>

Тест работы библиотеки по клику.
onclick='_("#test-lib").css("padding",Math.random()*50+"px").css("background","#aaf")'

Рисунок 1. Результат

Таким образом можно дорабатывать и пополнять библиотеку новыми функциями. Прицип работы с этим инструментом очень схож с jQuery. p.s. На фото селфи Curosity с Марса
Спасибо за внимание.

Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Рисование и вращение изображения в Canvas Блог на ReactJS #3. Redux, Middleware, json-server, fetch Плавная прокрутка страницы (scroll). jQuery Javascript Paint с использованием Canvas Циклы и перебирающие методы в JavaScript