mvc 視圖和模型的對(duì)應(yīng)

by Kevin Kononenko

凱文·科諾年科(Kevin Kononenko)

通過(guò)在酒吧訂購(gòu)飲料來(lái)解釋模型視圖控制器(MVC) (Model-View-Controller (MVC) Explained Through Ordering Drinks At The Bar)

如果您去過(guò)酒吧，那么MVC并不難。 (If you have been to a bar, then MVC ain’t that hard.)

Model-view-controller (MVC) frameworks are a crucial part of building modern web applications. Walk into a room of web developers, and you will likely be bombarded with mentions of Ruby on Rails, Angular or Django.

模型視圖控制器(MVC)框架是構(gòu)建現(xiàn)代Web應(yīng)用程序的關(guān)鍵部分。 走進(jìn)一個(gè)Web開(kāi)發(fā)人員的房間，您可能會(huì)被提及Ruby on Rails，Angular或Django的消息轟炸。

More generally, MVC logic can be used to describe almost any web development process that uses a language like PHP, Ruby, Python or JavaScript.

更一般而言，MVC邏輯可用于描述幾乎任何使用PHP，Ruby，Python或JavaScript之類(lèi)的語(yǔ)言的Web開(kāi)發(fā)過(guò)程。

永遠(yuǎn)不會(huì)少... (Never the less…)

Many web developers navigate this mysterious world by hacking through the weeds with a smile on their face. When a senior developer or teammate needs to look at the code from one of these developers, they will give an immediate yelp, followed by a swift lecture on common coding practices.

許多網(wǎng)絡(luò)開(kāi)發(fā)人員通過(guò)面帶微笑的方式闖入雜草，從而穿越了這個(gè)神秘的世界。 當(dāng)高級(jí)開(kāi)發(fā)人員或團(tuán)隊(duì)成員需要查看其中一個(gè)開(kāi)發(fā)人員的代碼時(shí)，他們會(huì)立即給出呼聲，隨后是關(guān)于常見(jiàn)編碼實(shí)踐的快速講座。

This is no way to go through life! In fact, the MVC pattern in modern web development can be easily explained by ordering a drink from a bartender. And yes, that means if you have been to a bar, then you can understand the major structural pattern shared by all web apps.

這是沒(méi)有生命的方法！ 實(shí)際上，通過(guò)從調(diào)酒師訂購(gòu)飲料可以很容易地解釋現(xiàn)代Web開(kāi)發(fā)中的MVC模式。 是的，這意味著如果您去過(guò)酒吧，那么您可以了解所有Web應(yīng)用程序共享的主要結(jié)構(gòu)模式。

Bravely hacking through the obstacles until reality hits

勇敢地闖入障礙，直到現(xiàn)實(shí)降臨

What is the MVC Pattern?

什么是MVC模式？

• Model: Structures your data in a reliable form and prepares it based on controller’s instructions

  模型 ：以可靠的形式構(gòu)造數(shù)據(jù)并根據(jù)控制器的指示進(jìn)行準(zhǔn)備

• View: Displays data to user in easy-to-understand format, based on the user’s actions

  視圖 ：根據(jù)用戶的操作以易于理解的格式向用戶顯示數(shù)據(jù)

• Controller: Takes in user commands, sends commands to the model for data updates, sends instructions to view to update interface.

  控制器 ：接收用戶命令，將命令發(fā)送到模型以進(jìn)行數(shù)據(jù)更新，發(fā)送指令以查看以更新界面。

Or, in diagram form:

或者，以圖表形式：

That was boring. Onto the bar.

真無(wú)聊。 進(jìn)入酒吧。

初學(xué)者Web開(kāi)發(fā)人員進(jìn)入酒吧… (A beginner web developer enters a bar…)

You enter a bar on a Friday night, and approach the bartender. Since the bar is already crowded, you push through a crowd until you finally catch the bartender’s attention, and you blurt out, “One Manhattan, please!”

您在星期五晚上進(jìn)入一家酒吧，然后接近酒保。 因?yàn)榫瓢梢呀?jīng)很擁擠，所以您要擠滿人群，直到最終引起調(diào)酒師的注意，然后您脫口而出：“拜托，一個(gè)曼哈頓！”

