ÔÚÎÒ×î½üµÄ¹¤×÷ÖУ¬×îÈÃÈË×¥¿ñµÄ¾ÍÊÇΪǰ¶Ë¿ª·¢ÈËÔ±Éè¼ÆAPI¡£ÎÒÃÇÖ®¼äµÄ¶Ô»°´óÖ¾ÍÊÇÕâÑùµÄ£º
¿ª·¢ÈËÔ±£ºÕâ¸öÒ³ÃæÉÏÓÐÊý¾ÝÔªËØx,y,z¡£¬ÄãÄܲ»ÄÜΪÎÒ´´½¨Ò»¸öAPI£¬ÏìÓ¦¸ñʽΪ{x: , y:, z:
}
ÎÒ£ººÃ°É
ÎÒÉõÖÁûÓнøÐнøÒ»²½µÄÕùÂÛ¡£ÏîÄ¿½áÊøÊ±»á»ýÀÛ´óÁ¿µÄAPI£¬ÕâЩAPIÓë¾³£·¢Éú±ä»¯µÄÒ³ÃæÊǹØÁªÔÚÒ»ÆðµÄ£¬°´ÕÕ¡°Éè¼Æ¡±£¬Ö»ÒªÒ³Ãæ¸Ä±ä£¬ÏàÓ¦µÄAPIÒ²ÒªËæÖ®±ä»¯£¬¶øÔÚ´Ë֮ǰ£¬ÎÒÃÇÉõÖÁ¶Ô´ËºÁ²»ÖªÇ飬×îÖÕ£¬ÓÉÓÚÐγÉÒòËØÖÚ¶àÇÒ¸÷ƽ̨֮¼ä´æÔÚЩÐí²îÒ죬±ØÐë´´½¨·Ç³£¶àµÄAPIÀ´Âú×ãÕâЩÐèÇó¡£Sam
NewmanÉõÖÁ½«ÕâÖÖÖÆ¶È»¯µÄ¹ý³Ì³ÆÖ®ÎªBFFģʽ£¬ÕâÖÖģʽ½¨ÒéΪÿÖÖÉ豸¡¢Æ½Ì¨µ±È»»¹°üº¬APP°æ±¾¿ª·¢Ìض¨µÄAPI¡£
Daniel JacobsonÔÚ½ÓÊÜInfoQµÄ²É·ÃÊ±ÔøÖ¸³ö£¬NetflixÆÄΪÃãÇ¿µØ½«¡°ÌåÑéʽAPI¡±Óë¡°ÁÙʱAPI£¨Ephemeral
API£©¡±»®ÉÏÁ˵Ⱥ𣠰¦¡¡
¼¸¸öÔÂǰ£¬ÎÒ¿ªÊ¼Ë¼¿¼ÊÇʲôÔì³ÉÁËÈç½ñµÄÕâÖÖÏÖÏ󣬸Ã×öЩʲôÀ´Ó¦¶ÔËü£¬Õâ¸ö¹ý³ÌʹÎÒ¿ªÊ¼ÖÊÒÉÓ¦Óüܹ¹ÖÐ×îÇ¿´óµÄÀíÄҲ¾ÍÊÇMVC£¬ÎÒ¸ÐÊܵ½Á˺¯Êýʽ·´Ó¦Ðͱà³Ì£¨reactive£©µÄÇ¿´óÍþÁ¦£¬Õâ¸ö¹ý³ÌÖÂÁ¦ÓÚÁ÷³ÌµÄ¼ò»¯£¬²¢ÊÔͼÏû³ýÎÒÃÇÕâ¸öÐÐÒµÔÚÉú²úÂÊ·½ÃæµÄÅòÕÍÇéÐ÷¡£ÎÒÏàÐÅÄã»á¶ÔÎҵķ¢ÏÖ¸ÐÐËȤµÄ¡£
ÔÚÿ¸öÓû§½çÃæ±³ºó£¬ÎÒÃǶ¼ÔÚʹÓÃMVCģʽ£¬Ò²¾ÍÊÇÄ£ÐÍ-ÊÓͼ-¿ØÖÆÆ÷£¨Model-View-Controller£©¡£MVC·¢Ã÷µÄʱºò£¬WebÉв»´æÔÚ£¬µ±Ê±µÄÈí¼þ¼Ü¹¹³äÆäÁ¿ÊÇÅÖ¿Í»§¶ËÔÚÔÊ¼ÍøÂçÖÐÖ±½ÓÓëµ¥Ò»Êý¾Ý¿â»á»°¡£µ«ÊÇ£¬¼¸Ê®ÄêÖ®ºó£¬MVCÒÀÈ»ÔÚʹÓ㬳ÖÐøµØÓÃÓÚOmniChannelÓ¦ÓõĹ¹½¨¡£
Angular 2Õýʽ°æ¼´½«·¢²¼£¬ÔÚÕâ¸öʱ¼ä½ÚµãÖØ¹ÀMVCģʽ¼°¸÷ÖÖMVC¿ò¼ÜΪӦÓüܹ¹´øÀ´µÄ¹±Ï×ÒâÒåÖØ´ó¡£
ÎÒµÚÒ»´Î½Ó´¥µ½MVCÊÇÔÚ1990Ä꣬µ±Ê±NeXT¸Õ¸Õ·¢²¼Interface Builder£¨ÈÃÈ˾ªÑȵÄÊÇ£¬Èç½ñÕâ¿îÈí¼þÒÀÈ»·¢»Ó×ÅÖØ´óµÄ×÷Óã©¡£µ±Ê±£¬ÎÒÃǸоõInterface
BuilderºÍMVCÊÇÒ»¸öºÜ´óµÄ½ø²½¡£ÔÚ90Äê´úÄ©ÆÚ£¬MVCģʽÓõ½ÁËHTTPÉϵÄÈÎÎñÖУ¨»¹¼ÇµÃStrutsÂ𣿣©£¬Èç½ñ£¬¾Í¸÷¸ö·½ÃæÀ´½²£¬MVCÊÇËùÓÐÓ¦Óüܹ¹µÄ»ù±¾ÔÔò¡£
MVCµÄÓ°ÏìÊ®·ÖÉîÔ¶£¬ÒÔÖÂÓÚReact.jsÔÚ½éÉÜËûÃǵĿò¼Üʱ¶¼Î¯ÍñµØÓëÆä»®Çå½çÏÞ£º¡°ReactʵÏÖµÄÖ»ÊÇMVCÖÐÊÓͼ£¨View£©µÄ²¿·Ö¡±¡£
µ±ÎÒÈ¥Ä꿪ʼʹÓÃReactµÄʱºò£¬ÎҸоõËüÔÚijЩµØ·½ÓÐ×ÅÃ÷ÏԵIJ»Í¬£ºÄãÔÚij¸öµØ·½ÐÞ¸ÄÒ»²¿·ÖÊý¾Ý£¬²»ÐèÒªÏÔʽµØÓëViewºÍModel½øÐн»»¥£¬Õû¸öUI¾ÍÄÜ˲¼ä·¢Éú±ä»¯£¨²»½ö½öÊÇÓòºÍ±í¸ñÖеÄÖµ£©¡£ÕâÒ²¾ÍÊÇ˵£¬ÎҺܿì¾Í¶ÔReactµÄ±à³ÌÄ£Ð͸е½ÁËʧÍû£¬ÔÚÕâ·½Ãæ£¬ÎÒÏÔÈ»²¢²»¹Â¶À¡£ÎÒ·ÖÏíÒ»ÏÂAndre
MedeirosµÄ¹Ûµã£º
×÷Ϊ·þÎñ¶ËµÄAPIÉè¼ÆÕߣ¬ÎҵĽáÂÛÊÇûÓÐÌØ±ðºÃµÄ·½Ê½½«APIµ÷ÓÃ×éÖ¯µ½Reactǰ¶ËÖУ¬ÕâǡǡÊÇÒòΪReactÖ»¹Ø×¢View£¬ÔÚËüµÄ±à³ÌÄ£ÐÍÖиù±¾²»´æÔÚ¿ØÖÆÆ÷¡£
µ½Ä¿Ç°ÎªÖ¹£¬FacebookÒ»Ö±ÖÂÁ¦ÓÚÔÚ¿ò¼Ü²ãÃæÃÖºÏÕâÒ»¿Õ°×¡£ReactÍŶӯð³õÒýÈëÁËFluxģʽ£¬²»¹ýËüÒÀÈ»ÁîÈËʧÍû£¬×î½üDan
AbramovÓÖÌᳫÁíÍâÒ»ÖÖģʽ£¬ÃûΪRedux£¬ÔÚÒ»¶¨³Ì¶ÈÉÏÀ´½²£¬ËüµÄ·½ÏòÊÇÕýÈ·µÄ£¬µ«ÊÇÔÚ½«API¹ØÁªµ½Ç°¶Ë·½Ã棬ÒÀÈ»±È²»ÉÏÎÒÏÂÃæËù½éÉܵķ½°¸¡£
Google·¢²¼¹ýGWT¡¢Android SDK»¹ÓÐAngular£¬Äã¿ÉÄÜÈÏΪËûÃǵŤ³ÌʦÊìÖªºÎΪ×îºÃµÄǰ¶Ë¼Ü¹¹£¬µ«Êǵ±ÄãÔĶÁAngular
2Éè¼Æ¿¼Á¿µÄÎÄÕÂʱ£¬±ã»á²»ÒÔΪȻ£¬¼´±ãÔÚGoogle´ó¼ÒÒ²´ï³ÉÕâÑùµÄ¹²Ê¶£¬ËûÃÇÊÇÕâÑùÆÀ¼Û֮ǰµÄ¹¤×÷³É¹ûµÄ£º
Angular 1²¢²»ÊÇ»ùÓÚ×é¼þµÄÀíÄî¹¹½¨µÄ¡£Ïà·´£¬ÎÒÃÇÐèÒª½«¿ØÖÆÆ÷ÓëÒ³ÃæÉϸ÷ÖÖ[ÔªËØ]½øÐйØÁª£¨attach£©£¬ÆäÖаüº¬ÁËÎÒÃǵÄ×Ô¶¨ÒåÂß¼¡£¸ù¾ÝÎÒÃÇ×Ô¶¨ÒåµÄÖ¸ÁîÈçºÎ¶ÔÆä½øÐзâ×°£¨ÊÇ·ñ°üº¬isolate
scope£¿£©£¬scope»á½øÐйØÁª»ò¼ÌÐøÍùÏ´«µÝ¡£ »ùÓÚ×é¼þµÄAngular 2¿´ÆðÀ´Äܼòµ¥Ò»µãÂð£¿Æäʵ²¢Ã»ÓкöàÉÙ¡£Angular
2µÄºËÐİü±¾Éí¾Í°üº¬ÁË180¸öÓïÒ壨semantics£©£¬Õû¸ö¿ò¼ÜµÄÓïÒåÒѾ½Ó½ü500¸ö£¬ÕâÊÇ»ùÓÚHTML5ºÍCSS3µÄ¡£ËÓÐÄÇô¶àʱ¼äѧϰºÍÕÆÎÕÕâÑùµÄ¿ò¼ÜÀ´¹¹½¨WebÓ¦ÓÃÄØ£¿µ±Angular
3³öÏÖµÄʱºò£¬Çé¿öÓÖ¸ÃÊÇʲôÑù×ÓÄØ£¿ ÔÚʹÓùýReact²¢Á˽âÁËAngular 2½«»áÊÇʲôÑù×ÓÖ®ºó£¬ÎҸе½ÓÐЩ¾ÚÉ¥£ºÕâЩ¿ò¼Ü¶¼ÏµÍ³ÐÔµØÇ¿ÖÆÎÒʹÓÃBFF¡°Ò³Ãæ¿ÉÌæ»»Ä£Ê½£¨Screen
Scraping£©¡±Ä£Ê½£¬°´ÕÕÕâÖÖģʽ£¬Ã¿¸ö·þÎñ¶ËµÄAPIҪƥÅäÒ³ÃæÉϵÄÊý¾Ý¼¯£¬²»¹ÜÊÇÊäÈëµÄ»¹ÊÇÊä³öµÄ¡£
´Ëʱ£¬ÎÒ¾ö¶¨¡°ÈÃÕâÒ»Çмû¹íÈ¥°É¡±¡£ÎÒ¹¹½¨ÁËÒ»¸öWebÓ¦Óã¬Ã»ÓÐʹÓÃReact¡¢Ã»ÓÐʹÓÃAngularҲûÓÐʹÓÃÈÎºÎÆäËûµÄMVC¿ò¼Ü£¬Í¨¹ýÕâÖÖ·½Ê½£¬ÎÒ¿´Ò»ÏÂÊÇ·ñÄܹ»ÕÒµ½Ò»ÖÖÔÚViewºÍµ×²ãAPIÖ®¼ä½øÐиüºÃÐ×÷µÄ·½Ê½¡£
¾ÍReactÀ´½²£¬ÎÒ×îϲ»¶µÄÒ»µãÔÚÓÚModelºÍViewÖ®¼äµÄ¹ØÁª¹ØÏµ¡£React²»ÊÇ»ùÓÚÄ£°åµÄ£¬View±¾ÉíûÓа취ÇëÇóÊý¾Ý£¨ÎÒÃÇÖ»Äܽ«Êý¾Ý´«µÝ¸øView£©£¬¿´ÆðÀ´£¬Õë¶ÔÕâÒ»µã½øÐÐ̽Ë÷ÊÇÒ»¸öºÜºÃµÄ·½Ïò¡£
Èç¹û¿´µÃ×ã¹»³¤Ô¶µÄ»°£¬Äã»á·¢ÏÖReactΨһµÄÄ¿µÄ¾ÍÊǽ«View·Ö½âΪһϵÁУ¨´¿´âµÄ£©º¯ÊýºÍJSXÓï·¨£º
<V params={M}/> Ëüʵ¼ÊÉÏÓëÏÂÃæµÄ¸ñʽ²¢Ã»ÓÐʲô²î±ð£º V
= f( M ) ÀýÈ磬ÎÒµ±Ç°ÕýÔÚ´ÓÊÂÏîÄ¿µÄWebÕ¾µã£¬ Gliiph£¬¾ÍÊÇʹÓÃÕâÖÖº¯Êý¹¹½¨µÄ£º
(µã»÷·Å´óͼÏñ)

