Äú¿ÉÒÔ¾èÖú£¬Ö§³ÖÎÒÃǵĹ«ÒæÊÂÒµ¡£

1Ôª 10Ôª 50Ôª





ÈÏÖ¤Â룺  ÑéÖ¤Âë,¿´²»Çå³þ?Çëµã»÷Ë¢ÐÂÑéÖ¤Âë ±ØÌî



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓÆµ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Model Center   Code  
»áÔ±   
   
 
     
   
 ¶©ÔÄ
  ¾èÖú
AngularJS - ÏÂÒ»¸ö´ó¿ò¼Ü
 
  2206  次浏览      27
  2019-7-23 
 
±à¼­ÍƼö:
±¾ÎÄÀ´×Ôwww.codeproject.com£¬AngularJS ÊÇÒ»¸ö JavaScript¿ò¼Ü£¬ÊÇÒ»¸ö JavaScript ±àдµÄ¿â£¬±¾ÎÄÒâͼÈÃÎÒÃÇÖªÏþwebÓ¦ÓõÄδÀ´¾ÍÔÚÑÛǰ£¬×ܽáÁËÔÚ³ÉÊìµÄ¿Í»§¶ËMVC¿ò¼ÜϵĶԱȡ£

AngularJS

AngularJSÊÇwebÓ¦ÓõÄÏÂÒ»¸ö¾ÞÍ·¡£

AngularJSÈç¹ûΪ´´½¨webÓ¦ÓöøÉè¼Æ£¬ÄÇËü¾ÍÊÇHTMLµÄÌ×·ÁË¡£¾ßÓÐÊý¾Ý°ó¶¨, MVW, MVVM, MVC, ÒÀÀµ×¢ÈëµÄÉùÃ÷ʽģ°åºÍ³öÉ«µÄ¿É²âÊÔÐÔ¶¼ÊÇÓô¿¿Í»§¶Ë JavaScriptÀ´ÊµÏÖµÄ! AngularJS ÊÇÒ»¸ö´´½¨¸»¿Í»§¶ËÓ¦ÓõÄJavaScript MVC¿ò¼Ü£¬Ëü×éÖ¯Á¼ºÃ£¬¾­¹ýÑϸñ²âÊÔ,¶à¹¦ÄÜ£¬Ç¿´ó²¢ÇÒÊ®·ÖÁé»î¡£ÄãÈÔÈ»ÐèÒª¾ßÓзþÎñ¶Ëºǫ́£¬µ«´ó¶àÊýµÄÓû§½»»¥Âß¼­½«ÓÅÑŵطŵ½¿Í»§¶ËÉÏ´¦Àí¡£

AngularJSÊÇÒ»¸ö¿ªÔ´µÄwebÓ¦Óÿò¼Ü£¬ÓÉGoogleºÍÉçÇø½øÐÐά»¤£¬Ëü¿ÉÒÔ´´½¨µ¥Ò³µÄÓ¦ÓóÌÐò£¬Ò»¸öÒ³ÃæµÄÓ¦Óýö½öÐèÒªHTML,CSSºÍJavaScriptÔÚ¿Í»§¶Ë¡£ËüµÄÄ¿±êÊÇÔöÇ¿Ò³ÃæµÄÄ£ÐÍ-ÊÓͼ-¿ØÖÆ£¨MVC£©µÄ¹¦ÄÜ£¬Îª¼ò»¯¿ª·¢ºÍ²âÊÔ¡£

ËüÊÇÒ»¸ö½¨Á¢ÔÚºñ¿Í»§¶ËµÄÇåˬµÄÐÂÄ£¿éwebÓ¦ÓóÌÐò¡£Ò»¸ö½¡×³µÄ¿ò¼Ü½¨Á¢ÔÚÉÌÒµÓ¦ÓÃÍøÂçÉÏ¡£Ëü¹ÄÀø×î¼Ñʵ¼ù£¬¿ª·¢Ä£ÐͺͿª·¢¸ßÖÊÁ¿µÄ¿Éά»¤µÄÄ£¿é»¯Ó¦ÓóÌÐò¡£ËüµÄÍŶÓÊÇÊÀ½çÒ»Á÷µÄ£¬ÉçÇøÊǼ«Æä³öÉ«µÄ£¬Ëü½áºÏ×î°ôµÄ¹¦ÄÜÀ´´´½¨webÓ¦Óá£

AngularJS ÔÊÐíÄã±àд¿Í»§¶ËµÄwebÓ¦ÓóÌÐò£¬Èç¹ûÄãÓÐÒ»¸öÖÇÄÜä¯ÀÀÆ÷¡£ËüÔÊÐíÄãʹÓúÃÓõľÉʽµÄHTML×÷ΪÄãµÄÄ£°åÓïÑÔ£¬ÔÊÐíÄãÀ©Õ¹HTMLÓï·¨À´ÇåÎú¡¢¼ò½àµÄ±í´ïÄãµÄÓ¦ÓÃ×é¼þ¡£Ëüͨ¹ýË«ÏòÊý¾Ý°ó¶¨Ê¹ÄãµÄUI£¨ÊÓͼ²ã£©ÓëÄãµÄJavaScript¶ÔÏó£¨Ä£ÐͲ㣩µÄÊý¾Ý×Ô¶¯Í¬²½¡£°ïÖúÄã¸üºÃµÄ¹¹½¨ÄãµÄÓ¦Óú͸ü·½±ãµÄ²âÊÔ£¬AngularJs¸æËßä¯ÀÀÆ÷ÈçºÎÒÀÀµ×¢ÈëºÍ¿ØÖÆ·´×ª¡£Ëü°ïÖú¸ÄÁ¼ÁËÔÊÐíÒì²½»Øµ÷ºÍÑÓ³Ù¡¢Ê¹¿Í»§¶Ëµ¼º½ºÍÉî²ãÁ´½ÓʹÓùþÏ£bang¸ñʽµØÖ·ºÍHTML5 pushStatÓë·þÎñ¶ËͨПüÈÝÒס£

Angular ÌṩÁË£º

½á¹¹Ä£Ð͵ÄÒýÈ루MVC,SPAµÈ£©

ÔöÇ¿HTMLÖ§³ÖÐÂÌØÐÔ¡£

±ÜÃâÖ±½ÓDOM²Ù×÷À´±ÜÃâºÜÄѵ÷ÊÔ²»¿É×·×ٵĴúÂë¡£

°üº¬µÍñîºÏºÍ¸ß¿É¸´ÓÃÐÔ

Ó¦ÓóÌÐòÄÚ²¿¹æÔò²âÊÔ

ÊÓͼģ°å¸ü½Ó½ü·þÎñÆ÷¶ËÄ£°å

AngularJS ÊÇ»ùÓÚÉùÃ÷ʽ±à³Ìģʽ ÊÇÓû§¿ÉÒÔ»ùÓÚÒµÎñÂß¼­½øÐпª·¢. ¸Ã¿ò¼Ü»ùÓÚHTMLµÄÄÚÈÝÌî³ä²¢×öÁËË«ÏòÊý¾Ý°ó¶¨´Ó¶øÍê³ÉÁË×Ô¶¯Êý¾Ýͬ²½»úÖÆ. ×îºó, AngularJS Ç¿»¯µÄDOM²Ù×÷ÔöÇ¿Á˿ɲâÊÔÐÔ.

Éè¼Æ³õÖÔ:

½«£Ä£Ï£Í²Ù×÷´ÓÓ¦ÓÃÖнâñî. ÔöÇ¿Á˿ɲâÊÔÐÔ¡£

Ó¦ÓòâÊÔÐÔÓ뿪·¢´úÂëͬÑùÖØÒª. ²âÊԵĸ´Ôӳ̶ÈÓë´úÂëµÄÉè¼Æ½á¹¹Ç¿Ïà¹Ø.

¿Í»§¶ËÓë·þÎñ¶Ë½âñî. ʵÏÖÁ˲¢·¢´¦Àí»úÖÆÔöÇ¿ÁË´úÂ븴ÓÃÐÔ.

ÔÚ¿ª·¢È«¹ý³ÌÖÐ×÷³öÖ¸Òý: ´Ó£Õ£Éµ½ÒµÎñÂß¼­×îÖÕµ½²âÊÔ»·½Ú.

¼Ü¹¹

AngularJSµÄ¹Ø¼üÌØÐÔ

¿É²âÊÔÐÔ£¬ÒÀÀµ×¢È룬Âß¼­/ÊÓͼ²ãµÄ·ÖÀ룬»¹ÓÐÉè¼ÆÕߺͿª·¢ÕßÖ®¼äµÄЭµ÷ºÏ×÷ÊÇÒ»¸ö¿ª·¢Õß¶ÔÒ»¸ö¿ò¼Ü×îÆÚ´ýµÄ¼¸Ñù¶«Î÷¡£Angular¾ø¶ÔÂú×ãÉÏÊöÒªÇó¡£ÔÚJSÁìÓò£¬AngularÄÜÊÊÅäÕâдÁîÈ˶úĿһеÄÒªÇó¿´ÆðÀ´ÊǶàô¾ªÈË¡£

Ë«ÏòÊý¾Ý°ó¶¨:

Êý¾Ý°ó¶¨¿ÉÄÜÊÇAngularJSÀï×î¿á£¬×îʵÓõŦÄÜ¡£ Ëü½«½ÚÊ¡Äã´óÁ¿µÄÑù°å´úÂë±àд¡£ Ò»¸öµäÐ͵ÄWebÓ¦ÓóÌÐò¿ÉÒÔ°üº¬¶à´ï80£¥µÄ´úÂë»ù´¡£¬Èç±éÀú£¬²Ù×÷£¬²¢ÌýÈ¡Á˼àÌýDOM¡£ Êý¾Ý°ó¶¨Ê¹µÃ²»ÓñàдÕâЩ´úÂ룬ÕâÑùÄã¾Í¿ÉÒÔרעÓÚÄãµÄÓ¦ÓóÌÐò¡£

¿¼ÂÇÏÂÄãµÄÓ¦ÓóÌÐòµÄÄ£ÐÍΪµ¥Ô´ÐÅÈεġ£ ÄãµÄÄ£Ð;ÍÊÇÄãÈ¥¶ÁÈ¡»ò¸üÐÂÓ¦ÓóÌÐòÖеÄÈκζ«Î÷µÄµØ·½¡£ÕâÖÖͶÉäÊÇÎÞ·ìµÄ£¬²»Ðè·ÑÄãÒ»±øÒ»×ä¡£AngularJSË«ÏòÊý¾Ý°ó¶¨»á´¦ÀíDOMºÍÄ£ÐÍÖ®¼äµÄͬ²½£¬·´Ö®ÒàÈ»¡£

Ä£°å

ÔÚAngularJS, Ä£°å¾ÍÊÇÔ­ÉúµÄHTML. ×öÁË»ùÓÚÊÓͼµÄÔöÇ¿. ÕâÑù×ö×î´óµÄºÃ´¦ÔÚÓÚÀ­½üÁË¿ª·¢ÓëÉè¼ÆÈËÔ±µÄ¹¤×÷Á÷. Éè¼ÆÈËÔ±²Ù×÷£È£Ô£Í£ÌÍê³ÉÉè¼Æ£¬¿ª·¢Ö±½ÓÔڣȣԣͣÌÉÏ×÷ÏàÓ¦µÄ¹¦ÄÜ¿ª·¢.

<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>

MVC

AngularJSÒýÈëÁËÈí¼þÉè¼ÆµÄ£Í£Ö£Ãģʽ.Õâ¶ÔÓÚʹÓÃÕßÀ´ËµÈÊÕß¼ûÈÊÖÇÕß¼ûÖÇ. AngularJS²¢²»ÊÇÍêÈ«µÄ£Í£Ö£Ã¶øÊÇ MVVM (Model-View-ViewModel).

Ä£ÐÍ

model¾ÍÊÇÊý¾ÝÄ£ÐÍ ¾ÍÊÇһЩJavaScript ¶ÔÏó. û±ØÒª´Ó¸¸Àà¼Ì³Ð£¬´úÀí°ü×°Òà»òÊÇʹÓÃgetter/setterÀ´Ê¹ÓÃ. ʹÓÃvanilla JavaScript Ê®·Ö·½±ã±ã½Ý.

ÊÓͼ

ÊÓͼ¾ÍÊÇÌá¹©ÌØÊâÊý¾Ý»ò·½·¨À´Ö§³ÖÌØ¶¨³¡¾°µÄ¶ÔÏó.

ÊÓͼ¶ÔÏó¾ÍÊÇ $scope. $scope¾ÍÊǸö¼òµ¥µÄjs¶ÔÏó£¬ÌṩһЩ¼òµ¥µÄ£Á£Ð£É¼à¿ØÆä״̬.

ÒµÎñ¿ØÖÆ

¿ØÖÆÆ÷Æðµ½ÉèÖà $scope¶ÔÏóµÄ³õʼ״̬¼°ºóÐøµÄ¶¯×÷¹ØÁª¡£

Ò³Ãæ

ÔÚ.AngularJS´¦ÀíÍêÏà¹ØµÄÒµÎñÂß¼­½øÐУȣԣͣÌģʽµÄչʾ¡£

ÕâÑù¾Íµì¶¨ÁËÓ¦Óõļܹ¹. $scope¶ÔÏóÓµÓÐÊý¾ÝµÄÒýÓùØÏµ, ¿ØÖÆÆ÷¶¨ÒåÐÐΪ, ÊÓͼ´¦ÀíÒ³ÃæÕ¹Ê¾²¼¾ÖÒÔ¼°ÏàÓ¦µÄ´¦ÀíÌø×ª.

ÒÀÀµ×¢Èë

AngularJS ÌṩÁËÒÀÀµ×¢ÈëµÄ×Óϵͳ°ïÖú¿ª·¢ÈËÔ±½µµÍ¿ª·¢¸´ÔÓ¶È£¬Ìá¸ß²âÊÔЧÂÊ.ÒÀÀµ×¢È뽫ҵÎñ´úÂëÓëÅäÖÃʵÏÖ½âñÌá¸ßÁË´úÂëµÄ¿É²âÐÔ.

ÓÐÁˣģÉÎÞÐèÿ´Î¶¼´´½¨Ö¸¶¨µÄ¶ÔÏóÒÀÀµ¹ØÏµ£¬¶øºóÃæÅäÖÃ. ÕâÑù¾ÍÄܰ´Ðè·ÖÅä¶øÎÞÐè×Ô¼ºÖƶ¨»òÊDzéÕÒ. ¾ÍÏñҪ˵һ¾ä"Hey I need X', £Ä£É¾Í»á°ïÄã´´½¨²¢·¢Ë͸øÄã.

²ÉÓÃÒÀÀµ×¢ÈëºóÄÜÌåÑéµ½µÄºÃ´¦Ö÷Òª°üÀ¨:

´úÂë¸üÒ×ÓÚά»¤¡£

API¸üΪ¼òÁ·ºÍ³éÏó¡£

´úÂë¸üÒ×ÓÚ²âÊÔ¡£

´úÂë¸ü¼ÓÄ£¿é»¯¡¢¿É¸´ÓÃÐÔ¸üÇ¿¡£

Ö¸Áî

Ö¸Áî¿ÉÒÔ±»ÓÃÀ´´´½¨×Ô¶¨ÒåµÄHTML±êÇ©£¬ÕâЩ±êÇ©¿ÉÒÔÓÃ×÷еÄ×Ô¶¨ÒåµÄ¿Ø¼þ¡£ËüÃÇÒ²¿ÉÒÔÓÃÀ´"äÖȾ"ÓÐÒ»¶¨ÐÐΪµÄÔªËØ£¬Ò²¿ÉÒÔÒÔһЩÓÐȤµÄ·½Ê½À´²Ù×÷DOMÊôÐÔ¡£Ò»¸öÖ¸Áî¾ÍÊÇÒ»¸öÄÜÒýÈëÐÂÓï·¨µÄ¶«Î÷¡£°Ñ·ÖÀëµÄ×é¼þ×éºÏ³ÉÒ»¸ö×é¼þ£¬ÕâÖÖ´´½¨Ó¦Óõķ½Ê½½«Ê¹µÃÌí¼Ó¡¢Ð޸ĺÍɾ³ýÒ³Ãæ¹¦ÄܱäµÃÒì³£¼òµ¥¡£Ö¸ÁîÊÇAngularJSµÄÒ»¸ö·Ç³£Ç¿´óÇÒ¶ÀÓеÄÌØÐÔ¡£

´Ó¸ü¸ßµÄ²ã´Î˵, DOM ÔªËØÉϵÄÖ¸Áî (ÏñÊÇÊôÐÔ£¬ÔªËØÃû£¬×¢ÊÍ»òÊÇ CSS ) µÈ¸ø AngularJS's HTML ±àÒëÆ÷´«µÝµÄÊý¾Ý($compile) ´Ó¶ø´«µÝÖ¸¶¨µÄ¹¦Äܵ½£Ä£Ï£ÍÔªËØ»òÊÇ×ÓÔªËØ¡£

Angular ÓкܶàÕâÑùµÄÄÚÖÃÖ¸ÁÏñÊÇ ngBind, ngModel, ºÍngView.Y»¹ÄÜ×Ô¶¨ÒåÖ¸Áµ±AngularÆô¶¯ºóHTML±àÒëÆ÷¾Í»á×Ô¶¯½¨Á¢£Ä£Ï£ÍÔªËØµÄÖ¸ÁîÓ³Éä.

²âÊÔ

AngularJS Òâʶµ½·²ÊÇjsдµÄ´úÂëÐèÒª¼ÓÇ¿²âÊÔ. ÕâÔÚ AngularJS Éè¼ÆÖ®³õ¾ÍÓÐÁË, ÓÚÊÇAngularµÄ¿É²âÊÔÐÔ²»ÑÔ¶øÓ÷.

JSÊǽâÊÍÐԵĶ¯Ì¬ÓïÑÔ£¬Éè¼ÆÏàÓ¦µÄ²âÊÔ¾ö²»¿ÉСêï.

