mvc - Bagaimanakah kod bahagian hadapan mengendalikan perhubungan satu-ke-banyak antara operasi pengguna dan Model?

Question

Adegan seperti ini:

• Pengguna mengklik butang
• Sesebuah model perlu dikemas kini
• Model B perlu dikemas kini
  ...

Operasi sedemikian perlu bergantung pada banyak Model pada masa yang sama, jadi kod ini tidak akan ditulis dalam Model tertentu.
Ia mungkin, sebagai contoh, Backbone, ditulis dalam ViewController... Tetapi penggunaan semula kod ini tidak baik, dan View akan menjadi kucar-kacir.
Penyelesaian semasa saya ialah menggunakan satu fail untuk mengumpulkan kebanyakan operasi Model, tetapi masalahnya ialah fail ini akan terus membesar dalam saiz dan kekacauan.
Jadi bagaimana masalah sebegini harus diselesaikan?

Persoalan lanjutan ialah, bagaimana untuk menyusun bahagian kod ini?
Sebagai contoh, saya menggunakan penyelesaian React's Flux dan cuba menjelaskan proses itu, tetapi saya mendapati bahawa saya tidak tahu di mana hendak meletakkan bahagian kod ini..
Flux menukar operasi pengguna kepada Actions dan Store memantau Tindakan ini melalui Dispatcher,
Apabila satu Tindakan sepadan dengan beberapa Kedai... masalah timbul:
Perlukah saya menggunakan berbilang Tindakan untuk sepadan dengan Kedai masing-masing, atau patutkah satu Tindakan dipantau oleh berbilang Kedai?

Answer 1

Seorang pengguna yang mengklik butang pada dasarnya adalah sama seperti pengguna yang mengakses melalui URL Ia adalah "input", jadi masalah dan mekanisme pemprosesan adalah sama: memantau "input" dalam kod lapisan paparan, dan memproses beberapa paparan. lapisan (seperti komponen butang) togol, pembetulan URL) perubahan keadaan dalaman, jana/ekstrak tulen, tahap abstraksi yang lebih tinggi (tidak berkaitan dengan melihat komponen atau butiran URL) data/mesej, siarkan menggunakan beberapa jenis mekanisme acara, dan kemudian ia tiada kaitan dengan anda , maka jika terdapat lapisan pengawal, dengarkan peristiwa ini dalam bahagian kod ini dan panggil kaedah objek model yang sepadan (yang mungkin merangkumi kebergantungan dan panggilan antara objek model itu sendiri, tetapi kerumitan satu-ke-banyak di sini tidak akan terdedah kepada luar), dan juga memantau perubahan keadaan objek model tertentu dan memanggil kaedah objek paparan yang sepadan (atau memberikan semula DOM Maya). Semuanya terikat.

Sebagai contoh, saya biasanya menggunakan objek NervJS (model) + DermJS (pandangan) + URLKit (laluan). dimulakan.

Apabila anda menulis komponen UI, sudah tentu anda tidak mahu ia bergantung pada model tertentu Apabila anda menulis komponen model, anda tidak mahu ia bergantung pada UI tertentu, jadi pengikatan seperti satu kepada. -banyak berada di tempat lain (khususnya kod logik Perniagaan) selesai Objek pandangan dan objek model tidak perlu dan tidak sepatutnya tahu berapa banyak dan yang mana satu sama lain, jadi mustahil untuk "berbilang Tindakan masing-masing sepadan dengan Kedai. ".

Bagi masalah "fail tunggal" dan "kekacauan yang terus berkembang", ia adalah sama seperti mengkonfigurasi fail penghalaan Anda boleh merujuk kepada pengalaman yang berkaitan.

Answer 2

Dalam fluks, jika anda memerlukan satu tindakan untuk sepadan dengan berbilang kedai, ia sebenarnya mudah untuk diselesaikan.
Apabila mendaftarkan panggilan balik dalam Kedai, anda boleh membalas tindakan ini dan anda juga boleh menukar susunan yang sepadan melalui waitFor. waitFor来改变相应的顺序。

如果担心代码变乱的话，可以再单独写一个constants文件，定义好触发的事件名称就可以了。

举个例子：

点击一个按钮，触发send事件，会更新两个Store分别是StoreA和StoreB。可以写一个constants.js，先定义事件名称：

constants:

module.exports = {
    "ActionTypes": {
        "SEND": "SEND"
    }
};

然后在两个Store里面分别注册回调：

StoreA:

var AppDispatcher = require('path/to/disp'),
    constants = require('path/to/constants');

StoreA.dispatchToken = AppDispatcher.register(function(payload) {
    var action = payload.action;
    if (action.type === constants.ActionTypes.SEND) {
        // callback A
    };
});

StoreB:

var AppDispatcher = require('path/to/disp'),
    constants = require('path/to/constants');

StoreB.dispatchToken = AppDispatcher.register(function(payload) {
    var action = payload.action;
    if (action.type === constants.ActionTypes.SEND) {
        // callback B
    };
});

在触发点击事件的时候，在Action中触发Disp的这个事件，就会顺序执行在StoreA和StoreB

Jika anda bimbang tentang kekeliruan kod, anda boleh menulis fail malar yang berasingan dan mentakrifkan nama acara yang dicetuskan. 🎜 🎜Contohnya: 🎜 🎜Klik butang untuk mencetuskan acara hantar, yang akan mengemas kini dua Stores, iaitu StoreA dan StoreB. Anda boleh menulis constants.js dan mula-mula menentukan nama acara: 🎜 🎜pemalar:🎜 rrreee 🎜Kemudian daftarkan panggilan balik dalam dua Store masing-masing: 🎜 🎜KedaiA:🎜 rrreee 🎜KedaiB:🎜 rrreee 🎜Apabila peristiwa klik dicetuskan, peristiwa Disp dicetuskan dalam Tindakan dan ia akan dilaksanakan secara berurutan dalam StoreA dan StoreB :)🎜

Answer 3

Apabila ini berlaku, perkara yang biasanya saya fikirkan ialah sama ada saya boleh menambah lapisan di antara mereka.

Answer 4

Jika anda belum melihatnya, atau anda pernah melihatnya tetapi terlupa, ini adalah artikel yang patut dibaca:

Corak Untuk Seni Bina Aplikasi JavaScript Berskala Besar

Ringkasnya, anda memerlukan sesuatu yang "konvensional" supaya paparan dan model tidak perlu bergantung antara satu sama lain (sama ada kebergantungan 1:1 atau kebergantungan 1:N).

Anda juga boleh menggunakan corak acara dan pemerhati yang mudah Jika logik perniagaan adalah rumit, gunakan pengantara untuk melengkapkan komunikasi dan penyegerakan antara modul.

PS: Situasi yang ideal ialah setiap modul anda hanya mengetahui dirinya sendiri (peristiwa apa yang dicetuskan, peristiwa apa yang didengari), dan tidak mempedulikan perkara lain, apatah lagi contoh pihak lain, atau contoh pengantara.