ͼ1£ºÓÃÓÚÉú³ÉÕ¾µãSlider×é¼þHTMLµÄº¯Êý
Õâ¸öº¯ÊýÐèҪʹÓÃModelÀ´Ìî³äÊý¾Ý£º
(µã»÷·Å´óͼÏñ)

ͼ2£ºÖ§³ÅsliderµÄModel
Èç¹ûÓüòµ¥µÄJavaScriptº¯Êý¾ÍÄÜÍê³ÉÈÎÎñ£¬ÎÒÃÇΪʲô»¹ÒªÓÃReactÄØ£¿
ÐéÄâDOM£¨virtual-dom£©£¿Èç¹ûÄã¾õµÃÐèÒªÕâÑùÒ»ÖÖ·½°¸µÄ»°£¨ÎÒ²¢²»È·¶¨ÓкܶàµÄÈËÐèÒªÕâÑù£©£¬ÆäʵÓÐÕâÑùµÄ¿ÉÑ¡·½°¸£¬ÎÒÒ²ÆÚÍû¿ª·¢³ö¸ü¶àµÄ·½°¸¡£
GraphQL£¿²¢²»ÍêÈ«Èç´Ë¡£²»ÒªÒòΪFacebook´óÁ¿Ê¹ÓÃËü¾Í¶ÔÆä²úÉúÎó½â£¬ÈÏΪËüÒ»¶¨ÊǶÔÄãÓкô¦µÄ¡£GraphQL½ö½öÊÇÒÔÉùÃ÷µÄ·½Ê½À´´´½¨ÊÓͼģÐÍ¡£Ç¿ÖÆÒªÇóModelÆ¥ÅäView»á¸øÄã´øÀ´Âé·³£¬¶ø²»Êǽâ¾ö·½°¸¡£ReactÍŶӿÉÄÜ»á¾õµÃʹÓá°¿Í»§¶ËÖ¸¶¨²éѯ£¨Client-specified
queries£©¡±ÊÇûÓÐÎÊÌâµÄ£¨¾ÍÏñ·´Ó¦ÐÍÍŶÓÖÐÄÇÑù£©£º
GraphQLÍêÈ«ÊÇÓÉViewÒÔ¼°±àдËüÃǵÄǰ¶Ë¹¤³ÌʦµÄÐèÇóËùÇý¶¯µÄ¡£[¡]ÁíÒ»·½Ã棬GraphQL²éѯ»á¾«È··µ»Ø¿Í»§¶ËÇëÇóµÄÄÚÈÝ£¬³ý´ËÖ®Í⣬Ҳ¾ÍûʲôÁË¡£
GraphQLÍŶÓûÓйØ×¢µ½JSXÓï·¨±³ºóµÄºËÐÄ˼Ï룺Óú¯Êý½«ModelÓëView·ÖÀë¡£ÓëÄ£°åºÍ¡°Ç°¶Ë¹¤³ÌʦËù±àдµÄ²éѯ¡±²»Í¬£¬º¯Êý²»ÐèÒªModelÀ´ÊÊÅäView¡£
µ±ViewÊÇÓɺ¯Êý´´½¨µÄʱºò£¨¶ø²»ÊÇÓÉÄ£°å»ò²éѯËù´´½¨£©£¬ÎÒÃǾͿÉÒÔ°´Ðèת»»Model£¬Ê¹Æä°´ÕÕ×îºÏÊʵÄÐÎʽÀ´Õ¹ÏÖView£¬²»±ØÔÚModelµÄÐÎʽÉÏÌí¼ÓÈËΪµÄÏÞÖÆ¡£
ÀýÈ磬Èç¹ûViewÒªÕ¹ÏÖÒ»¸öÖµv£¬ÓÐÒ»¸öͼÐλ¯µÄָʾÆ÷»á±êÃ÷Õâ¸öÖµÊÇÓÅÐã¡¢Á¼ºÃ»¹ÊǺܲÎÒÃÇûÓÐÀíÓɽ«Ö¸Ê¾Æ÷µÄÖµ·Åµ½ModelÖУºº¯ÊýÓ¦¸Ã¸ù¾ÝModelËùÌṩµÄvÖµ£¬À´½øÐмòµ¥µÄ¼ÆË㣬´Ó¶øÈ·¶¨Ö¸Ê¾Æ÷µÄÖµ¡£
ÏÖÔÚ£¬°ÑÕâЩ¼ÆËãÖ±½ÓǶÈëµ½ViewÖв¢²»ÊÇʲôºÃÖ÷Ò⣬ʹView-Model³ÉΪһ¸ö´¿º¯ÊýÒ²²¢·ÇÄÑÊ£¬Òò´Ëµ±ÎÒÃÇÐèÒªÃ÷È·µÄView-Modelʱ£¬¾ÍûÓÐÌØÊâµÄÀíÓÉÔÙʹÓÃGraphQLÁË£º
V = f( vm(M) )
×÷ΪÉîÚÏMDEÖ®µÀµÄÈË£¬ÎÒÏàÐÅÄã¸üÉÆÓÚ±àд´úÂ룬¶ø²»ÊÇÔªÊý¾Ý£¬²»¹ÜËüÊÇÄ£°å»¹ÊÇÏñGraphQLÕâÑùµÄ¸´ÔÓ²éѯÓïÑÔ¡£
Õâ¸öº¯ÊýʽµÄ·½Ê½Äܹ»´øÀ´¶àÏîºÃ´¦¡£Ê×ÏÈ£¬ÓëReactÀàËÆ£¬ËüÔÊÐíÎÒÃǽ«View·Ö½âΪ×é¼þ¡£ËüÃÇ´´½¨µÄ½ÏΪ×ÔÈ»µÄ½çÃæÔÊÐíÎÒÃÇΪWebÓ¦ÓûòWebÕ¾µãÉèÖá°Ö÷Ì⡱£¬»òÕßʹÓò»Í¬µÄ¼¼ÊõÀ´äÖȾView£¨ÈçÔÉúµÄ·½Ê½£©¡£º¯ÊýʵÏÖ»¹ÓпÉÄÜÔöÇ¿ÎÒÃÇʵÏÖ·´Ó¦ÐÍÉè¼ÆµÄ·½Ê½¡£
ÔÚ½ÓÏÂÀ´µÄ¼¸¸öÔÂÖУ¬¿ÉÄÜ»á³öÏÖ¿ª·¢Õß½»¸¶ÓÃJavaScriptº¯Êý°ü×°µÄ»ùÓÚ×é¼þµÄHTML5Ö÷ÌâµÄÇé¿ö¡£ÕâÒ²ÊÇ×î½üÕâ¶Îʱ¼ä£¬ÔÚÎÒµÄWebÕ¾µãÏîÄ¿ÖУ¬ÎÒËù²ÉÓõķ½Ê½£¬ÎÒ»áµÃµ½Ò»¸öÄ£°å£¬È»ºóѸËٵؽ«Æä·âװΪJavaScriptº¯Êý¡£ÎÒ²»ÔÙʹÓÃWordPress¡£»ù±¾ÉÏ»¨Í¬µÈµÄ¹¤·ò£¨ÉõÖÁ¸üÉÙ£©£¬ÎÒ¾ÍÄÜʵÏÖHTML5ºÍCSSµÄ×î¼ÑЧ¹û¡£
ÕâÖÖ·½Ê½Ò²ÐèÒªÔÚÉè¼ÆÊ¦ºÍ¿ª·¢ÈËÔ±Ö®¼ä½¨Á¢Ò»ÖÖÐÂÐ͵ĹØÏµ¡£ÈκÎÈ˶¼¿ÉÒÔ±àдÕâЩJavaScriptº¯Êý£¬ÓÈÆäÊÇÄ£°åµÄÉè¼ÆÈËÔ±¡£ÈËÃDz»ÐèҪѧϰ°ó¶¨·½·¨¡¢JSXºÍAngularÄ£°åµÄÓï·¨£¬Ö»ÕÆÎÕ¼òµ¥µÄJavaScriptºËÐĺ¯Êý¾Í×ãÒÔÈÃÕâÒ»ÇÐÔËתÆðÀ´¡£
ÓÐÒâ˼µÄÊÇ£¬´Ó·´Ó¦ÐÍÁ÷³ÌµÄ½Ç¶ÈÀ´Ëµ£¬ÕâЩº¯Êý¿ÉÒÔ²¿ÊðÔÚ×îºÏÊʵĵط½£ºÔÚ·þÎñ¶Ë»òÔÚ¿Í»§¶Ë¾ù¿É¡£
µ«×îÎªÖØÒªµÄÊÇ£¬ÕâÖÖ·½Ê½ÔÊÐíÔÚViewÓëModelÖ®¼ä½¨Á¢×îСµÄÆõÔ¼¹ØÏµ£¬ÈÃModelÀ´¾ö¶¨ÈçºÎÒÔ×îºÃµÄ·½Ê½½«ÆäÊý¾Ý´«µÝ¸øView¡£ÈÃModelÈ¥´¦ÀíÖîÈ绺´æ¡¢ÀÁ¼ÓÔØ¡¢±àÅäÒÔ¼°Ò»ÖÂÐÔµÄÎÊÌâ¡£ÓëÄ£°åºÍGraphQL²»Í¬£¬ÕâÖÖ·½Ê½²»ÐèÒª´ÓViewµÄ½Ç¶ÈÀ´Ö±½Ó·¢ËÍÇëÇó¡£
¼ÈÈ»ÎÒÃÇÓÐÁËÒ»ÖÖ·½Ê½½«ModelÓëView½øÐнâñÄÇôÏÂÒ»¸öÎÊÌâ¾ÍÊÇ£ºÔÚÕâÀï¸ÃÈçºÎ´´½¨ÍêÕûµÄÓ¦ÓÃÄ£ÐÍÄØ£¿¡°¿ØÖÆÆ÷¡±¸ÃÊÇʲôÑù×ӵģ¿ÎªÁ˻شðÕâ¸öÎÊÌ⣬ÈÃÎÒÃÇÖØÐ»ص½MVCÉÏÀ´¡£
Æ»¹û¹«Ë¾Á˽âMVCµÄ»ù±¾Çé¿ö£¬ÒòΪËûÃÇÔÚÉÏÊÀ¼Í80Äê´ú³õ£¬´ÓXerox PARC¡°ÍµÀ´ÁË¡±Õâһģʽ£¬´ÓÄÇʱÆð£¬ËûÃǾͼᶨµØÊµÏÖÕâһģʽ£º