AngularJS ÍêÈ«»ùÓڿɲâµÄ¸ù»ùÉè¼Æ³öÀ´µÄ. ËüÌṩÁ˶˵½¶ËµÄµ¥Ôª²âÊÔ. APIÎĵµ¾ÍÊÇÏêϸµÄ²âÊÔ¸²¸Ç˵Ã÷.

AngularJS Bootstrap Process

ѧϰÇúÏß

¸Õ¿ªÊ¼Ñ§Augular¾õµÃ¿ª·¢Ó¦ÓÃÐèÒªÓÐÏ൱µÄ±à³Ì»ù´¡. ²»µÃ²»ËµÕâȷʵÊÇÒ»¿îÁ˲»ÆðµÄ¿ª·¢¿ò¼Ü£¬ËüÒªÇ󿪷¢ÈËÔ±Éè¼ÆµÍñîºÏºÍ¿Éά»¤µÄÓ¦ÓÃ. ʹÓÃAngularJS µÄ¸´ÔӶȾÍÏñʹÓÃPHP£¬Ruby on RailsµÈµÈ, ¶¼ÐèÒª´¦ÀíÒÀÀµ×¢È룬·ÓÉ£¬ÖµÓòµÈµÈ. ÕâÒ²²»ÊÇʲôм¼ÊõÁË. AngularÖ»ÊÇ·¢Ñï¹â´óÁË.

JS MVC frameworks

MVC (Ä£ÐÍ-ÊÓͼ-¿ØÖÆÆ÷) ÊÇÒ»Ì×Éè¼ÆÄ£Ê½£¬¿ÉÒÔ·Ö²ãÉè¼ÆÓ¦ÓÃ. ½«Êý¾Ý(Ä£ÐÍ) ÓëÓû§ÊÓͼ (ÊÓͼ)½âñî, ͨ¹ýÖÐ¼ä¿ØÖÆÆ÷ (Controllers) ´¦ÀíÒµÎñÂß¼­£¬ Óû§ÊäÈëÒÔ¼°ÏàÓ¦µÄÂß¼­Ìø×ª. ÏÖ´úJS¿ò¼ÜÌṩÁ˼òÒ׵IJÙ×÷ÒÔ¼°SoC (ÒµÎñ·ÖÀë) ¸üºÃµÄʵÏÖÁËMVC .

MVC ¶ÔÓÚJSÓкܶàºÃ´¦¡ª Ìá¸ßÁ˸߿ɿ¿ÐԵĴúÂë. Òѱ»ºÜ¶àÓïÑÔ´óÁ¿²âÊÔÑéÖ¤¹ý£¬¾ßÓи߿ɿ¿ÐÔ.

MVC ʵÏÖµÄÈý²ã½á¹¹:

Ä£ÐÍ: ÊÇÓ¦ÓóÌÐòÖÐÓÃÓÚ´¦ÀíÓ¦ÓóÌÐòÊý¾ÝÂß¼­µÄ²¿·Ö¡£

¡¡¡¡Í¨³£Ä£ÐͶÔÏó¸ºÔðÔÚÊý¾Ý¿âÖдæÈ¡Êý¾Ý.

ÊÓͼ: ÊÇÓ¦ÓóÌÐòÖд¦ÀíÊý¾ÝÏÔʾµÄ²¿·Ö¡£

¡¡¡¡Í¨³£ÊÓͼÊÇÒÀ¾ÝÄ£ÐÍÊý¾Ý´´½¨µÄ.

¿ØÖÆ: ÊÇÓ¦ÓóÌÐòÖд¦ÀíÓû§½»»¥µÄ²¿·Ö¡£

¡¡¡¡Í¨³£¿ØÖÆÆ÷¸ºÔð´ÓÊÓͼ¶ÁÈ¡Êý¾Ý£¬¿ØÖÆÓû§ÊäÈ룬²¢ÏòÄ£ÐÍ·¢ËÍÊý¾Ý.

JavaScript ¡®MVC¡¯¿ÉÒÔ°ïÖú¹¹½¨ÎÒÃǵĴúÂ룬µ«¾¡ÐÅÊé²»ÈçÎÞÊé. ÓÐЩ¿ò¼Ü°Ñ¿ØÖÆÆ÷·ÅÔÚÊÓͼģʽ(±ÈÈç Backbone.js) ÓÐЩ¿ò¼ÜÈ«²¿»ìÔÚÒ»ÆðʹÓÃ. ³ý´ËÍ⻹ÓÐÆäËûµÄMVCģʽ£¬ÏñÊÇ MVP (Model-View-Presenter) and MVVM (Model-View ViewModel). ¼´±ãÊÇMVCÉè¼ÆÄ£ÐÍ, ²»Í¬µÄÓïÑÔÒ²Óв»Í¬µÄʵÏÖ·½Ê½. ÏñÊÇ, ÓÐЩMVCʵÏÖ»áÓÐ×Ô¼ºµÄÊÓͼ±ä¸ü¿ØÖÆÆ÷Òà»òÊÇ¿ØÖÆÆ÷ÊÓͼ. ÕâЩ¿ò¼Ü±»³ÆÎª MV* ¿ò¼Ü, Òâζ×ÅÄã»áÓÐÄ£ÐÍ£¬ÊÓͼµ«¸ü»áÓÐÆäËûµÄ²¿·Ö.

ºÜ³¤Ò»¶Îʱ¼ä AngularJS ÊǺܱê×¼µÄ MVC (»òÕß˵ÔÚ¿Í»§¶ËʵÏÖÕâÒ»¿é),µ«ÔÚºóÀ´Ò»¶Îʱ¼äÄÚËæ×Å´úÂëÖØ¹¹ºÍAPIµÄÖØÐ´£¬ÏÖÔÚ¸üÊÇ MVVMģʽÁË ¨C $scope ¶ÔÏó±»ÈÏΪÊÇÊÓͼģÐÍÈ»ºó±»³ÆÎª¿ØÖÆÆ÷µÄ¹¦ÄÜÄ£¿é°ü×°. ÕâÑù·ÖÅäµ½MVģʽÖÐÊÇÓÐЩºÃ´¦µÄ.Ëü»á°ïÖú¿ª·¢ÕßʹÓüòÒ×µÄAPI¿ª·¢»ùÓÚ¿ò¼ÜµÄ´úÂë. Ò²ÄÜͳһ¿ª·¢µÄ¹²Ê¶¡£ ʹÓÃMVCµÄ³õÖÔ¾ÍÊÇ·Ö½â½á¹¹, È»ºóͨ¹ýÉèÖòÎÊý¾ö¶¨¾ßÌåʹÓÃÄÄÖÖ MV* ¿ò¼Ü, Igor Minar (ºËÐÄ AngularJSÍŶÓ)Ðû³ÆAngularJS ÊÇ MVW ¿ò¼Ü- Model-View-Whatever. whatever¾ÍÊǶ¨ÖÆ»¯µÄÐèÇó.

ΪʲôʹÓà JS MVC ¿ò¼Ü

ÔÙÀ´¿´¿´Ê¹ÓÃMVCºÍ´«Í³¿ª·¢Ä£Ê½µÄÇø±ð

´«Í³WebÓ¦ÓÃ

´«Í³Ä£Ê½´¦ÀíÒµÎñÇëÇóÈ«²¿·ÅÔÚ·þÎñ¶Ë£¬Ç°¶ÎÖ»ÊÇÒ³Ãæ½»»¥ (Êݿͻ§¶Ë, ÅÖ·þÎñ¶Ë). Õâ»áÓÐÒÔÏÂÎÊÌâ:

·Ö²¼Ê½´¦ÀíÄÜÁ¦Èõ ¨C ·þÎñÆ÷´¦Àí´óÁ¿ÒµÎñ£¬ÐÔÄÜ¿°ÓÇ.

ÏàӦѹÁ¦ ¨C ´«Í³Ó¦ÓõÄÏìÓ¦ËÙ¶ÈÊǸöÓ²ÉË.

¿ª·¢¸´ÔÓ¶È ¨CC/S½á¹¹µÄÓ¦Óÿª·¢ÊDZȽϸ´ÔÓµÄ. ÓÉÓÚÿ´ÎÇëÇóÏìÓ¦¶¼Éæ¼°µ½½»»¥Éè¼Æ£¬ºÜÈÝÒ׳ö´í¡£Î´½â¾ö¸ÃÎÊÌâµÄ¿ò¼ÜÒ²ÊDzã³ö²»Ç¿ÉϧÒ×ÓÃÐÔÓдý¿¼¾¿.

±»¹¥»÷ΣÏÕ ¨C »ì±àÒµÎñ´úÂëºÍ½»»¥´úÂ룬Ôö¼ÓÁË´úÂëÊܹ¥»÷µÄ¸ÅÂÊ.ÔÚ¸´ÔӶȺܸߵÄÓ¦ÓÃÖиüÊDz»ÈÝÒ׿ØÖư²È«ÐÔ¡£

