B2 · 第6集 · 5:05
JavaFX界面开发：MVC架构
本集讲解如何用MVC架构分离JavaFX程序的逻辑、界面与事件处理，提升代码可读性与可维护性。
来源：Nicolas Hurtubise / classe.iro.umontreal.ca · 许可：CC BY-SA 4.0
字幕
Vous vous retrouvez ici à avoir beaucoup, beaucoup,
您会发现，此时自己面临众多、众多
beaucoup de possibilités à chaque moment,
每个时刻都有大量可能性，
puis ça commence à être un peu absurde d'initialiser tous nos objets dans la
接着，若在 start 函数中初始化所有对象，
fonction start, puis tous nos événements les définir dans la fonction start.
再在该函数中定义全部事件，就显得不太合理了。
Donc, la question ici, ça va être comment est- ce qu'on peut séparer le code pour
因此，这里的问题是：我们该如何拆分代码，
garder le tout le plus lisible et
以保持整体代码的可读性，
le plus maintenable possible.
并尽可能便于维护？
Il y a plusieurs solutions, mais
实现方式有多种，但其中一种常用方案是采用“模型-视图-控制器”架构。
une solution commune est d'y aller avec une architecture de type modèle- vue-
所谓模型-视图-控制器架构，
contrôleur. Donc, l'architecture modèle- vue- contrôleur,
是一种相当经典的设计模式，
c'est quelque chose qui est assez classique
它不把所有内容混杂在一个庞大的函数里——
et qui va. plutôt que de tout mêler dans une grosse fonction qui va à la fois faire
这个函数本不该同时承担逻辑处理、事件定义、图形组件创建、
la logique, la définition d'événements, la définition de composants graphiques,
以及输入验证等多项任务；
la validation d'entrées, on va séparer le
相反，我们将代码按各部分在程序中所起的作用来划分，
code en fonction de quelle fonction joue quel rôle dans le programme puis par rôle
而按角色进一步细分，
en fait on va vraiment séparer les différentes parties du code selon la logique
真正依据功能逻辑、界面显示内容、事件响应机制等不同维度，
selon ce qui est affiché selon les événements selon tout ça
将代码彻底区分开来。
Donc modèle vue contrôleur, bah le nom le dit,
模型-视图-控制器——顾名思义，
on va avoir trois composantes. Premièrement, on va avoir le modèle.
它包含三个核心组成部分：首先是模型（Model）。
Donc le modèle, c'est le code qui va contenir la logique interne de l'application.
所谓模型，即承载应用程序内部逻辑的代码。
Ça va regrouper toutes les données, tous les calculs,
它汇总所有数据和计算过程，
tout ce qui est relié au problème qu'on essaie de résoudre.
涵盖我们试图解决的问题所涉及的一切内容。
Mettons qu'on revient sur l'exemple de logiciel comptable, ben on va
以会计软件为例，
avoir dans notre modèle de l'information sur les employés,
在模型中存储员工相关信息，
de l'information sur les salaires qu'on va verser,
存储待发放薪资的相关信息，
toute la partie calculer comment est- ce qu'on verse quel salaire à qui,
以及“如何向谁发放多少薪资”的全部计算逻辑，
ça va rentrer dans le modèle.
这些全都属于模型的职责范围。
Donc le modèle, c'est vraiment la logique interne de l'application,
因此，模型就是应用程序的内在逻辑，
c'est toute l'information qui sert à faire marcher l'application,
即支撑应用程序运行所需的全部信息，
puis qui sert à résoudre le problème.
并用于解决实际问题。
On va nécessairement avoir la vue.
我们必然需要视图。
La vue, c'est le code qui sert à définir ce qui doit être affiché.
视图是定义界面显示内容的代码。
Donc la vue vraiment ce qu'elle va contenir c'est la définition de comment par
因此，视图真正包含的，是关于如何展示的定义，例如，
exemple comment est- ce qu'on affiche les
如何呈现一张工资单中的
informations d'une fiche de paie.
各项信息。
Quel bouton va être placé où dans l'interface,
比如，界面中按钮的位置，
quel texte est positionné où exactement.
以及文字的确切排布位置。
Donc la vue ça va vraiment être du code simple qui va servir à dire qu'est- ce qui
因此，视图本质上是简洁的代码，
est affiché à quel endroit dans l'interface.
用于说明界面中各元素的显示位置。
Finalement, on va avoir le contrôleur.
最后，我们还需要控制器。
Le contrôleur, c'est le code qui va relier les deux ensemble.
控制器是将模型与视图连接起来的代码。
Donc, par exemple, quand on clique
例如，当用户点击界面中
sur un bouton dans l'interface qui est afficher le chèque de paie,
“显示工资单”的按钮时，
il faudrait qu'une fonction du contrôleur soit appelée.
应调用控制器中的某个函数。
Cette fonction- là va demander au modèle de calculer toutes les valeurs pour
该函数会请求模型计算出
afficher la fiche de paie.
用于显示工资单的所有数值。
Puis une fois que c'est calculé,
待计算完成后，
elle va demander à la vue d'afficher la scène qui correspond à la fiche de paie avec
它再请求视图显示对应的工资单界面，
les valeurs qui ont été calculées.
并填入已算出的各项数值。
Si on résume, toute la logique du code va se trouver dans les modèles.
总结来说，所有核心业务逻辑都集中在模型中。
Donc le modèle doit vraiment représenter votre problème, puis
因此，模型必须真实反映你的实际问题，而且
doit pouvoir exister sans l'interface graphique.
必须能脱离图形界面独立存在。
C'est vraiment quelque chose qui devrait pas dépendre de la présence ou de l'absence
这确实不该取决于按钮的有无
de boutons. C'est quelque chose qui devrait vous permettre de résoudre votre
它应让您能抽象地、从根本上解决问题
problème dans l'abstrait, dans le fond.
从根本上解决问题
Les contrôleurs, c'est vraiment la section de votre code qui va se limiter à faire
控制器，本质上是您代码中专门负责搭建桥梁的部分
le pont entre les événements qui peuvent survenir
连接视图或模型中可能发生的各类事件
dans la vue ou dans le modèle.
在视图或模型中可能发生的事件
Donc c'est vraiment quelque chose de relativement simple qui va
因此，它本质上是一个相当简单的组件
vraiment juste coller les deux morceaux ensemble.
只负责把这两部分严丝合缝地连接起来
Puis les vues devraient être vraiment aussi simples et stupides que possible,
而视图则应尽可能简单、纯粹
pas de logique dans la vue, seulement de la définition d'interface et de la
视图中不应包含任何逻辑，仅负责界面定义和事件声明
déclaration d'événements.
以及事件声明
Dans le fond, quand il y a un bouton qui peut déclencher un événement,
本质上，当某个按钮可触发事件时
dans la vue on va définir le bouton, puis quand
在视图中，我们只需定义这个按钮
il y a un événement sur ce bouton- là, on va simplement
然后，当该按钮上发生事件时
transférer cette information- là,
我们就直接将这一信息传递出去
donc dire qu'il y a eu un événement au contrôleur,
即告知控制器：此处发生了事件
c'est le contrôleur qui va se charger de faire en
后续工作由控制器承担
sorte que le modèle se comporte en fonction de ça,
模型能据此作出相应行为
puis que les vues affichent la bonne affaire en fonction.
并让视图依此显示正确的内容
Si on prend le petit exemple de décomposition modèle vue contrôleur,
以经典的MVC（模型-视图-控制器）分解为例
on pourrait regarder le lecteur de musique VLC qui permet de lire de la musique avec
我们可以看看音乐播放器VLC：它支持播放音乐、创建播放列表
des playlists, faire pause, faire play,
支持暂停、播放功能
changer de chanson, revenir à une autre chanson,
切换歌曲、返回上一首歌等操作
bref il y a toutes sortes de choses qu'on peut faire avec ça,
总之，它提供了丰富多样的功能
c'est essentiellement un lecteur de musique standard.
本质上就是一个标准的音乐播放器
Comment est- ce qu'on pourrait appliquer le principe de modèle vue contrôleur là-
我们该如何将模型-视图-控制器原则应用到这上面呢？
dessus? Dans la vue, nécessairement,
在视图中，必然要包含
on va avoir la définition de la hiérarchie des composants graphiques.
图形组件层级结构的定义。
On va définir les boutons, on va définir la barre pour le temps,
我们将定义按钮，还将定义时间进度条，
on va définir le temps restant, le temps total,
定义剩余时间与总时间，
l'image qui va servir à afficher la pochette de l'album.
以及用于显示专辑封面的图片。
Donc ça, ça va être vraiment la partie de la vue.
因此，这部分将真正体现视觉效果。
Puis chacun des boutons va avoir un événement relié qui va
然后，每个按钮都会关联一个事件，
appeler le contrôleur pour lui dire il vient de se passer telle affaire.
调用控制器，通知它发生了某件事。
Le modèle ensuite, le
随后，该模型
modèle il faut que ce soit une représentation complètement indépendante de
必须是完全独立于
l'affichage graphique.
图形显示的。
Autrement dit, on pourrait avoir une classe,
换句话说，我们可以创建一个类，
par exemple, qui représente une chanson.
例如，用来表示一首歌曲。