Пишем свой 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);

Пишем свой Javascript Фреймворк.

Здравствуйте,
И так, я не так уж и много статей видел в интернете о том как создать свой фреймворк в Javascript, и поэтому хочу начать свой цикл статей в которых мы будем постепенно создавать свой фреймворк.
Наш фреймворк будет аналогом известного фреймворка JQuery. Конечно же копией JQuery это не будет (не факт даже что будет полностью кроссбраузерный), так как суть будет просто в том что бы представить как можно создать похожий собственный фреймворк. Ну а дальше если у вас будет необходимость в создании собственного фреймворка, то вы уже сами сможете довести его до ума.

Приступим.
1. Как работает поиск элементов в JQuery
Насколько известно JQuery использует движок селекторов под названием Sizzle
Кстати: Движок Sizzle и JQuery имеют одного автора (John Resig)

Мы тоже будем использовать  этот движок. Поэтому перейдите на сайт sizzlejs.com и скачайте себе этот движок. Скачав движок подключите его к вашей странички. Теперь создайте один JS файл и назовите его к примеру framework.js И его тоже подключите к страничке (страничку назовем index.html)

Вот как должна выглядеть index.html:

<html>
<head>
<script type="text/javascript" src="sizzle.js"></script>
<script type="text/javascript" src="framework.js"></script>
</head>
<body>
</body>
</html>

Все, дальше мы будем работать исключительно с файлом framework.js, а index.html нам нужна будет для тестирования функций фреймворка.

На этом первый урок закончен,  в следующем уроке мы создадим функцию для получения элементов, и класс нашего фреймворка.