ͼ3£ºMVCģʽ
Andre MedeirosÔø¾ÇåÎúµØÖ¸³ö£¬ÕâÀïºËÐĵÄȱµãÔÚÓÚ£¬ MVCģʽÊÇ¡°½»»¥Ê½µÄ£¨interactive£©¡±£¨ÕâÓë·´Ó¦ÐͽØÈ»²»Í¬£©¡£ÔÚ´«Í³µÄMVCÖ®ÖУ¬Action£¨Controller£©½«»áµ÷ÓÃModelÉϵĸüз½·¨£¬Ôڳɹ¦£¨»ò³ö´í£©Ö®Ê±»áÈ·¶¨ÈçºÎ¸üÐÂView¡£ËûÖ¸³ö£¬Æäʵ²¢·Ç±ØÐëÈç´Ë£¬ÕâÀﻹÓÐÁíÍâÒ»ÖÖÓÐЧµÄ¡¢·´Ó¦Ð͵Ĵ¦Àí·½Ê½£¬ÎÒÃÇÖ»ÐèÕâÑù¿¼ÂÇ£¬ActionÖ»Ó¦¸Ã½«Öµ´«µÝ¸øModel£¬²»¹ÜÊä³öÊÇʲô£¬Ò²²»±ØÈ·¶¨Model¸ÃÈçºÎ½øÐиüС£
ÄǺËÐÄÎÊÌâ¾Í±ä³ÉÁË£º¸ÃÈçºÎ½«Action¼¯³Éµ½·´Ó¦ÐÍÁ÷³ÌÖÐÄØ£¿Èç¹ûÄãÏëÀí½âActionµÄ»ù´¡ÖªÊ¶µÄ»°£¬ÄÇôÄãÓ¦¸Ã¿´Ò»ÏÂTLA+¡£TLA´ú±íµÄÊÇ¡°ActionÖеÄÂ߼ʱÐò£¨Temporal
Logic of Actions£©¡±£¬ÕâÊÇÓÉDr. LamportËùÌá³öµÄѧ˵£¬ËûÒ²Òò´Ë»ñµÃÁËͼÁé½±¡£ÔÚTLA+ÖУ¬ActionÊÇ´¿º¯Êý£º
data¡¯ = A (data)
ÎÒÕæµÄ·Ç³£Ï²»¶TLA+Õâ¸öºÜ°ôµÄÀíÄÒòΪËüÇ¿ÖÆº¯Êýֻת»»¸ø¶¨µÄÊý¾Ý¼¯¡£
°´ÕÕÕâÖÖÐÎʽ£¬·´Ó¦ÐÍMVC¿´ÆðÀ´¿ÉÄܾͻáÈçÏÂËùʾ£º
V = f( M.present( A(data) ) )
Õâ¸ö±í´ïʽ¹æ¶¨µ±Action´¥·¢µÄʱºò£¬Ëü»á¸ù¾ÝÒ»×éÊäÈ루ÀýÈçÓû§ÊäÈ룩¼ÆËãÒ»¸öÊý¾Ý¼¯£¬Õâ¸öÊý¾ÝÊÇÌá½»µ½ModelÖеģ¬È»ºó»áÈ·¶¨ÊÇ·ñÐèÒªÒÔ¼°ÈçºÎ¶ÔÆä×ÔÉí½øÐиüС£µ±¸üÐÂÍê³Éºó£¬View»á¸ù¾ÝеÄModel״̬½øÐиüС£·´Ó¦Ð͵Ļ·¾Í±ÕºÏÁË¡£Model³Ö¾Ã»¯ºÍ»ñÈ¡ÆäÊý¾ÝµÄ·½Ê½ÊÇÓë·´Ó¦ÐÍÁ÷³ÌÎ޹صģ¬ËùÒÔ£¬ËüÀíËùÓ¦µ±µØ¡°²»Ó¦¸ÃÓÉǰ¶Ë¹¤³ÌʦÀ´±àд¡±¡£²»±ØÒò´Ë¶ø¸Ðµ½Ç¸Òâ¡£
ÔÙ´ÎÇ¿µ÷£¬ActionÊÇ´¿º¯Êý£¬Ã»ÓÐ״̬ºÍÆäËûµÄ¸±×÷Óã¨ÀýÈ磬¶ÔÓÚModel£¬²»»á°üº¬¼ÆÊýµÄÈÕÖ¾£©¡£
·´Ó¦ÐÍMVCģʽºÜÓÐÒâ˼£¬ÒòΪ³ýÁËModelÒÔÍ⣬ËùÓеÄÊÂÇé¶¼ÊÇ´¿º¯Êý¡£¹«Æ½À´½²£¬ReduxʵÏÖÁËÕâÖÖÌØÊâµÄģʽ£¬µ«ÊÇ´øÓÐReact²»±ØÒªµÄÐÎʽ£¬²¢ÇÒÔÚreducerÖУ¬ModelºÍActionÖ®¼ä´æÔÚÒ»µã²»±ØÒªµÄñîºÏ¡£ActionºÍ½Ó¿ÚÖ®¼äÊÇ´¿´âµÄÏûÏ¢´«µÝ¡£
ÕâÒ²¾ÍÊÇ˵£¬·´Ó¦ÐÍMVC²¢²»ÍêÕû£¬°´ÕÕDanϲ»¶µÄ˵·¨£¬Ëü²¢Ã»ÓÐÀ©Õ¹µ½ÏÖʵµÄÓ¦ÓÃÖ®ÖС£ÈÃÎÒÃÇͨ¹ýÒ»¸ö¼òµ¥µÄÑùÀýÀ´²ûÊöÕâÊÇΪʲô¡£
¼ÙÉèÎÒÃÇÐèҪʵÏÖÒ»¸öÓ¦ÓÃÀ´¿ØÖÆ»ð¼ýµÄ·¢É䣺һµ©ÎÒÃÇ¿ªÊ¼µ¹¼ÆÊ±£¬ÏµÍ³½«»áµÝ¼õ¼ÆÊýÆ÷£¨counter£©£¬µ±Ëüµ½´ïÁãµÄʱºò£¬»á½«ModelÖÐËùÓÐ䶨µÄ״̬ÉèÖÃΪ¹æ¶¨Öµ£¬»ð¼ýµÄ·¢É佫»á½øÐгõʼ»¯¡£

