Пишем свой Javascript Фреймворк (Урок 2)

И так, в прошлом уроке мы подготовили файлы, подключили движок селекторов.
Теперь же мы должны приступить к созданию функции для поиска элементов, ну и непосредственно сам объект нашего фреймворка.
Откройте файл framework.js,  в нем мы и будем писать весь код нашего фреймворка.
Напишите в файле следующее:

(function(window) {

})(window);

Тут мы создаем исполняемую функцию, в которой и будет описываться наш фреймворк.
Далее мы создадим функцию которая будет возвращать объект фреймворка. Назовем ее так же как и в JQuery - $ (знак доллара).

(function(window) {
     function $( selector, context ) {
          return new walik(selector, context);
     }
})(window);

Функция ничего не делает кроме как просто возвращает объект фреймворка (в моем случае объект называется - walik. Вы же можете назвать его по своему)
В объект передается два параметра, это селектор, и контекст в котором нужно искать.
И так давайте создадим наш объект:

function walik(selector, context) {
     this.length = 0;
     if ( !selector ) {
          this.el = [];
          return this;
     }
     if (selector === 'body' && !context && document.body) {
          this.selector = selector;
          this.context = document;
          this.el = document.body;
          this.length = 1;
          return this;
     } else if ( selector.nodeType ) {
          this.context = this.el = selector;
          this.length = 1;
          return this;
     } else if (typeof selector === 'string') {
          this.context = context || document;
          this.selector = selector;
          this.el = Sizzle(selector, this.context);
          this.length = this.el.length;
          if (this.length == 1)
               this.el = this.el[0];
          return this;
     } else if (typeof selector == 'function')
          this.ready(selector);
     else return null;
}

И так, что же мы тут понаписали

В текущем объекте создаем свойство length и присваиваем ему значение ноль. Это свойство будет хранить в себе количество полученных элементов
this.length = 0;

Дальше мы проверяем селектор на наличие,  если селектора нет, то и поиск не делаем. Свойство el будет хранить в себе элемент или массив элементов (если их больше 1-го). Если селектора нет, то свойство будет пустым. И возвращаем пустой объект (без элементов).

if ( !selector ) {
     this.el = [];
     return this;
}

Если же селектор все же есть, проверяем его содержимое, и если оно равно строчке "body" и контекст не указан, и мы так же имеем доступ к объекту документа document.body, то мы возвращаем тело текущего документа.
Свойство selector сохраняет строку по которому был произведен поиск.
Свойство context сохраняет ссылку на document
Свойство el получает само тело документа (то что и выбирали)
И свойство length получает значение - 1 (единицу)  Так как мы получили только один элемент.

if (selector === 'body' && !context && document.body) {
     this.selector = selector;
     this.context = document;
     this.el = document.body;
     this.length = 1;
     return this;
}

Если же в качестве селектора передается HTML объект, то длину объектов указываем - 1 (единицу),  в качестве контекста (context), селектора (selector) и элемента (el) будет передаваемый объект.

else if ( selector.nodeType ) {
     this.context = this.el = selector;
     this.length = 1;
     return this;
}

Если же передается просто строка в качестве селектора, то мы обращаемся к движку Sizzle для получения списка объектов по запросу,  передавая ему строку селектор и контекст поиска.
Sizzle вернет нам массив элементов. Свойству length мы присваиваем количество найденных элементов. Если был найден только один элемент, то мы свойству el  присваиваем найденный объект.

else if (typeof selector === 'string') {
     this.context = context || document;
     this.selector = selector;
     this.el = Sizzle(selector, this.context);
     this.length = this.el.length;
     if (this.length == 1)
          this.el = this.el[0];
     return this;
}

Если в качестве селектора передается функция, то тогда мы обращаемся к методу ready нашего объекта (этот метод мы создадим потом).
Иначе возвращаем пустой объект.

else if (typeof selector == 'function')
     this.ready(selector);
else return null;

Ну вот примерно и все. В этом уроке мы создали объект, который ищет элементы, и возвращает свой экземпляр. В следующих уроках мы начнем пополнять объект своими методами.

Вот текущий листинг файла framework.js:

(function(window) {
     function $( selector, context ) {
          return new walik(selector, context);
     }

     function walik(selector, context) {
          this.length = 0;
          if ( !selector ) {
               this.el = [];
               return this;
          }
          if (selector === 'body' && !context && document.body) {
               this.selector = selector;
               this.context = document;
               this.el = document.body;
               this.length = 1;
               return this;
          } else if ( selector.nodeType ) {
               this.context = this.el = selector;
               this.length = 1;
               return this;
          } else if (typeof selector === 'string') {
               this.context = context || document;
               this.selector = selector;
               this.el = Sizzle(selector, this.context);
               this.length = this.el.length;
               if (this.length == 1)
                    this.el = this.el[0];
               return this;
          } else if (typeof selector == 'function')
               this.ready(selector);
          else return null;
     }
})(window);