Web-Dev-For-Beginners/translations/ms/7-bank-project/4-state-management

Membina Aplikasi Perbankan Bahagian 4: Konsep Pengurusan Keadaan

Kuiz Pra-Kuliah

Kuiz pra-kuliah

Pengenalan

Pengurusan keadaan adalah seperti sistem navigasi pada kapal angkasa Voyager – apabila semuanya berjalan lancar, anda hampir tidak menyedari kehadirannya. Tetapi apabila berlaku masalah, ia menjadi perbezaan antara mencapai ruang antara bintang dan hanyut tanpa arah di dalam kekosongan kosmik. Dalam pembangunan web, keadaan mewakili segala yang aplikasi anda perlu ingat: status log masuk pengguna, data borang, sejarah navigasi, dan keadaan antara muka sementara.

Apabila aplikasi perbankan anda berkembang daripada borang log masuk yang mudah kepada aplikasi yang lebih canggih, anda mungkin telah menghadapi beberapa cabaran biasa. Muat semula halaman dan pengguna akan terkeluar secara tidak dijangka. Tutup pelayar dan semua kemajuan hilang. Cuba menyelesaikan masalah dan anda terpaksa mencari melalui pelbagai fungsi yang semuanya mengubah data yang sama dengan cara yang berbeza.

Ini bukan tanda pengekodan yang lemah – ia adalah kesakitan semula jadi yang berlaku apabila aplikasi mencapai tahap kerumitan tertentu. Setiap pembangun menghadapi cabaran ini apabila aplikasi mereka beralih daripada "bukti konsep" kepada "sedia untuk pengeluaran."

Dalam pelajaran ini, kita akan melaksanakan sistem pengurusan keadaan berpusat yang mengubah aplikasi perbankan anda menjadi aplikasi profesional yang boleh dipercayai. Anda akan belajar mengurus aliran data dengan cara yang boleh diramal, mengekalkan sesi pengguna dengan betul, dan mencipta pengalaman pengguna yang lancar seperti yang diperlukan oleh aplikasi web moden.

Prasyarat

Sebelum mendalami konsep pengurusan keadaan, anda perlu memastikan persekitaran pembangunan anda telah disediakan dengan betul dan asas aplikasi perbankan anda telah siap. Pelajaran ini dibina secara langsung berdasarkan konsep dan kod daripada bahagian sebelumnya siri ini.

Pastikan anda mempunyai komponen berikut sebelum meneruskan:

Persediaan Diperlukan:

• Lengkapkan pelajaran pengambilan data - aplikasi anda sepatutnya berjaya memuatkan dan memaparkan data akaun
• Pasang Node.js pada sistem anda untuk menjalankan API backend
• Mulakan server API secara tempatan untuk mengendalikan operasi data akaun

Uji Persekitaran Anda:

Sahkan bahawa server API anda berjalan dengan betul dengan melaksanakan arahan ini dalam terminal:

curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result

Apa yang dilakukan oleh arahan ini:

• Menghantar permintaan GET kepada server API tempatan anda
• Menguji sambungan dan mengesahkan server memberikan respons
• Mengembalikan maklumat versi API jika semuanya berfungsi dengan betul

---

Mendiagnosis Masalah Keadaan Semasa

Seperti Sherlock Holmes memeriksa tempat kejadian jenayah, kita perlu memahami dengan tepat apa yang berlaku dalam pelaksanaan semasa kita sebelum kita dapat menyelesaikan misteri kehilangan sesi pengguna.

Mari kita lakukan eksperimen mudah yang mendedahkan cabaran pengurusan keadaan yang mendasari:

🧪 Cuba Ujian Diagnostik Ini:

1. Log masuk ke aplikasi perbankan anda dan navigasi ke papan pemuka
2. Muat semula halaman pelayar
3. Perhatikan apa yang berlaku kepada status log masuk anda

Jika anda diarahkan semula ke skrin log masuk, anda telah menemui masalah klasik dalam pengekalan keadaan. Tingkah laku ini berlaku kerana pelaksanaan semasa kita menyimpan data pengguna dalam pembolehubah JavaScript yang diset semula dengan setiap muat semula halaman.