Õâ¸öÓ¦ÓÃÓÐÒ»¸ö¼òµ¥µÄ״̬»ú£º

ͼ4£º»ð¼ý·¢ÉäµÄ״̬»ú
ÆäÖÐdecrementºÍlaunch¶¼ÊÇ¡°×Ô¶¯¡±µÄAction£¬ÕâÒâζ×ÅÎÒÃÇÿ´Î½øÈ루»òÖØÐ½øÈ룩counting״̬ʱ£¬½«»á±£Ö¤½øÐÐת»»µÄÆÀ¹À£¬Èç¹û¼ÆÊýÆ÷µÄÖµ´óÓÚÁãµÄ»°£¬decrement
Action½«»á¼ÌÐøµ÷Óã¬Èç¹ûֵΪÁãµÄ»°£¬½«»áµ÷ÓÃlaunchAction¡£ÔÚÈκεÄʱ¼äµã¶¼¿ÉÒÔ´¥·¢abort
Action£¬ÕâÑùµÄ»°£¬¿ØÖÆÏµÍ³½«»áת»»µ½aborted״̬¡£
ÔÚMVCÖУ¬ÕâÖÖÀàÐ͵ÄÂß¼½«»áÔÚ¿ØÖÆÆ÷ÖÐʵÏÖ£¬²¢ÇÒ¿ÉÄÜ»áÓÉViewÖеÄÒ»¸ö¼ÆÊ±Æ÷À´´¥·¢¡£
ÕâÒ»¶ÎÖÁ¹ØÖØÒª£¬ËùÒÔÇë×ÐϸÔĶÁ¡£ÎÒÃÇÒѾ¿´µ½£¬ÔÚTLA+ÖУ¬ActionûÓи±×÷Óã¬Ö»ÊǼÆËã½á¹ûµÄ״̬£¬Model´¦ÀíActionµÄÊä³ö²¢¶ÔÆä×ÔÉí½øÐиüС£ÕâÊÇÓ봫ͳ״̬»úÓïÒåµÄ»ù±¾Çø±ð£¬ÔÚ´«Í³µÄ״̬»úÖУ¬Action»áÖ¸¶¨½á¹û״̬£¬Ò²¾ÍÊÇ˵£¬½á¹û״̬ÊǶÀÁ¢ÓÚModelµÄ¡£ÔÚTLA+ÖУ¬ËùÆôÓõÄActionÄܹ»ÔÚ״̬±íÊö£¨Ò²¾ÍÊÇView£©ÖнøÐд¥·¢£¬ÕâЩAction²»»áÖ±½ÓÓë´¥·¢×´Ì¬×ª»»µÄÐÐΪ½øÐйØÁª¡£»»¾ä»°Ëµ£¬×´Ì¬»ú²»Ó¦¸ÃÓÉÁ¬½ÓÁ½¸ö״̬µÄÔª×飨S1,
A, S2£©À´½øÐÐÖ¸¶¨£¬´«Í³µÄ״̬»úÊÇÕâÑù×öµÄ£¬ËüÃÇÔª×éµÄÐÎʽӦ¸ÃÊÇ£¨Sk, Ak1, Ak2,¡£©£¬ÕâÖ¸¶¨ÁËËùÓÐÆôÓõÄAction£¬²¢¸ø¶¨ÁËÒ»¸ö״̬Sk£¬ActionÓ¦ÓÃÓÚϵͳ֮ºó£¬½«»á¼ÆËã³ö½á¹û״̬£¬Model½«»á´¦Àí¸üС£
µ±ÎÒÃÇÒýÈë¡°state¡±¶ÔÏóʱ£¬TLA+ÌṩÁËÒ»ÖÖ¸üÓÅÐãµÄ·½Ê½À´¶Ôϵͳ½øÐиÅÄ£¬Ëü½«ActionºÍview£¨½ö½öÊÇÒ»ÖÖ״̬µÄ±íÊö£©½øÐÐÁË·ÖÀë¡£
ÎÒÃÇÑùÀýÖеÄModelÈçÏÂËùʾ£º
model = {
counter: ,
started: ,
aborted: ,
launched:
}
ϵͳÖÐËĸö£¨¿ØÖÆ£©×´Ì¬·Ö±ð¶ÔÓ¦ÓÚModelÖÐÈçϵÄÖµ£º
ready = {counter: 10, started: false, aborted: false,
launched: false }
counting = {counter: [0..10], started: true, aborted:
false, launched: false }
launched = {counter: 0, started: true, aborted: false,
launched: true}
aborted = {counter: [0..10], started: true, aborted:
true, launched: false}
Õâ¸öModelÊÇÓÉϵͳµÄËùÓÐÊôÐÔ¼°Æä¿ÉÄܵÄÖµËùÖ¸¶¨µÄ£¬×´Ì¬ÔòÖ¸¶¨ÁËËùÆôÓõÄAction£¬Ëü»á¸ø¶¨Ò»×éÖµ¡£ÕâÖÖÀàÐ͵ÄÒµÎñÂß¼±ØÐëÒªÔÚij¸öµØ·½½øÐÐʵÏÖ¡£ÎÒÃDz»ÄÜÖ¸ÍûÓû§Äܹ»ÖªµÀÄĸöActionÊÇ·ñ¿ÉÐС£ÔÚÕâ·½Ãæ£¬Ã»ÓÐÆäËûµÄ·½Ê½¡£²»¹ý£¬ÕâÖÖÀàÐ͵ÄÒµÎñÂß¼ºÜÄѱàд¡¢µ÷ÊÔºÍά»¤£¬ÔÚûÓÐÓïÒå¶ÔÆä½øÐÐÃèÊöʱ£¬¸üÊÇÈç´Ë£¬±ÈÈçÔÚMVCÖоÍÊÇÕâÑù¡£
ÈÃÎÒÃÇΪ»ð¼ý·¢ÉäµÄÑùÀý±àдһЩ´úÂë¡£´ÓTLA+½Ç¶ÈÀ´½²£¬next-action¶ÏÑÔÔÚÂß¼ÉÏ»á¸úÔÚ״̬äÖȾ֮ºó¡£µ±Ç°×´Ì¬³ÊÏÖÖ®ºó£¬ÏÂÒ»²½¾ÍÊÇÖ´ÐÐnext-action¶ÏÑÔ£¬Èç¹û´æÔڵϰ£¬½«»á¼ÆËã²¢Ö´ÐÐÏÂÒ»¸öAction£¬Õâ¸öAction»á½«ÆäÊý¾Ý½»¸øModel£¬Model½«»á³õʼ»¯ÐÂ״̬µÄ±íÊö£¬ÒÔ´ËÀàÍÆ¡£
(µã»÷·Å´óͼÏñ)

