[Business Model] est similaire au [Domain Model] et peut faire référence aux données utilisées pour exprimer le contenu commercial. Par exemple, le modèle économique de Taobao est [Produit], celui du blog est [Article de blog] et celui de Twitter est [Tweet]. Il peut être compris comme le modèle dans MVC classique, comprenant le nom, la description, l'heure, l'auteur, le prix et d'autres contenus de champs de données [réels].

Et [View Model] est un nouveau concept après la montée en puissance de MVVM. Pour implémenter une application Web complète, en plus des données, il existe également de nombreux [états] dans l'interaction de l'interface utilisateur. Par exemple : si la boîte contextuelle est ouverte, si l'utilisateur est en train de taper, si l'état de chargement de la demande doit être affiché, si des champs supplémentaires doivent être affichés pour la classification des données du graphique et les changements dynamiques dans la taille et le style de le texte lorsque l'utilisateur saisit... Ceux-ci n'ont rien à voir avec les champs de données spécifiques, mais l'état d'affichage, qui est très important pour le scénario commercial frontal réel, peut être considéré comme un [modèle d'affichage]. Dans les bibliothèques MVVM telles que Vue, les états des exemples ci-dessus peuvent être représentés et contrôlés par des variables JS, qui peuvent également être considérées comme un modèle de données.

Par conséquent, le modèle économique et le modèle de vue sont des concepts très importants dans le front-end. Une fois que MVVM a résolu la relation de liaison entre les données du modèle économique et les pages, les bibliothèques de gestion d'état telles que Redux souhaitent résoudre une série de problèmes causés par l'expansion extrême des états du modèle d'affichage dans des pages interactives riches. Une compréhension plus approfondie de ces modèles aidera en fait à comprendre l’orientation actuelle du développement du front-end.

Donnez-moi juste une châtaigne et vous comprendrez

//业务模型
function UserBM(){
    this.username;
    this.password;
    this.address;
}

//视图模型


function UserVM(){
    this.username;
    this.password;
    this.address;
    this.isShowHelloMessage;
    this.isShowAddress;
}