Masalah Pelaksanaan Semasa:

Pembolehubah account yang mudah daripada pelajaran sebelumnya mencipta tiga masalah utama yang menjejaskan pengalaman pengguna dan penyelenggaraan kod:

Masalah	Punca Teknikal	Kesan kepada Pengguna
Kehilangan Sesi	Muat semula halaman membersihkan pembolehubah JavaScript	Pengguna perlu kerap log masuk semula
Kemas kini Berselerak	Pelbagai fungsi mengubah keadaan secara langsung	Menyelesaikan masalah menjadi semakin sukar
Pembersihan Tidak Lengkap	Log keluar tidak membersihkan semua rujukan keadaan	Kebimbangan keselamatan dan privasi berpotensi

Cabaran Arkitek:

Seperti reka bentuk berkompartmen Titanic yang kelihatan kukuh sehingga beberapa kompartmen banjir serentak, menyelesaikan masalah ini secara individu tidak akan menangani masalah arkitek yang mendasari. Kita memerlukan penyelesaian pengurusan keadaan yang menyeluruh.

💡 Apa sebenarnya yang kita cuba capai di sini?

Pengurusan keadaan sebenarnya tentang menyelesaikan dua teka-teki asas:

1. Di mana data saya?: Menjejaki maklumat yang kita ada dan dari mana ia datang
2. Adakah semua orang berada di halaman yang sama?: Memastikan apa yang pengguna lihat sepadan dengan apa yang sebenarnya berlaku

Pelan Permainan Kita:

Daripada mengejar ekor kita sendiri, kita akan mencipta sistem pengurusan keadaan berpusat. Anggaplah ia seperti mempunyai seorang yang sangat teratur yang bertanggungjawab terhadap semua perkara penting:

Memahami aliran data ini:

• Memusatkan semua keadaan aplikasi di satu lokasi
• Mengalirkan semua perubahan keadaan melalui fungsi terkawal
• Memastikan UI kekal selaras dengan keadaan semasa
• Menyediakan corak yang jelas dan boleh diramal untuk pengurusan data

💡 Pandangan Profesional: Pelajaran ini memberi tumpuan kepada konsep asas. Untuk aplikasi yang kompleks, perpustakaan seperti Redux menyediakan ciri pengurusan keadaan yang lebih maju. Memahami prinsip asas ini akan membantu anda menguasai mana-mana perpustakaan pengurusan keadaan.

⚠️ Topik Lanjutan: Kita tidak akan membincangkan kemas kini UI automatik yang dicetuskan oleh perubahan keadaan, kerana ini melibatkan konsep Pengaturcaraan Reaktif. Anggaplah ini sebagai langkah seterusnya yang baik untuk perjalanan pembelajaran anda!

Tugas: Memusatkan Struktur Keadaan

Mari kita mulakan transformasi pengurusan keadaan yang berselerak kepada sistem berpusat. Langkah pertama ini menetapkan asas untuk semua penambahbaikan yang akan datang.

Langkah 1: Cipta Objek Keadaan Berpusat

Gantikan deklarasi account yang mudah:

let account = null;

Dengan objek keadaan yang berstruktur:

let state = {
  account: null
};

Mengapa perubahan ini penting:

• Memusatkan semua data aplikasi di satu lokasi
• Menyediakan struktur untuk menambah lebih banyak sifat keadaan kemudian
• Mencipta sempadan yang jelas antara keadaan dan pembolehubah lain
• Menetapkan corak yang boleh berkembang apabila aplikasi anda berkembang

Langkah 2: Kemas kini Corak Akses Keadaan

Kemas kini fungsi anda untuk menggunakan struktur keadaan baharu:

Dalam fungsi register() dan login(), gantikan:

account = ...

Dengan:

state.account = ...

Dalam fungsi updateDashboard(), tambahkan baris ini di bahagian atas:

const account = state.account;

Apa yang dicapai oleh kemas kini ini:

• Mengekalkan fungsi sedia ada sambil meningkatkan struktur
• Menyediakan kod anda untuk pengurusan keadaan yang lebih canggih
• Mencipta corak yang konsisten untuk mengakses data keadaan
• Menetapkan asas untuk kemas kini keadaan berpusat

💡 Nota: Penstrukturan semula ini tidak segera menyelesaikan masalah kita, tetapi ia mencipta asas penting untuk penambahbaikan yang kuat yang akan datang!

Melaksanakan Kemas Kini Keadaan Terkawal

Dengan keadaan kita yang berpusat, langkah seterusnya melibatkan penubuhan mekanisme terkawal untuk pengubahsuaian data. Pendekatan ini memastikan perubahan keadaan yang boleh diramal dan penyelesaian masalah yang lebih mudah.

Prinsip terasnya menyerupai kawalan trafik udara: daripada membenarkan pelbagai fungsi mengubah keadaan secara bebas, kita akan menyalurkan semua perubahan melalui satu fungsi terkawal. Corak ini menyediakan pengawasan yang jelas tentang bila dan bagaimana data berubah.

Pengurusan Keadaan Tidak Boleh Ubah:

Kita akan menganggap objek state kita sebagai tidak boleh ubah, bermaksud kita tidak pernah mengubahnya secara langsung. Sebaliknya, setiap perubahan mencipta objek keadaan baharu dengan data yang dikemas kini.

Walaupun pendekatan ini pada mulanya kelihatan tidak cekap berbanding pengubahsuaian langsung, ia memberikan kelebihan yang besar untuk penyelesaian masalah, ujian, dan mengekalkan kebolehramalan aplikasi.

Kelebihan pengurusan keadaan tidak boleh ubah:

Kelebihan	Penerangan	Kesan
Kebolehramalan	Perubahan hanya berlaku melalui fungsi terkawal	Lebih mudah untuk menyelesaikan masalah dan menguji
Penjejakan Sejarah	Setiap perubahan keadaan mencipta objek baharu	Membolehkan fungsi undo/redo
Pencegahan Kesan Sampingan	Tiada pengubahsuaian tidak sengaja	Mengelakkan pepijat misteri
Pengoptimuman Prestasi	Mudah untuk mengesan bila keadaan benar-benar berubah	Membolehkan kemas kini UI yang cekap

Ketidakbolehubahan JavaScript dengan Object.freeze():

JavaScript menyediakan Object.freeze() untuk menghalang pengubahsuaian objek:

const immutableState = Object.freeze({ account: userData });
// Any attempt to modify immutableState will throw an error

Memecahkan apa yang berlaku di sini:

• Menghalang penugasan atau penghapusan sifat secara langsung
• Membuang pengecualian jika percubaan pengubahsuaian dibuat
• Memastikan perubahan keadaan mesti melalui fungsi terkawal
• Mencipta kontrak yang jelas untuk bagaimana keadaan boleh dikemas kini

💡 Penyelaman Mendalam: Ketahui perbezaan antara objek tidak boleh ubah cetek dan mendalam dalam dokumentasi MDN. Memahami perbezaan ini adalah penting untuk struktur keadaan yang kompleks.

Tugas

Mari kita cipta fungsi updateState() yang baharu:

function updateState(property, newData) {
  state = Object.freeze({
    ...state,
    [property]: newData
  });
}

Dalam fungsi ini, kita mencipta objek keadaan baharu dan menyalin data daripada keadaan sebelumnya menggunakan operator penyebaran (...). Kemudian kita menimpa sifat tertentu objek keadaan dengan data baharu menggunakan notasi kurungan [property] untuk penugasan. Akhirnya, kita mengunci objek untuk menghalang pengubahsuaian menggunakan Object.freeze(). Buat masa ini, kita hanya menyimpan sifat account dalam keadaan, tetapi dengan pendekatan ini anda boleh menambah sebanyak mana sifat yang diperlukan dalam keadaan.

Kita juga akan mengemas kini inisialisasi state untuk memastikan keadaan awal juga dibekukan:

let state = Object.freeze({
  account: null
});

Selepas itu, kemas kini fungsi register dengan menggantikan penugasan state.account = result; dengan:

updateState('account', result);

Lakukan perkara yang sama dengan fungsi login, gantikan state.account = data; dengan:

updateState('account', data);

Kita kini akan mengambil peluang untuk menyelesaikan masalah data akaun yang tidak dibersihkan apabila pengguna mengklik Logout.

Cipta fungsi baharu logout():

function logout() {
  updateState('account', null);
  navigate('/login');
}

Dalam updateDashboard(), gantikan pengalihan return navigate('/login'); dengan return logout();;

Cuba daftar akaun baharu, log keluar dan log masuk semula untuk memastikan semuanya masih berfungsi dengan betul.

Tip: anda boleh melihat semua perubahan keadaan dengan menambahkan console.log(state) di bahagian bawah updateState() dan membuka konsol dalam alat pembangunan pelayar anda.

Melaksanakan Pengekalan Data

Masalah kehilangan sesi yang kita kenal pasti sebelum ini memerlukan penyelesaian pengekalan yang mengekalkan keadaan pengguna merentasi sesi pelayar. Ini mengubah aplikasi kita daripada pengalaman sementara kepada alat profesional yang boleh dipercayai.

Pertimbangkan bagaimana jam atom mengekalkan masa yang tepat walaupun semasa gangguan kuasa dengan menyimpan keadaan kritikal dalam memori tidak mudah hilang. Begitu juga, aplikasi web memerlukan mekanisme penyimpanan yang berterusan untuk mengekalkan data pengguna penting merentasi sesi pelayar dan muat semula halaman.

Soalan Strategik untuk Pengekalan Data:

Sebelum melaksanakan pengekalan, pertimbangkan faktor kritikal ini:

Soalan	Konteks Aplikasi Perbankan	Kesan Keputusan
Adakah data sensitif?	Baki akaun, sejarah transaksi	Pilih kaedah penyimpanan yang selamat
Berapa lama ia perlu bertahan?	Status log masuk vs. keutamaan UI sementara	Pilih tempoh penyimpanan yang sesuai
Adakah server memerlukannya?	Token pengesahan vs. tetapan UI	Tentukan keperluan perkongsian

Pilihan Penyimpanan Pelayar:

Pelayar moden menyediakan beberapa mekanisme penyimpanan, masing-masing direka untuk kegunaan yang berbeza:

API Penyimpanan Utama:

1. localStorage: Penyimpanan Key/Value yang berterusan

   • Mengekalkan data merentasi sesi pelayar tanpa had
   • Bertahan semula pelayar dan reboot komputer
   • Dihadkan kepada domain laman web tertentu
   • Sempurna untuk keutamaan pengguna dan status log masuk

2. sessionStorage: Penyimpanan sesi sementara

   • Berfungsi sama seperti localStorage semasa sesi aktif
   • Dibersihkan secara automatik apabila tab pelayar ditutup
   • Ideal untuk data sementara yang tidak perlu bertahan

3. HTTP Cookies: Penyimpanan yang dikongsi dengan server

   • Dihantar secara automatik dengan setiap permintaan server
   • Sempurna untuk token pengesahan
   • Terhad dalam saiz dan boleh menjejaskan prestasi

Keperluan Penyusunan Data:

Kedua-dua localStorage dan sessionStorage hanya menyimpan string:

// Convert objects to JSON strings for storage
const accountData = { user: 'john', balance: 150 };
localStorage.setItem('account', JSON.stringify(accountData));

// Parse JSON strings back to objects when retrieving
const savedAccount = JSON.parse(localStorage.getItem('account'));

Memahami penyusunan:

• Menukar objek JavaScript kepada string JSON menggunakan JSON.stringify()
• Membina semula objek daripada JSON menggunakan JSON.parse()
• Mengendalikan objek bersarang kompleks dan array secara automatik
• Gagal pada fungsi, nilai undefined, dan rujukan bulat

