Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 68
Спасибо! Очень интересно! map более удобаня замена Each :)
А уж в ECMAScript 6…
Я наверное не понял Вашей аллегории,
и возможно заблуждаюсь насчет jquery
Разве разница между map и each в Jquery не только в том
что map возвращает новый объект
а each исходный?
и возможно заблуждаюсь насчет jquery
Разве разница между map и each в Jquery не только в том
что map возвращает новый объект
а each исходный?
У них разные цели.
Map позволяет создать новый объект с изменёнными данными (на основе прежних).
Each позволяет просто пройтись по объекту.
Map позволяет создать новый объект с изменёнными данными (на основе прежних).
Each позволяет просто пройтись по объекту.
Согласен с Keyten. Более того, они не совсем взаимоменяемые.
В таком примере нельзя each заменить на map. Потому map это не «более удобаня замена Each», а другой метод с другим предназначением.
var $a = $('a');
$a
.each(function () {
this.prop = 123;
})
.click( activate )
В таком примере нельзя each заменить на map. Потому map это не «более удобаня замена Each», а другой метод с другим предназначением.
Нельзя потому что map возвращает новый объект.
Об этом я писал выше.
Об этом я писал выше.
Этот each вообще не имеет отношения к сабжу. Это другой метод.
api.jquery.com/each/ — сабжевый
api.jquery.com/jQuery.each/ — ваш
api.jquery.com/each/ — сабжевый
api.jquery.com/jQuery.each/ — ваш
так а чем же $.map отличается от Array.map?
Array.map не во всех браузерах работает, jQuery должен проверить есть ли этот метод нативный и если нет то использовать свою реализацию.
Ан нет…
jquery-1.7.1:
jquery-1.7.1:
// Go through the array, translating each of the items to their
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret[ ret.length ] = value;
}
}
// Go through every key on the object,
} else {
for ( key in elems ) {
value = callback( elems[ key ], key, arg );
if ( value != null ) {
ret[ ret.length ] = value;
}
}
}
Упачки, я просто сужу по underscore.
Как мы видим, $.map работает и для объектов.
Не хотелось бы выступать в роли К.О., но это просто грех при использовании простых языков/фреймворков — не озаботится хотя бы полным прочтением документации, хотя бы один раз. Просто что бы знать какие функции в принципе там есть.
Иногда в коде встречаются «новоизобретенные» велосипеды, созданные исключительно по причине не знания о наличии такой функции. И это расстраивает. Можно не знать как используется каждая функция (доки в конце концов под рукой), но хотя бы примерно иметь представление об имеющемся наборе функций — надо.
Иногда в коде встречаются «новоизобретенные» велосипеды, созданные исключительно по причине не знания о наличии такой функции. И это расстраивает. Можно не знать как используется каждая функция (доки в конце концов под рукой), но хотя бы примерно иметь представление об имеющемся наборе функций — надо.
зануда
Я не знаю о половине функций jQuery, но это не мешает мне им пользоваться — просто когда мне что-то надо, я сначала гуглю (или ищу на jqapi) то что мне надо, и только если этого нет по-умолчанию, начинаю писать велосипед.
Не обязательно заучивать весь функционал фреймворка, надо просто уметь искать.
Не обязательно заучивать весь функционал фреймворка, надо просто уметь искать.
т.е. мне надо получить значение input'а
захожу в гугл… ввожу «jquery get input value»… получаю ссылку на $.fn.val() и радуюсь жизни?
то же самое с «bind event», «delegate event», «checkbox value» (а тут вам предложат attr который даже не сработает)
и весь ваш код в потенциально deprecated функциях. поздравляю!
захожу в гугл… ввожу «jquery get input value»… получаю ссылку на $.fn.val() и радуюсь жизни?
то же самое с «bind event», «delegate event», «checkbox value» (а тут вам предложат attr который даже не сработает)
и весь ваш код в потенциально deprecated функциях. поздравляю!
т.е. мне надо узнать что-то, чего я пока незнаю
захожу на jqapi, потом docs.jquery, потом google (note the difference!)… ищу то что мне надо… получаю результат, включаю мозги (важный момент, вы о нем забыли), анализирую его, использую, и радуюсь жизни!
то же самое с принципом работы двигателя sabre или самолета hotol (а ведь гугл может выдать результаты которые даже устарели)
Весь ваш код, кстати, тоже в потенциально deprecated функциях, которые рано или поздно могут стать неугодными. У вас нигде .live('click', function(){}) уже неиспользуется, да? И конечно же вы его заменили на .on()? Что, правда заменили? Ну надо же! А ничего что on() тоже потенциально deprecated функция? Кто ж его знает что в следующей версии разработчикам придет в голову.
Кстати, не забудьте выучить всю конструкцию до последнего винтика и принцип работы каждого узла вашего автомобиля, ведь в случае проблемы механик на техосмотре может вам дать совет, который даже не сработает.
захожу на jqapi, потом docs.jquery, потом google (note the difference!)… ищу то что мне надо… получаю результат, включаю мозги (важный момент, вы о нем забыли), анализирую его, использую, и радуюсь жизни!
то же самое с принципом работы двигателя sabre или самолета hotol (а ведь гугл может выдать результаты которые даже устарели)
Весь ваш код, кстати, тоже в потенциально deprecated функциях, которые рано или поздно могут стать неугодными. У вас нигде .live('click', function(){}) уже неиспользуется, да? И конечно же вы его заменили на .on()? Что, правда заменили? Ну надо же! А ничего что on() тоже потенциально deprecated функция? Кто ж его знает что в следующей версии разработчикам придет в голову.
Кстати, не забудьте выучить всю конструкцию до последнего винтика и принцип работы каждого узла вашего автомобиля, ведь в случае проблемы механик на техосмотре может вам дать совет, который даже не сработает.
заходить на сайт с документацией, чтобы чтото найти, это все равно что её полностью пролистать, а значит УЖЕ иметь представление о большинстве функций.
пример был преувеличенный, а live у меня вообще почти нигде не использовался, так как есть delegate, что конечно, можно не знать, не изучия API, как вы это делаете.
я не призываю изучать всё до винтика, но документацию jQuery можно осилить за 2-3 часа или день, если заодно покопаться в исходниках и понять как именно работают некоторые функции и когда лучше их использовать.
и причем тут машина?.. я же не говорю, что знаю наизусть все исходники jQuery (оно мне надо?).
пример был преувеличенный, а live у меня вообще почти нигде не использовался, так как есть delegate, что конечно, можно не знать, не изучия API, как вы это делаете.
я не призываю изучать всё до винтика, но документацию jQuery можно осилить за 2-3 часа или день, если заодно покопаться в исходниках и понять как именно работают некоторые функции и когда лучше их использовать.
и причем тут машина?.. я же не говорю, что знаю наизусть все исходники jQuery (оно мне надо?).
>> заходить на сайт с документацией, чтобы чтото найти, это все равно
>> что её полностью пролистать
Вообще-то на сайте с документацией для таких вещей есть поиск, поэтому просто что-то найти гораздо быстрее, чем пролистать её полностью
>> что её полностью пролистать
Вообще-то на сайте с документацией для таких вещей есть поиск, поэтому просто что-то найти гораздо быстрее, чем пролистать её полностью
скажем так, я вообще не верю в начинающих программистов, которые будут искать чтото, только когда это им понадобится. сам таким был хоть и давно.
вот зачем, например, такому человеку искать map, когда он вообще не знает о такой технике и пользуется нативными циклами.
во-вторых, как я уже указал, часто существует возможность решения проблемы двумя способами. например, нужен был map для объектов, но поиск по ключевым словам выдал each… и разработчик начинает писать велосипед, не читая дальше.
в-третьих, если уж действительно большое API, можно ограничиться списком функций с кратким описанием. это нормально. но не забивать же совсем?)
вот зачем, например, такому человеку искать map, когда он вообще не знает о такой технике и пользуется нативными циклами.
во-вторых, как я уже указал, часто существует возможность решения проблемы двумя способами. например, нужен был map для объектов, но поиск по ключевым словам выдал each… и разработчик начинает писать велосипед, не читая дальше.
в-третьих, если уж действительно большое API, можно ограничиться списком функций с кратким описанием. это нормально. но не забивать же совсем?)
jQuery позволяет писать быстро. Быстро, понимаете? Не изучать jQuery за 21 день, а стартовать прямо сейчас. Вы читаете все доки с выходом каждой новой версии?
Может вы и книги по jQuery читаете? )
Может вы и книги по jQuery читаете? )
Согласен.
Именно после прочтения всего jQuery API я открыл для себя некоторые из этих функций.
А не знал я о них наверное потому что сразу же начинал писать циклы если нужно было отфильтровать массив или сериализовать форму. И мне не приходило в голову поискать решение в jQuery API.
Именно после прочтения всего jQuery API я открыл для себя некоторые из этих функций.
А не знал я о них наверное потому что сразу же начинал писать циклы если нужно было отфильтровать массив или сериализовать форму. И мне не приходило в голову поискать решение в jQuery API.
Открыл статью — все ссылки фиолетовые, видимо я уже вхожу в круг избранных
"… то .attr() может выдать его значение по умолчанию ..."
Так может или выдает?
Так может или выдает?
Вытянуто с доков:
Несколько раз перечитал и на сколько я понял — только версия 1.6 возвращает дефолтное значение.
If using jQuery 1.6, the code if ( $(elem).attr(«checked») ) will retrieve the actual content attribute, which does not change as the checkbox is checked and unchecked. It is meant only to store the default or initial value of the checked property. To maintain backwards compatability, the .attr() method in jQuery 1.6.1+ will retrieve and update the property for you so no code for boolean attributes is required to be changed to .prop(). Nevertheless, the preferred way to retrieve a checked value is with one of the options listed above. To see how this works in the latest jQuery, check/uncheck the checkbox in the example below.
Несколько раз перечитал и на сколько я понял — только версия 1.6 возвращает дефолтное значение.
Спасибо. Тоже около двух лет пользуюсь jQuery, но с .prop() ни разу не встречалась и .grep() тоже не использовала. Взяла на заметку ))
Не встречал ещё jQuery любителей, у которых бы не было под рукой iQuery Chearsheet.
На пример: oscarotero
На пример: oscarotero
Мне больше вот эта нравится — цвета поспокойнее )
Но это шпаргалка, которой больше пользуешься как памяткой, что бы что-то вспомнить.
Но это шпаргалка, которой больше пользуешься как памяткой, что бы что-то вспомнить.
А мне www.futurecolors.ru/jquery ещё удобнее
Спасибо, мне очень интересно было читать.
Мало работал с jQuery (специфика работы связана с использованием «голого» JS), поэтому вопрос к более опытным: а что, действительно можно работать «уже около двух лет» и не испытывать потребности в привязке контекста (например, через описываемый jQuery.proxy(), который только в 1.4 появился) к callback'у, так что подобная информация выясняется «случайно» и об этом вообще «мало кто знает»?
можно работать «уже около двух лет» и не испытывать потребности в привязке контекста
оказывается что да :)
меня всегда выручало это:
var that = this;
$('a').click(function(){
that.doStuff();
});
Я может ошибаюсь, но по-моему это немного другой случай. Как вам в примере ниже поможет
$.proxy()?function_name({
method: function() {
var that = this;
$('a').click(function(){
that.doStuff();
});
}
})
Запросто.
В underscore есть ещё крутая штука _.bindAll.
Даешь цикл статей «jQuery дайджест»! Описание одного метода каждый день.
Конкретно для чекбоксов, на самом деле, гораздо удобнее использовать css селекторы, имхо.
if $('input[type=checkbox]').is(':checked') alert('!');
if $('input[type=checkbox]').is(':checked') alert('!');
Вы наверное удивитесь, но первые три пункта есть в самом javascript и входят в ES5 (поддерживается во всех последних браузерах).
При этом filter/map принимает в качестве первого аргумента функцию, которой будут передаваться item, index и array (сам массив), а в качестве второго аргумента передается контекст — что более гибко и полезно.
jQuery.grep(array, fn) => array.filter(fn)
jQuery.map(array, fn) => array.map(fn)
jQuery.proxy(fn, context) => fn.bind(context)
При этом filter/map принимает в качестве первого аргумента функцию, которой будут передаваться item, index и array (сам массив), а в качестве второго аргумента передается контекст — что более гибко и полезно.
Увы, IE 6-8 не даёт покоя :(
> Вы наверное удивитесь
Нет, не удивлюсь.
О array.filter и array.map я знал. Но они не поддерживаются IE < 9.
А для fn.bind ситуация с поддержкой браузерами немного хуже хуже.
Кстати, чем мне нравится jQuery.map — так это тем, что возвращая null или undefined можно избавится от элемента, а array.map просто поставит на то место null или undefined.
Нет, не удивлюсь.
О array.filter и array.map я знал. Но они не поддерживаются IE < 9.
А для fn.bind ситуация с поддержкой браузерами немного хуже хуже.
Кстати, чем мне нравится jQuery.map — так это тем, что возвращая null или undefined можно избавится от элемента, а array.map просто поставит на то место null или undefined.
github.com/kriskowal/es5-shim/
И все везде работает.
И все везде работает.
Я предпочитаю этим $.map/$.grep библиотеку underscore.js в которой есть гораздо больше полезных list-processing функций. А $.proxy = _.bind. Вообще не очень понимаю в этом плане подхода jQuery. Уж лучше бы или весь боевой набор из underscore.js запихали себе, или бы не начинали. А то, похоже, их добавляют по мере того как авторам самим надоедает писать вручную соответствующий код. Сейчас получается, например, что $.map умеет обходить объекты (не массивы), а $.grep — нет. Функций вроде all, any, reduce нет вообще. В результате всё равно приходится подключать дополнительно underscore, ну и для единого стиля не пользоваться аналогами из jQuery.
А я отлично понимаю их подход. map и reduce используются внутри jQuery, они уже грузятся каждый раз, хочешь ты этого или нет. Можно было бы не добавлять их в API, лежали бы мертвым грузом. Только спрашивается зачем?
Deferred и callbacks тоже добавили в API потому что они уже используются внутри jQuery.
Deferred и callbacks тоже добавили в API потому что они уже используются внутри jQuery.
Да.
Хорошо, что при обсуждении Undescore-подобных методов jQuery lany припомнил Underscore. А не то вдругкто-нибудь про Underscore впервые слышит, а тут ему польза.
Но было бы не очень хорошо, кабы Underscore добавили в jQuery целиком. Потому что ещё бывают такие частные случаи, в которых jQuery нужно использовать, а Underscore низачем не пригождается. Опять же Underscore развивается отдельно, и была бы непременная задержка интеграции и проблемыс какими-нибудь взаимными несовместимостями.
Хорошо, что при обсуждении Undescore-подобных методов jQuery lany припомнил Underscore. А не то вдруг
Но было бы не очень хорошо, кабы Underscore добавили в jQuery целиком. Потому что ещё бывают такие частные случаи, в которых jQuery нужно использовать, а Underscore низачем не пригождается. Опять же Underscore развивается отдельно, и была бы непременная задержка интеграции и проблемы
> Потому что ещё бывают такие частные случаи, в которых jQuery нужно использовать, а Underscore низачем не пригождается.
В jQuery и так множество фич, которые во многих проектах никогда не пригождаются. В принципе это решаемо кастомными сборками jQuery. Опять же underscore не такой тяжёлый, поэтому весь jQuery сильно не вырастет из-за него.
Конечно синхронизировать два проекта тяжело, но авторы могли бы договориться так что ребята из underscore получили бы возможность коммитить в репозиторий jQuery. Тогда они сами могли бы делать две сборки underscore — отдельную и для jQuery.
Но вообще полная синхронизация необязательна, просто надо добавить сразу разумный набор функций, которые настолько базовые, что в принципе от версии к версии практически не меняются.
В jQuery и так множество фич, которые во многих проектах никогда не пригождаются. В принципе это решаемо кастомными сборками jQuery. Опять же underscore не такой тяжёлый, поэтому весь jQuery сильно не вырастет из-за него.
Конечно синхронизировать два проекта тяжело, но авторы могли бы договориться так что ребята из underscore получили бы возможность коммитить в репозиторий jQuery. Тогда они сами могли бы делать две сборки underscore — отдельную и для jQuery.
Но вообще полная синхронизация необязательна, просто надо добавить сразу разумный набор функций, которые настолько базовые, что в принципе от версии к версии практически не меняются.
Опять же underscore не такой тяжёлый, поэтому весь jQuery сильно не вырастетиз-за него.
Файл
Файл
Стало быть, прирост составит 14%. (Если сборка jQuery — «кастомная», то занимает ещё меньше по объёму, так что тогда и прирост её, вызванный добавлением Underscore.js, окажется ещё существеннее, ещё заметнее.)
Но вообще полная синхронизация необязательна, просто надо добавить сразу разумный набор функций, которые настолько базовые, что в принципе от версии к версии практически не меняются.
Ценою этакой стабильности окажется необходимость (неприятная для сайторазработчика) учить две версии Underscore.js: сперва родную, затем встроенную в jQuery и оттого лишённую недавних изменений. Глядя
* jQuery 1.6+:
$(".myCheckbox").prop(«checked», true);
$(".myCheckbox").prop(«checked», false);
* jQuery 1.5 and below:
$('.myCheckbox').attr('checked','checked')
$('.myCheckbox').removeAttr('checked')
* Any version of jQuery:
// Assuming an event handler on a checkbox
//If you're working with just one element, it will always be fastest to use DOMElement.checked = true.
if (this.checked) //to check state
$(".myCheckbox").prop(«checked», true);
$(".myCheckbox").prop(«checked», false);
* jQuery 1.5 and below:
$('.myCheckbox').attr('checked','checked')
$('.myCheckbox').removeAttr('checked')
* Any version of jQuery:
// Assuming an event handler on a checkbox
//If you're working with just one element, it will always be fastest to use DOMElement.checked = true.
if (this.checked) //to check state
Jquery — Visual QuickStart Guide. Правда старенькая, но читается на раз.
Укажите что
Пример:
Это гораздо удобнее, чем писать каждый раз
jQuery.proxy() может использоваться так: jQuery.proxy(obj, fn), где obj — объект, а fn — название метода этого объекта.Пример:
var arr= [1,2,3]
, join= jQuery.proxy(arr, 'join')
;
join(', ') // => 1, 2, 3
Это гораздо удобнее, чем писать каждый раз
jQuery.proxy(obj.fn, obj).
А ещё в $.proxy можно и с аргументами работать:
а) аргументы при вызове будут переданы в проксируемый метод (очевидно, но для полноты информации):
б) часть аргументов тоже можно проксировать:
а) аргументы при вызове будут переданы в проксируемый метод (очевидно, но для полноты информации):
var pfn = $.proxy(context, 'method'); // или вариант из основного текста статьи
pfn(a, b); // => context.method(a, b);
б) часть аргументов тоже можно проксировать:
var pfn = $.proxy(context, 'method', a, b); // или вариант первых двух аргументов из основного текста статьи
pfn(c); // => context.method(a, b, c);
Не упомянули еще такие классные штуки как $.queue и $.fn.self, также довольно редкие и которые полезно знать.
О
На счет
queue согласен — полезный метод.На счет
$.fn.self — вроде нету такого. Может имелось в виду .andSelf()?
Сижу и не понимаю, как я жил без serializeArray().
Как раз некоторое время назад ругался с attr(), а тут вот оно как оказывается. Спасибо за статью :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
5 полезных методов jQuery API, о которых вы могли не знать