ͼ5£º»ð¼ý·¢ÉäÆ÷µÄʵÏÖ
ÐèҪעÒâµÄÊÇ£¬ÔÚ¿Í»§¶Ë/·þÎñÆ÷¼Ü¹¹Ï£¬µ±×Ô¶¯Action´¥·¢Ö®ºó£¬ÎÒÃÇ¿ÉÄÜÐèҪʹÓÃÏñWebSocketÕâÑùµÄÐÒ飨»òÕßÔÚWebSocket²»¿ÉÓõÄʱºò£¬Ê¹ÓÃÂÖѯ»úÖÆ£©À´ÕýÈ·µØäÖȾ״̬±íÊö¡£
ÎÒÔø¾Ê¹ÓÃJavaºÍJavaScript±àд¹ýÒ»¸öºÜÇáÁ¿¼¶µÄ¿ªÔ´¿â£¬ËüʹÓÃTLA+ÌØÓеÄÓïÒåÀ´¹¹Ôì״̬¶ÔÏ󣬲¢ÌṩÁËÑùÀý£¬ÕâЩÑùÀýʹÓÃWebSocket¡¢ÂÖѯºÍ¶ÓÁÐʵÏÖä¯ÀÀÆ÷/·þÎñÆ÷½»»¥¡£ÔÚ»ð¼ý·¢ÉäÆ÷µÄÑùÀýÖпÉÒÔ¿´µ½£¬ÎÒÃDz¢·Ç±ØÐëҪʹÓÃÄǸö¿â¡£Ò»µ©Àí½âÁËÈçºÎ±àд£¬×´Ì¬ÊµÏֵıàÂëÏà¶ÔÀ´½²ÊǺÜÈÝÒ׵ġ£
¶ÔÓÚÒªÒýÈëµÄÐÂģʽÀ´Ëµ£¬ÎÒÏàÐÅÎÒÃÇÒѾ¾ß±¸ÁËËùÓеÄÔªËØ£¬Õâ¸öÐÂģʽ×÷ΪMVCµÄÌæ´úÕߣ¬ÃûΪSAMģʽ£¨×´Ì¬-ÐÐΪ-Ä£ÐÍ£¬State-Action-Model£©£¬Ëü¾ßÓз´Ó¦Ðͺͺ¯ÊýʽµÄÌØÐÔ£¬Áé¸ÐÀ´Ô´ÓÚReact.jsºÍTLA+¡£
SAMģʽ¿ÉÒÔͨ¹ýÈçϵıí´ïʽÀ´½øÐÐÃèÊö£º
V = S( vm( M.present( A(data) ) ), nap(M))
Ëü±íÃ÷ÔÚÓ¦ÓÃÒ»¸öAction AÖ®ºó£¬View V¿ÉÒÔ¼ÆËãµÃ³ö£¬Action»á×÷ΪModelµÄ´¿º¯Êý¡£
ÔÚSAMÖУ¬A£¨Action£©¡¢vm£¨ÊÓͼ-Ä£ÐÍ£¬view-model£©¡¢nap£¨next-action¶ÏÑÔ£©ÒÔ¼°S£¨×´Ì¬±íÊö£©±ØÐë¶¼ÊÇ´¿º¯Êý¡£ÔÚSAMÖУ¬ÎÒÃÇͨ³£Ëù˵µÄ¡°×´Ì¬¡±£¨ÏµÍ³ÖÐÊôÐÔµÄÖµ£©ÒªÍêÈ«¾ÖÏÞÓÚModelÖ®ÖУ¬¸Ä±äÕâЩֵµÄÂß¼ÔÚModel±¾ÉíÖ®ÍâÊDz»¿É¼ûµÄ¡£
Ëæ±ãÌáһϣ¬next-action¶ÏÑÔ£¬¼´nap()ÊÇÒ»¸ö»Øµ÷£¬Ëü»áÔÚ״̬±íÊö´´½¨Íê³É£¬²¢äÖȾ¸øÓû§Ê±µ÷Óá£