💡 Pilihan Lanjutan: Untuk aplikasi luar talian yang kompleks dengan dataset besar, pertimbangkan API IndexedDB. Ia menyediakan pangkalan data penuh di sisi klien tetapi memerlukan pelaksanaan yang lebih kompleks.

Tugas: Laksanakan Penyimpanan localStorage

Mari kita laksanakan penyimpanan berterusan supaya pengguna kekal log masuk sehingga mereka secara eksplisit log keluar. Kita akan menggunakan localStorage untuk menyimpan data akaun merentasi sesi pelayar.

Langkah 1: Tentukan Konfigurasi Penyimpanan

const storageKey = 'savedAccount';

Apa yang disediakan oleh pemalar ini:

• Mencipta pengenal pasti yang konsisten untuk data yang disimpan
• Mengelakkan kesilapan menaip dalam rujukan kunci penyimpanan
• Memudahkan perubahan kunci penyimpanan jika diperlukan
• Mengikuti amalan terbaik untuk kod yang mudah diselenggara

Langkah 2: Tambah Penyimpanan Automatik

Tambahkan baris ini di akhir fungsi updateState():

localStorage.setItem(storageKey, JSON.stringify(state.account));

Penjelasan tentang apa yang berlaku di sini:

• Menukar objek akaun kepada string JSON untuk penyimpanan
• Menyimpan data menggunakan kunci penyimpanan yang konsisten
• Melaksanakan secara automatik setiap kali perubahan keadaan berlaku
• Memastikan data yang disimpan sentiasa diselaraskan dengan keadaan semasa

💡 Manfaat Seni Bina: Oleh kerana kita telah memusatkan semua kemas kini keadaan melalui updateState(), menambah penyimpanan hanya memerlukan satu baris kod. Ini menunjukkan kekuatan keputusan seni bina yang baik!

Langkah 3: Pulihkan Keadaan Semasa Aplikasi Dimuat

Cipta fungsi inisialisasi untuk memulihkan data yang disimpan:

function init() {
  const savedAccount = localStorage.getItem(storageKey);
  if (savedAccount) {
    updateState('account', JSON.parse(savedAccount));
  }

  // Our previous initialization code
  window.onpopstate = () => updateRoute();
  updateRoute();
}

init();

Memahami proses inisialisasi:

• Mengambil sebarang data akaun yang disimpan sebelumnya dari localStorage
• Menganalisis string JSON kembali kepada objek JavaScript
• Mengemas kini keadaan menggunakan fungsi kemas kini yang terkawal
• Memulihkan sesi pengguna secara automatik semasa halaman dimuat
• Melaksanakan sebelum kemas kini laluan untuk memastikan keadaan tersedia

Langkah 4: Optimumkan Laluan Lalai

Kemas kini laluan lalai untuk memanfaatkan penyimpanan:

Dalam updateRoute(), gantikan:

// Replace: return navigate('/login');
return navigate('/dashboard');

Mengapa perubahan ini masuk akal:

• Memanfaatkan sistem penyimpanan baru dengan berkesan
• Membolehkan papan pemuka mengendalikan pemeriksaan pengesahan
• Mengalihkan secara automatik ke log masuk jika tiada sesi yang disimpan
• Mencipta pengalaman pengguna yang lebih lancar

Uji Pelaksanaan Anda:

1. Log masuk ke aplikasi perbankan anda
2. Muat semula halaman pelayar
3. Sahkan anda kekal log masuk dan berada di papan pemuka
4. Tutup dan buka semula pelayar anda
5. Navigasi kembali ke aplikasi anda dan sahkan anda masih log masuk

🎉 Pencapaian Tercapai: Anda telah berjaya melaksanakan pengurusan keadaan berterusan! Aplikasi anda kini berfungsi seperti aplikasi web profesional.

Mengimbangi Penyimpanan dengan Kesegaran Data

Sistem penyimpanan kita berjaya mengekalkan sesi pengguna, tetapi memperkenalkan cabaran baru: data yang tidak segar. Apabila beberapa pengguna atau aplikasi mengubah data pelayan yang sama, maklumat cache tempatan menjadi usang.