·þÎñ¶ËµÄ¸ºÔعý´ó ¨C ËùÓпͻ§¶ËµÄÇëÇó¶¼ÐèÒª¾­ÓÉ·þÎñ¶Ë´¦Àí£¬ÕâÒâζ×ÅËùÓеÄsession¶¼ÒªµÈ´ý30·ÖÖÓºó²ÅÄܱ»ÊÍ·Å£¬Õâʱ¿Í»§ÇëÇóÔçÒÑ´¦ÀíÍê±Ï£¬µ«»¹ÔÚÕ¼ÓÃϵͳ×ÊÔ´£¬´ó´ó½µµÍÁËϵͳÐÔÄܺÍÉìËõÐÔ.

ÀëÏß´¦Àí ¨C ÓµÓÐÀëÏß´¦ÀíÄÜÁ¦ÊÇwebÓ¦ÓõľºÕùÁ¦£¬ÓÈÆäÔÚ´¦Àí´óÁ¿¿Í»§¶ËÇëÇóµÄÓ¦ÓÃÖУ¬ÀëÏß´¦Àí²¿·ÖÒµÎñ¸üÊDz»¿É»òȱ.

»¥²Ù×÷ÐÔÈõ¨C ÓÉÓÚ»ìÔÓ±àд£¬´úÂëÂß¼­ºÜÄѷָÀ©Õ¹¹¦ÄܱäµÃ¸´ÔÓ.

JSMVC Web Ó¦ÓóÌÐò

JS MVC webÓ¦ÓóÌÐò¼Ü¹¹Ö÷ÒªÖÂÁ¦ÓÚ½«·þÎñ¶ËµÄÂß¼­´¦Àí×ªÒÆµ½¿Í»§¶ËºÍʵÏÖÊݿͻ§¶ËwebÓ¦ÓóÌÐò¡£client/serverÄ£Ð͵Ĵ¦ÀíÂß¼­ºÍ´úÂ뱻ίÍиøä¯ÀÀÆ÷µÄºÃ´¦ÊÇ£º

¿ÉÀ©Õ¹ÐÔ£ººÜÈÝÒ׿´µ½ÀûÓÿͻ§¶Ë´¦ÀíÔÚ¿ÉÀ©Õ¹ÐÔ·½ÃæµÄÓÅÊÆ¡£·þÎñÆ÷´¦ÀíÄÜÁ¦±£³Ö²»±äµÄǰÌáÏ£¬Ó¦Óñ»Ô½¶àµÄ¿Í»§Ê¹Óã¬ÄÇôԽ¶àµÄ¿Í»§¶Ë»úÆ÷¿ÉÒÔ±»Ê¹Óã¨Ö±µ½Ä㹺Âò¸ü¶àµÄ·þÎñÆ÷£©¡£

ʵʱµÄÓû§ÏìÓ¦£º¿Í»§¶Ë´úÂë¿ÉÒÔÁ¢¼´¶ÔÓû§µÄÊäÈë×÷³ö·´Ó¦£¬¶ø²»ÐèÒªµÈ´ýÍøÂç´«Êä¡£

½á¹¹ÇåÎúµÄ±à³ÌÄ£ÐÍ£ºÓû§½çÃæ¿ÉÒÔÓÐЧµØ·ÖÀëÓ¦ÓóÌÐòµÄÒµÎñÂß¼­¡£ÕâÑùµÄÄ£ÐÍΪ°²È«ÌṩÁËÒ»¸ö¸ü¼Ó¼ò½à·½·¨¡£ËùÓÐͨ¹ýÓû§½çÃæµÄ·¢³öµÄÇëÇó£¬ÎÒÃÇ¿ÉÒÔÔÚÊý¾Ýͨ¹ý¸÷ÖÖ½Ó¿Úǰ½øÐа²È«¼ì²é¡£Ê¹Óø´ÔӵķÖÎöÁ÷³Ì»áÈð²È«·ÖÎö±äµÃ¸ü¼Ó¸´ÔÓ¡£ÁíÒ»·½Ã棬ÓÃÇåÎúµÄweb·þÎñ½Ó¿Ú£¬ÓÐÃ÷È·µÄÍø¹Ø°²È«¹¤×÷ºÍ°²È«·ÖÎö¸ü¼òµ¥Ö±¹Û£¬Â©¶´¿ÉÒÔ¿ìËÙ·¢ÏÖ²¢¾ÀÕý¡£

¿Í»§¶Ë״̬¹ÜÀí£ºÔÚ¿Í»§¶Ëά»¤ÁÙʱ»á»°×´Ì¬ÐÅÏ¢¿ÉÒÔ¼õÉÙ·þÎñÆ÷ÉϵÄÄÚ´æ¸ºÔØ¡£ÕâÒ²ÔÊÐí¿Í»§ÀûÓøü¶àµÄRESTful½»»¥£¬¿ÉÒÔ½øÒ»²½Ìá¸ß¿ÉÉìËõÐÔºÍʹÓûº´æµÄʱ»ú¡£

ÀëÏßÓ¦ÓÃ-Èç¹û´ó²¿·ÖÓ¦ÓóÌÐòµÄ´úÂëÒѾ­ÔÚ¿Í»§¶ËÉÏÔËÐУ¬ÄÇô´´½¨Ò»¸öÀëÏß°æ±¾µÄÓ¦ÓóÌÐò¿ÉÒԿ϶¨½«»á±äµÃ¸ü¼ÓÈÝÒס£

»¥²Ù×÷ÐÔ£ºÍ¨¹ýʹÓýṹ»¯Êý¾ÝºÍ×îСÏ޶ȵÄapi½øÐн»»¥£¬ÕâÑù¸üÈÝÒ×Á¬½Ó¶îÍâµÄÏû·ÑÕߺÍÉú²úÕßÓëÏÖÓÐϵͳ½øÐн»»¥¡£

ΪÁË¿ª·¢ÊµÏÖÒ»¸ö¿Í»§¶ËwebÓ¦ÓóÌÐò£¬ÐèÒª×éÖ¯ÎÒÃǵÄÏîÄ¿½á¹¹£¬ÕâÑù¸üÒ×ÓÚºóÆÚµÄ¹ÜÀíºÍά»¤¡£Ò»¸öÓ¦ÓóÌÐòµÄ½Å±¾³¬¹ý¼¸Ê®ÐеÄʱºò£¬Èç¹ûËüµÄ×é¼þÖ®¼äµÄ¹¦ÄÜûÓзֿª´¦Àí£¬ÕâÑùÓ¦Óûá±äµÃÔ½À´Ô½ÄѹÜÀí¡£ÎÒÃÇÒ»¿ªÊ¼¿ª·¢Ò»¸öwebÓ¦ÓóÌÐòµÄʱºò£¬¿ÉÄÜ»á¾õµÃ¼òµ¥µØÍ¨¹ýÒ»¸öDOM²Ù×÷¿â£¨ÈçjQuery£©ºÍһЩʵÓõIJå¼þ¾Í¿ÉÒÔÍê³ÉÁË¡£ÕâÑùÎÒÃǺÜÈÝÒ׾ͱ»Ó¦ÓÃÀïÃæjQueryµÄǶÌ׻ص÷º¯ÊýºÍûÓÐÈκÎ×éÖ¯½á¹¹µÄDOMÔªËØ¸ø¸ãÃÉÁË¡£ÎªÁ˱ÜÃâÇ°ÃæËµµ½µÄÎÊÌ⣬ÎÒÃDzÉÓÃspaghetti code £¨Ò»¸öÃèÐð´úÂëµÄÊõÓÓÃÀ´ÐÎÈÝ´úÂëÄÑÒÔÔĶÁºÍÒòΪȱ·¦×éÖ¯½á¹¹ÄÑÒÔά»¤£©¡£ÏñʹÓÃjQueryÕâÑùµÄDOM²Ù×÷¿âºÍһЩÆäËûµÄʵÓÿâÎÒÃÇ¿ÉÒÔ¸ü¼ÓÈÝÒ×ʹ¹¹½¨Ò»¸öÍøÒ³¡£µ«ÊÇ£¬ÕâЩ¿âÔÚÎÒÃǹ¹½¨webÓ¦ÓóÌÐòʱʧȥ×÷Óá£

webÓ¦ÓóÌÐò²»ÏñÒ»¸öÆÕͨµÄÍøÒ³£¬ËûÃǸüÇãÏòÓÚÓëÓû§µÄ½»»¥²¢ÇÒÐèҪʵʱÓëºó¶Ë·þÎñÆ÷ͨÐÅ¡£Èç¹ûÄãûÓÐʹÓÃMVC¿ò¼ÜÀ´´¦Àí£¬ÕâÑù»á×îÖÕ»áÈÃÄãд³öһЩ±àд»ìÂÒ¡¢·Ç½á¹¹»¯¡¢²»¿Éά»¤¡¢²»¿É²âÊԵĴúÂ롣ΪÁ˱ÜÃâ¡°spaghetti¡±Ê½µÄ´úÂ룬ÄÇôJavaScript¿ª·¢ÈËÔ±±ØÐëÊ×ÏÈÒªÁ˽âÕâÖÖģʽÌṩÁËʲô¶«Î÷¡£Õâ¾Í¿ÉÒÔ¿´µ½ÕâЩ¿ò¼ÜÄܹ»ÈÃÎÒÃÇ×öʲôÄÄЩ²»Í¬µÄÊÂÇé¡£

