Brzmi enigmatycznie? Temat ten może zaciekawić tych którym zależy na jakości i wydajności kodu JS. Nie wiem jednak czy spotkaliście się wcześniej z podobnym zagadnieniem, nie wiem czy kiedykolwiek było wam ono potrzebne i czy zastanawialiście się czy podobne rozwiązanie różni się pod jakimś względem od innych nieco bardziej standardowych formuł.

Tak więc – początkowo wydawało mi się że jest to dość łatwe i proste do sprecyzowania, okazało się jednak iż nie jest to takie oczywiste. By zgłębić temat weźmy na warsztat dwie przykładowe zmienne:

1
2

var my_var_01 = $('#block_01'),
    my_var_02 = $('#block_02);

… formułują one zapis dwóch slektorów w których umieszczone są bloki o odpowiednich identyfikatorach. Założenie polegało na tym by niezależnie od tego zapisu stworzyć jeszcze jedną zmienną która wykorzystywana później łączyła by działanie dla obydwu elementów. Prostym sposobem było by zapisanie ich w następującej postaci:

1
2
3
4

var my_var_01 = $('#block_01'),
    my_var_02 = $('#block_02');
 
var my_area = $(my_var_01,my_var_02);

Niestety zapis taki jest błędny i jego interpretacja nie zakończy się niczym dobrym. Co więc w następnej kolejności przyszło mi do głowy to zapis w postaci tablicy, ten jednak również jest nie możliwy ponieważ z założenia jQuery nie akceptuje bezpośredniego budowania tablic wewnątrz zmiennych. Ale, ale, po chwilowych poszukiwaniach okazało się że nie do końca tak jest i taka możliwość istnieje. Można wykorzystać do tego celu obiekt jQuery.makeArray(). Jak więc powinien wyglądać poprawny kod?

1
2
3
4

var my_var_01 = $('#block_01'),
    my_var_02 = $('#block_02');
 
var my_area = jQuery.makeArray(my_var_01,my_var_02)

Udało się! Działa jak natura chciała. Czy jest jednak to jedyna możliwość i forma rozwiązania tego zagadnienia, czy jego wydajność i bezpieczeństwo jest na tyle dobre by właśnie tak konstruować kod? Zaintrygowany postanowiłem podrążyć temat i sprawdzić czy to jedyna opcja jaka mi została…

Okazuje się że nie. Podobne rozwiązanie uzyskać możemy z wykorzystaniem metody .add(). Metoda ta pozwala nam na dodatnie kolejnego selektora, elementu html, czy obiektu do jednego z już istniejących. To więc co uda się nam uzyskać to po prostu połączone ze sobą elementy. Jak jednak przełożyć ów metodę na zmienne?

1
2
3
4

var my_var_01 = $('#block_01'),
    my_var_02 = $('#block_02');
 
var my_area = my_var_01.add(my_var_02);

Zapis taki działa poprawnie i spełnia tę samą rolę co poprzedni. Wydaje się być nieco prostszy i bezpieczniejszy. Jednakże jest pewien mankament takiej konfiguracji. W sytuacji w której będziemy chcieli dodać kolejną zmienną zmuszeni będziemy do powielenia zapisu metody, a pod względem wydajności i jakości kodu będzie prezentowało się to nieco gorzej niż w przypadku zapisu z tablicą (stworzyłem prosty przykład na to jak ów konstrukcja będzie działać na żywo).

Ehhh, udało mi się znaleźć jednak jeszcze jedną możliwość, niestety w swej formie chyba najmniej poprawną i estetyczną. Otóż zapis dwóch zmiennych jako jednej będzie możliwy również z wykorzystaniem metody each(). Dodatkowo będziemy musieli wykorzystać prostą pętlę, która pobierze nam obydwa zdefiniowane selektory. Jak będzie się to prezentowało?

1
2
3
4
5
6
7
8
9
10

var my_area = {
    my_var_01: $('#block_01'),
    my_var_02: $('#block_02')
}
 
for (var each in my_area){
    my_area[each].animate({
        // animacja
    }, 600);
}

Jak widzicie zapis przedstawia się nieco inaczej. Po każdym elemencie wewnątrz zmiennej my_area puszczona jest pętla dzięki której akcja animacji odpalana jest wspólnie. To jednak jest chyba najmniej wydajne i precyzyjne sformułowanie zapisu dwóch zmiennych jako jednej.

Podsumowując – po szybkich testach okazało się że rozwiązanie z wykorzystaniem tablicy najlepiej definiuje założenie zebrania dwóch zmiennych do postaci jednej. W tym przypadku jednak problematyczne może okazać się samo iterowanie po tablicy – to jednak już efekt uboczny. W odniesieniu do metody .add() niefortunne może okazać się definiowanie wielu zmiennych, gdy jednak zapis tyczył będzie się jedynie dwóch konfiguracja taka sprawdzi się najlepiej i najbardziej precyzyjnie. Ostatni z prezentowanych zapisów niestety ze względu na swoją złożoność i wykorzystanie pętli nie jest rekomendowaną formą rozwiązania na opisywane zagadnienie, mimo to działa. I to tyle, Enjoy!

Podziel się tym wpisem:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
•