javascript - Apakah maksud model perniagaan dan model paparan secara khusus dalam pembangunan bahagian hadapan?

Question

Dalam artikel oleh Xu Fei ini, dalam Bahagian 5: "Mengapa MVVM ialah pilihan yang baik", model perniagaan dan model paparan disebut secara khusus?

Answer 1

[Model Perniagaan] serupa dengan [Model Domain] dan boleh merujuk kepada data yang digunakan untuk menyatakan kandungan perniagaan. Contohnya, model perniagaan Taobao ialah [Produk], model perniagaan blog ialah [Blog Post] dan model perniagaan Twitter ialah [Tweet]. Ia boleh difahami sebagai Model dalam MVC klasik, termasuk nama, perihalan, masa, pengarang, harga dan kandungan medan data [sebenar] lain.

Dan [View Model] ialah konsep baharu selepas kebangkitan MVVM. Untuk melaksanakan Apl Web yang lengkap, selain data, terdapat juga banyak [keadaan] dalam interaksi UI. Contohnya: sama ada kotak pop timbul dibuka, sama ada pengguna sedang menaip, sama ada status Pemuatan permintaan perlu dipaparkan, sama ada medan tambahan perlu dipaparkan untuk klasifikasi data carta dan perubahan dinamik dalam saiz dan gaya teks apabila pengguna memasukkan... Ini tiada kaitan dengan medan data tertentu, tetapi keadaan Lihat, yang sangat penting kepada senario perniagaan bahagian hadapan sebenar, boleh dianggap sebagai [model paparan]. Dalam perpustakaan MVVM seperti Vue, keadaan dalam contoh di atas boleh diwakili dan dikawal oleh pembolehubah JS, yang juga boleh dianggap sebagai model data.

Oleh itu, model perniagaan dan model pandangan adalah konsep yang sangat penting di bahagian hadapan. Selepas MVVM menyelesaikan perhubungan yang mengikat antara data model perniagaan dan halaman, perpustakaan pengurusan negeri seperti Redux ingin menyelesaikan satu siri masalah yang disebabkan oleh pengembangan keadaan model paparan yang melampau dalam halaman interaktif yang kaya. Pemahaman yang lebih mendalam tentang model ini sebenarnya akan membantu memahami arah pembangunan semasa bahagian hadapan.

Answer 2

Hanya beri saya buah berangan dan anda akan faham

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

//视图模型


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