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

Обращение к элементам объекта как к элементам массива

Здравствуйте, сегодня поговорим о том, как можно обратится к элементам объекта кроме как стандартного варианта:

object = {
   myVar: 'myValue'
}

alert(object.myVar);

Но кроме этого варианта, можно еще и по другому обращаться.
К элементам объекта можно еще обращаться так же как и к элементам массива:

object = {
   myVar: 'myValue'
}

alert(object['myVar']);

Вот так :)

Для чего это может понадобится ?
Часто может быть когда к элементам страницы нужно обратится не зная заранее значение.
Вот пример:

<img name="name1" src="src1" /> <br />
<img name="name2" src="src2" /> <br />
<img name="name3" src="src3" /> <br />
<img name="name4" src="src4" /> <br />
<img name="name5" src="src5" /> <br />

К примеру нужно всем этим картинка изменить параметр src (предполагается что картинок может быть больше).  Мы можем сделать цикл и к имени добавлять цифры: 1, 2, 3, 4, 5 и т.д.

И вот для того что бы обратится к элементу мы и будем к объекту document обращаться как к массиву:

for(i=1;i<=5;i++) {
   name = 'name'+i;
   document[name].src= 'clear.png';
}

Вот так мы можем динамически генерировать имена, и потом к ним обращаться.
Так же про это и написано еще и в статье "Как вызвать функцию по имени или вызов функции используя объект window"


Ну вот примерно и все. Желаю удачи вам в разработке.

Переменное количество аргументов в функции или что такое arguments

Рано или поздно у новичков появляется задача, создать функцию с переменным количеством аргументов, и они задаются вопросами типа:

• "Как создать функцию с переменным количеством аргументов"
• "Как создать функцию с необязательными параметрами"
• и так далее, и тому подобные вопросы :)

В каждой функции есть переменная под именем arguments. Именно с помощью этой переменной мы можем обратится ко всем аргументам переданных функции.

Вот простой пример:

function myFunc() {
   alert(arguments[0]);
   alert(arguments[1]);
   alert(arguments[2]);
}

myFunc(1, 2, 3);

Мы передали функции 3 аргумента и с помощью переменной arguments отобразили их в alert-сообщении.

При описании функции не обязательно указывать имена аргументам.
Так же переменная arguments содержит метод length. С помощью данного метода мы можем узнать сколько аргументов было передано функции.

Вот пример, функция отображает сумму всех переданных ей аргументов:

function sum() {
   var summa = 0;
   for(i=0; i < arguments.length; i++)
      summa += arguments[i];
   alert('Сумма всех аргументов: '+summa);
}

sum(1, 3, 22, 55, 107, 39);

Ну вот примерно и все.