??? ?????
??? ??? ??? ?? ??? ???? ??? ?? ????? ??? ??? ???? ????.
?? ?? ViewController? ??? Backbone? ? ????... ??? ?? ?? ???? ?? ??? View? ??? ???.
?? ?? ??? ?? ??? ???? ???? ?? ??? ???? ???? ??? ? ??? ??? ?? ??? ?????? ????.
???? ??? ??? ??? ???? ????
?? ??? ? ?? ??? ??? ??? ??????.
?? ?? React? Flux ???? ???? ????? ???? ??? ???, ? ??? ??? ??? ??? ?? ????? ? ??????..
Flux? ??? ??? ???? ???? Store? Dispatcher? ?? ??? ??? ???????.
??? ??? ?? Store? ????... ??? ?????:
???? ?? ???? ?? ?? ??? ???? ???, ??? ??? ??? ?? ????? ?????? ????
認(rèn)證0級(jí)講師
???? ??? ???? ?? ????? ???? URL? ?? ????? ?? ?????. ?? "??"??? ?? ? ?? ????? ?????. ? ??? ???? "??"? ?????? ?? ?? ?????. ???(?: ?? ?? ??) ??, URL ??) ?? ?? ??, ???? ? ?? ??? ??(? ?? ?? ?? URL ?? ??? ?? ??) ???/??? ??/??, ??? ??? ????? ???? ??????? ?? , ???? ???? ?? ?? ??? ? ???? ??? ???? ???? ?? ?? ??? ???? ?????(?? ?? ?? ?? ???? ??? ???? ? ???). ??? ??? ???? ??? ???? ????. ?? ?? ?? ??? ?? ??? ?????? ?? ? ??? ???? ?????(?? Virtual DOM? ?? ??????). ?? ?? ?? ????.
?? ?? ?? ?? NervJS(??) + DermJS(?) + URLKit(???)? ??? ?????. NervJS ? DermJS ???? ?? ??? ???? ????. ?? ?/ ?? ??? ????????.
UI ????? ??? ?, ?? ?? ??? ???? ?? ??? ?? ????. ?? ????? ??? ?, ??? ???? ?? ???? ???? ?? ????. -?? ??? ?? ??? ????(?? ???? ?? ??). ? ??? ?? ??? ?? ? ??? ?? ??? ??? ? ??? ???? "?? ??? ?? Store? ?????." ".
"?? ??"? "????? ??? ??"? ??? ??? ?? ??? ?????. ?? ??? ?????.
?????? ?? ??? ???? ?? ??? ??? ??? ?? ??? ???? ????.
???? ??? ??? ? ? ??? ??? ? ???, waitFor
? ?? ?? ??? ??? ?? ????. waitFor
來(lái)改變相應(yīng)的順序。
如果擔(dān)心代碼變亂的話,可以再單獨(dú)寫一個(gè)constants
文件,定義好觸發(fā)的事件名稱就可以了。
舉個(gè)例子:
點(diǎn)擊一個(gè)按鈕,觸發(fā)send
事件,會(huì)更新兩個(gè)Store
分別是StoreA
和StoreB
。可以寫一個(gè)constants.js
,先定義事件名稱:
constants:
module.exports = {
"ActionTypes": {
"SEND": "SEND"
}
};
然后在兩個(gè)Store
里面分別注冊(cè)回調(diào):
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
};
});
在觸發(fā)點(diǎn)擊事件的時(shí)候,在Action
中觸發(fā)Disp
的這個(gè)事件,就會(huì)順序執(zhí)行在StoreA
和StoreB
??
??? ???? ???? ???? ??? ??? ? ????. ??
???: ??
????? ???? ? ?? Store
, ? StoreA
? StoreB
? ?????? send
???? ?????. constants.js
? ???? ?? ??? ??? ??? ? ????. ??
????:??
???
???? ?? ? ?? Store
? ?? ??? ?????. ??
??A??:??
???
??B???:??
???
???? ???? ???? Action
?? Disp
???? ???? StoreA
, ?? ????? ?????. StoreB? ??? ?? :)??
? ?? ???, ??? ?????? ?? ? ??? ?? ?????:
??? JavaScript ?????? ????? ?? ??
??? ???, ?? ??? ?? ??? ??? ???(1:1 ????? 1:N ?????) "???" ??? ?????.
??? ??? ? ??? ??? ??? ?? ????. ???? ??? ????? ???? ???? ?? ? ?? ? ???? ?????.
PS: ???? ??? ? ??? ??(?? ???? ??????, ?? ???? ?????)? ?? ???? ????? ???? ????? ?? ?? ?? ?? ?? ??? ??? ??? ????. .