Last active
June 15, 2025 06:38
-
-
Save cemtopkaya/4e6a7f1f090620342103d45e558f6587 to your computer and use it in GitHub Desktop.
MVP desenine uygun vanillajs web sayfası örneği
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- index.html --> | |
| <!DOCTYPE html> | |
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>MVP Örneği</title> | |
| </head> | |
| <body> | |
| <h1>Kullanıcı Listesi</h1> | |
| <button id="load-users">Kullanıcıları Yükle</button> | |
| <ul id="user-list"></ul> | |
| <script src="model.js"></script> | |
| <script src="view.js"></script> | |
| <script src="presenter.js"></script> | |
| <script> | |
| // Bağlantıyı başlat | |
| const view = new UserView(); | |
| const model = new UserModel(); | |
| const presenter = new UserPresenter(view, model); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // model.js | |
| class UserModel { | |
| async fetchUsers() { | |
| const res = await fetch('https://jsonplaceholder.typicode.com/users'); | |
| return res.json(); // kullanıcı listesi döner | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // presenter.js | |
| class UserPresenter { | |
| constructor(view, model) { | |
| this.view = view; | |
| this.model = model; | |
| // View'daki butona basıldığında ne olacağını tanımla | |
| this.view.bindLoadUsers(this.handleLoadUsers.bind(this)); | |
| } | |
| async handleLoadUsers() { | |
| try { | |
| const users = await this.model.fetchUsers(); | |
| this.view.showUsers(users); | |
| } catch (err) { | |
| this.view.showError('Veri alınamadı'); | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // view.js | |
| class UserView { | |
| constructor() { | |
| this.button = document.getElementById('load-users'); | |
| this.list = document.getElementById('user-list'); | |
| } | |
| bindLoadUsers(handler) { | |
| this.button.addEventListener('click', handler); | |
| } | |
| showUsers(users) { | |
| this.list.innerHTML = ''; | |
| users.forEach(user => { | |
| const li = document.createElement('li'); | |
| li.textContent = user.name; | |
| this.list.appendChild(li); | |
| }); | |
| } | |
| showError(error) { | |
| this.list.innerHTML = `<li style="color: red;">Hata: ${error}</li>`; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment