Javascript’in bazı özellikleri oldukça güzelken aynı zamanda bu özellikler o kadar iyi olmayabiliyor. Bir açılış ve kapanış komut dosyası etiketini HTML dosyasının başına eklemek ve tam oraya bir Spaghetti kodu atmak kuşkusuz en basit özelliklerden biridir. Bu çok işe yaramaktadır… Yoksa yaramamakta mıdır?
Spaghetti’nin ne olduğunu merak ediyor olabilirsiniz. Hemen cevaplayalım:
Spaghetti kodu adının verilmesi aslında bu kod yapısının karmaşık ve birbirine dolanmış gibi olmasından kaynaklanmaktadır; bu isim biraz da bu kodu kötülemek için verilmiştir.
Bu kodun sürdürülebilirliği, hata ayıklanabilmesi neredeyse imkansız gibidir ve hatalar oluşmasına oldukça müsaittir. Web tasarımı ve geliştirmesi işi zaten oldukça yorucudur, bu işlerin daha da zor hale gelmesini istemeyiz, öyle değil mi?
Peki, öyleyse bu tarz bir kodu yazmaktan nasıl kurtulabiliriz? Bizce bunun iki adet yöntemi bulunuyor. Elbette bu yöntemlerin sadece bizim fikrimiz olduğunu vurgulamakta yarar var. Bunlardan birincisi hizmetinizin içinde yer alan sayısız Javascript çerçevelerini (framework) kullanmaktır. Diğeri ise, yapı ve kalıplar/desenler şeklinde Javascript kodu yazmayı öğrenmektir.
MVP, MCV ve MVVM gibi yaygın kullanılan kalıplar/desenler bu işle uğraşanlara çözümler oluşturma konusunda yardımcı olmaktadır. Bu yazımızda sizler için ağırlıklı olarak MVC kalıbına/desenine yer vereceğiz. (MVC = Model View Controller)
MODEL/Veriler/Veri Katmanı: Burası uygulamanızdaki verilerin depolandığı yerdir. Bu model adı verilen kısım denetleyiciler ve görünüşlerden, daha geniş kapsamdan bilinçli olarak ayrılmıştır. Modelde bir değişiklik olduğu zaman değişimin Event Dispatcher bölümünde meydana geldiğini gösteren gözlemciler bunu bildirecektir.
VIEW/Arayüz/Sunum Katmanı: Burası sizin DOM’a izin veren ve Event Handlers (onmouseover, click vs.) gibi kısımları kurmanızdan sorumlu olan uygulamanızın bir bölümüdür. Bu arayüz kısmı aynı zamanda HTML sunumunuzdan sorumlu olan bölümdür. Kullanıcı giriş alanını kullanarak bir veri girdiği zaman arayüz/view bölümü bir Event Dispatcher kullanacak, bu da denetleyicilere bildirilecek ve denetleyiciler de modeli güncelleyecektir. View mode içinde hızlı bir ayrıştırma yapmayı sağlamaktadır.
Controller/Denetleyici/Uygulama Mantığı: Denetleyici, View ile Model arasındaki tutkal gibidir. Controller, Model veya View içinde meydana gelen olayları işler veya yanıt verir. Kullanıcı View kısmını değiştirdiğinde Modeli günceller ve aynı zamanda Model değiştiği zaman View kısmını günceller. Kullanıcı görev eklemeyi tıkladığı zaman bu tıklama denetleyiciye aktarılır ve bu eklenen görevle denetleyici modeli modifiye eder. Diğer başka karar verici veya mantık durumları bu bölümde performans gösterir (HTML kullanarak yerel depolama, veri tabanına eşzamansız kayıt yapma vs.).
Event Dispatcher: Event Dispatcher üzerine sayısız metodu, fonksiyonu eklemenizi sağlayan bir nesnedir.
Genel Bakış
Şimdiye kadar MVC mimarisinin ne olduğunu ve neden Javascript kullanmanız gerektiğine dair temel bir anlayışa sahip oldunuz. Şimdi uygulamanızı/app yapmaya hazırsınız. Bu dersimizin nasıl işleyeceğine dair siz kısaca bilgi verelim. İlk olarak size bir kod sunacağız. Böylece işlemi inceleyebileceksiniz ve bu noktadan hareketle gelişim gösterebileceksiniz. Bazı temel kavramlar biraz zorlayıcı gelebilir. Bunları öğrenene kadar aşağıdaki örnekleri incelemeniz yararlı olacaktır. Bu dersimizi anlamanız için biraz Javascript deneyimine sahip olmanız ve temel HTML kodları ile ilgili bilgi sahibi olmanız gerekli olabilir. Java konusunda yeterli bilginiz yoksa önce bu konuda biraz araştırma yapmanız gerekebilir.
