javascript - What do business model and view model specifically mean in front-end development?

Question

In this article by Xu Fei, in Section 5: "Why MVVM is a good choice", business model and view model are mentioned. What do they refer to specifically?

Answer 1

[Business Model] is similar to [Domain Model] and can refer to the data used to express business content. For example, Taobao's business model is [Product], blog's business model is [Blog Post], and Twitter's business model is [Tweet]. It can be understood as the Model in classic MVC, including name, description, time, author, price and other [real] data field contents.

And [View Model] is a new concept after the rise of MVVM. To implement a complete Web App, in addition to data, there are also a lot of [states] in UI interaction. For example: whether the pop-up box is open, whether the user is typing, whether the request Loading status needs to be displayed, whether additional fields need to be displayed for chart data classification, and the dynamic changes in the size and style of the text when the user inputs... These have nothing to do with the specific data fields, but View state, which is very important to the actual front-end business scenario, can be considered a [view model]. In MVVM libraries such as Vue, the states in the above examples can be represented and controlled by JS variables, which can also be considered a data model.

Therefore, business model and view model are very important concepts in the front-end. After MVVM solves the binding relationship between business model data and pages, state management libraries such as Redux want to solve a series of problems caused by the extreme expansion of view model states in rich interactive pages. A deeper understanding of these models will actually help understand the current development direction of the front end.

Answer 2

Just give me a chestnut and you will understand

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

//视图模型


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