ʹÓÃJavaScript¹¹½¨Ò»¸öµ¥Ò³ÃæÓ¦ÓóÌÐòµÄʱºò£¬²»¹ÜÊÇ·ñÓµÓÐÒ»¸ö¸´ÔÓµÄÓû§½çÃæ»òÕßÖ»ÊÇΪÁ˼õÉÙHTTPÇëÇóµÄÊýÁ¿£¬Äã¿ÉÄܻᷢÏÖ×Ô¼ºÐ´µÄºÜ¶à¿ÉÒÔ×é³ÉÒ»¸öMV *¿ò¼ÜµÄ´úÂë¡£¸Õ¿ªÊ¼µÄʱºò£¬Ê¹ÓÃ×Ô¼ºÏë³öÀ´µÄ·½Ê½À´±ÜÃâ¡°spaghetti¡±Ê½´úÂëдһ¸öÓ¦Óÿò¼Ü²¢²»ÊÇÒ»¼þºÜÄѵÄÊÂÇ飬µ«ÊÇд³öÏñAngular/BackboneÕâÑùµÄ´úÂëˮƽÄǾͲ»Ì«¿ÉÄÜÁË¡£

ÎÒÃǻᷢÏÖÓиü¶àµÄÈË»áÇãÏòÓÚ¹¹½¨Ò»¸öÓ¦Ó㬶ø²»ÊÇÊÔ×ÅÈ¥½«DOM²Ù×÷¿â¡¢Ä£°å¡¢Â·ÓɽáºÏµ½Ò»Æð¡£³ÉÊìµÄMV *¿ò¼Üͨ³£²»½ö°üÀ¨ºÜ¶àÄã·¢ÏÖ×Ô¼ºÐ´¹ýµÄÀàËÆµÄ¹¦ÄÜ´úÂ룬¶øÇÒÒ²°üº¬Á˺ܶàÄãÔø¾­Óöµ½²¢ÇÒÒѾ­½â¾öÁ˵ÄÎÊÌâ¡£¿ò¼ÜΪÄã½ÚÊ¡Á˺ܶàʱ¼ä£¬Õâ¾ÍÊÇ¿ò¼Ü²»Äܵ͹ÀµÄ¼ÛÖµËùÔÚ¡£

ÏÖÔÚµÄä¯ÀÀÆ÷ÌṩÁ˷ḻµÄ¹¦ÄÜ£¬±äµÃÔ½À´Ô½Ç¿´ó£¬Õâ²»½öÈÃÔÚJavaScriptÖй¹½¨³ÉÊìµÄwebÓ¦ÓóÌÐò³ÉΪ¿ÉÄÜ£¬¶øÇÒÕâ¸ö·½Ê½Ô½À´Ô½ÊÜ»¶Ó­¡£¸ù¾Ý HTTP ArchiveÊý¾ÝÏÔʾ£¬½ñÄ겿ÊðµÄJavaScript´úÂë¹æÄ£Ôö³¤ÁË45%¡£

Ëæ×ÅJavaScriptµÄÈËÆøÅÊÉý£¬ ÎÒÃǵĿͻ§¶ËÓ¦ÓóÌÐò±ÈÒÔǰ¸´ÔÓµÃ¶à ¡£Ò»¸öÓ¦ÓóÌÐò¿ª·¢ÐèÒª¶à¸ö¿ª·¢ÈËÔ±ºÏ×÷£¬ËùÒÔ±àд¿Éά»¤ºÍ¿ÉÖØÓôúÂëÔÚеÄwebÓ¦ÓóÌÐòʱ´úÊǷdz£ÖØÒªµÄ¡£Éè¼ÆÄ£Ê½¶ÔÓÚ±àд¿Éά»¤ºÍ¿ÉÖØÓõĴúÂëÊǺÜÖØÒªµÄ¡£ÔÚ¹ýÈ¥¼¸Äêʱ¼äÀïÃæ£¬ÓкܶàJavaScript MVC¿ò¼ÜÒѾ­±»Éè¼Æ¿ª·¢³öÀ´ÁË£¬±ÈÈçAngularJS£¬backbone.js£¬ ember.js£¬»¹ÓкܶàÆäËûµÄ¿ò¼Ü¡£ËäÈ»ËûÃǶ¼ÓÐÆä¶ÀÌØµÄÓÅÊÆ£¬µ«ÊÇÿһ¿ò¼Ü¶¼»á¹ÄÀø¿ª·¢ÈËÔ±×ñÑ­Ò»¶¨µÄÐÎʽÒÔ±àд³ö¸ü¼Ó½á¹¹»¯µÄJavaScript´úÂë¡£

ʲôʱºòÐèҪʹÓÃÒ»¸öJS MV*¿ò¼Ü

Èç¹ûÄãÔÚ¹¹½¨Ò»¸öÓ¦Óã¬ËüµÄ¿Í»§¶ËÓÐÐí¶àÖØÁ¿¼¶µÄ¹¦ÄÜ£¬Óô¿JavaScriptºÜÄÑÓ¦¸¶£¬ÄÇÄã¾ÍÓ¦¸Ã¿¼ÂÇʹÓÃÒ»¸öMVC¿ò¼Ü¡£ Èç¹ûÑ¡Ôñ´íÎó£¬Ä㽫»á´í¹ýMVC¿ò¼ÜÌṩµÄ¹¦ÄÜ£¬ÏÝÈëÖØÐ·¢Ã÷ÂÖ×ӵľ³µØ¡£

ҪעÒâµÄÊÇ£¬Èç¹ûÄã¹¹½¨µÄÓ¦ÓÃÔÚ·þÎñÆ÷¶ËÓкܶàÖØÁ¿¼¶¹¦ÄÜ(¼´ÊÓͼÉú³É/Õ¹ÏÖÂß¼­)²¢ÇÒÔÚ¿Í»§¶ËûÓжàÉÙ½»»¥µÄ»°£¬ÕâʱÄã»á·¢ÏÖʹÓÃMVC¿ò¼Ü¾ÍÏñÊÇɱ¼¦ÓÃÅ£µ¶¡£ÔÚÄÇÖÖÇé¿öϸüºÃµÄÑ¡ÔñÊÇ£¬Ê¹ÓÃÒ»¸ö¸ü¼òµ¥µÄ¡¢ÓÐÉÙÁ¿¸½¼Ó¹¦ÄܵÄDOM²Ù¿ØÀà¿â¡£

ÏÂÃæÕâ¸öÁÐ±í²¢²»Í걸£¬µ«ÊÇÎÒÃÇÏ£ÍûËüÄÜÌṩ³ä·ÖµÄÀíÓɰïÄã¾ö¶¨ÊÇ·ñÔÚÄãµÄÓ¦ÓÃÖÐÓ¦¸ÃʹÓÃÒ»¸öMVC¿ò¼Ü:

ÄãµÄÓ¦ÓÃÐèÒªÒì²½Á¬½Óµ½ºǫ́

ÄãµÄÓ¦ÓÃÓÐÕâÑùµÄ¹¦ÄÜ£¬Ëü²»ÐèÒªÖØÐÂÔØÈëÕû¸öÒ³Ãæ(±ÈÈç¸ø²©ÎÄÔö¼ÓÒ»ÌõÆÀÂÛ£¬ÎÞÏÂÏÞ¹ö¶¯)

¶àÊýÊÓͼ»òÕßÊý¾Ý²Ù×÷½«»áÔÚä¯ÀÀÆ÷ÄÚÍê³É£¬¶ø²»ÊÇÔÚ·þÎñÆ÷¶ËÍê³É

ͬÑùµÄÊý¾ÝÔÚÒ³ÃæÉÏÐèÒª½øÐв»Í¬·½Ê½µÄäÖȾ

ÄãµÄÓ¦ÓÃÓÐÐí¶àËöËéµÄ½»»¥À´ÐÞ¸ÄÊý¾Ý(°´Å¥, ¿ª¹Ø)

Âú×ãÕâЩÇé¿öµÄ±È½ÏºÃµÄwebÓ¦ÓõÄÀý×ÓÓÐGoogle Docs£¬Gmail»òÕßSpotify¡£

¿Í»§»ú/·þÎñÆ÷¼Ü¹¹µÄwebÓ¦ÓóÌÐò

ÊÀ½çÒѾ­±»¸Ä±ä£¬²¿·ÖÓ¦ÓõÄÂß¼­ÒѾ­±»ÒƵ½¿Í»§¶Ë¡£µ±ÎÒÃÇÐèÒªÒÔijÖÖ·½Ê½´¦ÀíÀ´×Ô·þÎñÆ÷µÄËùÓÐÊý¾Ýʱ£¬ÕâÀï¾ÍÃèÊöÕâÖÖÇéÐΡ£JS MVC¿ò¼Ü¹ÄÀø°Ñ±íÏÖ²ãÂß¼­´Ó·þÎñÆ÷¶ËÒÆ¶¯µ½¿Í»§¶Ë£¬ÊµÏÖÁËRIA£¨Rich-Internet-Apllication£©£¬´«Í³webÓ¦ÓóÌÐòϵĿͻ§»ú/·þÎñÆ÷¼Ü¹¹ºÍJS MVCϵĿͻ§»ú/·þÎñÆ÷¼Ü¹¹¶¼»ùÓÚwebÓ¦Óá£

