Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

АрхитСктурный ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ MVC β€” JavaScript β€” Π”ΠΎΠΊΠ°

Designing is fundamentally about taking things apart… in such a way that they can be put back together. So separating things into things that can be composed that’s what design is.

β€” Rich Hickey Design. Composition and Performance

Когда ΠΌΡ‹ пишСм слоТныС прилоТСния, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ, ΠΈΠ½ΠΎΠ³Π΄Π° ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π° Π½Π΅ ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅:

  • ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π½Π° сСрвСрС;
  • ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ послС ΠΊΠ»ΠΈΠΊΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ;
  • Π²Π°Π»ΠΈΠ΄ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· Ρ„ΠΎΡ€ΠΌΡ‹;
  • Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ рСсурсы, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, скрипты;
  • Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ стороннСС API ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚.

БчитаСтся Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Ρ‚ΠΎΠ½ΠΎΠΌ Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‰ΠΈΠΉΡΡ ΠΊΠΎΠ΄ Π½Π° ΠΌΠΎΠ΄ΡƒΠ»ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‚ Π·Π° свои ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ. Как ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ Π½Π° ΠΌΠΎΠ΄ΡƒΠ»ΠΈ, ΠΏΠΎ ΠΊΠ°ΠΊΠΈΠΌ критСриям ΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌ β€” Π½Π° эти вопросы стараСтся ΠΎΡ‚Π²Π΅Ρ‚ΠΈΡ‚ΡŒ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ MVC.

πŸ›

Π­Ρ‚ΠΎ ΡΡ‚Π°Ρ‚ΡŒΡ ΠΈΠ· Ρ†ΠΈΠΊΠ»Π° ΠΎΠ± Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π΅ ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Π°Ρ… проСктирования. Π˜Ρ… Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΠΈ ΠΏΠΎΠ»ΡŒΠ·Ρƒ ΠΌΡ‹ рассматриваСм Π² ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΈΠ· Ρ†ΠΈΠΊΠ»Π°. Π’ этой ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΡΡ‚Π°Ρ‚ΡŒΡΡ… β€” рассматриваСм ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.

ΠšΡ€Π°Ρ‚ΠΊΠΎ

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «ΠšΡ€Π°Ρ‚ΠΊΠΎ»

MVC (сокращСниС ΠΎΡ‚ Modelβ€”Viewβ€”Controller) β€” это Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½Ρ‹ΠΉ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π΅Π»ΠΈΡ‚ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ Π½Π° Ρ‚Ρ€ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹:

  • модСль (model),
  • прСдставлСниС (view),
  • ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ (controller).

МодСль содСрТит Π΄Π°Π½Π½Ρ‹Π΅ прилоТСния, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ. НапримСр, список своих Π·Π°ΠΊΠ°Π·ΠΎΠ² Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ эти Π΄Π°Π½Π½Ρ‹Π΅ Π² понятном для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²ΠΈΠ΄Π΅. НапримСр, Π½Π° свёрстанной страницС сайта ΠΈΠ»ΠΈ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅.

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Ρ‹ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠΎ этим ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌ. НапримСр, Ссли ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π£Π΄Π°Π»ΠΈΡ‚ΡŒ Π·Π°ΠΊΠ°Π·Β», Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΎΡ‚ΠΌΠ΅Ρ‡Π°Π΅Ρ‚ этот Π·Π°ΠΊΠ°Π· Π² ΠΌΠΎΠ΄Π΅Π»ΠΈ ΡƒΠ΄Π°Π»Ρ‘Π½Π½Ρ‹ΠΌ.

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹»

Π’ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π΅ MVC ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ взаимодСйствуСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с прСдставлСниСм β€” Ρ‡Π°Ρ‰Π΅ всСго это UI.

πŸ§‘β€πŸ’»

Π•ΡΡ‚ΡŒ прилоТСния, Π³Π΄Π΅ прСдставлСниСм ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ голосовой ΠΈΠ»ΠΈ ТСстовый интСрфСйс, Π½ΠΎ Π² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Ρ‡Π°Ρ‰Π΅ всСго прСдставлСниС β€” это графичСский ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, GUI.

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠΎΠ΄Π°Ρ‘Ρ‚ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅. ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ эти ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ Π΄Π°Π½Π½Ρ‹Π΅ Π² ΠΌΠΎΠ΄Π΅Π»ΠΈ. МодСль обновляСтся ΠΈ увСдомляСт прСдставлСниС ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ интСрфСйс, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ измСнСния Π² Π΄Π°Π½Π½Ρ‹Ρ….

πŸ’‘

Π’ классичСском MVC события ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€. Иногда события ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ спСрва прСдставлСниСм, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€. Оба ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅-Ρ„ΠΎΠ½Π°Ρ€ΠΈΠΊ. Π£ Π½Π΅Π³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π²Π° состояния: Π²ΠΊΠ»ΡŽΡ‡Ρ‘Π½ ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½. Бостояния Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Β«On/OffΒ». Π’Π°ΠΊΠΆΠ΅ Ρƒ Π½Π΅Π³ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π΄Π½Π΅Π²Π½ΠΎΠ³ΠΎ ΠΈ Π½ΠΎΡ‡Π½ΠΎΠ³ΠΎ свСта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π»Π°ΠΌΠΏΠΎΡ‡ΠΊΠΈ Π½Π° синий ΠΈ ΠΆΡ‘Π»Ρ‚Ρ‹ΠΉ соотвСтствСнно.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π΅Π³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ MVC.

МодСль

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «ΠœΠΎΠ΄Π΅Π»ΡŒ»

МодСль содСрТит Π΄Π°Π½Π½Ρ‹Π΅ прилоТСния. Π­Ρ‚ΠΎ самый нСзависимый ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹, ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΡ‚ ΠΌΠΎΠ΄Π΅Π»ΠΈ зависит, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ прСдставлСниС, ΠΈ ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€.

πŸ•

ΠšΠΎΠ½Ρ†Π΅ΠΏΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ модСль ΠΏΠΎΡ…ΠΎΠΆΠ° Π½Π° Π΄ΠΎΠΌΠ΅Π½ ΠΈΠ· трёхслойной Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹.

Π’ ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ состояниС Ρ„ΠΎΠ½Π°Ρ€ΠΈΠΊΠ°. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΌΡ‹ Π΅Π³ΠΎ Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΠΌ:

const flashLightModel = {  isOn: false,  color: "blue",}
          const flashLightModel = {
  isOn: false,
  color: "blue",
}

Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ Ρ„ΠΎΠ½Π°Ρ€ΠΈΠΊ, ΠΏΠΎΠ»Π΅ isOn Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ true, Π·Π° это Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€. ПолС color содСрТит, ΠΊΠ°ΠΊΠΈΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ„ΠΎΠ½Π°Ρ€ΠΈΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΡ€Π΅Ρ‚ΡŒ.

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€»

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ Π΄Π°Π½Π½Ρ‹Π΅ Π² ΠΌΠΎΠ΄Π΅Π»ΠΈ согласно этим ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌ. Π’ нашСм ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ для ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ состояния Ρ„ΠΎΠ½Π°Ρ€ΠΈΠΊΠ°:

const flashLightController = {  toggle() {    flashLightModel. isOn = !flashLightModel.isOn  },}
          const flashLightController = {
  toggle() {
    flashLightModel.isOn = !flashLightModel.isOn
  },
}

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΈ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΡ‚ прСдставлСния. НапримСр, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚, ΠΊΠ°ΠΊΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½Π°ΠΆΠ°Π»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚:

const flashLightController = {  // ΠžΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ΄  selectColor(e) {    const buttonName = e.target.name    const buttonColors = {      daylight: "blue",      nightlight: "yellow",    }    const preferredColor = buttonColors[buttonName]    flashLightModel.color = preferredColor  },}
          
const flashLightController = { // ΠžΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ΄ selectColor(e) { const buttonName = e.target.name const buttonColors = { daylight: "blue", nightlight: "yellow", } const preferredColor = buttonColors[buttonName] flashLightModel.color = preferredColor }, }

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ провСряСт, ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΊΠ°ΠΊΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° Π½Π°ΠΆΠ°Π»ΠΈ: Π΄Π½Π΅Π²Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½ΠΎΡ‡Π½ΠΎΠ³ΠΎ.

Π’ зависимости ΠΎΡ‚ Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΠ½ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅»

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ ΠΈ понятном Π²ΠΈΠ΄Π΅. Π’ нашСм случаС прСдставлСниСм Π±ΡƒΠ΄Π΅Ρ‚ собствСнно Ρ„ΠΎΠ½Π°Ρ€ΠΈΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π³ΠΎΡ€Π΅Ρ‚ΡŒ двумя Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для Π΅Π³ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Ρ†Π²Π΅Ρ‚ΠΎΠ².

<div></div><button type="button" name="power">Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ</button><button type="button" name="daylight">Π”Π½Π΅Π²Π½ΠΎΠΉ свСт</button><button type="button" name="nightlight">Ночной свСт</button>
          <div></div>
<button type="button" name="power">Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ</button>
<button type="button" name="daylight">Π”Π½Π΅Π²Π½ΠΎΠΉ свСт</button>
<button type="button" name="nightlight">Ночной свСт</button>

ΠšΡ€ΠΎΠΌΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π² прСдставлСниС Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ отнСсти ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ управляСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Ρ„ΠΎΠ½Π°Ρ€ΠΈΠΊΠ°:

const flashLightView = {  redraw() {    const { isOn, color } = flashLightModel    const flash = document. querySelector(".flashlight")    flash.classList.add(`has-color-${color}`)    if (isOn) {      flash.classList.add("is-on")    }  },}flashLightView.redraw()
          const flashLightView = {
  redraw() {
    const { isOn, color } = flashLightModel
    const flash = document.querySelector(".flashlight")
    flash.classList.add(`has-color-${color}`)
    if (isOn) {
      flash.classList.add("is-on")
    }
  },
}
flashLightView.redraw()

А Ρ‚Π°ΠΊΠΆΠ΅ β€” ΠΊΠΎΠ΄ для ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ событий, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ прСдставлСниС Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Ρƒ:

const flashLightView = {  // ΠžΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ΄  initEvents() {    const powerButton = document.querySelector(`[name="power"]`)    powerButton.addEventListener("click", () => flashLightController.toggle())    // Код для событий Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ  },}
          const flashLightView = {
  // ΠžΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ΄
  initEvents() {
    const powerButton = document.querySelector(`[name="power"]`)
    powerButton.addEventListener("click", () => flashLightController.
toggle()) // Код для событий Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ }, }

ВзаимодСйствиС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «Π’заимодСйствиС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²»

ΠŸΡ€ΠΈ использовании Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹ MVC ΠΌΡ‹ опрСдСляСм, ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±Ρ‰Π°Ρ‚ΡŒΡΡ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ β€” Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ опрСдСляСм ΠΏΠΎΡ‚ΠΎΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ….

ΠŸΠΎΡ‚ΠΎΠΊ Π΄Π°Π½Π½Ρ‹Ρ…

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «ΠŸΠΎΡ‚ΠΎΠΊ Π΄Π°Π½Π½Ρ‹Ρ…»

Π’ классичСском MVC стандартом считаСтся, ΠΊΠΎΠ³Π΄Π° Π΄Π°Π½Π½Ρ‹Π΅:

  • ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΡŽ;
  • ΠΎΡ‚ прСдставлСния β€” ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Ρƒ;
  • Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ обновляСтся модСль;
  • модСль увСдомляСт прСдставлСниС ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ измСнилось.

✈️

Π­Ρ‚ΠΎ называСтся ΠΎΠ΄Π½ΠΎΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ Π΄Π°Π½Π½Ρ‹Ρ….

Иногда допускаСтся, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±Ρ‰Π°Ρ‚ΡŒΡΡ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Π½Π΅ ΠΏΠΎ этой схСмС, Π½ΠΎ ΠΌΡ‹ всё ΠΆΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π½Π΅ ΠΎΡ‚Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΎΡ‚ ΠΊΠ°Π½ΠΎΠ½Π°.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€?

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€?»

Π’ MVC часто Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопрос, ΠΊ Ρ‡Π΅ΠΌΡƒ отнСсти ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΊΠΎΠ΄: ΠΊ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΡŽ ΠΈΠ»ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Ρƒ. Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅ Π΄Π°ΠΆΠ΅ Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ мСста.

const flashLightView = {  // ...  initEvents() {    const powerButton = document.querySelector(`[name="power"]`)    powerButton.addEventListener("click", () => flashLightController.toggle())  },}
          
const flashLightView = { // ... initEvents() { const powerButton = document.querySelector(`[name="power"]`) powerButton.addEventListener("click", () => flashLightController.toggle()) }, }

ΠœΠ΅Ρ‚ΠΎΠ΄ initEvents Π² прСдставлСнии ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚ΡŒΡΡ ΠΈ ΠΊ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Ρƒ, Ссли ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠΌ, Ρ‡Ρ‚ΠΎ цСнтрализованная ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° событий ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… элСмСнтов β€” это Π·Π°Π΄Π°Ρ‡Π° ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π°.

Π’Π°ΠΊ ΠΆΠ΅ с ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ selectColor Π² ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π΅:

const flashLightController = {  // ΠžΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ΄  selectColor(e) {    const buttonName = e.target.name    const buttonColors = {      daylight: "blue",      nightlight: "yellow",    }    const preferredColor = buttonColors[buttonName]    flashLightModel.
color = preferredColor },} const flashLightController = { // ΠžΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ΄ selectColor(e) { const buttonName = e.target.name const buttonColors = { daylight: "blue", nightlight: "yellow", } const preferredColor = buttonColors[buttonName] flashLightModel.color = preferredColor }, }

Если ΠΌΡ‹ Ρ€Π΅ΡˆΠ°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° событий β€” это Π·Π°Π΄Π°Ρ‡Π° прСдставлСния, Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ отнСсти Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π²Ρ‹Π±ΠΎΡ€Π° Ρ†Π²Π΅Ρ‚Π° Π² прСдставлСниС, Π° Π² ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π΅ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ лишь ΠΌΠ΅Ρ‚ΠΎΠ΄ для измСнСния Ρ†Π²Π΅Ρ‚Π°:

const flashLightController = {  updateColor(color) {    flashLightModel.color = color  },}
          const flashLightController = {
  updateColor(color) {
    flashLightModel.color = color
  },
}

Π’Π°ΠΊ ΠΊΠ°ΠΊ MVC позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΠΊ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Ρƒ, Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… ΠΏΡ€Π°Π²ΠΈΠ» здСсь Π½Π΅Ρ‚, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ:

  • Π‘Ρ‚ΠΎΠΈΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° для ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π°, ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΈ прСдставлСния Π²ΠΎ всём ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.
  • Если ΠΏΡ€Π°Π²ΠΈΠ»Π° Π½Π°Ρ€ΡƒΡˆΠ°ΡŽΡ‚ΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ, это стоит Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ вмСстС с ΠΏΡ€ΠΈΡ‡ΠΈΠ½ΠΎΠΉ.
  • ΠŸΡ€Π°Π²ΠΈΠ»Π° стоит Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈΠ· Π·ΠΎΠ½ отвСтствСнности ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стоит ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π·Π°Ρ€Π°Π½Π΅Π΅.

Как ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π·Π½Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€?

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «ΠšΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π·Π½Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€?»

Π”Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ вопрос, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с MVC β€” какая Π·ΠΎΠ½Π° отвСтствСнности Ρƒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π°, Π³Π΄Π΅ ΠΎΠ½Π° заканчиваСтся.

πŸŽ›

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΌΠ΅Π΅Ρ‚ большС, называСтся толстым. Π’ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΌΠ΅Π΅Ρ‚ мСньшС β€” Ρ‚ΠΎΠ½ΠΊΠΈΠΌ.

ΠŸΡ€ΠΈ Ρ‚ΠΎΠ½ΠΊΠΎΠΌ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π΅ Π·Π½Π°Π½ΠΈΠ΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅, находится Π² ΠΌΠΎΠ΄Π΅Π»ΠΈ. Π­Ρ‚ΠΎ Π½Π΅ всСгда ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΌΡƒΡΠΎΡ€ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ ΠΌΠΎΠ΄Π΅Π»ΠΈ, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΎΠΏΡ€Π°Π²Π΄Π°Π½Π½ΠΎ. НапримСр, Ссли ΠΌΡ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΠΌ Β«Ρ€Π°Π·ΠΌΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒΒ» это Π·Π½Π°Π½ΠΈΠ΅ ΠΏΠΎ нСскольким ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ.

Вакая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° называСтся ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Ρ‚ΠΎΠ½ΠΊΠΎΠ³ΠΎ ΠΈ толстого ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π°. Π Π°Π·Π½Ρ‹Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Ρ€Π΅ΡˆΠ°ΡŽΡ‚ Π΅Ρ‘ ΠΏΠΎ-своСму, исходя ΠΈΠ· договорённостСй ΠΈ Π²Ρ‹Π³ΠΎΠ΄ ΠΈ ΠΈΠ·Π΄Π΅Ρ€ΠΆΠ΅ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° для своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Ρ‹

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Ρ‹»

ΠšΡ€ΠΎΠΌΠ΅ MVC Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΡΠ»Ρ‹ΡˆΠ°Ρ‚ΡŒ ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… вариациях этой Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹. КаТдая ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Ρ†ΠΈΠΉ β€” это ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½, слСгка ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‰ΠΈΠΉΡΡ ΠΎΡ‚ MVC спСцификой ΠΈΠ»ΠΈ ΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

🍩

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΠΌ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Π° MVC ΠΈ Π΅Π³ΠΎ Π²Π°Ρ€ΠΈΠ°Ρ†ΠΈΠΉ. Π§Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ, совСтуСм ΠΏΡ€ΠΎΡ‡Π΅ΡΡ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ Β«MVC and its alternativesΒ».

Modelβ€”Viewβ€”Viewmodel

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «Modelβ€”Viewβ€”Viewmodel»

Π’ MVVM (сокращСниС ΠΎΡ‚ Modelβ€”Viewβ€”Viewmodel) вмСсто ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Viewmodel. Π­Ρ‚ΠΎ «надстройка» Π½Π°Π΄ прСдставлСниСм, которая связываСт Π΄Π°Π½Π½Ρ‹Π΅ ΠΈ прСдставлСниС Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ большС Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ самим Π»ΠΎΠ³ΠΈΠΊΡƒ обновлСния UI ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΊΠΎΠΌΠ°Π½Π΄ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Для Ρ€Π°Π±ΠΎΡ‚Ρ‹ связывания Π½ΡƒΠΆΠ΅Π½ Binder (Π±ΠΈΠ½Π΄Π΅Ρ€) β€” Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΈΠ»ΠΈ Ρ†Π΅Π»Ρ‹ΠΉ язык, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ автоматичСски ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ измСнСния ΠΈΠ· ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² UI.

πŸ‘Ύ

Svelte Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ стСпСни ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π±ΠΈΠ½Π΄Π΅Ρ€ΠΎΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ сам занимаСтся связываниСм ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΈ отобраТСния.

Model-View-Presenter

БСкция ΡΡ‚Π°Ρ‚ΡŒΠΈ «Model-View-Presenter»

Π’ MVP (сокращСниС ΠΎΡ‚ Model-View-Presenter) мСсто ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π΅Ρ€.

Π“Π»Π°Π²Π½ΠΎΠ΅ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ MVC Π² Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ располоТСны ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ, соотвСтствСнно, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ Π΄Π°Π½Π½Ρ‹Π΅. Если Π² MVC Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π»ΠΈΡΡŒ ΠΏΠΎ ΠΊΡ€ΡƒΠ³Ρƒ, Ρ‚ΠΎ Π² MVP ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΏΠΎ Π»ΠΈΠ½ΠΈΠΈ. На ΠΊΠΎΠ½Ρ†Π°Ρ… находятся модСль ΠΈ прСдставлСниС, Π° ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ β€” ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π΅Ρ€.

ΠŸΡ€Π΅Π·Π΅Π½Ρ‚Π΅Ρ€ Π·Π°Π±ΠΈΡ€Π°Π΅Ρ‚ Π½Π° сСбя всю Π»ΠΎΠ³ΠΈΠΊΡƒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…, обновлСния прСдставлСния ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΊΠΎΠΌΠ°Π½Π΄.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² этом случаС пассивно: ΠΎΠ½ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ, ΠΊΡ€ΠΎΠΌΠ΅ отобраТСния Π΄Π°Π½Π½Ρ‹Ρ… Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π΅ΠΌΡƒ скаТСт ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π΅Ρ€. Если Π² MVC прСдставлСниС ΠΌΠΎΠ³Π»ΠΎ Π±Ρ€Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Ρ‹Π²ΠΎΠ΄Π° Π½Π° сСбя, Ρ‚ΠΎ Π² MVP Π·Π° это Ρ‚ΠΎΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π΅Ρ€.

Плюс Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопросов, ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ ΠΊ Ρ‡Π΅ΠΌΡƒ относится. ΠœΠΈΠ½ΡƒΡ β€” Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π΅Ρ€ быстро становится большим ΠΈ слоТным. ΠŸΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ΡΡ Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π° ΠΌΠΎΠ΄ΡƒΠ»ΠΈ помСньшС, вСроятно, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ «слои».

МодСль проСктирования MVC β€” Ρ‡Ρ‚ΠΎ это? PHP ΠΈ MVC

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΠΎΠΉΠ΄Π΅Ρ‚ Ρ€Π°Π·Π³ΠΎΠ²ΠΎΡ€ ΠΏΡ€ΠΎ модСль MVC β€” Ρ‡Ρ‚ΠΎ это, ΠΊΠ°ΠΊΠΎΠ²Ρ‹ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ ΠΈ особСнности Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€, МодСль, ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² MVC? Π’ качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π±ΡƒΠ΄Π΅Ρ‚ написано ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° PHP с Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€ΠΎΠΉ, основанной Π½Π° MVC.

Π’Ρ‹ΡˆΠ΅ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚Π°Ρ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Π° Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΊΠ°ΠΊ Model β€” View β€” Controller. Π Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ шаблонС проСктирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ построСн Π½Π° основании ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ° сохранСния прСдставлСния Π΄Π°Π½Π½Ρ‹Ρ…. Богласно этому ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ, Π΄Π°Π½Π½Ρ‹Π΅ хранятся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… с этими Π΄Π°Π½Π½Ρ‹ΠΌΠΈ. Π•ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅, Π±ΠΎΠ»Π΅Π΅ простыС опрСдСлСния ΠΌΠΎΠ΄Π΅Π»ΠΈ MVC, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ это: β€” шаблон программирования, ΠΏΡ€ΠΈ использовании ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π»ΠΎΠ³ΠΈΠΊΠ° прилоТСния дСлится Π½Π° 3 части; β€” ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ (pattern) проСктирования ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰ΠΈΠΉ Π² сСбя ряд Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π»ΠΊΠΈΡ… шаблонов.

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚: ΠΏΠΎ сути, MVC β€” это Π½Π΅ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ проСктирования, ΠΊΠ°ΠΊ Ρ‚Π°ΠΊΠΎΠ²ΠΎΠΉ, Π°, скорСС, Π½Π°Π±ΠΎΡ€ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ² ΠΈ ΠΈΠ΄Π΅ΠΉ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… для построСния слоТных систСм, оснащСнных ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ интСрфСйсом. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΡ€ΠΈ ΡƒΠΏΠΎΡ‚Ρ€Π΅Π±Π»Π΅Π½ΠΈΠΈ этой Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π½Π΅ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π΄Π»ΠΈΠ½Π½ΠΎΠ΅ словосочСтаниС ΠΏΡ€ΠΎ Π½Π°Π±ΠΎΡ€ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½Ρ‹Ρ… ΠΈΠ΄Π΅ΠΉ, принято Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ MVC ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ΠΎΠΌ/шаблоном/модСлью/схСмой.

БСгодня эта модСль ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΉ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹ ΡˆΠΈΡ€ΠΎΠΊΠΎ примСняСтся web-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ. Она Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ€Π°Π·Π³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄. Π’Π°ΠΊΠΆΠ΅ эта схСма Ρ€Π°Π·Π²ΠΈΠ²Π°Π΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ систСмы ΠΈ позволяСт быстро ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ Π»ΠΈΠ±ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π».

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅: Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€, МодСль, ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² MVC?

Π’Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ 3 основных ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… β€” МодСль, ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€. Как это выглядит, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ΅:

На ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ структуру одностороннСго ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡƒΡ‚ΠΈ Π΅Π³ΠΎ слСдования ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ, плюс взаимодСйствиС ΠΌΠ΅ΠΆΠ΄Ρƒ этими ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ стоит Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС ΠΏΠΎ порядку.

МодСль

МодСль β€” постоянноС Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π²ΠΎ всСй структурС. Она обСспСчиваСт доступ ΠΊ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ для просмотра, записи, ΠΎΡ‚Π±ΠΎΡ€Π°. Π’Π°ΠΊΠΆΠ΅ Model Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ мостом ΠΌΠ΅ΠΆΠ΄Ρƒ View ΠΈ Controller.

Π§Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ? Π£ Model отсутствуСт информация ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ случаСтся с Π΄Π°Π½Π½Ρ‹ΠΌΠΈ послС ΠΈΡ… ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π½Π° Controller ΠΈ View. Π“Π»Π°Π²Π½ΠΎΠ΅, Π·Π° Ρ‡Ρ‚ΠΎ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ Model, β€” ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… Π² Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡ… поиск ΠΈ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ° для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌ.

Π•ΡΡ‚ΡŒ основания Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Model выступаСт Π² Ρ€ΠΎΠ»ΠΈ ΠΏΡ€ΠΈΠ²Ρ€Π°Ρ‚Π½ΠΈΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π΅ΠΆΡƒΡ€ΠΈΡ‚ Π²ΠΎΠ·Π»Π΅ Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π° Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ Π½Π΅ Π·Π°Π΄Π°Π΅Ρ‚ Π»ΠΈΡˆΠ½ΠΈΡ… вопросов, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ всС запросы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΊ Π½Π΅ΠΌΡƒ ΠΏΠΎΡΡ‚ΡƒΠΏΠ°ΡŽΡ‚. ΠžΡ‡Π΅Π½ΡŒ часто ΠΈΠΌΠ΅Π½Π½ΠΎ МодСль являСтся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ слоТной Ρ‡Π°ΡΡ‚ΡŒΡŽ MVC ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Π°. Π’Π°ΠΊΠΆΠ΅ утвСрТдаСтся, Ρ‡Ρ‚ΠΎ Model прСдставляСт собой Π²Π΅Ρ€ΡˆΠΈΠ½Ρƒ ΠΎΠ±Ρ‰Π΅ΠΉ структуры, вСдь Π±Π΅Π· Π½Π΅Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ связь ΠΌΠ΅ΠΆΠ΄Ρƒ ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ΠΎΠΌ Π½Π΅Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅

Благодаря этому ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ, Π΄Π°Π½Π½Ρ‹ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρƒ «МодСли», задаСтся Π²ΠΈΠ΄ ΠΈΡ… Π²Ρ‹Π²ΠΎΠ΄Π°. Если ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΡŒ web-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‚ΠΎ Π²ΠΎ View гСнСрируСтся ΠΈ отобраТаСтся ΠΊΠΎΠ΄ HTML. Π’Π°ΠΊΠΆΠ΅ ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ выполняСт ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚ дСйствий ΡŽΠ·Π΅Ρ€Π°, послС Ρ‡Π΅Π³ΠΎ осущСствляСтся ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° этого дСйствия Controller’у. Π₯Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ β€” ΠΊΠ½ΠΎΠΏΠΊΠ°, которая гСнСрируСтся ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΌΠ΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ, дСйствиС запускаСтся ΡƒΠΆΠ΅ Π² Controller’С.

Π’Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚: информация Π½Π΅ пСрСдаСтся Π² Controller Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ (ΠΌΠ΅ΠΆΠ΄Ρƒ View ΠΈ ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ΠΎΠΌ Π½Π΅Ρ‚ прямой связи β€” соСдинСниС происходит посрСдством МодСли).

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€

Π§Ρ‚ΠΎ ΠΆΠ΅ Ρ‚Π°ΠΊΠΎΠ΅ ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ Π² MVC? Π•Π³ΠΎ Π·Π°Π΄Π°Ρ‡Π° β€” ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Π²ΠΎΠ΄ΠΈΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Model. ИмСнно Π² этой части схСмы происходит взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ. МоТно Π½Π°Π·Π²Π°Ρ‚ΡŒ Controller сборщиком ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. ПослС выполнСния этой Π·Π°Π΄Π°Ρ‡ΠΈ, ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² Model, Π³Π΄Π΅ ΠΈ происходит ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ организация хранСния. Π”Ρ€ΡƒΠ³ΠΎΠΉ Π»ΠΎΠ³ΠΈΠΊΠΈ, ΠΊΡ€ΠΎΠΌΠ΅ сбора входящСй ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Ρƒ Π½Π΅Π³ΠΎ Π½Π΅Ρ‚. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ Controller ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ лишь ΠΊ ΠΎΠ΄Π½ΠΎΠΉ Model ΠΈ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ View. Π’ΠΎ Π΅ΡΡ‚ΡŒ Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ систСмС с односторонним ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, Π³Π΄Π΅ Π² Ρ‚ΠΎΡ‡ΠΊΠ°Ρ… ΠΎΠ±ΠΌΠ΅Π½Π° Π΅ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π²Ρ…ΠΎΠ΄ ΠΈ ΠΎΠ΄ΠΈΠ½ Π²Ρ‹Ρ…ΠΎΠ΄.

ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Ρ‡ΠΈ Π½Π° Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ происходит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС взаимодСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ β€” это Π½Π΅ шлюз, ΠΈ ΠΎΠ΄Π½Π° ΠΈΠ· ошибок Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² β€” ΠΏΡ€ΠΈΡΠ²Π°ΠΈΠ²Π°Ρ‚ΡŒ Π΅ΠΌΡƒ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, относящиСся ΠΊ ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΡŽ. Другая ошибка β€” Π½Π°Π΄Π΅Π»ΡΡ‚ΡŒ Controllers функциями, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠΌΠΈ лишь Π·Π° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Ρƒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ· Model Π²ΠΎ View. Если ΠΆΠ΅ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ структуру, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΉΡ‚ΠΈ ΠΊ Π²Ρ‹Π²ΠΎΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ взаимодСйствиС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ лишь ΠΌΠ΅ΠΆΠ΄Ρƒ Models ΠΈ Views.

МодСль MVC ΠΊΡ€Π°Ρ‚ΠΊΠΎ β€” Ρ‡Ρ‚ΠΎ это: β€” шаблон программирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»ΡΡ‚ΡŒ Π»ΠΎΠ³ΠΈΠΊΡƒ прилоТСния Π½Π° 3 части: β€’ Model β€” ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ Π΄Π°Π½Π½Ρ‹Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π° ΠΈ выполняСт Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ с ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π΅ΠΉ Π΄Π°Π½Π½Ρ‹Ρ… Π² ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅; β€’ View. ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΡ‚ МодСли, Π° ΠΏΠΎΡ‚ΠΎΠΌ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ Π΅Π΅ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ; β€’ Controller. ВыполняСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ дСйствий ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… с ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π΅ΠΉ ΠΈΡ… МодСли.

Рассматривая созданиС ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ΠΎΠ² MVC, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ нСбольшоС PHP web-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€ΠΎΠΉ. Π‘ΠΎΠ»ΡŒΡˆΠΈΡ… трудностСй это Π½Π΅ Π²Ρ‹Π·ΠΎΠ²Π΅Ρ‚.

ΠΠ°Ρ‡Π°Ρ‚ΡŒ слСдуСт с каркаса:

Π§Ρ‚ΠΎ ΠΆΠ΅, ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с основными классами для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ части ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Π° ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ этап Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ β€” настройка взаимосвязи ΠΌΠ΅ΠΆΠ΄Ρƒ частями:

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ PHP MVC, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅, отсутствуСт спСцифичСский Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» для ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π°, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ взаимодСйствия. Π—Π°Ρ‚ΠΎ ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ содСрТит вСсь Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π», вСдь ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для дСмонстрации ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ слСдуСт Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ добавляСтся Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π° β€” для этого Π½Π°Π΄ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ взаимодСйствия:

Код Π±Ρ‹Π» Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ Π±Π°Π·ΠΎΠ²Ρ‹ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ настройка взаимодСйствий ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ выглядит Ρ‚Π°ΠΊ:

Если Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄, ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ссылку ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ строку для измСнСния Π΄Π°Π½Π½Ρ‹Ρ….

Π’Ρ‹Π²ΠΎΠ΄Ρ‹

Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π±Ρ‹Π»Π° рассмотрСна базовая тСория ΠΌΠΎΠ΄Π΅Π»ΠΈ MVC (Ρ‡Ρ‚ΠΎ это, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚). Π’Π°ΠΊΠΆΠ΅ Π±Ρ‹Π» прСдставлСн ΠΏΡ€ΠΈΠΌΠ΅Ρ€ простого прилоТСния Π½Π° PHP, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌ MVC.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ β€” https://www.sitepoint.com/the-mvc-pattern-and-php-1/.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ шаблон проСктирования MVC | Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ | Навыки | Scope

Π¨Π°Π±Π»ΠΎΠ½ проСктирования MVC Ρ‚Π°ΠΊΠΆΠ΅ извСстСн ΠΊΠ°ΠΊ Model-View-Controller. Π­Ρ‚ΠΎ распространСнный Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½Ρ‹ΠΉ шаблон, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для проСктирования ΠΈ создания интСрфСйсов ΠΈ структуры прилоТСния.

Π­Ρ‚ΠΎΡ‚ шаблон Π΄Π΅Π»ΠΈΡ‚ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Ρ‚Ρ€ΠΈ части, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ зависимыми ΠΈ связанными Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ. Π­Ρ‚ΠΈ конструкции ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒ прСдставлСниС Π΄Π°Π½Π½Ρ‹Ρ… ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, Π΄ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…. Π­Ρ‚ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ проСктирования стали ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ явлСниСм ΠΏΡ€ΠΈ использовании Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ графичСских интСрфСйсов.

ПониманиС шаблонов проСктирования MVC

ПониманиС этих шаблонов проСктирования Π»Π΅Π³ΠΊΠΎ ΠΈ просто. ВСория Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΊΠ°ΠΊ Model-View-Controller Pattern. Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ‚Ρ€Π΅Ρ… частСй:

1. МодСль

Π­Ρ‚Π° Ρ‡Π°ΡΡ‚ΡŒ шаблона проСктирования являСтся основной ΠΈ содСрТит ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ. Он Π½Π΅ содСрТит Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ. Он Π½Π΅ зависит ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. Он ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ Π»ΠΎΠ³ΠΈΠΊΡƒ ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° примСнСния.

2. Π’ΠΈΠ΄

Π­Ρ‚Π° Ρ‡Π°ΡΡ‚ΡŒ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ. Основная Π·Π°Π΄Π°Ρ‡Π° этой части β€” ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ ΠΌΠΎΠ΄Π΅Π»ΠΈ. Π Π°Π·Π΄Π΅Π» просмотра ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ, Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΈΠ»ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ для прСдставлСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ гистограммы ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ†Π΅Π»Π΅ΠΉ. Π­Ρ‚ΠΎ визуализация ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ содСрТит ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

3. ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€

Π‘ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ выполняСт ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€. Он обСспСчиваСт ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π²Π²ΠΎΠ΄Π° ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ Π²Π²ΠΎΠ΄ Π² ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ для прилоТСния. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ модСлью ΠΈ Ρ‡Π°ΡΡ‚ΡŒΡŽ Π²ΠΈΠ΄Π°. МодСль ΠΈ прСдставлСниС взаимосвязаны, поэтому исполнСниС отраТаСтся Π² части прСдставлСния.

Как шаблон проСктирования MVC ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ?

БСгодня Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ этому ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΌ использовании ΠΊΠΎΠ΄Π° ΠΈ ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π»Π΅Π³Ρ‡Π΅ ΠΈ ΠΏΡ€ΠΎΡ‰Π΅. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ шаблона проСктирования MVC, ΠΏΠΎ своСй ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π΅ нСзависимы Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°. Π­Ρ‚Π° функция ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΈ быстро ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ ΠΊΠΎΠ΄Ρ‹ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… прилоТСниях.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ прСдставлСниС отслСТиваСт Π΄Π°Π½Π½Ρ‹Π΅ ΠΈ управляСт Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ прСдставлСниС с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ для Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π­Ρ‚ΠΎ экономит ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ усилий Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°.

Π’Π΅Π΄ΡƒΡ‰ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ шаблон проСктирования MVC

НСкоторыС ΠΈΠ· Π²Π΅Π΄ΡƒΡ‰ΠΈΡ… ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΡ… шаблон проСктирования MVC:

  • Microsoft
  • Иди ΠΏΠ°ΠΏΠΎΡ‡ΠΊΠ°,
  • Π”Π΅Π»Π»
  • Visual Studio
  • Дикая ΠΊΠ°ΡΠ°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ

Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с шаблоном проСктирования MVC?

Они ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π²Π΅Π±-прилоТСниями ΠΈ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ интСрфСйсов. НСкоторыС популярныС языки программирования, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ C#, Python, PHP ΠΈ Java, основаны Π½Π° Ρ‚Π΅ΠΎΡ€ΠΈΠΈ MVC. Π¨Π°Π±Π»ΠΎΠ½Ρ‹ проСктирования ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠΎΠ΄ΠΎΠΌ. Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² MVC ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΠΊΠΎΠ΄Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»Π΅Π³Ρ‡Π΅ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ. ВСория MVC ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Π½Π°Π±ΠΎΡ€Π°Ρ… инструмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Java Swing, Apple Cocoa ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ MFC.

Π Π°Π±ΠΎΡ‚Π° с шаблоном проСктирования MVC

MVC часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Π²Π΅Π±-прилоТСниях. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π² этих прилоТСниях ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ„Π°ΠΉΠ»Ρ‹ HTML ΠΈΠ»ΠΈ XHTML, созданныС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ Π² Ρ„ΠΎΡ€ΠΌΠ΅ получСния Π²Ρ…ΠΎΠ΄Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…, Π° Π·Π°Ρ‚Π΅ΠΌ управляСт Π²Ρ…ΠΎΠ΄Π½Ρ‹ΠΌΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ ΠΈ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ ΠΈΡ… для ΠΌΠΎΠ΄Π΅Π»ΠΈ. МодСль содСрТит Π΄Π°Π½Π½Ρ‹Π΅ ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΎ процСссС выполнСния ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ.

Π”ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° ΠΌΠΎΠ΄Π΅Π»ΠΈ, Π½Π΅ относящСгося ΠΊ Π±ΠΎΠ»Π΅Π΅ высокому ΡƒΡ€ΠΎΠ²Π½ΡŽ, ΡƒΠ΄Π°Π»Π΅Π½ΠΎ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… рСализациях ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. Π¨Π°Π±Π»ΠΎΠ½ MVC обСспСчиваСт основу для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π»ΡŽΠ±Ρ‹Ρ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эти Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΌΠ°ΡˆΠΈΠ½Ρ‹.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π°

НСкоторыС ΠΈΠ· основных прСимущСств использования шаблона проСктирования MVC:

  • Для ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ нСсколько Π²ΠΈΠ΄ΠΎΠ²
  • Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ обязанностСй ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ Π² Π±ΡƒΠ΄ΡƒΡ‰ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°Ρ… ΠΈ обновлСниях.
  • ВСория MVC ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΠΈΠ·ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ взаимосвязи ΠΌΠ΅ΠΆΠ΄Ρƒ модСлями, прСдставлСниями ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π°ΠΌΠΈ.
  • НСсколько Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ модСлями, прСдставлСниями ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π°ΠΌΠΈ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.
  • ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΡ Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ сгруппированы вмСстС.

Π’Ρ€Π΅Π±ΡƒΠ΅ΠΌΡ‹Π΅ Π½Π°Π²Ρ‹ΠΊΠΈ

Π­Ρ‚ΠΎ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½Ρ‹ΠΉ шаблон, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π² Π²Π΅Π±-прилоТСниях. ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ программирования ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π±ΡƒΠ΄Π΅Ρ‚ прСимущСством для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° кодирования ΠΈ написания сцСнариСв, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ знания языков, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Python, Java ΠΈΠ»ΠΈ C#, Π΄Π°Π΄ΡƒΡ‚ Ρ‚ΠΎΠ»Ρ‡ΠΎΠΊ учащимся ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ. MVC Π½Π΅ являСтся ΠΏΠΎΠ»Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈ для Π½Π΅Π³ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ трСбуСтся ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ слуТбы, ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ доступа ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ ΠΈΠ»ΠΈ логичСский ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ шаблон проСктирования MVC?

НаиболСС Π²Π°ΠΆΠ½Ρ‹ΠΌ Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ являСтся ΠΎΡ‚Π΄Π΅Π»Π΅Π½ΠΈΠ΅ прСдставлСний ΠΎΡ‚ ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ΠΎΠ². Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…, Π½Π΅ затрагивая Π΄Ρ€ΡƒΠ³ΠΈΠ΅. Он Π² основном ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ графичСского ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

MVC ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π² основных ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°Ρ…. НСкоторыС Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ JavaScript MVC, Ember JS ΠΈ Backbone, частично ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ процСсс MVC Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°.

ОбъСм

ОбъСм этого яркого ΠΈ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ. ΠŸΠΎΡ‡Ρ‚ΠΈ всС Π²Π΅Π΄ΡƒΡ‰ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΈ отрасли, основанныС Π½Π° Π²Π΅Π±-сайтах, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ проСктирования MVC для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов ΠΈ ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ.

ΠšΡ‚ΠΎ являСтся подходящСй Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠ΅ΠΉ для изучСния Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ MVC Design Pattern?

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ… программирования, ΠΈ подходящСй Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠ΅ΠΉ для изучСния этих конструкций ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ программисты. УчащиСся Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π»Π΅Ρ‡Π΅Π½Ρ‹ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ΠΌ шаблонов проСктирования, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡ… использованиСм ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

Как эта тСхнология ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π² ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Π½ΠΎΠΌ ростС?

Он Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²ΠΈΠ» для своих Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΈΠ·ΡƒΡ‡Π°ΡŽΡ‚ мноТСство Π½Π°Π²Ρ‹ΠΊΠΎΠ² ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚Π΅ΠΎΡ€ΠΈΡŽ MVC. БущСствуСт мноТСство Π½Π°Π²Ρ‹ΠΊΠΎΠ², связанных с этими шаблонами проСктирования, ΠΈ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ этой Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ учащСмуся ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ свои Π½Π°Π²Ρ‹ΠΊΠΈ, Π½ΠΎ ΠΈ свои Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠ΅ пСрспСктивы. Π­Ρ‚ΠΈ Π½Π°Π²Ρ‹ΠΊΠΈ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ учащимся Π² долгосрочной пСрспСктивС ΠΈ обСспСчат Π²Π»ΠΈΡΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ рост Π² ΠΈΡ… ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Π΅.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

ПониманиС этого Π²Π°ΠΆΠ½ΠΎ. Π­Ρ‚Π° тСхнология позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΡ€Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠ΄Π΅Ρ€Π½ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π’Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ становится мСньшС, Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ эффСктивноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ВСория MVC являСтся Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠ΅ΠΉ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½ΠΎΠ³ΠΎ программирования ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² прСдоставлСнии Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… услуг ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

НаконСц, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΌΠΎΠ΄Π΅Π»ΠΈ MVC ΠΈ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

Π­Ρ‚ΠΎ руководство ΠΏΠΎ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ проСктирования MVC. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ обсудили ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ примСнСния, ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Ρƒ ΠΈ прСимущСства шаблона проСктирования MVC. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ наши ΡΡ‚Π°Ρ‚ΡŒΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС β€”

  1. MVC ViewData
  2. TempData Π² MVC
  3. Entity Framework Π² MVC
  4. Π Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ список MVC

АрхитСктура MVC Π·Π° 5 ΠΌΠΈΠ½ΡƒΡ‚: ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

Главная/Π‘Π»ΠΎΠ³/Π£Ρ‡Π΅Π±Π½ΠΈΠΊΠΈ ΠΈ руководства/АрхитСктура MVC Π·Π° 5 ΠΌΠΈΠ½ΡƒΡ‚: ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

11 мая 2020 Π³. — 5 ΠΌΠΈΠ½. чтСния

Π­Ρ€ΠΈΠ½ Доэрти

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ прСдставлСния ΠΌΠΎΠ΄Π΅Π»ΠΈ β€” это прСдсказуСмый шаблон проСктирования ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… срСдах со ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ языками программирования, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Python, Ruby, PHP, JavaScript ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ. Он ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π’ этом сообщСнии Π±Π»ΠΎΠ³Π° опрСдСляСтся концСпция шаблона проСктирования ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния МодСль-ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅-ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ (MVC) ΠΈ приводится Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ МодСль-ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅-ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ Π² JavaScript/HTML/CSS.

БСгодня ΠΌΡ‹ рассмотрим:

  • Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° MVC?
  • ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° MVC
  • Π’Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ MVC
  • Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ отвСтствСнности
  • ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° MVC
  • РСсурсы

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° MVC?

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹ шаблона MVC ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… аспСктов Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌΠΎΠ³ΠΎ прилоТСния. Π¨Π°Π±Π»ΠΎΠ½ проСктирования MVC слуТит для отдСлСния уровня прСдставлСния ΠΎΡ‚ бизнСс-Π»ΠΎΠ³ΠΈΠΊΠΈ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ заботятся ΠΎ MVC? MVC популярСн Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΈ это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… шаблонов проСктирования ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния для ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Π¨Π°Π±Π»ΠΎΠ½ проСктирования Model View Controller раздСляСт Π·Π°Π΄Π°Ρ‡ΠΈ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ· 3 Π³Ρ€ΡƒΠΏΠΏ:

  • Model
  • View
  • Controller

Π¨Π°Π±Π»ΠΎΠ½ проСктирования Model View Controller: Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Ρ‡

АрхитСктурный шаблон Model View Controller раздСляСт Π·Π°Π΄Π°Ρ‡ΠΈ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ· 3 Π²Π΅Π΄Ρ€Π°:

  1. МодСль: Ρ…Ρ€Π°Π½ΠΈΡ‚ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈ управляСт ΠΈΠΌΠΈ.

    Часто это Π±Π°Π·Π° Π΄Π°Π½Π½Ρ‹Ρ…, Π² нашСм быстром ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ локальноС Π²Π΅Π±-Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ.

  2. Π’ΠΈΠ΄: ГрафичСский интСрфСйс ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ

    ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ β€” это Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ прСдставлСниС Π΄Π°Π½Π½Ρ‹Ρ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°, Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°, Ρ‚Π°Π±Π»ΠΈΡ†Π°, Ρ„ΠΎΡ€ΠΌΠ°.

    ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ содСрТит всС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, нСпосрСдствСнно Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ»ΠΈ событиС Π²Π²ΠΎΠ΄Π°.

  3. ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€: Мозги прилоТСния.

    ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ соСдиняСт модСль ΠΈ Π²ΠΈΠ΄. ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· прСдставлСния Π² запросы Π½Π° ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅/ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ… Π² ΠΌΠΎΠ΄Π΅Π»ΠΈ.

    ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ Π²Π²ΠΎΠ΄ ΠΈΠ· прСдставлСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π»ΠΎΠ³ΠΈΠΊΡƒ для прСобразования Π²Π²ΠΎΠ΄Π° Π² запрос ΠΌΠΎΠ΄Π΅Π»ΠΈ, модСль ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ Π΄Π°Π½Π½Ρ‹Π΅, ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ Π² прСдставлСниС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠ³ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈΡ… Π½Π° ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ дисплСС.


ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° MVC

  • Π’Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для графичСских ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов (GUI)
  • ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π΅Π½ Π² Π²Π΅Π±-прилоТСниях
  • ΠžΠ±ΡΠ·Π°Π½Π½ΠΎΡΡ‚ΠΈ MVC Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠΌ ΠΈ сСрвСром, совмСстимы с Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€ΠΎΠΉ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
  • MVC являСтся ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ шаблоном проСктирования ΠΏΡ€ΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ
  • Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ отвСтствСнности: этот ΠΊΠΎΠ΄ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ Π² зависимости ΠΎΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π½Π° модСль, прСдставлСниС ΠΈΠ»ΠΈ сСгмСнт ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π°
  • Π₯ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Ruby on Rails
  • Блабосвязанный
  • УдаляСт Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Π΅ зависимости
  • ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π±Π΅Π· ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ
  • MVC позволяСт ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ классы ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ Π±Π΅Π· ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ
  • ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ΅ использованиС ΠΊΠΎΠ΄Π°
  • Π Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ΄
  • Высокая ΡΠ²ΡΠ·Π½ΠΎΡΡ‚ΡŒ
  • ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π° обслуТивания ΠΈΠ»ΠΈ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… прСдставлСний
  • КаТдая Ρ‡Π°ΡΡ‚ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ протСстирована нСзависимо (МодСль9,03,ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€8)


Π’Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ MVC

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΊΠ°ΠΊ ΠΎ конструкции ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π° прСдставлСния ΠΌΠΎΠ΄Π΅Π»ΠΈ. MVC популярСн Π² Π²Π΅Π±-прилоТСниях, ΠΎΠ΄Π½Π° ΠΈΠ· ΠΏΡ€ΠΈΡ‡ΠΈΠ½ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ обязанности Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠΌ ΠΈ сСрвСром.


Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Ρ‡

ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ MVC позволяСт Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π·Π°Π΄Π°Ρ‡ΠΈ β€” Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π»ΠΎΠ³ΠΈΠΊΡƒ ΠΌΠ΅ΠΆΠ΄Ρƒ 3 сСгмСнтами, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ сСгмСнт ΠΌΠΎΠ³ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ нСзависимо.

МодСль, прСдставлСниС ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ Π½Π΅ зависят Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°. ΠŸΠΎΡ‡Π΅ΠΌΡƒ это Π²Π°ΠΆΠ½ΠΎ? Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π°Π΄ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΌ обСспСчСниСм Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ β€” Π² ΠΊΠΎΠΌΠ°Π½Π΄Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€, ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€ ΠΈ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΠΎΡ€ Π±Π°Π·Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ…. Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Ρ‡ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‡Π»Π΅Π½ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ своСй Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π»ΠΎΠ³ΠΈΠΊΠ° Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π° Π½Π° сСгмСнты. Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для обслуТивания β€” Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΎΡˆΠΈΠ±ΠΊΡƒ Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ ΠΊΠΎΠ΄Π°, Π½Π΅ провСряя Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π°.


Блабосвязанный

Блабосвязанный ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ каТдая Ρ‡Π°ΡΡ‚ΡŒ: модСль, прСдставлСниС ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ нСзависимо Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΈΠ· частСй, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ 2 части Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ. ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния MVC Π»ΠΎΠ³ΠΈΠΊΠ° Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… сСгмСнтов нСзависима. ВсС Π² прСдставлСнии дСйствуСт нСзависимо ΠΎΡ‚ ΠΌΠΎΠ΄Π΅Π»ΠΈ β€” ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, прСдставлСниС Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ Π»ΠΎΠ³ΠΈΠΊΠΈ, зависящСй ΠΎΡ‚ ΠΌΠΎΠ΄Π΅Π»ΠΈ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ нСзависимых ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ ΠΈ прСдставлСний ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΊΠΎΠ΄Π° ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Π΅Π³ΠΎ обслуТиваниС. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡΡ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΎΡˆΠΈΠ±ΠΊΡƒ Π² прСдставлСнии Π±Π΅Π· измСнСния ΠΊΠΎΠ΄Π° ΠΌΠΎΠ΄Π΅Π»ΠΈ.

Π”ΠΈΠ·Π°ΠΉΠ½ MVC: ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²ΠΈΠ΄ΠΈΡ‚ MVC

MVC с дСйствиСм ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ

На рисунках Π²Ρ‹ΡˆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, Ρ‡Ρ‚ΠΎ происходит Π² Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ MVC, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ, с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.


ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ Π²Π΅Π±-прилоТСния

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ основы JavaScript, ΠΎΠ±Ρ…ΠΎΠ΄Π° DOM ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ событий Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС.

ΠžΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ тСкстовыС курсы ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ всю Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС Π±Π΅Π· нСобходимости просмотра Π²ΠΈΠ΄Π΅ΠΎ.

ΠŸΠΎΠ»Π½Ρ‹ΠΉ курс JavaScript: созданиС Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ прилоТСния с нуля



ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° MVC

Π’ нашСм простом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π’ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ производствСнного качСства Π΄Π°Π½Π½Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒΡΡ Π² Π±Π°Π·Π΅ Π΄Π°Π½Π½Ρ‹Ρ….


МодСль

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ с Β«Π˜Π³Ρ€ΠΎΠΉ прСстолов» модСль β€” это поддСльная Π±Π°Π·Π° Π΄Π°Π½Π½Ρ‹Ρ…, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ пСрСчислСны Π΄ΠΎΠΌΠ° ΠΈ пСрсонаТи. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΌΡ‹ Π½Π΅ пишСм это ΠΊΠ°ΠΊ список Π½Π° JavaScript, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊΠΈ GOT Π·Π½Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ список ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌ, Π½ΠΎ это самый простой способ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Π±Π»ΠΎΠ³Π΅.


ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ β€” это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π² ΠΎΠΊΠ½Π΅ Π²Ρ‹Π²ΠΎΠ΄Π° β€” это Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ прСдставлСниС Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΡƒΠ΄ΠΎΠ±Π½ΠΎ отобраТаСтся для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π’ нашСм случаС сСлСктор Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка.


ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ β€” это ΠΌΠΎΠ·Π³ нашСго прилоТСния β€” JavaScript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ событиС ΠΊΠ»ΠΈΠΊΠ°. ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ событиС, ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π΅Π³ΠΎ ΠΈ ΠΈΡ‰Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ· ΠΌΠΎΠ΄Π΅Π»ΠΈ β€” Π² нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ‡Π»Π΅Π½ΠΎΠ², связанных с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ Π΄ΠΎΠΌΠΎΠΌ. ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² прСдставлСниС для отобраТСния.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ : ΠŸΠ΅Ρ€Π΅Π΄ тСстированиСм ΠΊΠΎΠ΄Π° запуститС Π΅Π³ΠΎ, Π½Π°ΠΆΠ°Π² ΠΊΠ½ΠΎΠΏΠΊΡƒ RUN .