Сделайте свой собственный выбор jQuery

Из всех библиотек JavaScript, jQuery, возможно, имеет синтаксис селектора, наиболее близкий к CSS, и это облегчает погружение авторов CSS, даже несмотря на то, что есть 52 селектора на выбор. Если вам нравятся CSS :first-child :hover или :only-child , в меню есть 34 аналогичных «псевдо» селектора псевдоклассов. Поговорим о избалованном выборе! Если вам нужно больше, чем собственные селекторы jQuery, такие как :animated :exactIgnoreCase() :not() и :visible — существует множество пользовательских селекторов из сообщества (таких как :exactIgnoreCase() :nothidden , или :loaded() ), чтобы заполнить любые пробелы. Все это означает, что вам не нужно беспокоиться об обучении написанию пользовательских селекторов — верно? Неправильно! Чем проще задание выполнить, тем больше вероятность того, что оно будет выполнено. Вот тест для вас: попросите нового разработчика использовать (не говоря уже о понимании) этот код:

 if ($(el).offset().top > $(window).scrollTop() - $(el).outerHeight(true) && $(el).offset().top < $(window).scrollTop() + $(el).outerHeight(true) + $(window).height()){ //do something} 

Теперь попросите их примерить это для размера:

 if ($(el).is(":inview")) { //do something} 

Никаких наград за то, что каждый из этих фрагментов делает одно и то же, и что вторая версия получит гораздо больше пользы. Оба проверяют, находится ли элемент в настоящее время в области просмотра. Если вы обнаружите, что у вас есть длинное условие для получения логического значения, или ваш логический тип true / false снова и снова появляется, возможно, вы нацелены на создание пользовательского выражения для ваш селектор. И сделать их вряд ли может быть проще:

 jQuery.extend(jQuery.expr[':'], { //$.extend($.expr[':'] is just as good expression: function () { //establish boolean to be returned, or return false; }}); 

Выражение — это то, что будет вызываться в вашем селекторе… оно может быть inview , loaded или не nothidden . Функция — это то, что вы ожидаете. Мы добавили return false , так как это то, что вы хотите, чтобы функция делала как минимум. Кроме этого, используйте любые методы, которые вам нужны, чтобы вернуть логические значения, которые приведут ваш селектор в действие. inview сначала запустим наш селектор inview :

 jQuery.extend(jQuery.expr[':'], { inview: function (el) { if ($(el).offset().top > $(window).scrollTop() - $(el).outerHeight(true) && $(el).offset().top < $(window).scrollTop() + $(el).outerHeight(true) + $(window).height()) { return true; } return false; }}); 

Код далеко не оптимизирован, но работает. Для тестирования мне нравится добавлять селекторы в их собственный блок скрипта между включением jQuery и моим рабочим блоком скрипта. Для производства, однако, вы можете включить их как плагин. Добавьте его на страницу, и вы можете использовать его несколькими способами:

 $("p:inview").css("color","orange"); 

или

 $("p").filter(":inview").each(function(){ //do something}); 

или

 if ($("p#desc").is(":inview")) { //do something} 

Теперь давайте посмотрим на некоторые оптимизации. Прямо из коробки мы видим некоторое повторение, которое мы можем кэшировать, включая некоторые повторяющиеся объекты. Поскольку мы только возвращаем true или false , мы можем просто вернуть наше условие, и мы будем в пути:

 jQuery.extend(jQuery.expr[':'], { inview: function (el) { var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); }}); 

И мы там! Мы расширили механизм выражений jQuery, и наш код оптимизирован и доступен для чтения. Это не единственный селектор стиля «на виду», который вы найдете в Интернете, но наш — это эволюция. Он учитывает высоту элемента, так что он сообщает об true пока элемент частично находится в viewport.jQuery — это естественный элемент настройки, и он дает вам отличный способ намочить ноги перед тем, как приступить к использованию .extend() для создания плагинов.