Нативный JS -->> jQuery (подборка методов)

Вопрос-ответ JavaScript
1

Для более быстрого и легкого перехода с написания кода на нативном JS на jQuery будет полезна поборка таких методов JS и их альтернатив в jQuery.

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

Несмотря на схожесть метод с нативными не следует забывать о кроссбраузерности библиотеки.

##Работа с элементами DOM

// методы для работы с DOM
el.innerHTML         ->          $(el).html();

el.textContent         ->          $(el).text();

el === otherEl          ->         $(el).is($(otherEl)

el.nextElementSibling         ->         $(el).next();

el.offsetHeight          ->         $(el).outerHeight();

el.parentNode         ->         $(el).parent();

// ...
var position = { left: el.offsetLeft,  
                 top: el.offsetTop }; 
                                  ->     $(el).position();

parent.insertBefore(el,parent.firstChild);  ->  
  ->   $(parent).prepend(el);

// ...
el.previousElementSibling          ->         $(el).prev();

el.parentNode.removeChild(el);          ->       $(el).remove();

// ...
el.outerHTML= string;          ->         $(el).replaceWith(string);

el.setAttribute('tabindex', 3);       ->      $(el).attr('tabindex', 3);

// ...
el.innerHTML= string;       ->       $(el).html(string);

el.style.borderWidth = '20px';        ->      
       ->      (el).css('border-width', '20px');

el.textContent = string;       ->      $(el).text(string);

##Работа с событиями

// навешивание обработчика
//...
el.addEventListener(eventName, eventHandler);       ->      
       ->      $(el).on(eventName, eventHandler);

el.removeEventListener(eventName,eventHandler);       ->      
       ->      $(el).off(eventName,eventHandler);

//binding context
fn.bind(context);       ->      $.proxy(fn,context);

##Utilits

// перебор массива
array.forEach(function (item, i) {});    ->   
       ->      $.each(array,function (i, item) {});

array.map(function (value, index) { });    ->   
    ->   $.map(arrayfunction (value, index) {});

// поиск элемента в массиве
array.indexOf(item);          ->        $.inArray(item,array);

Array.isArray(arr);          ->        $.isArray(arr);

// получение текущего времени
Date.now();          ->        $.now();

// распарсим строку
JSON.parse(string);          ->        $.parseJSON(string);

//избавимся от пробелов вначал и конце строки
string.trim();          ->        $.trim(string);
11 лайков
2

Еще в тему:

// Создание элемента
document.createElement('div');
$('<div>');

// Добавление класса
div.className += ' active';
$div.addClass('active');

// Скрытие элемента
div.style.display = 'none';
$div.hide();

// Удаление элемента
div.parentNode.removeChild(div);
$div.remove();
3 лайка
3

Я, может быть, сейчас напишу тут глупостей, но есть ли способ перевести код с использованием jQuery или Underscore или любой другой библиотеки на ванильный JS? Просто если использовать по паре функций из каждой либы, то вряд ли есть смысл грузить полные либы, а вытянуть только нужные функции из файла не выглядит очень уж сложной задачей.
Можно ли сделать такую проверку: если jQuery есть в кэшах то грузить из кэшей, иначе не даунлоадить ничего, а использовать свой “огрызок” jQuery без недостижимого кода?
С учётом того, что скачать много файлов немного дороже чем один но большой (на уровне дисковой подсистемы похожая петрушка), может быть есть смысл держать большую кучу файлов в деве, а на прод выкатывать один-единственный убер-документ со всем-превсем?

4

Самое простое (тут должны быть кавычки), что можно сделать - попробовать прогнать код нужной функции через closurecompiler с самой агрессивной стратегией минификации, и надеяться, что компайлер уберет весь “мертвый код”. Я сомневаюсь в успешности подобного мероприятия, потому что внутри библиотеки код завязан и оптимизирован под работу в тандеме с другими методами (как приватными, так и публичными).

Возможность проверить статус кеша нет. Думаю, что идея не жизнеспособна. Но это только мои мысли.

Именно так и делается. Ключевые слова по теме: grunt, gulp, commonjs, requirejs, browserify, closure compiler.

1 лайк