You are the user, and your drink order is the user request. To you, the Manhattan is just your favorite drink, and you pretty reliably know that this will be a sweet and delicious drink.

您是用戶 ，而您的飲料訂單是用戶請(qǐng)求 。 對(duì)您來(lái)說(shuō)，曼哈頓只是您最喜歡的飲料，您可以肯定地知道這將是一種甜美可口的飲料。

The bartender gives you a quick nod. To the bartender, the Manhattan is not a tasty drink, it is merely a series of steps:

酒保給你點(diǎn)頭。 對(duì)調(diào)酒師來(lái)說(shuō)，曼哈頓不是好喝的酒，它只是一系列步驟：

Grab glass

抓玻璃

Add whiskey

加威士忌

Add vermouth

添加苦艾酒

Add bitters

加苦

Stir drink

攪拌飲料

Add cherry

加櫻桃

Ask for credit card and charge.

要求信用卡和收費(fèi)。

The bartender’s brain is the controller. As soon as you say the word “Manhattan” in a language that they understand, the work begins. This work is similar in nature to making a margarita or strawberry daiquiri, but uses distinct ingredients that will never be confused. The bartender can only use the tools and resources that are behind the bar. This limited tool set is the model, and includes the following:

酒保的大腦是控制者 。 只要您以他們理解的語(yǔ)言說(shuō)出“曼哈頓”一詞，便開(kāi)始工作。 這項(xiàng)工作本質(zhì)上類(lèi)似于制作瑪格麗塔酒或草莓代基里酒，但使用了永不混淆的獨(dú)特成分。 調(diào)酒師只能使用酒吧后面的工具和資源。 此有限的工具集是模型，包括以下內(nèi)容：

• Bartender’s hands
  酒保的手
• Shakers/mixing equipment
  振動(dòng)篩/攪拌設(shè)備
• Liquors
  酒類(lèi)
• Mixes
  混合
• Glasses
  眼鏡
• Garnishes
  裝飾物

Perhaps at a fancier bar, they might have a robot assistant! Or an automatic drink mixer. It does not matter to your particular bartender, who can only use the available resources.

也許在豪華酒吧里，他們可能會(huì)有一個(gè)機(jī)器人助手！ 或自動(dòng)飲料攪拌機(jī)。 對(duì)于您的調(diào)酒師來(lái)說(shuō)，這無(wú)關(guān)緊要，調(diào)酒師只能使用可用的資源。

Finally, the finished drink that you can see and consume is the view. The view is built out of the limited options from the model, and arranged and transmitted via the controller (that is, the bartender’s brain).

最后，您可以看到并消費(fèi)的成品飲料就是視圖。 視圖是基于模型的有限選項(xiàng)構(gòu)建的，并通過(guò)控制器(即調(diào)酒師的大腦)進(jìn)行排列和傳輸。

得到教訓(xùn) (Lessons Learned)

• Want another drink? Shouting at your empty glass, the view, will do you absolutely no good. You must talk to the bartender.
  要再喝一杯嗎？ 朝空的玻璃杯大喊大叫的景象絕對(duì)對(duì)您沒(méi)有好處。 你必須和酒保談?wù)劇?
• The time spent between the bartender hearing the request and starting to create the drink should be absolutely minimal. This is sometimes known as a “skinny controller”- in other words, the controller should contain a minimal amount of logic, and delegate as much as possible to the model. A great bartender will not only have recipes memorized, but will also prepare the ingredients and tools in a reliable manner every night so that a minimal amount of searching and arranging is needed once the customers start ordering.
  在調(diào)酒師聽(tīng)到要求和開(kāi)始制作飲料之間所花費(fèi)的時(shí)間應(yīng)該絕對(duì)是最短的。 這有時(shí)被稱為“瘦控制器”，換句話說(shuō)，控制器應(yīng)包含最少數(shù)量的邏輯，并盡可能多地委派給模型。 一位出色的調(diào)酒師不僅會(huì)記住食譜，而且每晚都會(huì)以可靠的方式準(zhǔn)備食材和工具，因此一旦客戶開(kāi)始訂購(gòu)，便只需進(jìn)行最少的搜索和整理。
