Animacje CSS dodawane poprzez JS

Question

Piszę sobie bibliotekę, która ma być lżejszą, modularną wersją jQ (robię to bardziej dla własnej satysfakcji, nie sądzę, żeby ktoś chciał korzystać). Aktualnie tworzę funkcję hide(). Wydaje mi się, że nie ma co pisać wszystkiego w JS skoro jest CSS 3, napisałem więc taki kod:

function addCss(styles) {
  const css = document.createElement('style');
  css.type = 'text/css';
  css.textContent = styles;
  document.head.appendChild(css);
}

function cssSearch(name) {
  for(let i = 0; i < document.styleSheets.length; i++)
    if(document.styleSheets[i].cssRules) {
      for(let y = 0; y < document.styleSheets[i].cssRules.length; y++) {
      if(document.styleSheets[i].cssRules[y].name === name) {
        return true;
      }
    }
  }
}

function hide(time = 0) {
  if(!cssSearch('q-h')) {
    addCss('@keyframes q-h{0%{opacity:1}100%{opacity:0;transform:translateY(-100%);visibility:hidden}}');
  }

  this.each(el => el.style.animation = `${time}ms q-h forwards`);
  return this;
}

Teraz pytanie: czy to optymalne rozwiązanie?

Answer 1

można prościej ;) dodaj sobie ID 

const styles = {
    "q-h" : '@keyframes q-h{0%{opacity:1}100%{opacity:0;transform:translateY(-100%);visibility:hidden}}'
};

function addCss(stylesId) {
  const css = document.createElement('style');
  css.type = 'text/css';
  css.textContent = styles[stylesId];
  css.id = stylesId;
  document.head.appendChild(css);
}

function cssExist(stylesId) {
  return document.getElementById(stylesId) !== null;
}

Co do samego kodu ma wiele minusów. Pierwszy najprostszy do naprawy to nazewnictwo els i sel bardzo słabo wygląda ;) Napisz całe słowo. Drugi to brak prototypu z funkcjami on i each. Przez to twoja biblioteka będzie wolniejsza od jQuery. Ready nie zwraca this.

Comments

Na jakiej podstawie wnioskujesz że będzie wolniejsza? Po co ready ma zwracać this?

---

W tej chwili podczas wywoływania $('jakiś selektor') za każdym razem tworzysz na nowo te dwie funkcje. Gdyby były one w prototypie stworzone były by tylko raz.

w jQuery zwraca i jest to wygodne :D 

https://api.jquery.com/ready/

---

Nigdy nie widziałem żeby ktoś cokolwiek dopisywał po ready(). Co do nazw wydaje mi się że dopuki sam tą bibliotekę rozwijam jest to sprawa indywidualna.

za każdym razem tworzysz na nowo te dwie funkcje. 

 I to znacząco obniża wydajność?

---

Skoro jest to sprawa indywidualna to po co pytasz nas na forum i angażujesz inne osoby? Są to podstawy pisania czystego kodu ułatwia to potem znalezienie pomocy na forach. Staram się tobie pomóc ale widzę ze nie jesteś z tego powodu zadowolony. 

Co to tworzenia 2 funkcji to jest to jakiś problem. Np w tym kodzie zakładając ze mamy 10 znaczników <li> w pamięci tworzysz 22 funkcje co zabiera pamięć RAM.

$("ul li").each(() => {
  $(this).hide();
})

Nie są to duże różnice ale skoro zależało ci zrobić optymalną funkcje do CSSa to nie rozumiem dlaczego nie zależy ci na stworzeniu optymalniej funkcji na której opiera sie cała twoja biblioteka. 

---

Skoro jest to sprawa indywidualna to po co pytasz nas na forum i angażujesz inne osoby? Są to podstawy pisania czystego kodu ułatwia to potem znalezienie pomocy na forach. Staram się tobie pomóc ale widzę ze nie jesteś z tego powodu. 

 Ależ jestem zadowolony. To że dopytuje/kwestionuje niektóre kwestie nie znaczy że jestem  nie zadowolony tylko ciekawy. Zapisy „sel” i „els” (a także „el”) uważam za czytelne i nie raz widziałem je w kodach źródłowych. Pozatym inni na forum nie uznawali ich chyba za nieczytelne (przynajmniej nic o tym nie napisali)... Jeśli jednak uważasz że są naprawdę nieczytelne gdy tylko siądę do komputera zmienie je .

---

Akurat wydajność jest najmniej ważnym powodem, dla którego trzon biblioteki powinien być klasą. O wiele ważniejszym powodem jest bardzo łatwa rozszerzalność. Jeśli będziemy eksportować klasę, to proces rozszerzania przez pluginy będzie się sprowadzał do importu klasy i dopisania nowej metody do prototypu → https://github.com/BEMQuery/bemquery-dom-events/blob/master/src/listeners.js

---

Przepisałem pod prototypy i zmieniłem nazwy zmiennych. Animacje planuję zrealizować w Web Animations API (Jeśli przeglądarka takowych nie będzie wspierać skrypt nada po prostu display none).

$("ul li").each(() => {
  $(this).hide();
})

Tak z ciekawości, co kryje się pod this ?(obstawiam window )