¿Í»§¶ËÒ»²àµÄMVC¿ÉÒÔ´¦ÀíÕû¸öMVCÕ»¡£Èç¹ûÄãͬʱʹÓ÷þÎñÆ÷ºÍ¿Í»§¶ËMVC£¬ÄÇôÄã»á¸´ÖÆÄãµÄÄ£ÐͺÍ·¾¶¡£¿Í»§¶ËÒ»²àµÄMVC»ù±¾ÉÏÔÊÐíÄ㽫ÄãµÄ·þÎñÆ÷ºÍ¿Í»§¶ËÁ¬½ÓÆðÀ´¡£ÎªÊ²Ã´ÄãµÄ·þÎñÆ÷Òª·¢ËÍÊÓͼ²ã£¿ÎªÊ²Ã´²»·¢ËÍÒÔjsonΪ¸ñʽµÄÄ£ÐͲ¢¼ÓÔØËüµ½¿Í»§¶ËÒ»²à£¬Èÿͻ§¶ËÈ¥äÖȾÊÓͼ¡£ÄãÉõÖÁ¿ÉÒÔÔÚ½«À´ÎªÆä¹æ¶¨Â·ÓÉ¡£ÎªÊ²Ã´·þÎñÆ÷Òª´¦Àí·ÓÉ£¿¿Í»§¶Ë¿ÉÒÔ×öÕâ¸ö¡£½ö½öÔÊÐí¿Í»§¶ËÈ¥·ÃÎÊÄãµÄRESTfulÊý¾Ý¿â¾ÍÐУ¬²¢ÇÒÄã²»ÐèÒªÈκηþÎñÆ÷¶ËµÄMVC¡£

½ÏÁ÷ÐеÄÒ»ÖÖ°üº¬¿Í»§¶Ë·þÎñ¶ËµÄģʽÊÇ ºó¶ËRESTful API ͨ¹ý JSON·¢ËÍÊý¾ÝÄ£ÐÍ ¿Í»§¶ËʹÓÃMVCģʽ ´¦ÀíÓ¦ÓÃ.

Client-side MVC with server-side RESTful API

Data Flow

AngularJSºÍÆäËûJS MVC¿ò¼ÜµÄ¶Ô±È

ÔÚÓëÆäËûJS MVC¿ò¼ÜµÄÕùÕ½ÖУ¬AngularJSÒѾ­Ê¤ÀûÁË¡£ËüÒѾ­Ö¤Ã÷ÁË×Ô¼ºÊÇËùÓÐJS MVC¿ò¼ÜÖÐ×î³ÉÊìµÄ¡£ÏÂÃæÊÇÀ´ÂÛÖ¤µÄÊý¾Ý

ÉçÇøÖ§³Ö

£¨Êý¾ÝÀ´×ÔGithub.com£©

£¨Êý¾ÝÀ´×ÔStackOverflow.com£©

Ëæ×Åʱ¼äÍÆÒÆ£¬ÐËȤµÄÇ÷ÊÆ

£¨2011Äê8ÔÂ-2014Äê6Ô£©

£¨ÉÏÒ»Ä꣩

ʹÓÃͳ¼Æ

 

ÌØÐÔ¶Ô±È

Óû§ÈëÃÅ

¹¤×÷Ç÷ÊÆ

¶Ô±ÈAngularjsºÍÀàËÆDojoµÄÆóÒµ¼¶¹¤¾ß¼¯(Toolkit)

Dojo Toolkit:

Dojo ToolkitÊÇÒ»¸öÖÂÁ¦ÓÚ¼ò»¯¿çƽ̨JavaScript/AjaxÓ¦ÓúÍÍøÕ¾µÄ¿ªÔ´Ä£¿é»¯JavaScriptÀà¿â. DojoÊÇÒ»¸öÃæÏò´ó¹æÄ£¿Í»§¶Ëweb¿ª·¢µÄJavaScript¿ò¼Ü. ÀýÈç, Dojo³éÈ¡³öÒ»¸öÆÁ±Î¸÷ÖÖä¯ÀÀÆ÷²îÒìµÄAPI¼¯ºÏ. ´ËÍâ, DojoµÄ¹¦ÄÜ»¹°üº¬: ¶¨ÒåÁËÄ£¿é»¯´úÂëµÄ¿ò¼Ü, ²¢¹ÜÀíËûÃǵÄÏ໥ÒÀÀµ¹ØÏµ; Ìṩ¹¹½¨¹¤¾ß¼¯, ¿ÉÒÔÓÃÀ´ÓÅ»¯JavaScriptºÍCSS´úÂë, Éú³ÉÎĵµ²¢ÇÒÔËÐе¥²â; Ö§³Ö¹ú¼Ê»¯, ±¾µØ»¯ºÍÎÞÕϰ­(accessibility); ÌṩÁ˷ḻÁËͨÓù¤¾ßÀàºÍÓû§½çÃæ×é¼þ(Widget).

ÉçÇøÖ§³Ö

 

MVC

Angular¿ª·¢ÍŶÓÒѾ­½«MVCÉè¼ÆÄ£Ê½ÒÔ¶àÖÖ·½Ê½ÒýÈëµ½AngularÖÐ, Òò´Ë»áʹµÃ¿ª·¢Ò²±ØÐë¸úËæÕâMVCÉè¼ÆÄ£Ê½. AngularJS²¢Ã»ÓÐÒÔ´«Í³µÄ·½Ê½ÊµÏÖMVC, ¶øÊǸü½Ó½üÓÚMVVM(Model-View-ViewModel), Òò´ËÓÐʱ±»Í³³ÆÎªMV*. MVCÊÇAngularµÄºËÐÄ, AngularΪMVCÉè¼ÆÄ£Ê½ÌṩÁËÔ­ÉúµÄÖ§³Ö, ¿ÉÒÔÇáÒ×½«ÆäÓ¦ÓÃÓÚwebÓ¦ÓóÌÐòµÄ¿ª·¢ÖÐ.

DojoµÄToolkitΪJSÓ¦ÓóÌÐòÌṩÁËʵÏÖMVCµÄ¶ÀÁ¢¹¤¾ß°ü. Dojo²¢Ã»ÓÐΪJSÓ¦ÓóÌÐòÌṩÍ걸µÄMVCʵÏÖ, ¶øÊǸù¾ÝÓ¦ÓóÌÐò×ÔÉíÐèÒª, Ñ¡ÔñÐÔʹÓÃÆäÖеÄMVC¹¤¾ß/×é¼þ. DojoÌṩMVC¹¦ÄܵİüÊÇdojox/mvc.Õâ¸ödojox/mvc°üÖ÷Òª¹Ø×¢¿Í»§¶ËµÄViewµ½ModelµÄÊý¾Ý°ó¶¨, ½öÌṩÁËÔÚÒ»¸öViewÖеÄÊý¾Ý°ó¶¨/¿ØÖÆÆ÷µÄÖ§³Ö, ²¢Î´ÌṩÔÚÓ¦ÓóÌÐò¼¶±ðµÄ¿ç¶à¸öViewµÄÖ§³Ö(ÀýÈç, µ¼º½(Navigation)µÄÖ§³Ö).

ÔÚDojoÖУ¬MVCÓ¦ÓÃÖеļ¶±ð¹Ø×¢µã±ÈÈç·ÓÉ»òÕßµ¼º½µÈ±ØÐëʹÓÃÁíÒ»¸ö°ü(dojox/app)À´´¦Àí£¬¶øÔÚAngularJS¿ò¼ÜÖУ¬ÕâЩ¹Ø×¢µã¶¼ÊÇ¿ò¼Ü×ÔÉí¾ÍÄÜ´¦ÀíµÄ¡£