• Could the bartender pour all the ingredients directly in the customers mouth and expect the customer to swish it around and mix the drink? Yes, possibly I suppose. You want to keep as much of your logic within the model as possible as opposed to within the view. In other words, making the drink behind the bar is preferable to mixing it within the customer’s mouth.
  酒保可以直接將所有成分倒入顧客的口中，并期望顧客將其攪勻并混合飲料嗎？ 是的，可能我想。 您想要在模型內(nèi)(而不是視圖內(nèi))保留盡可能多的邏輯。 換句話說(shuō)，將飲料制作在酒吧后方比將其在顧客口中混合更可取。

• If you order a beer, the bartender will hardly need to do anything. Perhaps they will simply remove the cap and hand you the drink. That being said, you still must request the bartender. The beer will not magically appear in front of you.
  如果您訂購(gòu)啤酒，酒保幾乎不需要做任何事情。 也許他們會(huì)簡(jiǎn)單地取下瓶蓋，然后將飲料交給您。 話雖如此，您仍然必須要求酒保。 啤酒不會(huì)神奇地出現(xiàn)在您面前。

將其綁定到Web開(kāi)發(fā) (Tying It Back To Web Development)

Here is how the same process plays out in a modern web app:

這是在現(xiàn)代Web應(yīng)用程序中如何執(zhí)行相同的過(guò)程：

• The user makes a request along a route, let’s say /home.

  用戶沿著一條路線(例如/ home) 發(fā)出請(qǐng)求 。

• The controller receives this request and gives a specific set of orders that are related to that route. These instructions could either be for the view to update or serve a certain page, or for the model to perform specific logic. Let’s assume this request has some logic associated with it.

  控制器接收到該請(qǐng)求并給出與該路線相關(guān)的一組特定訂單。 這些指令可以用于視圖更新或?yàn)樘囟?yè)面提供服務(wù)，也可以用于模型執(zhí)行特定邏輯。 假設(shè)此請(qǐng)求具有與其相關(guān)的某些邏輯。

• The model carries out the logic, pulls from a database and sends back a consistent response based on the controller’s instructions.
  該模型執(zhí)行邏輯，從數(shù)據(jù)庫(kù)中提取數(shù)據(jù)，然后根據(jù)控制器的指令發(fā)送一致的響應(yīng)。
• The controller then passes this data to the view to update the user interface.
  然后，控制器將此數(shù)據(jù)傳遞到視圖以更新用戶界面。

Whenever a request comes in, it first must go to the controller before it can be converted into instructions for the view or model. The Ruby on Rails wikipedia article contains a further overview if you are looking for more.

每當(dāng)有請(qǐng)求進(jìn)入時(shí)，首先必須先進(jìn)入控制器，然后才能將其轉(zhuǎn)換為視圖或模型的指令。 如果您正在尋找更多內(nèi)容，那么Ruby on Rails Wikipedia文章將提供進(jìn)一步的概述。

Any time you need to learn a new web development framework, you will come across this consistent MVC pattern. And if a particular framework differs from this, you can be sure that the authors will explain their new pattern with references to MVC.

每當(dāng)您需要學(xué)習(xí)新的Web開(kāi)發(fā)框架時(shí)，都會(huì)遇到這種一致的MVC模式。 并且，如果某個(gè)特定的框架與此不同，則可以確保作者將通過(guò)引用MVC來(lái)解釋其新模式。

This should make learning a heck of a lot easier- once you develop with MVC once, every new framework can fit within your comfort zone.

這應(yīng)該使學(xué)習(xí)變得非常容易-一旦使用MVC開(kāi)發(fā)一次，每個(gè)新框架都可以適應(yīng)您的舒適區(qū)域。

Did you enjoy this guide? Let me know in the comments!

您喜歡本指南嗎？ 在評(píng)論中讓我知道！

翻譯自: https://www.freecodecamp.org/news/model-view-controller-mvc-explained-through-ordering-drinks-at-the-bar-efcba6255053/

mvc 視圖和模型的對(duì)應(yīng)

總結(jié)

以上是生活随笔為你收集整理的mvc 视图和模型的对应_通过在酒吧订购饮料来解释模型视图控制器（MVC）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。