Person - Mother of all person classes14.10.2013
Geçen birkaç haftadır boş zamanlarımda, son birkaç günde ise gece gündüz üzerinde uğraştığım yeni bir anlamsız kod parçasını tanıtmak istiyorum. Gelenek icabı Person adını verdiğim klasik bir javascript sınıfı/fonksiyonu. Javascriptin orta-ileri konularıyla ilgili deneyimlerimi ve yeni başlayanlar için yol gösterebilecek anlatımları ilerleyen zamanlarda buralara saçmayı düşünüyorum; ama şimdilik konuya odaklanalım.
Person iki aşamalı bir kod parçası. İlki nesne yönelimli sınıf yapısı, ikincisi oluşturulan her yeni Person örneğini alıp HTML'e belli bir şablonla basma ve örneğe bilgi eklendikçe ya da mevcut bilgiler güncellendikçe HTML'deki karşılığını da güncelleme işi.
// Yeni Date örneği oluştur
var tarih = new Date()
// Timestamp al
tarih.getTime()
Yukarıdaki örnekte yeni bir değişken oluşturup ona Date objesinin tüm yapısını atadık. Böylece tarih değişkenine Date'te tanımlı birçok metod ve özellik eklenmiş oldu.
İşte sınıf diyerek kastettiğim şey bu örnekteki yapı. Person da böyle bir sınıf.
// Yeni Person örneği oluştur
var enes = new Person("scriptype",20,"erkek","istanbul")
// Info ekle
enes.addInfo("okul","ankara")
enes değişkenine Person yapısını atadık. Person'ın bir özelliği, instance oluşturma anında en az bir parametre girmek zorunda olmanız. Girilen parametreler sırasıyla id, age, sex ve location bilgileri olarak enes.info objesine kaydedildi.
Oluşturulan instance'ın bilgileri localStorage'da depolanıyor ve instance oluşturma/değiştirme anlarında localStorage'ı kontrol eden bir fonksiyon tetikleniyor (ikinci aşama). HTML'de önceden tanımlı bir template yapısına localStorage'daki verileri atayıp template'i HTML'e basıyor.
HTML
<script type="text/template" id="person_template">
<div class="profile_info">
<h1 class="id">{{Name}}</h1>
<h2>
<span class="age">{{Age}}</span>,
<span class="sex">{{Sex}}</span>,
<span class="location">{{Location}}</span>
</h2>
</div>
<ul class="timeline"></ul>
</script>
<div id="people"></div>
<script type="text/javascript" src="js/view.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/global.js" charset="utf-8"></script>
View.JS
for (var personObject in localStorage) {
var
person = JSON.parse( localStorage[personObject] ),
template = $.parseHTML( $("script#person_template").text() );
if ( $("div#"+person.info.uniqueId).text() !== "" ) {
htmlize(person, "html");
}
else {
htmlize(person, "append", template);
}
}
htmlize fonksiyonunda metod olarak "append" mi yoksa "html" mi kullanıldığına bakılarak son işlemler yapılıyor. Üzerinde daha fazla konuşmaya gerek yok, incelemek isteyenler bu repoya gidiyor.
- s-nospam-criptypergmailcom