• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

tworzyć klasy w js ?

VPS Starter Arubacloud
+1 głos
802 wizyt
pytanie zadane 29 września 2017 w JavaScript przez UltraSF Stary wyjadacz (11,740 p.)
Witam panowie, tworzę aktualnie stronę i przyszedł czas na zabawę js. Zrobiłem skrypt który coś tam realizuje, ale to nie istotne. Bo moje pytanie brzmi czy zamykać go w class czy nie? tak jak np. w php  odpowiedź w 99% przypadkach brzmiała by tak, to w js nie jestem tego pewien, po prostu słabo znam jeszcze ten język. Tak więc pytanie do nieco bardziej doświadczonych graczy js, kiedy robimy z jakieogś skryp obiekt a kiedy nie? Wspomne o ile ma to znaczenie że obecnie skrypt tworze z wykorzystanie const, let i funkcji strzałkowych (const jakasFunkcja = () => { //kod }) czyli ogólnie staram się korzystać że wszystkich nowości es6 :)
komentarz 29 września 2017 przez cyklop123 Bywalec (2,790 p.)

W js tworzenie klasy wygląda tak że robisz zamykasz kod w funkcji i to działa jako klasa np.

function samochod(var c)
{
var color = c;//zmienna w klasie
this.move = function(var destination){
   //coś tam
   //metoda w klasie
}

}




var obiekt = new samochod("red");
obiekt.move("forward");

 

1
komentarz 29 września 2017 przez UltraSF Stary wyjadacz (11,740 p.)
Kiedy odpowiedź nie ma nic wspólnego z pytanie :d
komentarz 30 września 2017 przez Comandeer Guru (599,730 p.)
Pomijam fakt, że dodatkowo komentarz rozmija się z prawdą, bo w ES6 pojawia się składnia klas.
komentarz 30 września 2017 przez UltraSF Stary wyjadacz (11,740 p.)
Właśnie :)

5 odpowiedzi

+2 głosów
odpowiedź 30 września 2017 przez Comandeer Guru (599,730 p.)
wybrane 30 września 2017 przez UltraSF
 
Najlepsza

Mimo faktu że OOP w JS różni się od obiektówki w "tradycyjnych" językach, to zasady projektowania obiektowych rozwiązań w JS są praktycznie takie same. Rozbijasz projekt według zasad SOLID.

komentarz 30 września 2017 przez UltraSF Stary wyjadacz (11,740 p.)

Panie Comandeer a mógł byś przybliżyć co będzie pojedynczą odpowiedzialnością w js? Np. mam taki kod (uwaga jest słaby): 

 

const stage = document.querySelector('.registrationStages');
const next = document.querySelector('.next');
const option = document.querySelectorAll('.registerOption');
 
let counter = 0;
for(let i = 1; i <= 5; i++) {
    const div = document.createElement('div');
    div.className = 'stage';
    stage.appendChild(div);
}
const stages = document.querySelectorAll('.stage');
 
 
option[counter].style.display = 'block';
stages[counter].style.backgroundColor = 'rgb(107, 103, 103)';
 
const eventForNextClick = () =>{
    option[counter].style.display = 'none';
    option[counter + 1].style.display = 'block';
    counter++;
    stages[counter].style.backgroundColor = 'rgb(107, 103, 103)';
    if (counter >= 4) {
        next.remove();
    }
};

next.addEventListener('click',  eventForNextClick);
 

Ja po prostu nie mam pojęciu co tu będzie "jednym zadaniem" niby cały kod zajmuje się jednym formularzem. Wiec to jedna clasa ? gdy dodam walidacje na bieżąco tego formularza to będzie druga clasa czy ta samo? 

 

komentarz 30 września 2017 przez Comandeer Guru (599,730 p.)
Tworzenie elementów jest jednym zadaniem. Przypinanie eventów też bym wydzielił do osobnej metody. Ustawianie stylów – kolejne zadanie.

Dałoby się to zmieścić w jednej klasie. Natomiast walidator faktycznie powinien trafić do osobnej klasy.
komentarz 30 września 2017 przez UltraSF Stary wyjadacz (11,740 p.)
Okej dziękuje bardzo za pomoc :)
+1 głos
odpowiedź 30 września 2017 przez rafal.budzis Szeryf (85,260 p.)

Jeśli używasz ES6 chciałem tylko przypomnieć ze arrow function IE nie ogarnia. Używasz transpilera ?

W JS jeśli robisz mały skrypt i nie chcesz go rozbijać na funkcje najważniejszą rzeczą jest stworzenie swojego zakresu aby nie używać zakresu globalnego. Najlepiej poprzez zamkniecie wszystkiego w zwykłą funkcje. To najważniejsza zasada dzięki temu unikniesz wielu błędów które mogły by być spowodowane nadpisaniem twoich zmiennych przez inny skrypt.

(function(){

//mój skrypt

})();

 

0 głosów
odpowiedź 29 września 2017 przez Ehlert Ekspert (212,630 p.)

Klasy z JSa nie mają nic wspólnego z klasami z PHP, C++ czy Javy. Dużo by pisać na ten temat. Polecam zajrzeć do książek z serii You don't know JS. Po lekturze uświadamiasz sobie, że class classowi nie równy laugh

1
komentarz 29 września 2017 przez UltraSF Stary wyjadacz (11,740 p.)
Tak ja to wiem. Wiem że jest to syntactic sugar i to są nadal prototype i inne bajery. Tylko się zastanawiam kiedy zamyka się jakiś skrypt w klasie a kiedy nie :P
komentarz 29 września 2017 przez UltraSF Stary wyjadacz (11,740 p.)
A może jest to jakaś zupełnie inna logika i mam na razie zostać przy pisaniu "funkcyjnym" ?
komentarz 29 września 2017 przez Ehlert Ekspert (212,630 p.)
Wszystko się na pewno zamyka tak, aby nie było wycieków do global scopeu.

Pocztaj o systemie modułów z ES6.
0 głosów
odpowiedź 29 września 2017 przez kap Stary wyjadacz (11,620 p.)
Zależy co konkretnie robisz i jaki styl wolisz - większość problemów da się rozwiązać zarówno obiektowo jak i funkcyjnie (a małe skrypty to i proceduralnie możesz napisać).
 

Poza tym:
- zamykanie skryptu w klasę nie oznacza, że programujesz obiektowo,
- uzywanie funkcji, nie oznacza, że programujesz funkcyjnie.

Pokaż kod, bo wyczuwam spaghetti na obiad.
1
komentarz 29 września 2017 przez UltraSF Stary wyjadacz (11,740 p.)

"Pokaż kod, bo wyczuwam spaghetti na obiad." Rozumiem że to obraz crying :D 

No nie ukrywam że programista js ze mnie marny, ogólnie ze mnie marny programista xd

const stage = document.querySelector('.registrationStages');
const next = document.querySelector('.next');
const option = document.querySelectorAll('.registerOption');

let counter = 0;
for(let i = 1; i <= 5; i++) {
    const div = document.createElement('div');
    div.className = 'stage';
    stage.appendChild(div);
}
const stages = document.querySelectorAll('.stage');


option[counter].style.display = 'block';
stages[counter].style.backgroundColor = 'rgb(107, 103, 103)';

next.addEventListener('click',  eventForNextClick);


const eventForNextClick = () =>{
    option[counter].style.display = 'none';
    option[counter + 1].style.display = 'block';
    counter++;
    stages[counter].style.backgroundColor = 'rgb(107, 103, 103)';
    if (counter >= 4) {
        next.remove();
    }
};

 

komentarz 29 września 2017 przez UltraSF Stary wyjadacz (11,740 p.)
Wyjaśnienie: Mam panel rejestracji który zamiast być molechem do wpisywania jest podzielony na "podstrony" po prostu po wypełnieniu klikamy next, znika poprzednia cześć a pojawia się następna, do tego są takie kolorowe paski które pokazują postęp wypełniania formularza. Zaczerpnięte z :
https://m.facebook.com/reg/?cid=103
0 głosów
odpowiedź 30 września 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
edycja 30 września 2017 przez ShiroUmizake
To zależy.

Czy zakładamy uniwersalność i przenosnosc kodu. Czy mamy jakieś Stany, które by wypadałoby trzymać nie w Global scope. Nie zawsze class jest najlepszym rozwiazaniem, czasami wystarcza zwykle obiekty. Czasami moduły funkcyjne(Tak to chyba się nazywa) , jeżeli zakładamy, że używamy tree shaking. Czasami lepiej rozszerzać przez prototypy. Wszystko rozbija się architekturę, o cele i architetkturę którą mamy dostępna bądź do stworzenia.

Podobne pytania

+1 głos
2 odpowiedzi 1,321 wizyt
pytanie zadane 10 lipca 2018 w JavaScript przez MrxCI Dyskutant (8,260 p.)
+2 głosów
3 odpowiedzi 847 wizyt
pytanie zadane 9 lipca 2017 w JavaScript przez Ziken Początkujący (330 p.)
0 głosów
2 odpowiedzi 380 wizyt
pytanie zadane 13 marca 2017 w JavaScript przez crova Użytkownik (940 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...