Mała biblioteka DOM

Question

Co sądzicie?

const $ = sel => ({
    els: typeof sel === 'string' 
      ? [...document.querySelectorAll(sel)]
      : sel.length
      	? [...sel]
        : [sel],
    
    each(call) {
    	this.els.forEach((el, i) => call(el, i));
    	return this;
    },
    
    on(type, listener) {
      this.each((el, i) => el.addEventListener(type, listener.bind(this, el, i,)));
    	return this;
    },
    
    ready(call) {
    	this.on('DOMContentLoaded', call);
    }
    
});

Bardzo prosta implementacja nowych funkcji np:

    hide() {
      this.each(el => el.style.display = 'none')
      return this;
    },
     
    filter(condition) {
        this.els = this.els.filter(condition)
        return this;
    }

 

Comments

Moim zdaniem zbyt mała czytelność kodu w property els.

Nagłówek funkcji też mógłby być bardziej czytelny. Zamiast:

const $ = sel => ({

, zapisać:

const $ = (sel) => {
    return {

Od razu wiadomo, że to funkcja i zwraca obiekt.

---

Ciekawy pomysł. Będziesz minifikował jak ostatnio? : )

---

Czy ja wiem, czy takie nieczytelne, operator warunkowy zastosowano też w kodzie źródłowym Vue.js. Jak bym miał to rozpisać na ify dla mnie byłoby bardziej nieczytelne. Tu jest rozpisane.

---

Taaak. Dużo z funkcji queryAll zaciągnąłem.

Answer 1

Czemu listener dostaje takie dziwne parametry?

Implementację each można skrócić:

each( call ) {
    this.els.forEach( call );
    return this;
}

 

Comments

Masz (jak zwykle) rację . 

---

Jakie listener powinien dostawać parametry? Index niepotrzebny?

---

Takie, jakie dostaje normalnie: obiekt zdarzenia i tyle.

---

Ustawić element na którym jest wywołane zdarzenie jako this czy to nie ma sensu?

---

Można, ale co jak ktoś Ci jako listener podeśle arrow function?

---

W jQ z tego, co kojarzę, element jest pod this więc jak się chce mieć do niego dostęp jest się skazanym na funkcję tradycyjną  (?)

EDIT: To jest złe podejście?

---

Element, który został kliknięty, można pobrać z event.target. Element, do którego przypięto listener jest z kolei dostępny pod event.currentTarget.

---

Czyli jeśli ktoś podeśle arrow function będzie musiał użyć event.target. Coś za coś...

---

Ja zawsze używam event, bo wolę, żeby this wskazywało na obiekt, w którego scope listener został stworzony :)

---

Żeby nie zakładać nowego pytania... 

    delegation(type, target, listener) {
        this.on(type, evt => {
            if(evt.target && evt.target.matches(target)) {
                listener(evt);
            }
        });
    }

są jakieś błędy?