ͼ6£º×´Ì¬-ÐÐΪ-Ä£ÐÍ£¨SAM£©Ä£Ê½
ģʽ±¾ÉíÊǶÀÁ¢ÓÚÈκÎÐÒéµÄ£¨¿ÉÒÔ²»·ÑʲôÁ¦Æø¾ÍÄÜÔÚHTTPÉÏʵÏÖ£©ºÍ¿Í»§¶Ë/·þÎñÆ÷ÍØÆË½á¹¹µÄ¡£
SAM²¢²»Òâζ×ÅÎÒÃDZØÐëҪʹÓÃ״̬»úµÄÓïÒåÀ´»ñÈ¡ViewµÄÄÚÈÝ¡£Èç¹ûActionÊÇÓÉView´¥·¢µÄ£¬ÄÇnext-action¶ÏÑÔ¾ÍÊÇÒ»¸ö¿Õº¯Êý¡£²»¹ý£¬Õâ¿ÉÄÜÊÇÒ»¸öºÜºÃµÄʵ¼ù£¬ËüÇåÎú±©Â¶Á˵ײã״̬»úµÄ¿ØÖÆ×´Ì¬£¬ÒòΪ¸ù¾Ý£¨¿ØÖÆ£©×´Ì¬µÄ²»Í¬£¬View¿´ÆðÀ´¿ÉÄÜÒ²ÊDz»Í¬µÄ¡£
ÁíÒ»·½Ã棬Èç¹ûÄãµÄ״̬»úÉæ¼°µ½×Ô¶¯»¯µÄAction£¬ÄÇôActionºÍModel¶¼²»¿ÉÄÜ×öµ½´¿´âµÄ²»°üº¬next-action¶ÏÑÔ£ºÓÐЩAction½«»á±äµÃÓÐ״̬£¬»òÕßModel±ØÐëÒª´¥·¢Action£¬¶øÕâ±¾À´²¢²»ÊÇËüµÄ½ÇÉ«¡£Ë³±ãÌáһϣ¬Ò²Ðí²¢²»ÄÇôֱ¹Û£¬×´Ì¬¶ÔÏó²¢Ã»ÓгÖÓÐÈκεġ°×´Ì¬¡±£¬ËüͬÑùÒ²ÊÇ´¿º¯Êý£¬Ëü»áäÖȾView²¢¼ÆËãnext-action¶ÏÑÔ£¬ÕâÁ½Õß¶¼À´Ô´ÓÚModelµÄÊôÐÔÖµ¡£
ÕâÖÖÐÂģʽµÄºÃ´¦ÔÚÓÚ£¬ËüÇåÎúµØ½«CRUD²Ù×÷´ÓActionÖзÖÀëÁ˳öÀ´¡£Model¸ºÔðËüµÄ³Ö¾Ã»¯£¬½«»áͨ¹ýCRUD²Ù×÷À´ÊµÏÖ£¬Í¨¹ýViewÊÇÎÞ·¨½øÐзÃÎʵġ£ÓÈÆäÊÇ£¬ViewÓÀÔ¶²»»á´¦ÓÚ¡°»ñÈ¡¡±Êý¾ÝµÄλÖã¬ViewËùÄÜ×öµÄΨһµÄÊÂÇé¾ÍÊÇÇëÇóϵͳÖе±Ç°µÄ״̬±íÊö²¢Í¨¹ý´¥·¢Action³õʼ»¯Ò»¸ö·´Ó¦ÐÍÁ÷³Ì¡£
Action½ö½ö´ú±íÁËÒ»ÖÖ¾ßÓÐȨÏÞµÄͨµÀ£¬ÒÔ´ËÀ´½¨ÒéModel¸ÃÔõÑù½øÐбä¸ü¡£ËüÃDZ¾Éí£¨ÔÚModel·½Ã棩²¢Ã»ÓÐʲô¸±×÷Óá£Èç¹û±ØÒªµÄ»°£¬Action»áµ÷ÓõÚÈý·½µÄAPI£¨Í¬Ñù£¬¶ÔModelûÓи±×÷Óã©£¬±ÈÈç˵£¬Ð޸ĵØÖ·µÄAction¿ÉÄÜ»áÏ£Íûµ÷ÓõØÖ·Ð£Ñé·þÎñ£¬²¢½«·þÎñ·µ»ØµÄµØÖ·Ìá½»µ½ModelÖС£
ÈçϾÍÊÇ¡°Ð޸ĵØÖ·¡±Action¸ÃÈçºÎ½øÐÐʵÏÖ£¬Ëü»áµ÷ÓõØÖ·Ð£ÑéµÄAPI£º
(µã»÷·Å´óͼÏñ)

