Rimmel.js’de Event Adapter’lar: Temiz ve Test Edilebilir UI i\u00e7in G\u00f6r\u00fcn\u00fcm ve Model Ayr\u0131m\u0131<\/p>\n
Karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczleri geli\u015ftirmek, \u00f6zellikle g\u00f6r\u00fcn\u00fcm (view) ve model (data) katmanlar\u0131 aras\u0131nda s\u0131k\u0131 bir ba\u011flant\u0131 kuruldu\u011funda, s\u00fcrd\u00fcr\u00fclebilirli\u011fi ve test edilebilirli\u011fi zorla\u015ft\u0131ran bir durumdur. Rimmel.js gibi modern JavaScript framework’lerinde, bu sorunu \u00e7\u00f6zmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir y\u00f6ntem ise Event Adapter’lard\u0131r. Bu makale, Rimmel.js’de Event Adapter’lar\u0131n nas\u0131l kullan\u0131laca\u011f\u0131n\u0131, g\u00f6r\u00fcn\u00fcm ve model ayr\u0131m\u0131n\u0131n faydalar\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacakt\u0131r. Daha temiz, daha test edilebilir ve daha \u00f6l\u00e7eklenebilir uygulamalar geli\u015ftirmek i\u00e7in bu \u00f6nemli konsepti \u00f6\u011frenmeye haz\u0131rlan\u0131n!<\/p>\n
Rimmel.js’de Event Adapter’lar, g\u00f6r\u00fcn\u00fcm ve model katmanlar\u0131 aras\u0131nda gev\u015fek bir ba\u011flant\u0131 kurulmas\u0131n\u0131 sa\u011flayan, arac\u0131 bir katmand\u0131r. G\u00f6r\u00fcn\u00fcm taraf\u0131ndaki kullan\u0131c\u0131 etkile\u015fimlerini (event’ler) yakalayan ve bu event’leri model katman\u0131na ileten, model katman\u0131ndaki de\u011fi\u015fiklikleri de g\u00f6r\u00fcn\u00fcm taraf\u0131na yans\u0131tan bir k\u00f6pr\u00fc g\u00f6revi g\u00f6r\u00fcrler. Bu ayr\u0131m, kodun daha mod\u00fcler, daha anla\u015f\u0131l\u0131r ve daha kolay test edilebilir olmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir buton t\u0131klamas\u0131 event’i, adapter sayesinde modeldeki verileri g\u00fcncellemek i\u00e7in kullan\u0131labilir ve bu g\u00fcncellemeler, adapter arac\u0131l\u0131\u011f\u0131yla g\u00f6r\u00fcn\u00fcmde otomatik olarak yans\u0131t\u0131l\u0131r. Bu sayede, g\u00f6r\u00fcn\u00fcm ve model katmanlar\u0131n\u0131n birbirinden ba\u011f\u0131ms\u0131z olarak geli\u015ftirilmesi ve test edilmesi m\u00fcmk\u00fcn olur. K\u0131sacas\u0131, Event Adapter’lar, kodunuzun sa\u011flaml\u0131\u011f\u0131n\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131rmak i\u00e7in kritik bir rol oynar.<\/p>\n
\u015eimdi, basit bir \u00f6rnek ile Rimmel.js’de Event Adapter’lar\u0131n nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 inceleyelim. Diyelim ki, bir kullan\u0131c\u0131 ad\u0131 girdisi ve bir “Kaydet” butonu olan bir formumuz var. Kullan\u0131c\u0131 ad\u0131 girdisindeki de\u011fi\u015fiklikleri modelde g\u00fcncellemek ve “Kaydet” butonuna t\u0131kland\u0131\u011f\u0131nda modeldeki verileri kaydetmek istiyoruz.<\/p>\n
\u0130lk olarak, modelimizi tan\u0131mlayal\u0131m:<\/p>\n
class KullaniciModeli {\n constructor() {\n this.kullaniciAdi = \"\";\n }\n\n kullaniciAdiDegistir(yeniKullaniciAdi) {\n this.kullaniciAdi = yeniKullaniciAdi;\n \/\/ Veri g\u00fcncellemesini tetikle (\u00f6rne\u011fin, API \u00e7a\u011fr\u0131s\u0131)\n }\n\n kaydet() {\n \/\/ Modeldeki verileri kaydet (\u00f6rne\u011fin, API \u00e7a\u011fr\u0131s\u0131)\n }\n}<\/pre>\n<\/code><\/p>\n
Ard\u0131ndan, g\u00f6r\u00fcn\u00fcm\u00fcm\u00fcz\u00fc (HTML) olu\u015ftural\u0131m:<\/p>\n
\n