dojox/mvcÄ£¿éµÄ״̬ÏÖÔÚÈÔÈ»ÊÇ¡°Experimental¡± £¬ËùÒÔËüÈÔÈ»ÊDz»Îȶ¨µÄ£¬ÕýÈçÏÂÃæÕâÆªÎÄÕÂËù˵µÄ(http://dojotoolkit.org/reference-guide/1.10/dojox/index.html#dojox-index)£¬¶øAngularÔòÊÇÒ»¸ö¾­¹ýÁ˸ü¶àµÄÑéÖ¤¡¢Îȶ¨¶ø³ÉÊìµÄJS MVC¿ò¼Ü¡£

SPA

AngularJSÊÇÒ»¸öÁ÷ÐеÄÈ«¹¦ÄܵÄSPA¿ò¼Ü¡£AngularJSµÄһЩ¹ÌÓÐÌØÐÔÖ§³ÖÁ˵¥Ò³ÃæÓ¦ÓõĿª·¢¡£Angularͨ¹ýÏÂÁÐÌØÐÔÀ´Ö§³ÖSPA:

ÄÚǶÊÓͼ(Nested Views)

¿ØÖÆÆ÷(Controller)¼Ì³Ð

·ÓÉ(Routing)

Dojoͨ¹ýÆäDojox/app°üʵÏÖÆä¹¹½¨µ¥Ò³Ó¦ÓõÄÄ¿±ê¡£Õâ¸ö°üÊǸöСÐ͵ÄÓ¦Óÿò¼Ü£¬ÌṩÁËÒ»×éÀ࣬ÓÃÓÚ¹ÜÀí²¿ÊðÔÚÒÆ¶¯É豸»ò×ÀÃæÏµÍ³Éϵĵ¥Ò³ÃæÓ¦ÓõÄÉúÃüÖÜÆÚºÍÐÐΪ¡£¸ÃÓ¦Óÿò¼Ü±»Éè¼Æ³ÉÖ»Ðè¼òµ¥ÅäÖÃÒ»¸öÅäÖÃÎļþ£¬ÓÉDZÔÚµÄǶÌ×ÊÓͼ×é³ÉÓ¦Ó㬲¢±ãÓÚÕâЩÊÓͼ֮¼äµÄ¹ý¶É¡£

ʹÓÃAngular¿ª·¢µ¥Ò³ÃæÓ¦Ó㬿ÉÒԺܺõÉÕû¸ö¿ò¼Ü£¬Í¬Ê±¿ò¼ÜÌṩÁËMVC¹¦ÄÜ£¬ÀýÈç·ÓÉ£¬¿ØÖÆÆ÷£¬ÊÓͼºÍµ¥Ò³ÃæÓ¦ÓÃģʽÊǽôÃܽáºÏµÄ¡£DojoÖеÄDojox/appÔòÊÇÒ»¸ö¶ÀÁ¢µÄ×é¼þ£¬²¢Î´½«µ¥Ò³ÃæÓ¦ÓÃÓëMVC½ôÃܽáºÏ£¬Òò´Ë£¬Dojox/mvcÔÚʹÓõÄʱºò±ØÐëͨ¹ýÅäÖÃDojox/appÀ´¹ÜÀí½â¾ö£¬¶øÕâÔÚAngularÖÐÊÇ×Ô´øµÄ£¬¶øÇÒÈÝÒ×ʹÓõġ£

UI ¹Ò¼þºÍ¿â

DojoÌṩÁ˵ײãϵͳËùÖ§³ÖµÄ´óÁ¿µÄwidget(Óû§½Ó¿Ú×é¼þ).DojoµÄUI¿â³ÆÎªDijit,ʹÓÃÒ»¸öµ¥¶ÀµÄÃüÃû¿Õ¼ä"dijit".

AngularȷʵÌṩÁËÒ»¸öUI widget¹¤¾ß¼¯,µ«ÊÇûÓÐDojoËùÌṩµÄ¹ã·º.AngularÔÊÐíËæÒâʹÓÃÁ÷ÐеĵÚÈý·½UI¿â.ËüÌṩÁËÃûΪ"Angular-UI"µÄUI¿â,Õâ¸ö¿â°üº¬¸÷ÖÖÁ÷ÐеĵÚÈý·½¿âµÄwidgetºÍÄ£¿é.ÆäÖÐ,UI-BootstrapÄ£¿é½«Bootstrcp¿ò¼ÜµÄËùÓÐwidget×÷ΪAngularÖ¸Áî.

ÓÉÓÚDojoÊÇÒ»¸ö¹¤¾ß¼¯,ËùÒÔËüµÄÈÎÒâÒ»¸ö¹¤¾ß¶¼¿ÉÒÔ²»ÒÀÀµÓÚDojoÉú̬ϵͳ¶øµ¥¶ÀʹÓÃ.Òò´Ë,DojoµÄDijitºÍÆäËûÁ÷ÐеÄUIºÍwidget¿â,ÈçJqueryUIºÍÆäËûjquery»òjs²å¼þ,¶¼¿ÉÒÔ½«ËüÃǰü×°³ÉÖ¸Áîºó,ÔÚAngularÓ¦ÓóÌÐòÖÐʹÓÃ.

RESTful Interation

AngularJSʹÓÃangular-resource(ngResource)Ä£¿éÀ´ÌṩRESTful½»»¥¹¦ÄÜ£¬¸ÃÄ£¿é±íʾһ¸öREST×ÊÔ´²¢Ìṩ°ïÖú·½·¨(GET/POST/PUT/DELETE)À´ÇáËɵÄʵÏÖRESTful½»»¥¡£ÁíÍâÒ²ÌṩÆäËüµÄ¿Éѡģ¿é¡£

DojoʹÓÃdojo/store/JsonRestÀ´ÌṩRESTful½»»¥ÄÜÁ¦¡£ËüÊÇÒ»¸öÇáÁ¿¼¶µÄ¶ÔÏó´æ´¢ÊµÏÖ£¬¸øÄÇЩ¾ßÓÐRESTfulÊý¾Ý½»»¥ÄÜÁ¦µÄHTTP¿Í»§¶ËÀ´Ê¹Óá£

AngularJSºÍDojo¶¼ÌṩÁË´óÌåÏ൱µÄRESTful½»»¥ÄÜÁ¦¡£

¿Éά»¤ÐÔ

AngularJSÌṩÁËÒ»Ð©ÌØÐÔ,ÈÃÓµÓдóÁ¿´úÂë»ùÊýµÄÓ¦ÓóÌÐò±äµÃ¿Éά»¤.ÕâÐ©ÌØÐÔÈçÏÂ:

AngularJS ¹ÄÀøºÍÔöÇ¿×îС»¯DOM²Ù×÷,ÍÆ¼öÖ»ÔÚHTMLÖÐʹÓõÄÖ¸ÁîÖÐÕ¹ÏÖDOM²Ù×÷.ÕâÑù¿ÉÒÔ±ÜÃâÓÉÓÚ´óÁ¿Ê¹ÓÃDOMºÍDOMʼþµÈ²úÉúµÄ"Òâ´óÀûÃæ"ʽµÄ´úÂë.ÕâЩ´úÂëÔÚ´óµÄwebÓ¦ÓóÌÐòÖÐÄÑÓÚµ÷ÊԺ͸ú×Ù.AngularÖ¸ÁîҲΪÔö¼ÓÁËHTMLÓïÒå.

AngularÌṩÁËһЩÀàËÆÄ£¿éµÄÌØÐÔ,ËüÔÊÐíÓ¦ÓóÌÐò¿ª·¢Õß,½«²»Í¬²¿·ÖµÄÓ¦ÓóÌÐòÂß¼­´ò°ü³ÉÄ£¿é,ÒÔÔö¼ÓÓ¦ÓóÌÐòµÄÄ£¿é»¯ºÍ¿Éά»¤ÐÔ.

AngularÌṩÁËDI (ÒÀÀµ×¢Èë) Éè¼ÆÄ£Ê½µÄ¹ÌÓÐÌØÐÔ,Ëü°ïÖúÓ¦ÓóÌÐò±£³ÖÄ£¿é»¯ºÍÒ×¶ÁÐÔ.

ÏîÄ¿½á¹¹¿ò¼Ü¶ÔÓÚAngularJSÒѾ­¿ÉÓÃ,¿ÉÒÔÓÃÀ´¿ª·¢¿Éά»¤µÄÆóÒµwebÓ¦ÓóÌÐò.

DojoûÓÐÌṩ×îС»¯DOM²Ù×÷µÄ¼¼Êõ,ÕâÑù,¶ÔÓÚ´óÐÍwebÓ¦ÓóÌÐò,DOM²Ù×÷Ôö¼ÓÁËÇ÷ÏòÓÚ¡°Òâ´óÀûÃæ¡±Ê½´úÂëµÄ¿ÉÄÜÐÔ,Ò²Ó°ÏìÁËÓ¦ÓóÌÐòµÄ¿Éά»¤ÐÔ. DojoÖ§³ÖÄ£¿é(AMD),µ«ÊÇûÓÐΪwebÓ¦ÓóÌÐòÌṩDIģʽ.

Êý¾Ý°ó¶¨ºÍÊÓͼģ°å»¯

ÉÌÒµwebÓ¦ÓóÌÐòµÄÊý¾ÝÖÐÐÄÔ­ÔòÒªÇóÀ´×ÔÄ£Ð͵ÄÊý¾ÝºÍUIͬ²½¸üÐÂ.¶ÔÓÚÒ»¸öÉÌÒµwebÓ¦ÓóÌÐò,¶¯Ì¬ÊÓͼ±ØÐëÒÀÀµÓÚÄ£ÐÍÊý¾Ý¶ø´´½¨.AngularÌṩÁËÏ൱¼òµ¥ºÍÒÑÓеļ¼Êõ,ÉùÃ÷ʽµÄ±àд°ó¶¨µ½Ä£¿éÊý¾ÝµÄ¶¯Ì¬ÊÓͼ.ÔÚAngularÀïÃæ,ÊÓͼģ°å»¯Ê¹Óðüº¬AugularרÓеÄÔªËØºÍÊôÐÔµÄHTML±àд.ʹÓÃHTML×÷Ϊģ°å»¯ÓïÑÔ,¶ÔÓÚ¿ª·¢Õß¶øÑÔ,¸üÒ×ÓÚ´´½¨ºÍÀí½âÊÓͼ.Angular½áºÏÁËÀ´×ÔÄ£ÐͺͿØÖÆÆ÷µÄÐÅϢģ°å,ÓÃÀ´äÖȾÓû§ÔÚä¯ÀÀÆ÷Öп´µ½µÄ¶¯Ì¬ÊÓͼ.AngularʹÓÃÁËË«Ïò°ó¶¨ÌØÐÔÒÔ±£³ÖUIºÍÄ£Ð͵Äͬ²½.

ͬÑùµÄÌØÐÔÒ²¿ÉÒÔÔÚDojoÖÐʹÓÃ,µ«ÊÇ,ËüÃǺÍDojo¹¤¾ß¼¯µÄÁ÷³Ì²»Ì«Ð­µ÷,ҲȱÉÙÁËÕâ¸öÌØÐԵļòµ¥ºÍϸ΢»¯.

ÉùÃ÷ʽµÄÓû§½Ó¿Ú

AngularJS ÌáÉýÁËHTMLÊÓͼµÄ ÉùÃ÷ʽÉè¼Æ£¨declarative design£©¡£ÔÚÊÓͼ²ã£¬Ê¹ÓÃHTML×÷Ϊģ°åÓïÑÔÈÃËü±äµÃÏ൱ÈÝÒ׿ª·¢´´½¨ÊÓͼ£¬Í¬Ê±Ò²±äµÃÒ×ÓÚÀí½â£¬ÔÚÊÓͼÓïÒåÉÏÒ²ÓÐÀûÓÚÆäËû¿ª·¢Õß¡£AngularÌṩһ¸öÌØÐÔ£¬±»³ÆÎª¡°directives¡±£¬Ëü¿ÉÒÔ¸ù¾ÝÁìÓòµÄÐèÒª£¬À´Ìá¸ßHTMLµÄ¶¨ÖÆÐÔ¡£

ÉùÃ÷ʽÉè¼Æ£¨declarative design£©¿ÉÒÔÔÚDojoÓ¦ÓÃÖÐͨ¹ýʹÓÃdata-*ÊôÐÔÔËÐУ¬µ«ÊÇËü¸úAngularµÄ¡°directives¡±ÌØÐÔ²»Ò»Ñù¡£

Ö§³Ö AngularJS ÄܸüºÃµÄ½øÐÐ IDE ºÍä¯ÀÀÆ÷µ÷ÊÔ

Netbeans IDEҲΪAngularJSÌṩÁËÄÚǶµÄÖ§³Ö,ËüÈÃʹÓÃAngularJS¿ÉÒÔ¼òµ¥µÄ¿ª·¢webÓ¦ÓóÌÐò.(http://wiki.netbeans.org/NetBeans_80_NewAndNoteworthy#JavaScript)

AngularÍŶÓҲΪGoogle Chromeä¯ÀÀÆ÷´´½¨ÁËÒ»¸öÃûΪBatarangµÄ²å¼þ,ËüÌá¸ßÁËʹÓÃAngular¿ª·¢Ó¦ÓóÌÐòµÄµ÷ÊÔÌåÑé.Õâ¸ö²å¼þÖ¼ÔÚ¼ò»¯ÐÔÄÜÆ¿¾±µÄ¼ì²â,ÒÔ¼°ÌṩGUIÀ´µ÷ÊÔÓ¦ÓóÌÐò.

ʹÓÃDojoµÄʱºòºÜÄÑÔÚ´óÐÍÍŶÓÖб£³Ö´úÂëµÄͳһ

DojoÖеıà³ÌÄ£ÐÍÊÇʹÓÃwidget,µ±ÍØÕ¹ËüÃǵÄʱºò,ËüÃǽ«ÄãµÄ´úÂë°üΧס.ÄãÈÔÈ»ÔÚ±à³ÌÀ´²Ù×÷DOM,Á¬½Ó/×¢²á/È¡Ïû×¢²áʼþ.Dojox/mvc²¢Ã»ÓÐÉú³ÉÄ£¿é»¯µÄ´úÂë.ÔÚDojoÖÐÓжàÓà2ÖÖ»ò3Öֵķ½Ê½×öͬÑùµÄÊÂÇé.ÆäÖÐһЩÉõÖÁÊÇÔã¸âµÄʵ¼ù,µ«ÊDz¢Ã»Óб»Çå³ý.ºÜÄÑÔÚ´óÐÍÍŶÓÖмÓÇ¿´úÂëµÄͳһ,ÒòΪDojoûÓÐΪģ¿é»¯ºÍͳһ»¯µÄwebÓ¦ÓóÌÐòÌṩÕûÌåµÄ¿ò¼Ü.

AngularJSÌṩÁËÒ»¸öÈ«ÃæµÄ¿ò¼Ü£¬°üº¬MVCµÄºËÐļ°¹æ»®Ä£ÐÍ£¬¾ßÓоùÔÈÐÔ£¬¿ÉÀí½âÐÔºÍÄ£¿é»¯¡£AngularJSֻΪģÐÍÌṩǶÌ׵ĿØÖÆÆ÷¡£Á¼ºÃµÄ²âÊÔÓ¦ÓóÌÐò¸ôÀëµÄ²¿·Ö¡£¶¨ÒåÁ¼ºÃµÄÏà¹ØÐÔ¡£´ó²¿·Öʱ¼äÄ㲻д´úÂë²Ù×ÝDOM×ÔÉí¡£µ«Äã¿ÉÒÔÔÚ´´½¨Ö¸Á×é¼þ£©Ê±ÕâÑù×ö¡£Ã»ÓÐÃüÃû¿Õ¼ä»ìÂÒ¡£ÄãµÄ¶ÔÏó´ÓÀ´²»»á³öÏÖÔÚÈ«¾ÖÃüÃû¿Õ¼äÖУ¬ºÃÏñÒ»Çж¼·â×°ÔÚAngularµÄÓ¦ÓÃÖС£MVCģʽÊǺËÐÄ¡£ÄãµÄÓ¦ÓóÌÐòÊÇÒ»Ì׿ØÖÆÆ÷£¬·þÎñ£¬¹ýÂËÆ÷ºÍ×Ô¶¨ÒåÖ¸Áî¡£

×ܽá

±¾ÎÄÒâͼÈÃÎÒÃÇÖªÏþwebÓ¦ÓõÄδÀ´¾ÍÔÚÑÛǰ¡£²¢³¢ÊÔ¸ÅÊöÒ»¸öÕýÈ·µÄÓÐÖ¸µ¼ÒâÒåµÄ·½·¨À´½á¹¹»¯ºÍÉè¼ÆÒ»¸öwebÓ¦Óã¬Ê¹Ö®ÄÜÊÊÓ¦webÊÀ½ç¡£±¾ÎĸÅÊöÁ˿ͻ§¶ËJS MV*¿ò¼ÜµÄʹÓ㬲¢ËµÃ÷ÁËΪʲôÓÿͻ§¶ËMVC¿ò¼Ü×éÖ¯µÄwebÓ¦ÓúÜÊʺÏʵÏÖwebÓ¦Óá£

±¾Îļ¯ÖзÖÎöºÍ×ܽáÁËÔÚ³ÉÊìµÄ¿Í»§¶ËMVC¿ò¼ÜϵĶԱȣ¬²¢ÌṩһЩ¶Ô±ÈµÄͳ¼ÆÐÅÏ¢£¬°ïÖúÄãºÍÄãµÄÍŶӾö²ß£¬Ñ¡Ôñ³öÊʺÏÄãµÄwebÓ¦ÓõĿͻ§¶ËMVC¿ò¼Ü¡£

±¾ÎÄÆ«ÏòÓÚAngularJS¿ò¼Ü£¬Äã¿ÉÒÔÓв»Í¬µÄÆ«ºÃ¡£¶ÔÎÒÀ´ËµAngularJSÊÇÎÒ¸öÈ˵ÄϲºÃËùÔÚ£¬ÔÚÎÒÑÛÖÐÊÇÆäËû¿Í»§¶ËMVC¿ò¼ÜËù²»ÄÜÆ¥µÐµÄ¡£

 
   
2206 ´Îä¯ÀÀ       27
Ïà¹ØÎÄÕÂ

Éî¶È½âÎö£ºÇåÀíÀôúÂë
ÈçºÎ±àд³öÓµ±§±ä»¯µÄ´úÂë
ÖØ¹¹-ʹ´úÂë¸ü¼ò½àÓÅÃÀ
ÍŶÓÏîÄ¿¿ª·¢"±àÂë¹æ·¶"ϵÁÐÎÄÕÂ
Ïà¹ØÎĵµ

ÖØ¹¹-¸ÄÉÆ¼ÈÓдúÂëµÄÉè¼Æ
Èí¼þÖØ¹¹v2
´úÂëÕû½àÖ®µÀ
¸ßÖÊÁ¿±à³Ì¹æ·¶
Ïà¹Ø¿Î³Ì

»ùÓÚHTML5¿Í»§¶Ë¡¢Web¶ËµÄÓ¦Óÿª·¢
HTML 5+CSS ¿ª·¢
ǶÈëʽC¸ßÖÊÁ¿±à³Ì
C++¸ß¼¶±à³Ì