Situasi ini menyerupai pelayar Viking yang bergantung pada carta bintang yang disimpan dan pemerhatian semasa bintang. Carta memberikan konsistensi, tetapi pelayar memerlukan pemerhatian segar untuk mengambil kira keadaan yang berubah. Begitu juga, aplikasi kita memerlukan keadaan pengguna yang berterusan dan data pelayan semasa.

🧪 Menemui Masalah Kesegaran Data:

1. Log masuk ke papan pemuka menggunakan akaun test
2. Jalankan arahan ini dalam terminal untuk mensimulasikan transaksi dari sumber lain:

curl --request POST \
     --header "Content-Type: application/json" \
     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
     http://localhost:5000/api/accounts/test/transactions

3. Muat semula halaman papan pemuka anda dalam pelayar
4. Perhatikan sama ada anda melihat transaksi baru

Apa yang ditunjukkan oleh ujian ini:

• Menunjukkan bagaimana penyimpanan tempatan boleh menjadi "usang" (tidak terkini)
• Mensimulasikan senario dunia nyata di mana perubahan data berlaku di luar aplikasi anda
• Mendedahkan ketegangan antara penyimpanan dan kesegaran data

Cabaran Kesegaran Data:

Masalah	Punca	Kesan kepada Pengguna
Data Usang	localStorage tidak pernah tamat secara automatik	Pengguna melihat maklumat yang tidak terkini
Perubahan Pelayan	Aplikasi/pengguna lain mengubah data yang sama	Pandangan tidak konsisten merentasi platform
Cache vs. Realiti	Cache tempatan tidak sepadan dengan keadaan pelayan	Pengalaman pengguna yang buruk dan kekeliruan

Strategi Penyelesaian:

Kami akan melaksanakan corak "penyegaran semasa dimuat" yang mengimbangi manfaat penyimpanan dengan keperluan untuk data segar. Pendekatan ini mengekalkan pengalaman pengguna yang lancar sambil memastikan ketepatan data.

Tugas: Laksanakan Sistem Penyegaran Data

Kami akan mencipta sistem yang secara automatik mengambil data segar dari pelayan sambil mengekalkan manfaat pengurusan keadaan berterusan.

Langkah 1: Cipta Pengemas Kini Data Akaun

async function updateAccountData() {
  const account = state.account;
  if (!account) {
    return logout();
  }

  const data = await getAccount(account.user);
  if (data.error) {
    return logout();
  }

  updateState('account', data);
}

Memahami logik fungsi ini:

• Memeriksa jika pengguna sedang log masuk (state.account wujud)
• Mengalihkan ke log keluar jika tiada sesi yang sah ditemui
• Mengambil data akaun segar dari pelayan menggunakan fungsi getAccount() yang sedia ada
• Mengendalikan ralat pelayan dengan baik dengan log keluar sesi yang tidak sah
• Mengemas kini keadaan dengan data segar menggunakan sistem kemas kini terkawal kita
• Mencetuskan penyimpanan localStorage automatik melalui fungsi updateState()

Langkah 2: Cipta Pengendali Penyegaran Papan Pemuka

async function refresh() {
  await updateAccountData();
  updateDashboard();
}

Apa yang dicapai oleh fungsi penyegaran ini:

• Menyelaraskan proses penyegaran data dan kemas kini UI
• Menunggu data segar dimuat sebelum mengemas kini paparan
• Memastikan papan pemuka menunjukkan maklumat yang paling terkini
• Menjaga pemisahan yang jelas antara pengurusan data dan kemas kini UI

Langkah 3: Integrasi dengan Sistem Laluan

Kemas kini konfigurasi laluan anda untuk mencetuskan penyegaran secara automatik:

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard', init: refresh }
};

Bagaimana integrasi ini berfungsi:

• Melaksanakan fungsi penyegaran setiap kali laluan papan pemuka dimuat
• Memastikan data segar sentiasa dipaparkan apabila pengguna menavigasi ke papan pemuka
• Menjaga struktur laluan sedia ada sambil menambah kesegaran data
• Menyediakan corak yang konsisten untuk inisialisasi khusus laluan

