Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: небольшой туториал по JavaScript

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
esterio
Отправлено: 10 Марта, 2015 - 17:01:41
Post Id



Активный участник


Покинул форум
Сообщений всего: 5025
Дата рег-ции: Нояб. 2012  
Откуда: Украина, Львов


Помог: 127 раз(а)
Решил все же написать небольшой туториал по JavaScript. А точнее несколько основных функций часто используемых в jQuery.

Наверное всех интересует что скрывается за магической функцией $. вот что
CODE (javascript):
скопировать код в буфер обмена
  1. function select(selector, context){
  2.         if(!selector)
  3.                 return [];
  4.  
  5.         if(selector === 'body' && !context && document.body)
  6.                 return [document.body];
  7.         else if(selector.nodeType)
  8.                 return [selector];
  9.         else if(typeof selector === 'string'){
  10.                 var context = context || document;
  11.                 return Array.prototype.slice.call(context.querySelectorAll(selector));
  12.         } else {
  13.                 return [];
  14.         }
  15. }


В результате мы получим массив из элементов. Использовать приблизительно можно так
select('#id .classname tagname');

Что же теперь имея набор элементов нужно его обойти. Для этого напишем нашу функцию each
CODE (javascript):
скопировать код в буфер обмена
  1. var each = (function(){
  2.         var foreach = Array.prototype.forEach || function (callback, thisArg) {
  3.                 var T, k;
  4.                 if (this == null) {
  5.                         throw new TypeError(' this is null or not defined');
  6.                 }
  7.                 var O = Object(this);
  8.                 var len = O.length >>> 0;
  9.                 if (typeof callback !== 'function') {
  10.                         throw new TypeError(callback + ' is not a function');
  11.                 }
  12.                 if (arguments.length > 1) {
  13.                         T = thisArg;
  14.                 }
  15.                 k = 0;
  16.                 while (k < len) {
  17.                         var kValue;
  18.                         if (k in O) {
  19.                                 kValue = O[k];
  20.                                 callback.call(T, kValue, k, O);
  21.                         }
  22.                         k++;
  23.                 }
  24.         };
  25.  
  26.         return function(array, callback){
  27.                 foreach.call(array, callback);
  28.         }
  29. })();


Вызов примерно такой
CODE (javascript):
скопировать код в буфер обмена
  1. each([1, 2, 3], function(val){
  2.         console.log(val)
  3. });


дальше нужно как-то вешать события на эти элементы. Но перед этим как описать функцию on я опишу проблему с получением объекта event в callback функции
CODE (javascript):
скопировать код в буфер обмена
  1. function fixEvent(e) {
  2.         e = e || window.event;
  3.         e.target = e.target || e.srcElement;
  4.  
  5.         if(!e.preventDefault) {
  6.                 e.preventDefault = function() {
  7.                         e.returnValue = false;
  8.                 }
  9.         }
  10.  
  11.         if(!e.stopPropagation) {
  12.                 e.stopPropagation = function() {
  13.                         e.cancelBubble = true;
  14.                 }
  15.         }
  16.  
  17.         return e;
  18. }


Данная функция в первую очередь предназначена для старых версий IE. Вот сама функция on
CODE (javascript):
скопировать код в буфер обмена
  1. function on(el, type, filter, callback) {
  2.         if(!callback){
  3.                 callback = filter;
  4.                 filter = false;
  5.         }
  6.  
  7.         var fn = function(event) {
  8.                 event = fixEvent(event);
  9.  
  10.                 var element = filter ? delegate(el, filter, event.target) : this;
  11.  
  12.                 if(element)
  13.                         callback.call(element, event);
  14.  
  15.                 delete element;
  16.         };
  17.  
  18.         if(document.addEventListener)
  19.                 el.addEventListener(type, fn, false);
  20.         else if(document.attachEvent)
  21.                 el.attachEvent('on' + type, fn);
  22.         else
  23.                 el['on' + type] = fn;
  24. }


Здесь есть еще один параметр filter для делегирования событий как в jQuery. Если его указать, то вызывается функция delegate. Вот ее код
CODE (javascript):
скопировать код в буфер обмена
  1. function delegate(el, filter, target){
  2.         var finded = el.querySelectorAll(filter);
  3.         var i, l = finded.length;
  4.         for(i = 0; i < l; i++) {
  5.                 if(finded[i].contains(target))
  6.                         return finded[i];
  7.         }
  8.  
  9.         return false;
  10. }


Пример вызова
CODE (javascript):
скопировать код в буфер обмена
  1. on(document, 'click', 'input', function(e){
  2.         e.preventDefault();
  3.         e.stopPropagation();
  4.  
  5.         console.log(e.value);
  6. });
  7.  

Функцию удаления элемента
CODE (javascript):
скопировать код в буфер обмена
  1. function remove(el) {
  2.         el.parentNode.removeChild(el);
  3. }
  4.  

Функция очистки элемента
CODE (javascript):
скопировать код в буфер обмена
  1. function empty(el) {
  2.         while(el.hasChildNodes()) {
  3.                 el.removeChild(el.lastChild);
  4.         }
  5. }