ͼ7£º¡°Ð޸ĵØÖ·¡±µÄʵÏÖ
ģʽÖеÄÔªËØ£¬°üÀ¨ActionºÍModel£¬¿ÉÒÔ½øÐÐ×ÔÓɵØ×éºÏ£º
º¯Êý×éºÏ
data¡¯ = A(B(data))
¶Ë×éºÏ£¨Peer£©£¨ÏàͬµÄÊý¾Ý¼¯¿ÉÒÔÌá½»¸øÁ½¸öModel£©
M1.present(data¡¯)
M2.present(data¡¯)
¸¸×Ó×éºÏ£¨¸¸Model¿ØÖƵÄÊý¾Ý¼¯Ìá½»¸ø×ÓModel£©
M1.present(data¡¯,M2)
function present(data, child) {
// Ö´ÐиüÐÂ
¡
// ͬ²½Model
child.present(c(data))
}
·¢²¼/¶©ÔÄ×éºÏ
M1.on(¡°topic¡±, present )
M2.on(¡°topic¡±, present )
»ò
M1.on(¡°data¡±, present )
M2.on(¡°data¡±, present )
ÓÐЩ¼Ü¹¹Ê¦¿ÉÄܻῼÂǵ½System of RecordºÍSystems of Engagement£¬ÕâÖÖģʽÓÐÖúÓÚÃ÷È·ÕâÁ½²ãµÄ½Ó¿Ú£¨Í¼8£©£¬Model»á¸ºÔðÓësystems
of recordµÄ½»»¥¡£

ͼ8£ºSAM×éºÏÄ£ÐÍ
Õû¸öģʽ±¾ÉíÒ²ÊÇ¿ÉÒÔ½øÐÐ×éºÏµÄ£¬ÎÒÃÇ¿ÉÒÔʵÏÖÔËÐÐÔÚä¯ÀÀÆ÷ÖеÄSAMʵÀý£¬Ê¹ÆäÖ§³ÖÀàËÆÓÚÏòµ¼£¨wizard£©µÄÐÐΪ£¨ÈçToDoÓ¦Óã©£¬Ëü»áÓë·þÎñÆ÷¶ËµÄSAM½øÐн»»¥£º

ͼ9£ºSAMʵÀý×éºÏ
Çë×¢Ò⣬Àï²ãµÄSAMʵÀýÊÇ×÷Ϊ״̬±íÊöµÄÒ»²¿·Ö½øÐд«Ë͵ģ¬Õâ¸ö״̬±íÊöÊÇÓÉÍâ²ãµÄʵÀýËùÉú³ÉµÄ¡£
»á»°¼ì²éÓ¦¸ÃÔÚAction´¥·¢Ö®Ç°½øÐУ¨Í¼10£©¡£SAMÄܹ»ÆôÓÃÒ»ÏîºÜÓÐÒâ˼µÄ×éºÏ£¬ÔÚ½«Êý¾ÝÌá½»¸øModel֮ǰ£¬View¿ÉÒÔµ÷ÓÃÒ»¸öµÚÈý·½µÄAction£¬²¢ÇÒҪΪÆäÌṩһ¸ötokenºÍÖ¸ÏòϵͳActionµÄ»Øµ÷£¬Õâ¸öµÚÈý·½Action»á½øÐÐÊÚȨ²¢Ð£Ñé¸Ãµ÷ÓõĺϷ¨ÐÔ¡£