Uji Sistem Penyegaran Data Anda:

1. Log masuk ke aplikasi perbankan anda
2. Jalankan arahan curl dari sebelumnya untuk mencipta transaksi baru
3. Muat semula halaman papan pemuka anda atau navigasi keluar dan kembali
4. Sahkan bahawa transaksi baru muncul dengan segera

🎉 Keseimbangan Sempurna Tercapai: Aplikasi anda kini menggabungkan pengalaman lancar penyimpanan berterusan dengan ketepatan data pelayan segar!

Cabaran Ejen GitHub Copilot 🚀

Gunakan mod Ejen untuk menyelesaikan cabaran berikut:

Deskripsi: Laksanakan sistem pengurusan keadaan yang komprehensif dengan fungsi undo/redo untuk aplikasi perbankan. Cabaran ini akan membantu anda mempraktikkan konsep pengurusan keadaan lanjutan termasuk penjejakan sejarah keadaan, kemas kini tidak boleh ubah, dan penyelarasan antara muka pengguna.

Arahan: Cipta sistem pengurusan keadaan yang dipertingkatkan yang termasuk: 1) Array sejarah keadaan yang menjejaki semua keadaan sebelumnya, 2) Fungsi undo dan redo yang boleh mengembalikan keadaan sebelumnya, 3) Butang UI untuk operasi undo/redo di papan pemuka, 4) Had sejarah maksimum sebanyak 10 keadaan untuk mengelakkan masalah memori, dan 5) Pembersihan sejarah yang betul apabila pengguna log keluar. Pastikan fungsi undo/redo berfungsi dengan perubahan baki akaun dan berterusan merentasi penyegaran pelayar.

Ketahui lebih lanjut tentang mod ejen di sini.

🚀 Cabaran: Pengoptimuman Penyimpanan

Pelaksanaan anda kini mengendalikan sesi pengguna, penyegaran data, dan pengurusan keadaan dengan berkesan. Walau bagaimanapun, pertimbangkan sama ada pendekatan semasa kita mengimbangi kecekapan penyimpanan dengan fungsi secara optimum.

Seperti pemain catur yang membezakan antara kepingan penting dan pion yang boleh dikorbankan, pengurusan keadaan yang berkesan memerlukan mengenal pasti data mana yang mesti disimpan berbanding data yang harus sentiasa segar dari pelayan.

Analisis Pengoptimuman:

Nilai pelaksanaan localStorage semasa anda dan pertimbangkan soalan strategik ini:

• Apakah maklumat minimum yang diperlukan untuk mengekalkan pengesahan pengguna?
• Data mana yang cukup kerap berubah sehingga cache tempatan memberikan sedikit manfaat?
• Bagaimana pengoptimuman penyimpanan dapat meningkatkan prestasi tanpa merosakkan pengalaman pengguna?

Strategi Pelaksanaan:

• Kenal pasti data penting yang mesti disimpan (kemungkinan hanya pengenalan pengguna)
• Ubah pelaksanaan localStorage anda untuk menyimpan hanya data sesi kritikal
• Pastikan data segar sentiasa dimuat dari pelayan semasa lawatan papan pemuka
• Uji bahawa pendekatan yang dioptimumkan anda mengekalkan pengalaman pengguna yang sama

Pertimbangan Lanjutan:

• Bandingkan pertukaran antara menyimpan data akaun penuh vs. hanya token pengesahan
• Dokumentasikan keputusan dan alasan anda untuk ahli pasukan masa depan

Cabaran ini akan membantu anda berfikir seperti pembangun profesional yang mempertimbangkan pengalaman pengguna dan kecekapan aplikasi. Luangkan masa anda untuk bereksperimen dengan pendekatan yang berbeza!

Kuiz Selepas Kuliah

Kuiz selepas kuliah

Tugasan

Laksanakan dialog "Tambah transaksi"

Berikut adalah contoh hasil selepas menyelesaikan tugasan:

---

Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.