Вот 3 функции для работы с классом элемента. По названиям можно узнать что они выполняют
CODE (javascript):
скопировать код в буфер обмена
  1. function hasClass(el, name) {
  2.         if(el.classList) {
  3.                 return el.classList.contains(name);
  4.         } else {
  5.                 return new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)").test(el.className);
  6.         }
  7. }
  8.  
  9. function addClass(el, name) {
  10.         if(!hasClass(el, name)) {
  11.                 if (el.classList) {
  12.                         el.classList.add(name);
  13.                 } else {
  14.                         el.className = el.className ? [el.className, name].join(' ') : name;
  15.                 }
  16.         }
  17. }
  18.  
  19. function removeClass(el, name) {
  20.         if(hasClass(el, name)) {
  21.                 if (el.classList) {
  22.                         el.classList.remove(name);
  23.                 } else {
  24.                         var c = el.className;
  25.                         el.className = c.replace(new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)", "g"), "");
  26.                 }
  27.         }
  28. }


Довольно часто нужно обрабатывать data-* атрибуты. Вот простая функция которая умеет работать с ними
CODE (javascript):
скопировать код в буфер обмена
  1. function data(el, name, value){
  2.         if(typeof value != 'undefined')
  3.         {
  4.                 if(el.dataset)
  5.                         el.dataset[name] = value;
  6.                 else
  7.                         el.setAttribute('data-' + name, value);
  8.         }
  9.         else
  10.         {
  11.                 if(el.dataset)
  12.                         return el.dataset[name];
  13.                 else
  14.                         return el.getAttribute('data-' + name);
  15.         }
  16. }


Пример вызова
CODE (javascript):
скопировать код в буфер обмена
  1. data(el, 'value'); // получить значение
  2. data(el, 'value', 'test'); // задать значение


Также часто нужно получить отца элемента по селектору (функция closest)
CODE (javascript):
скопировать код в буфер обмена
  1. function matchesSelectorIe8(selector) {
  2.         var elems = this.parentNode.querySelectorAll(selector),
  3.                 count = elems.length;
  4.  
  5.         for(var i = 0; i < count; i++) {
  6.                 if(elems[i] === this) {
  7.                         return true;
  8.                 }
  9.         }
  10.  
  11.         return false;
  12. }
  13.  
  14. function closest(elem, selector) {
  15.  
  16.         var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector || matchesSelectorIe8;
  17.  
  18.         while(elem) {
  19.                 if(matchesSelector.call(elem, selector)) {
  20.                         return elem;
  21.                 } else {
  22.                         elem = elem.parentElement;
  23.                 }
  24.         }
  25.         return false;
  26. }


На данный момент все. Надеюсь кому-то пригодится
 
 Top
exlant
Отправлено: 10 Марта, 2015 - 17:40:32
Post Id



Посетитель


Покинул форум
Сообщений всего: 425
Дата рег-ции: Февр. 2015  


Помог: 14 раз(а)
Спасибо за статью, очень даже интересно!
 
 Top
nerv
Отправлено: 15 Июля, 2015 - 09:37:26
Post Id



Посетитель


Покинул форум
Сообщений всего: 407
Дата рег-ции: Февр. 2013  
Откуда: Россия


Помог: 9 раз(а)
esterio пишет:
Наверное всех интересует что скрывается за магической функцией $

1. не угадал
2. тех, кого интересует посмотрят на гитхабе https://github[dot]com/jquery/jquery[dot][dot][dot]core/init[dot]js#L16

кроме того http://forum.php.su/topic.php?fo...42197#1369042197

=)

(Отредактировано автором: 15 Июля, 2015 - 09:47:44)



-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
 
 Top
esterio
Отправлено: 15 Июля, 2015 - 12:29:45
Post Id



Активный участник


Покинул форум
Сообщений всего: 5025
Дата рег-ции: Нояб. 2012  
Откуда: Украина, Львов


Помог: 127 раз(а)
nerv
Когда я еще года так 2 примерно тому смотрел было попроще чем сейчас ибо не было grunt-а, это во первых. А во вторых моей целью было показать приблизительно что да как, а не тупо копипастить со всем что есть в багажнике JQ включая создание DOM на основание строкы. Здесь собран самый примитив для работы с событиями и DOM
 
 Top
nerv
Отправлено: 15 Июля, 2015 - 17:12:49
Post Id



Посетитель


Покинул форум
Сообщений всего: 407
Дата рег-ции: Февр. 2013  
Откуда: Россия


Помог: 9 раз(а)
esterio пишет:
было grunt-а, это во первых

к слову, сейчас все уже на gulp переходят ибо он поточный (быстрее+удобнее)

esterio пишет:
во вторых моей целью было показать приблизительно что да как

я понял это, поэтому говорю, что ты не показал:
1. jQuery(selector) ~> {HtmlElementCollection}
2. jQuery(function) -> document.ready(function)
3. jQuery(object) -> object[on|off|trigger] (минимум)


-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
 
 Top
esterio
Отправлено: 16 Июля, 2015 - 12:04:04
Post Id



Активный участник


Покинул форум
Сообщений всего: 5025
Дата рег-ции: Нояб. 2012  
Откуда: Украина, Львов


Помог: 127 раз(а)
nerv пишет:
1. jQuery(selector) ~> {HtmlElementCollection}
2. jQuery(function) -> document.ready(function)
3. jQuery(object) -> object[on|off|trigger] (минимум)

это я сознательно упустил
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Хранилище функций на JavaScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB