Tamam, böylece kodumuzun başında bulunan sıfırlama işlevini kullanabileceğimiz son bir yer var.
Sayfa, ne yapılması gerektiğini ilk kez yüklediğinde, yaptığınız rasgele renkleri seçmek
zorundayız, o zaman burada zaten sahip olduğumuz yeni rasgele renklerden bir renk seçmeliyiz.
Sonra sayfadaki her bir karara bir renk atamalıyız, böylece sıfırlama işlevini kullanabiliriz, çünkü bu
temelde yaptığı şeydir.
Aslında yalnızca başlangıç ​​olarak init adlı bir işleve sahip ve bu da yok bir şeyi
çalıştırarak işleri temizleyeceğim.
Ve init fonksiyonumuzun içinde, sayfa yüklendiğinde çalışması gereken her şeyi koyacağız.
Dolayısıyla, init işlevine sahip olacağız.
Ve net işlevimizin içinde yapabileceğimiz ilk şey, devam edin ve mod düğmemizin
dinleyicilerine ekleyin.
Ve bu gerçekten sadece işleri temizlemek için.
Bu yüzden hiçbir yerde ortasında dolanmak değil.
Dolayısıyla bunu düzgün bir şekilde girintilendirir.
Bu bizim mod düğmelerimiz olay dinleyicilerimiz ve bu kodu buradan alacağım.
Ve bu ne yapar, sadece kurtulabildiğimiz her karenin rengini değiştirir.
Bunu artık yapmak zorunda değiliz, çünkü bu sıfırlama işlemini kullanacağız ve tıkladığınızda tıklamak
için tüm bu mantığın biraz temizleyebilmesi için her kareye klick dinleyicileri ekliyor.
Mesaj ekranını değiştiriyoruz, sıfırlama düğmesi renklerini değiştiriyoruz.
Bu yüzden, bunu init işlevimize kopyalayacağım, çünkü sayfanın çok iyi yüklendiğinde başında
çalıştırılmasını ve bunu da doğru bir şekilde gerçekleştirilmesini istiyoruz.
işleyicileri düğmeler mod düğmeleri ve kareler için kurduktan sonra en son
şey, daha sonra sıfırlama işlevini çalıştırmak anlamına gelen ekranı sıfırlamak ve sıfırlama ne
yapacağını gerçekten renkler üreteceğiz bu yüzden renkleri başlangıçta boş veya boş olarak tanımlayabiliriz.
Ve sonra olay
Ben sadece onunla başlayacağım.
İlk önce boş bir dizi verelim.
Ve sonra yapabileceğimiz, seçilen rengi sadece değeri olmayan bir değişken olmak ve onu kaydetmek ve işleri biraz
daha temiz yapmak olarak belirledi.
Seçmenlerimi burada aşağıya indireceğim, böylece elimizdeki yukarıdaki şeyleri seçmeyen üç değişken
oluyor.
Ve sonra sayfadaki farklı öğeleri seçen değişkenlerimiz var.
TAMAM.
Öyleyse en başında ne olur?
Bu kodun tamamını çalıştırmak için init işlevi çalıştırıyoruz.
Ve bu kod bizim mod düğmesi dinleyicilerimizi ayarlayacak ve kare dinleyicilerimizi kuracak ve
sonra renkleri seçen sıfırlamayı çalıştırıp, metin içeriğini ve hepsini değiştiren renkleri rasgele
bir renk seçer.
Ve biz bu çizgiden kurtulabiliriz, çünkü bunu şimdi sıfırlama denilen init
işlevinin içinde yapıyoruz.
O halde devam etmeden önce bunun işe yarayıp yaramayacağına emin olalım.
Yeniledik yeniyi açarız. Hata yok.
Ve sayfayı yenilediğimi görebiliyorsunuz ve bu kodun tümü bu init işlevinde çalışıyor.
Ve içeride gördüğümüz her şeyi sıfırlıyor.
Böylece dinleyicilerimiz doğru bir şekilde kuruldu.
Doğru mesajı alıyoruz.
Tekrar oynayalım.
Her şey düzgün çalışıyor.
Kolay mod oynayalım.
Oraya gidiyoruz.
Bir kez daha tekrar oynayalım.
Harika.
Bu yüzden iyi çalışıyor.
Yapabileceğimiz bir değişiklik daha var; bu, bu
işlevi burada ve şimdi biraz uzun sürüyor ve birlikte çalıştığım
bazı insanlara, işlevin ne kadar süreceği konusunda katı kurallar var.
Bazı insanlar, kodunuzun 10 satırdan uzun olup olmadığını kendi işlevine bölmeniz gerektiğini söyleyecektir.
Yani burada yapabiliriz.
Bu, kendi yapabileceği
bir işlevi olabilir, çünkü burada yapabileceğimiz bir mod düğmesi dinleyicisi kuruyor.
Veya
sadece yazma modu düğmesi ayarlama modu düğmeleri çağıralım ve o zaman burada fonksiyonu mod düğmelerini ayarlamak için bildirelim.
Ve burada, o zaman yalnızca bir
başlangıcında bir kez girinti çalıştırmak olacak bu kodu yapıştırın.
Mod düğmesi dinleyicilerini kurduk ve aynı şeyi burada yapabiliriz.
Bu kodu kopyalayın ve bu kişiye kare dinleyiciler
kurmanın bir adını verelim ya da sadece bunun gibi kareler kurmasını çağıralım ve sonra bir dizi ayar yazalım.
Ve sermayeyi kullanmadığımı fark ediyorum orada bulunmuyorsun.
Dolayısıyla burada kareler oluşturmaya
dikkat etmem gerekiyor ve kodumuzun aynı şekilde çalıştığından emin olalım.
Şimdi bizim init gerçekten güzel ve temiz.
Kareleri ayarlayan mod düğmelerini ayarlar ve gördüğümüz her şeyi sıfırlar.
Yenilemeye çalışalım.
Görünüşe göre bizim Meydanı hala iyi çalışıyordu.
Onları daha fazla yenilersek mod düğmelerimiz yine de işe yarar.
Bu yüzden hepsi harika ve her şey yolunda gidiyor gibi görünüyor.
Şimdilik refactor'a kadar süreceğimiz kadarıyla.
Ancak size gelecekteki videolarda iyileştirmek isteyeceğimiz birkaç şeyi göstereceğim.
Javascript hakkında biraz bilgi edindikten sonra onunla daha rahat edelim, bazı tasarım desenlerinden
bahsedeceğiz ve Tasarım Desenleri temel olarak kodunuzu yapılandırma yöntemlerimizdir, böylece bu kodu alabiliriz.
Aynı oyunu yapmak için aynı mantıkla aynı şekilde çalışır ve 10 farklı kişi bunu
10 farklı yolla yazabilir ve bu sadece hangi fonksiyonların ya da değişkenlerin adlarının değil.
Ayrıca şeyleri genel olarak nasıl yapılandıracağımız ve en basit olanı veya
en yaygın olanlarından birini modül tasarım deseni olarak adlandırdığımızda da geçerlidir.
Bunun anlamı, nesnelere bir sürü
özellik ekleyebilmemizdir; bu nedenle, nesnenin içinde bulunmayan bu değişken gibi değişkenlerimiz yok.
Pencere nesnesinde bu gibi kendi başlarına olan herhangi bir işlevimiz yok.
Daha ziyade, onları kendi nesnemize ekliyoruz.
Yani böyle bir oyun nesnesine sahip olabilirsiniz.
Ve sonra Game dot yazabiliriz ve biz sadece bir parçasını yapacağız.
Game dot init bir işlevdir ve biz sadece bu
kodu orada kopyalayacağız ve bunu her tekli her özellik değişkeni için yapacağız ve en sonunda oyuna gireceğiz.
Ve bunun arkasındaki mantık biraz daha karmaşıktır.
Kısa versiyon, şeyleri yapılandırılmış ve organize etmemize yardımcı oluyor.
Ayrıca, nesne videolarından birinde daha önce bahsettiğim ad çarpışmalarını önlemeye de yardımcı olur.
Bu yüzden tüm refactor'u gözden geçirmeyeceğim.
Sahip olduğumuz şey yeterince iyi.
İşe yarıyor.
Ancak bir geliştirici
olarak büyümeye devam edersiniz ve bir kere daha rahat ederseniz dikkat
etmeniz gereken şeylerden biri de javascript tasarım kalıpları olduğunu öğrenir ve bunun üzerine yazılmış kitaplar bulunur.
Makaleler
ve bloglar ve çok sayıda video var ve javascriptinizi yapılandırmanızla ilgili çevrimiçi olan tüm dersler var.
Yani odağı değil.
Ve yine de gerçekten
sadece içeriğe odaklanmak istiyorum kodu the HTML the javascript C mantık değerlendirmek ve yapısı daha sonra gelebilir.
Fakat sadece bunu yapılandırmanın başka yollarının olduğunu bilmenizi isterim.