ͼ10£º½èÖúSAMʵÏֻỰ¹ÜÀí
´ÓCQRSµÄ½Ç¶ÈÀ´½²£¬Õâ¸öģʽûÓжԲéѯ£¨Query£©ºÍÃüÁCommand£©×öÌØÊâµÄÇø·Ö£¬µ«ÊǵײãµÄʵÏÖÐèÒª½øÐÐÕâÖÖÇø·Ö¡£ËÑË÷»ò²éѯ¡°Action¡±Ö»ÊǼòµ¥µØ´«µÝÒ»×é²ÎÊýµ½ModelÖС£ÎÒÃÇ¿ÉÒÔ²ÉÓÃijÖÖÔ¼¶¨£¨ÈçÏ»®Ïßǰ׺£©À´Çø·Ö²éѯºÍÃüÁ»òÕßÎÒÃÇ¿ÉÒÔÔÚModelÉÏʹÓÃÁ½¸ö²»Í¬µÄpresent·½·¨£º
{ _name : ¡®/^[a]$/i¡¯ } // Ãû×ÖÒÔA»òa¿ªÍ· |
{ _customerId: ¡®123¡¯ } // id=123µÄcustomer |
{ _name : ¡®/^[a]$/i¡¯ } // Ãû×ÖÒÔA»òa¿ªÍ· { _customerId: ¡®123¡¯
} // id=123µÄcustomerModel½«»áÖ´ÐбØÒªµÄ²Ù×÷ÒÔÆ¥Åä²éѯ£¬¸üÐÂÆäÄÚÈݲ¢´¥·¢ViewµÄäÖȾ¡£ÀàËÆµÄÔ¼¶¨¿ÉÒÔÓÃÓÚ´´½¨¡¢¸üлòɾ³ýModelÖеÄÔªËØ¡£ÔÚ½«ActionµÄÊä³ö´«µÝ¸øModel·½Ã棬ÎÒÃÇ¿ÉÒÔʵÏÖ¶àÖÖ·½Ê½£¨Êý¾Ý¼¯¡¢Ê¼þ¡¢Action¡¡£©¡£Ã¿ÖÖ·½Ê½¶¼»áÓÐÆäÓÅÊÆºÍ²»×㣬×îÖÕÕâÈ¡¾öÓÚ¸öÈËÆ«ºÃ¡£ÎÒ¸üϲ»¶Êý¾Ý¼¯µÄ·½Ê½¡£
ÔÚÒì³£·½Ã棬ÓëReactÀàËÆ£¬ÎÒÃÇÔ¤ÆÚModel»áÒÔÊôÐÔÖµµÄÐÎʽ±£´æÒì³£ÐÅÏ¢£¨ÕâЩÊôÐÔÖµ¿ÉÄÜÊÇÓÉActionÌá½»µÄ£¬Ò²¿ÉÄÜÊÇCRUD²Ù×÷·µ»ØµÄ£©¡£ÔÚäÖȾ״̬±íÊöµÄʱºò£¬»áÓõ½ÊôÐÔÖµ£¬ÒÔÕ¹ÏÖÒì³£ÐÅÏ¢¡£
ÔÚ»º´æ·½Ã棬SAMÔÚ״̬±íÊö²ãÌṩÁË»º´æµÄÑ¡Ïî¡£Ö±¹ÛÉÏÀ´¿´£¬»º´æÕâЩ״̬±íÊöº¯ÊýµÄ½á¹ûÄܹ»ÊµÏÖ¸ü¸ßµÄÃüÖÐÂÊ£¬ÒòΪÎÒÃÇÏÖÔÚÊÇÔÚ×é¼þ/״̬²ã´¥·¢»º´æ£¬¶ø²»ÊÇÔÚAction/ÏìÓ¦²ã¡£
¸ÃģʽµÄ·´Ó¦Ðͺͺ¯Êýʽ½á¹¹Ê¹µÃ¹¦ÄÜÖØ·Å£¨replay£©ºÍµ¥Ôª²âÊÔ±äµÃ·Ç³£ÈÝÒס£
SAMģʽÍêÈ«¸Ä±äÁËǰ¶Ë¼Ü¹¹µÄ·¶Ê½£¬ÒòΪ¸ù¾ÝTLA+µÄ»ù´¡ÀíÄҵÎñÂß¼¿ÉÒÔÇåÎúµØÃèÊöΪ£º
ActionÊÇ´¿º¯Êý
CRUD²Ù×÷·ÅÔÚModelÖÐ
״̬¿ØÖÆ×Ô¶¯»¯µÄAction
×÷ΪAPIµÄÉè¼ÆÕߣ¬´ÓÎҵĽǶÈÀ´½²£¬ÕâÖÖģʽ½«APIÉè¼ÆµÄÔðÈÎÍÆµ½ÁË·þÎñÆ÷¶Ë£¬ÔÚViewºÍModelÖ®¼ä±£³ÖÁË×îСµÄÆõÔ¼¡£
Action×÷Ϊ´¿º¯Êý£¬Äܹ»¿çModelÖØÓã¬Ö»ÒªÄ³¸öModelÄܹ»½ÓÊÜActionËù¶ÔÓ¦µÄÊä³ö¼´¿É¡£ÎÒÃÇ¿ÉÒÔÆÚÍûAction¿â¡¢Ö÷Ì⣨״̬±íÊö£©ÉõÖÁModelÄܹ»·±ÈÙ·¢Õ¹ÆðÀ´£¬ÒòΪËüÃÇÏÖÔÚÄܹ»¶ÀÁ¢µØ½øÐÐ×éºÏ¡£
½èÖúSAMģʽ£¬Î¢·þÎñÄܹ»·Ç³£×ÔÈ»µØÖ§³ÅModel¡£ÏñHivepod.ioÕâÑùµÄ¿ò¼ÜÄܹ»²åÈë½øÀ´£¬¾ÍÏñËü±¾À´¾ÍÔÚÕâ²ãËÆµÃ¡£
×îÎªÖØÒªµÄÊÇ£¬ÕâÖÖģʽÏñReactÒ»Ñù£¬²»ÐèÒªÈκεÄÊý¾Ý°ó¶¨»òÄ£°å¡£
Ëæ×Åʱ¼äµÄÍÆÒÆ£¬ÎÒÏ£ÍûÄܹ»Íƶ¯ä¯ÀÀÆ÷ÓÀ¾ÃÌí¼ÓÐéÄâDOMµÄÌØÐÔ£¬ÐµÄ״̬±íÊöÄܹ»Í¨¹ýרÓÐAPIÖ±½Ó½øÐд¦Àí¡£
ÎÒ·¢ÏÖÕâ¸öÂó̽«»á´øÀ´Ò»¶¨µÄ¸ïÐÂÐÔ£ºÔÚ¹ýÈ¥µÄ¼¸Ê®ÄêÖУ¬ÃæÏò¶ÔÏóËÆºõÎÞ´¦²»ÔÚ£¬µ«ËüÒѾһȥ²»·µÁË¡£ÎÒÏÖÔÚÖ»Äܰ´ÕÕ·´Ó¦Ðͺͺ¯ÊýʽÀ´½øÐÐ˼¿¼¡£ÎÒ½èÖúSAMËù¹¹½¨µÄ¶«Î÷¼°Æä¹¹½¨Ëٶȶ¼ÊÇǰËùδÓеġ£ÁíÍ⣬ÎÒÄܹ»¹Ø×¢ÓÚAPIºÍ·þÎñµÄÉè¼Æ£¬ËüÃDz»ÔÙ×ñÑÓÉǰ¶Ë¾ö¶¨µÄģʽ¡£
|