Mała biblioteka JS

Question

Witam

Pytanie trochę nietypowe. Co sądzicie o tym  https://github.com/kornellapacz/minlib.js ? Jest to mała biblioteka JS do dodawania nasłuchiwaczów zdarzeń (eventListener) i wyszukiwania elementów poprzez selektory CSS (querySelector, querySelectorAll). Według was może być przydatna (robiłem ją dla osób które głównie piszą w Vanilla JS) ? I czy czegoś brakuje w niej?

Jak takich pytań nie wolno zadawać to przepraszam.

Comments

Oczywiście, że można takie pytania zadawać

---

To fajnie 

Answer 1

• Biblioteka nie działa w strict mode, bo są niezadeklarowane zmienne (np. w pętlach for...of). Przydałby się linter, który wykrywałby te problemy oraz inne (brak średników w niektórych miejscach).
• Dla baseElement możesz zastosować składnię parametrów domyślnych z ES6.
• Skoro jest addEvt, to oczekiwałbym też delEvt.
• Ogólnie to brakuje mi też obsługi modułów. Nie chcę pseudoglobalnych zmiennych, chcę moduł, który eksportuje poszczególne funkcje.
• else if (Object.prototype.toString.call(target) === '[object NodeList]') → po co tak dziwnie? Starczy skorzystać z operatora instanceof.
• Brakuje mi dystrybucji przez npm i wersjonowania.
• Brakuje info o licencji.

 

Comments

To już wgl nie rozumiem. Po co moduły jeśli robię bibliotekę DOM a moduły są w Node.js...(a tam z tego co wiem nie ma DOM). Poza tym to jest bardzo mały projekt (planuje jeszcze rmEvt / delEvt)

---

Moduły są uniwersalnym sposobem dystrybucji kodu JS. Fakt, że obecnie przeglądarki i Node.js tego formatu nie wspierają (chociaż nie jest to do końca prawdą; przeglądarki mają już eksperymentalne wsparcie), sprawia, że powstały narzędzia typu Rollup czy webpack, które umożliwiają przekonwertowanie tego formatu modułów do formatu zrozumiałego zarówno dla przeglądarek, jak i Node.js.

---

Ale czy warto dla tak małego projektu? (oczywiście od jutra uczę się webpack )

---

IMO jest to kierunek, w którym podąża cały ekosystem JS, więc wypada się dostosować.

---

Jak się nauczę to przepiszę do modułów...

Answer 2

Duży plus za wykonanie dokumentacji, o czym wiele osób zapomina w swoich projektach, nawet podając githuba w cv. Co do samego kodu to tak na szybko wydaje mi się, że można by nieco bardziej weryfikować dane wejściowej. Na przykład "selectors" sprawdzasz, czy jest tablicą lub nie, natomiast pytanie jaki wynik uzyskamy gdy jako selektor podam "12345"? Może jakaś informacja, wyjątek itp.?

Postaram się w wolnej chwili podpiąć Twój skrypt i potestować go sobie to dam Ci znać o jakiś ewentualnych innych wskazówkach.

Pozdrawiam

Answer 3

Imo funkcja all powinna zawsze zwracać tablicę, żeby użytkownik miał dostęp do metod obiektu Array (querySelectorAll zwraca pseudo-tablicę). Higher order functions robią robotę

---

if(Array.isArray(selectors)){
	toReturn = [];

	for(element of selectors){
		for(el of baseElement.querySelectorAll(element)){
			toReturn.push(el);
		} 
	} 
}

all(['h1', 'p']) // returns array with all h1 and p elements

Niepotrzebny bajer - ekwiwalent all('h1, p')

---

In vanilla.js you have to write:

['h1', 'h2', 'p'].forEach(function (element) {
    document.querySelectorAll(element).forEach(function (el) {
        el.addEventListner('click', yourFunction);
    });
});

Aż tak źle nie jest

[...document.querySelectorAll('h1, h2, p')].forEach((el) => {
	el.addEventListener('click', yourFunction);
});

---

Może warto by zaimplementować funkcję do znośnej obsługi event delegation?

Comments

https://github.com/kornellapacz/minlib.js/blob/master/minlib.js

o to chodziło? Poprawiłem dokumentacje. querySelectorAll zwraca chyba "NodeList".

---

const all = (selectors, baseElement = document) => {
    let toReturn = [];
    
    for(let element of baseElement.querySelectorAll(selectors)){
      toReturn.push(element)
    }

    return toReturn;
  }

Można krócej

const all = (selectors, baseElement = document) => {
    return [...baseElement.querySelectorAll(selectors)];
}

---

 if(typeof target === 'string'){ 

      target = all(target);

      for(let element of target){
        element.addEventListener(type, listener);
      };
    } else if (Array.isArray(target)){ 

      for(let element of target){
        element.addEventListener(type, listener);
      };
    } else {

      target.addEventListener(type, listener);
    }

  };

Część kodu tutaj się powtarza, zmieniając trochę logikę, można pozbyć się duplikatów

---

querySelectorAll zwraca chyba "NodeList"

... NodeList, która jest pseud-tablicą.

---

Mógł byś podrzucić jakąś dokumentacje 

return [... ]

bo znaleźć nie umiem  

---

Spread operator

---

const addEvt = (target, type, listener) => {

  if (Array.isArray(target) || typeof target === 'string'){ 
    if(!Array.isArray(target)){
      target = all(target);
    }
    for(let element of target){
      element.addEventListener(type, listener);
    };
  } else {
    target.addEventListener(type, listener);
  }

};

Coś takiego wymyśliłem...

---

a nawet przeniósł bym całą tę logikę do all - rozszerzając jego funkcjonalność i tym samym upraszczając kod tutaj do

const addEvt = (target, type, listener) => {
	all(target).forEach((el) => {
		el.addEventListener(type, listener);
	});
};

---

https://github.com/kornellapacz/minlib.js#example-5 - to chyba nie będzie działać 

albo taka sytuacja 

let div = document.createElement('div')

addEvt(div, 'click', yourFunction) 

(nie denerwuj się mam mam 14 lat...)

---

Aż tak źle nie jest

Zgodnie z najnowszą wersją standardu DOM NodeList jest iterowalne, zatem starczy:

document.querySelectorAll('h1, h2, p').forEach((el) => {
    el.addEventListener('click', yourFunction);
});

Wiadomo, gdzie nie działa… ;)

---

https://github.com/kornellapacz/minlib.js#example-2-2 

tak też w dokumentacji napisałem..