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

1Ôª 10Ôª 50Ôª





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



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓƵ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Model Center   Code  
»áÔ±   
   
 
     
   
 ¶©ÔÄ
  ¾èÖú
΢ǰ¶Ë¸ÅÄî
 
   次浏览      
  2019-7-11
 
±à¼­ÍƼö:
±¾ÎÄÀ´×Ôcsdn£¬±¾ÎÄÃèÊöÁ˲ÉÓò»Í¬ JavaScript ¼¼Êõ¿ò¼ÜµÄ¶à¸öÍŶÓÖÐЭͬ¹¹½¨Ò»¸öÏÖ´ú»¯Ç°¶Ë Web Ó¦ÓÃËùÐèÒªµÄ¼¼Êõ¡¢²ßÂԺͷ½·¨¡£

ʲôÊÇ΢ǰ¶Ë£¿

΢ǰ¶ËÕâ¸öÊõÓï×î³õÀ´×Ô 2016 ÄêµÄ ThoughtWorks ¼¼ÊõÀ×´ï[ https://www.thoughtworks.com/radar/techniques/micro-frontends ]£¬Ëü½«Î¢·þÎñµÄ¸ÅÄîÀ©Õ¹µ½ÁËÇ°¶ËÁìÓò¡£Ä¿Ç°µÄÇ÷ÊÆÊǹ¹½¨Ò»¸ö¹¦ÄܷḻÇÒÇ¿´óµÄÇ°¶ËÓ¦Ó㬼´µ¥Ò³ÃæÓ¦ÓÃ(SPA)£¬Æä±¾ÉíÒ»°ã¶¼Êǽ¨Á¢ÔÚÒ»¸ö΢·þÎñ¼Ü¹¹Ö®ÉÏ¡£Ç°¶Ë²ãͨ³£ÓÉÒ»¸öµ¥¶ÀµÄÍŶӿª·¢£¬Ëæ×Åʱ¼äµÄÍÆÒÆ£¬»á±äµÃÔ½À´Ô½ÅÓ´ó¶øÄÑÒÔά»¤¡£Õâ¾ÍÊÇ´«ËµÖеÄÇ°¶Ë¾ÞÎÞ°Ô(Frontend Monolith) [ https://www.youtube.com/watch?v=pU1gXA0rfwc ]¡£

΢ǰ¶Ë±³ºóµÄÀíÄîÊǽ«Ò»¸öÍøÕ¾»òÕß Web App µ±³ÉÌØÐÔµÄ×éºÏÌ壬ÿ¸öÌØÐÔ¶¼ÓÉÒ»¸ö¶ÀÁ¢µÄÍŶӸºÔð¡£Ã¿¸öÍŶӶ¼ÓÐÉó¤µÄÌض¨ÒµÎñÁìÓò»òÊÇËü¹ØÐĵÄÈÎÎñ¡£ÕâÀһ¸öÍŶÓÊÇ¿çÖ°Äܵģ¬Ëü¿ÉÒԶ˵½¶Ë£¬´ÓÊý¾Ý¿âµ½Óû§½çÃæÍêÕûµÄ¿ª·¢ËüËù¸ºÔðµÄ¹¦ÄÜ¡£

È»¶ø£¬Õâ¸ö¸ÅÄî²¢²»ÐÂÏÊ£¬¹ýÈ¥Ëü½ÐÕë¶Ô´¹Ö±ÏµÍ³µÄÇ°¶ËÒ»Ì廯»ò¶ÀÁ¢ÏµÍ³¡£²»¹ý΢ǰ¶ËÏÔÈ»ÊÇÒ»¸ö¸ü¼ÓÓѺò¢ÇÒ²»ÄÇô±¿ÖصÄÊõÓï¡£

Ò»Ì廯µÄÇ°¶Ë

´¹Ö±»¯×éÖ¯·½Ê½

ʲôÊÇÏÖ´ú»¯Ç°¶ËÓ¦ÓÃ

ÔÚ½éÉÜÖÐÎÒʹÓÃÁË´ë´Ç¡°¹¹½¨Ò»¸öÏÖ´ú»¯Ç°¶ËÓ¦Óá±£¬ÈÃÎÒÃÇÏȸø³öһЩÕâ¸öÊõÓïÓйصÄÉ趨¡£

´ÓÒ»¸ö¸ü¹ã·ºµÄ½Ç¶ÈÀ´¿´£¬Aral Balkan Ôøд¹ýÒ»¸öÏà¹ØµÄ²©¿Í£¬Ëû°ÑÕâ¸ö¸ÅÄî½Ð×öÎĵµ-Ó¦ÓÃÁ¬ÐøͳһÌå¡£ËûÌá³öÁËÒ»¸ö»¬¶¯±ÈÀý³ßµÄ¸ÅÄÔÚ±ÈÀý³ßµÄ×î×ó±ßÊÇÒ»¸öÍøÕ¾£¬Óɾ²Ì¬Îĵµ¹¹³É£¬Í¨¹ýÁ´½ÓÏ໥Á¬½Ó£»×îÓÒ±ßÊÇÒ»¸ö´¿ÐÐΪÇý¶¯µÄ£¬¼¸ºõûÄÚÈݵÄÓ¦ÓóÌÐò£¬±ÈÈçÔÚÏßͼƬ±à¼­Æ÷¡£

Èç¹ûÄã°ÑÄãµÄÏîÄ¿¶¨Î»ÔÚÕâ¸ö·¶Î§µÄ×ó²à£¬ÄÇÔÚ Web ·þÎñÆ÷¼¶±ðµÄ¼¯³É»á±È½ÏºÏÊÊ¡£ÔÚÕâ¸öÄ£ÐÍÖУ¬·þÎñÆ÷»áÊÕ¼¯Ò³ÃæÖи÷¸ö×é¼þµÄÄÚÈݲ¢½«Æä HTML ×Ö·û´®Á¬½ÓÆðÀ´·µ»Ø¸øÓû§¡£ÄÚÈݸüÐÂÔò²ÉÓôӷþÎñ¶ËÖØмÓÔصķ½Ê½»òÕßͨ¹ý ajax ½øÐв¿·ÖÌæ»»¡£Gustaf Nilsson Kotte Õë¶ÔÕâ¸öÖ÷Ìâд¹ýһƪ×ÛºÏÐÔµÄÎÄÕ¡£

µ±Óû§½çÃæÐèÒªÌṩ¼°Ê±·´À¡Ê±£¬¼´Ê¹²ÉÓò»¿É¿¿Á¬½Ó£¬Ò»¸ö´¿´âµÄ·þÎñ¶ËäÖȾÍøÕ¾Ò²²»¹»Óá£ÎªÁËʵÏÖ Optimistic UI »ò Skeleton Screens ÕâÑùµÄ¼¼ÊõÄãÐèÒªÔÚÉ豸±¾Éí¶Ô UI ½øÐиüС£Google Ìá³öµÄ PWA ÇÉÃîµÄÃèÊöÁËÕâÖÖ¼æ¹Ë¸÷·½µÄ×ö·¨£¨½¥½øÔöÇ¿£©£¬Í¬Ê±Ìṩ App Ò»ÑùµÄÐÔÄÜÌåÑé¡£ÕâÖÖÀàÐ͵ÄÓ¦ÓÃÔÚÉÏÃæµÄ±ÈÀý³ßÖÐλÓÚÎĵµ-Ó¦ÓÃÁ¬ÐøͳһÌåÖмäµÄij¸öµØ·½¡£ÔÚÕâÀï´¿´âµÄ·þÎñ¶Ë·½°¸ÒѾ­²»ÔÙ¹»Óã¬ÎÒÃDZØÐ뽫Ö÷ÒªÂß¼­·Åµ½ä¯ÀÀÆ÷ÖУ¬ÕâÕýÊDZ¾ÎÄ»áÖصãÃèÊöµÄ¡£

΢ǰ¶Ë±³ºóµÄºËÐÄÀíÄî

¼¼ÊõÎÞ¹Ø

ÿһ¸öÍŶÓÔÚÑ¡ÔñºÍÉý¼¶ËûÃǵļ¼ÊõջʱӦ¸ÃÄܹ»×öµ½²»ÐèÒªºÍÆäËûÍŶӽøÐжԽӡ£Custom Elements ÊÇÒ»¸öÒþ²ØʵÏÖϸ½ÚµÄ·Ç³£ºÃµÄ·½·¨£¬Í¬Ê±Äܹ»¶ÔÍâÌṩһ¸öͳһ½Ó¿Ú¡£

¸ôÀëÍŶӴúÂë

¼´Ê¹ËùÓеÄÍŶӶ¼Ê¹ÓÃͬÑùµÄ¿ò¼Ü£¬Ò²²»Òª¹²ÏíÒ»¸öÔËÐÐʱ¡£¹¹½¨¶ÀÁ¢µÄÓ¦Ó㬲»ÒªÒÀÀµÓÚ¹²Ïí״̬»òÈ«¾Ö±äÁ¿¡£

½¨Á¢¸÷ÍŶӵÄǰ׺

µ±¸ôÀëÒѾ­²»¿ÉÄÜʱҪÉ̶¨Ò»¸öÃüÃû¹æ·¶¡£¶Ô CSS¡¢Events¡¢Local Storage ºÍ Cookie ½¨Á¢ÃüÃû¿Õ¼äÀ´±ÜÃâÅöײ²¢ÉùÃ÷ËùÓÐȨ¡£

±¾µØä¯ÀÀÆ÷ÌØÐÔÓÅÏÈÓÚ×Ô¶¨Òå API

²ÉÓÃä¯ÀÀÆ÷ʼþ½øÐÐÊý¾Ý¹µÍ¨¶ø²»Êǹ¹½¨Ò»¸öÈ«¾ÖµÄ·¢²¼Õß-¶©ÔÄÕßϵͳ¡£Èç¹ûÄãȷʵÐèÒª¹¹½¨Ò»¸ö¿çÍÅ¶ÓµÄ API£¬ÄǾÍÈ·±£ËüÔ½¼òµ¥Ô½ºÃ¡£

¹¹½¨×ÔÊÊÓ¦ÍøÕ¾

¼´Ê¹ JavaScript Ö´ÐÐʧ°Ü»òÊǸù±¾Ã»ÓÐÖ´ÐУ¬ÄãµÄÌØÐÔÒ²Ó¦¸ÃÊÇÄܹ»Ê¹Óõġ£²ÉÓÃͨÓÃäÖȾ»ò½¥½øʽÔöÇ¿À´Ìá¸ß¿É¸ÐÖªµÄÐÔÄÜ¡£

DOM ¾ÍÊÇ API

×Ô¶¨ÒåÔªËØ Custom Elements ÃæÏò Web ×é¼þ¹æ·¶Öл¥²Ù×÷·½Ã棬ÔÚä¯ÀÀÆ÷ÖÐÊÇÒ»¸öÊÊÓÃÓÚ¹¦Äܼ¯³ÉµÄ»ù±¾ÔªËØ¡£Ã¿¸öÍŶӲÉÓÃ×Ô¼ºÑ¡ÔñµÄ Web ¼¼Êõ¹¹½¨ËûÃǵÄ×é¼þ£¬²¢½«ËüÃÇ·â×°µ½Ò»¸ö ×Ô¶¨ÒåÔªËØ ÖÐ(±ÈÈç <order-minicart></order-minicart> )¡£Õâ¸öÌض¨ÔªËØµÄ DOM ÉùÃ÷(±êÇ©Ãû¡¢ÊôÐÔºÍʼþ)¶ÔÓÚÆäËûÍŶÓÀ´ËµÌåÏÖΪһ¸öЭ¶¨»òÕ߽й«¹² API¡£ÕâÑù×öµÄºÃ´¦ÊÇÆäËûÈË¿ÉÒÔʹÓÃÕâ¸ö×é¼þ¼°Æ书Äܶø²»ÐèÒªÖªµÀʵÏÖϸ½Ú£¬ËûÃÇÖ»ÐèÒªÄܹ»ºÍ DOM ½»»¥¼´¿É¡£

µ«½ö½ö×Ô¶¨ÒåÔªËØÊDz»ÄÜÂú×ã½â¾ö·½°¸µÄËùÓÐÐèÇóµÄ¡£ÎªÁË´¦Àí½¥½øÔöÇ¿¡¢Í¨ÓÃäÖȾ»ò·ÓÉÎÒÃÇ»¹ÐèÒªÈí¼þµÄÆäËû²¿·Ö¡£

±¾ÎÄ·ÖΪÁ½²¿·Ö¡£Ê×ÏÈÎÒÃÇ»á½éÉÜÒ³Ãæ×éºÏ(Page Composition) ¡ª¡ª ÈçºÎʹÓò»Í¬ÍŶÓÌṩµÄ×é¼þ×éºÏ³ÉÒ»¸öÒ³Ã档ȻºóÎÒÃÇ»á¸ø³öһЩʾÀýչʾ¿Í»§¶ËÒ³Ãæת»¯(Page Transition)µÄʵÏÖ¡£

Ò³Ãæ×éºÏ

³ýÁ˲ÉÓò»Í¬¿ò¼Ü±àдµÄ¿Í»§¶Ë»ò·þÎñ¶Ë´úÂ뼯³É£¬»¹ÓкܶัÖ÷ÌâÐèÒªÌÖÂÛ£º¸ôÀë jsµÄ»úÖÆ¡¢¹æ±Ü CSS ³åÍ»¡¢°´Ðè¼ÓÔØ×ÊÔ´¡¢²»Í¬ÍŶӹ²Ïí¹«¹²×ÊÔ´¡¢´¦ÀíÊý¾Ý»ñÈ¡ºÍ˼¿¼Ìṩ¸øÓû§µÄ¼ÓÔØ״̬¡£ÎÒÃǽ«»áÒÀ´ÎÌÖÂÛÕâЩÖ÷Ìâ¡£

»ù±¾Ô­ÐÍ

ÈçϵÄÍÏÀ­»úÄ£ÐÍÉ̵êµÄ²úÆ·Ò³Ã潫»á×÷ΪºóÐøʾÀýµÄ»ù´¡¡£

Õâ¸öÒ³ÃæÖ÷Òª¹¦ÄÜÊÇͨ¹ýÒ»¸ö±äÁ¿Ñ¡ÔñÆ÷ÔÚÈý¸ö²»Í¬ÍÏÀ­»úÄ£ÐÍÖ®¼ä½øÐÐÑ¡Ôñת»»£¬±äÁ¿¸Ä±äʱ²úƷͼƬ¡¢Ãû³Æ¡¢¼Û¸ñºÍÍƼö¶¼»á¸üС£»¹ÓÐÒ»¸ö¹ºÂò°´Å¥£¬µã»÷ºó»á½«Ñ¡ÖеÄÄ£ÐÍÌí¼Óµ½¹ºÎï³µÖУ¬Í¬Ê±¶¥²¿µÄÃÔÄ㹺Îï³µÒ²»áÏàÓ¦¸üС£

ËùÓÐµÄ HTML Ò³Ã涼ͨ¹ý´¿ JavaScriptºÍ ES6 Ä£°å×Ö·û´®ÔÚ¿Í»§¶ËÉú³É£¬Ã»ÓÐÈκÎÒÀÀµ¡£´úÂëʹÓÃÒ»¸ö¼òµ¥µÄ״̬/±ê¼Ç·ÖÀ뷽ʽ£¬Ò»µ©Óб仯Õû¸ö HTML Ò³Ã涼»áÖØÐÂäÖȾ ¡ª¡ª ûÓÐìÅ¿áµÄ DOM ¶Ô±È¹¦ÄÜ£¬Ò²ÔÝʱûÓÐͨÓÃäÖȾ¡£µ±È»Ò²Ã»ÓÐÍŶӷÖÀë ¡ª¡ª ËùÓдúÂ붼ÔÚÒ»¸ö js/css ÎļþÖС£

¿Í»§¶Ë¼¯³É

ÔÚÈçÏÂʾÀýÖУ¬Õâ¸öÒ³Ãæ±»·Ö¸ô³É²»Í¬µÄ×é¼þºÍƬ¶Î£¬·Ö±ð±»Èý¸ö²»Í¬µÄÍŶӸºÔð¡£½»Ò××é(À¶É«)¸ºÔðËùÓиú¸¶ÕËÁ÷³ÌÓйصÄÊÂÇé ¡ª¡ª Ò²¾ÍÊǹºÂò°´Å¥ºÍÃÔÄ㹺Îï³µ¡£ÍƼö×é(ÂÌÉ«)¸ºÔðÒ³ÃæÖеIJúÆ·ÍƼö²¿·Ö¡£Ò³Ãæ±¾ÉíÔòÓɲúÆ·×é(ºìÉ«)¸ºÔð¡£

²úÆ·×é¾ö¶¨Äĸö¹¦Äܵ㱻²ÉÓÃÒÔ¼°¸Ã¹¦ÄÜÔÚÒ³Ãæ²¼¾ÖµÄλÖá£Ò³Ãæ°üº¬µÄÐÅÏ¢¿ÉÒÔÓɲúÆ·×é×ÔÉíÌṩ£¬±ÈÈç²úÆ·Ãû³Æ¡¢Í¼Æ¬ºÍ¿É²ÉÓõIJÎÊý£¬µ«»¹¿ÉÒÔ°üÀ¨ÆäËûÍŶÓÌṩµÄƬ¶Î(×Ô¶¨ÒåÔªËØ)¡£

ÈçºÎ´´½¨Ò»¸ö×Ô¶¨ÒåÔªËØ

ÈÃÎÒÃǰѹºÂò°´Å¥×÷Ϊһ¸öʾÀý¡£²úÆ·×é¼òµ¥µÄ½« <blue-buysku="t_porsche"></blue-buy> ¼ÓÈëµ½Ò³ÃæÖÐÆÚÍûµÄλÖþͿÉÒÔʹÓÃÕâ¸ö°´Å¥ÁË¡£ÒªÈÃÕâ¸ö°´Å¥Æð×÷Ó㬽»Ò××黹ÐèÒªÔÚÒ³ÃæÖÐ×¢²áÔªËØ blue-buy¡£

class BlueBuy
extends HTMLElement {
constructor() {
super();
this.innerHTML = ` < button type = "button" > buy
for 66,
00€ < /button>`;
}
disconnectedCallback() { ... }
}
window.customElements.define('blue-buy', BlueBuy);

ÏÖÔÚÿµ±ä¯ÀÀÆ÷Óöµ½Ò»¸öÐ嵀 blue-buy ±êǩʱ£¬¶¼»áµ÷ÓÃÕâ¸ö¹¹ÔìÆ÷¡£ÆäÖУ¬ this ÊÇÕâ¸ö×Ô¶¨ÒåÔªËØ DOM ¸ù½ÚµãµÄÒýÓá£ËùÓбê×¼ DOM ÔªËصÄÊôÐԺͷ½·¨¶¼¿ÉÒÔʹÓ㬱ÈÈç innerHTML »ò getAttribute()¡£

¸ù¾Ý±ê×¼ÎĵµµÄ¶¨Ò壬µ±ÃüÃû×Ô¶¨ÒåÔªËØʱΨһµÄÐèÇóÊÇÃû³ÆÖбØÐë°üº¬Ò»¸öÆÆÕۺŠ- ÒÔÈ·±£ºÍδÀ´Ð嵀 HTML ±êÇ©½øÐмæÈÝ¡£ÔÚºóÃæµÄʾÀýÖÐÔòʹÓÃÁË [team_color]-[feature] ÃüÃû¹æ·¶¡£ÍŶÓÃüÃû¿Õ¼äÔ¤·ÀÁËÅöײ£¬ÕâÖÖ·½·¨ÈÃÒ»¸ö¹¦ÄܵãµÄȨÔð±äµÃ¸ü·ÖÃ÷£ºÖ»Òª¿´¿´ DOM ¾ÍÖªµÀÁË¡£

¸¸×ÓÔªËØͨÐÅ / DOM ÐÞ¸Ä

µ±Óû§ÔÚ±äÁ¿Ñ¡ÔñÆ÷ÖÐÑ¡ÔñÁËÁíÍâÒ»¸öÍÏÀ­»úʱ£¬¹ºÂò°´Å¥±ØÐëÏàÓ¦µÄ½øÐиüС£Òª´ïµ½ÕâÖÖЧ¹û£¬²úÆ·×éÖ»ÐèÒª´Ó DOM ÖÐÒƳýÏàÓ¦ÔªËØ£¬²¢²åÈëÒ»¸öеġ£

container.innerHTML;
// => <blue-buy sku="t_porsche">...</blue-buy>
container.innerHTML = '<blue-buy sku="t_fendt"></blue-buy>';

ÀÏÔªËØµÄ disconnectedCallback ·½·¨»á±»Í¬²½µ÷ÓýøÐÐһЩÇåÀí×ÊÔ´µÄ²Ù×÷±ÈÈçÒƳýʼþ¼àÌýÆ÷¡£È»ºóд´½¨µÄ t_fendt ÔªËØµÄ constructor »á±»µ÷Óá£

ÁíÍâÒ»¸öÐÔÄܸüºÃµÄÑ¡ÔñÊǽö½ö¸üÐÂÏÖÓÐÔªËØµÄ sku ÊôÐÔ¡£

document.querySelector('blue-buy').setAttribute('sku', 't_fendt');

Èç¹û²úÆ·×éʹÓÃÁËÒÔ DOM ¶Ô±ÈΪÌØÉ«µÄÄ£°åÒýÇ棬±ÈÈç React£¬ÄÇËüµÄËã·¨¾Í»á×Ô¶¯Íê³ÉÉÏÊö¹¦ÄÜ¡£

ÒªÖ§³ÖÕâÖÖЧ¹û£¬×Ô¶¨ÒåÔªËØ¿ÉÒÔʵÏÖ attributeChangedCallback ²¢Ö¸¶¨Ò»¸ö observedAttributes ÁбíÀ´´¥·¢Õâ¸ö»Øµ÷¡£

const prices = {
t_porsche: '66,00 €',
t_fendt: '54,00 €',
t_eicher: '58,00 €',
};

class BlueBuy extends HTMLElement {
static get observedAttributes() {
return ['sku'];
}
constructor() {
super();
this.render();
}
render() {
const sku = this.getAttribute('sku');
const price = prices[sku];
this.innerHTML = ` < button type = "button" > buy
for $ {
price
} < /button>`;
}
attributeChangedCallback(attr, oldValue, newValue) {
this.render();
}
disconnectedCallback() {...}
}
window.customElements.define('blue-buy', BlueBuy);

Ϊ±ÜÃâÖظ´£¬ÒýÈëÒ»¸ö render() ·½·¨²¢ÔÚ constructor ºÍ attributeChangedCallback Öе÷Óá£Õâ¸ö·½·¨ÊÕ¼¯ÐèÒªµÄÊý¾Ý£¬²¢Ìî³äбêÇ©µÄ innerHTML ÊôÐÔ¡£µ±¾ö¶¨ÔÚ×Ô¶¨ÒåÔªËØÖвÉÓÃÒ»¸ö¸ü¼Ó³ÉÊìµÄÄ£°åÒýÇæ»ò¿ò¼Üʱ£¬ÕâÀï±ãÊdzõʼ»¯´úÂëËù´ôµÄµØ·½¡£

ä¯ÀÀÆ÷Ö§³Ö

ÉÏÀý²ÉÓÃÁË Custom Element ¹æ·¶ V1 °æ£¬Ä¿Ç°ÒѾ­ÔÚ Chrome, Safari ºÍ Opera Öеõ½Ö§³Ö¡£µ«ÊÇͨ¹ý document-register-element Õâ¸öÇáÁ¿¼¶ÇÒ¾­¹ý´óÁ¿²âÊ﵀ polyfill ¿ÉÒÔÈøÃÌØÐÔÔÚËùÓÐä¯ÀÀÆ÷ÖÐÔËÐС£Ôڵײ㣬ËüʹÓÃÁ˹㷺֧³ÖµÄ Mutation Observer API£¬ËùÒÔ²¢Ã»ÓÐÔÚ±³ºóʹÓà DOM Ê÷¼àÌýÕâÖÖÇÖÈëʽµÄ hack ·½·¨¡£

¿ò¼Ü¼æÈÝÐÔ

ÒòΪ×Ô¶¨ÒåÔªËØ Custom Element ÊÇÒ»¸ö Web ±ê×¼£¬ËùÓеÄÖ÷Á÷ JavaScript ¿ò¼Ü¶¼Ö§³Ö£¬±ÈÈç Angular¡¢React¡¢Preact¡¢Vue »ò Hyperapp¡£µ«ÉîÈ뵽ϸ½Úʱ£¬¾Í»á·¢ÏÖÓÐЩ¿ò¼ÜÒÀÈ»´æÔÚʵÏÖÉϵÄÎÊÌâ¡£¿ÉÒÔ·ÃÎÊ Custom Elements Everywhere Õâ¸ö¼æÈÝÐÔ²âÊÔÌ×¼þ£¬Rob Dodson °ÑûÓнâ¾öµÄÎÊÌⶼ¸ßÁÁÏÔʾÁË¡£

×Ó¸¸ÔªËØ»òÐÖµÜÔªËØͨÐÅ / DOM ʼþ

È»¶ø£¬¶ÔÓÚËùÓеĽ»»¥À´Ëµ´ÓÉÏÖÁÏ´«µÝÊôÐÔÊDz»¹»µÄ¡£ÔÚÎÒÃǵÄʾÀýÖУ¬µ±Óû§¶Ô¹ºÂò°´Å¥Ö´ÐÐÒ»´Îµã»÷ʼþʱ£¬ÃÔÄ㹺Îï³µÓ¦¸ÃˢС£

ÉÏÃæÕâÁ½¸öƬ¶Î¶¼Óɽ»Ò××é(À¶É«)ά»¤µÄ£¬ËùÒÔΪÁË´ïµ½ÃÔÄ㹺Îï³µºÍ°´Å¥Í¨ÐŵÄЧ¹ûËûÃÇ¿ÉÒÔ¹¹½¨Ò»ÖÖÄÚ½¨µÄ JavaScript API ½øÐÐͨÐÅ¡£µ«ÕâÑù¾ÍÐèÒª×é¼þʵÀýÖ®¼äÏ໥Á˽⣬ͬʱҲΥ±³Á˸ôÀëµÄÔ­Ôò¡£

Ò»ÖÖ¸ü¼Ó¸É¾»µÄ·½·¨ÊDzÉÓ÷¢²¼Õ߶©ÔÄÕß»úÖÆ£ºÒ»¸ö×é¼þ¿ÉÒÔ·¢²¼ÐÅÏ¢£¬ÆäËû×é¼þÔò¶©ÔÄÖ¸¶¨µÄÖ÷Ìâ(topic)¡£ÐÒÔ˵ÄÊÇä¯ÀÀÆ÷ÄÚ½¨ÁËÕâ¸öÌØÐÔ£¬ÕâÒ²ÕýÊÇ click¡¢ select¡¢ mouseover µÈä¯ÀÀÆ÷ʼþµÄ¹¤×÷»úÖÆ¡£³ýÁËÕâЩ±¾µØʼþ£¬»¹ÓÐÒ»ÖÖ¿ÉÄÜÐÔÊÇͨ¹ý newCustomEvent(...) À´´´½¨¸ü¼Ó¸ß¼¶±ðµÄʼþ¡£Ê¼þ×ÜÊǰ󶨵½ËüÃÇ´´½¨»òÕß·ÖÅäµÄ DOM ½ÚµãÉÏ£¬´ó²¿·Ö±¾µØʼþÒ²Ö§³ÖðÅݵÄÌØÐÔ£¬ÕâÈüàÌý DOM ÖÐÌض¨×ÓÊ÷½ÚµãµÄËùÓÐʼþ³ÉΪ¿ÉÄÜ¡£Èç¹ûÄãÏëÒª¼àÌýÒ³ÃæÉϵÄËùÓÐʼþ£¬½«Ê¼þ¼àÌýÆ÷¸½¼Óµ½ window ÔªËØÉÏ¾Í OK ÁË¡£ÈçÏÂÊDZ¾Ê¾ÀýÖÐ blue:basket:changed ʼþ´´½¨µÄ´ó¸ÅÑù×Ó£º

class BlueBuy extends HTMLElement { [...] connectedCallback() { [...] this.render();
this.firstChild.addEventListener('click', this.addToCart);
}
addToCart() {
// maybe talk to an api
this.dispatchEvent(new CustomEvent('blue:basket:changed', {
bubbles: true,
}));
}
render() {
this.innerHTML = ` < button type = "button" > buy < /button>`;
}
disconnectedCallback() {
this.firstChild.removeEventListener('click', this.addToCart);
}
}

ÏÖÔÚÃÔÄ㹺Îï³µ¿ÉÒÔÔÚ window ¶ÔÏóÉ϶©ÔÄÕâ¸öʼþÁË£¬ÔÚÐèҪˢÐÂÊý¾ÝʱËü¾Í»áµÃµ½Í¨Öª¡£

class BlueBasket extends HTMLElement {
connectedCallback() { [...] window.addEventListener('blue:basket:changed', this.refresh);
}
refresh() {
// fetch new data and render it
}
disconnectedCallback() {
window.removeEventListener('blue:basket:changed', this.refresh);
}
}

²ÉÓÃÕâÖÖ·½·¨ÊµÏÖʱ£¬ÃÔÄ㹺ÎﳵƬ¶ÎÔö¼ÓÁËÒ»¸ö²»ÔÚËü·¶Î§Ö®ÄÚ(window)µÄ DOM ÔªËؼàÌýÆ÷¡£¶ÔÓڴ󲿷ÖÓ¦ÓÃÀ´Ëµ£¬Õâ¸ö×ö·¨Ã»ÓÐʲôÎÊÌ⣬µ«ÊÇÈç¹ûÄ㲻̫ÂúÒâÕâÖÖ×ö·¨£¬»¹¿ÉÒÔÈÃÒ³Ãæ×ÔÉí(²úÆ·×é)È¥¼àÌýÕâ¸öʼþ£¬²¢Í¨¹ýµ÷Óà DOM ÔªËØµÄ refresh() ·½·¨À´Í¨ÖªÃÔÄ㹺Îï³µ¡£

// page.js
const $ = document.getElementsByTagName;


$('blue-buy')[0].addEventListener('blue:basket:changed', function() {
$('blue-basket')[0].refresh();

});

ÃüÁîʽµ÷Óà DOM ·½·¨ÆäʵÏ൱º±¼û£¬µ«±ÈÈçÔÚ video ÔªËØ API ÖоÍÓÐÕâÖÖ×ö·¨¡£Èç¹û¿ÉÄܵĻ°£¬»¹ÊÇÓ¦¸ÃÍƼöÕâÖÖÃüÁîʽµÄ·½·¨(ÊôÐÔ¸ü¸Ä)¡£

·þÎñ¶ËäÖȾ / ͨÓÃäÖȾ

ÔÚä¯ÀÀÆ÷ÖвÉÓÃ×Ô¶¨ÒåÔªËØ Custom Elements À´¼¯³É×é¼þÊǸö¾øºÃµÄ×ö·¨¡£µ«Êµ¼ÊÔÚ¹¹½¨Ò»¸ö Web ÖпɷÃÎʵÄÕ¾µãʱ£¬ºÜ¿ÉÄÜÊdzõ´Î¼ÓÔØÐÔÄܲÅÊǹؼüµã£¬ÔÚËùÓÐµÄ JS ¿ò¼ÜÈ«²¿¼ÓÔز¢Ö´ÐÐ֮ǰÓû§Ö»»á¿´µ½°×ÆÁ¡£ÁíÍ⣬»¹ÓÐÒ»¸öÖµµÃ˼¿¼µÄÊÇÈç¹û JavaScript Ö´ÐÐʧ°Ü»òÕß±»×èÈûʱÍøÕ¾»á·¢Éúʲô¡£Jeremy Keith ÔÚËûµÄ ebook/²¥¿Í Resilient Web Design ÖнâÊÍÁËÕâ¸öÎÊÌâµÄÖØÒªÐÔ¡£ËùÒÔÄܹ»ÔÚ·þÎñ¶ËäÖȾºËÐÄÄÚÈݲÅÊǹؼü¡£²»ÐÒµÄÊÇ Web ×é¼þ¹æ·¶¸ù±¾Ã»ÓÐÌÖÂÛ·þÎñ¶ËäÖȾ¡£JavaScript ûÓУ¬Custom Elements ҲûÓÐ:(

×Ô¶¨ÒåÔªËØ + ·þÎñ¶Ë°üº¬(Includes)

ΪÁËÒýÈë·þÎñ¶ËäÖȾ£¬Ç°ÃæµÄʾÀý½øÐÐÁËÖع¹¡£Ã¿¸öÍŶӶ¼ÓÐËûÃÇ×Ô¼ºµÄ express ·þÎñÆ÷£¬×Ô¶¨ÒåÔªËØµÄ render() ·½·¨Ò²¶¼Í¨¹ý url À´½øÐзÃÎÊ¡£

$ curl http://127.0.0.1:3000/blue-buy?sku=t_porsche
<button type="button">buy for 66,00 €</button>

×Ô¶¨ÒåÔªËصıêÇ©Ãû±»ÓÃ×÷·¾¶Ãû£¬ÊôÐÔÃû³ÉΪÁ˲éѯ²ÎÊý¡£ÕâÑùΪÿ¸ö×é¼þÓ÷þÎñ¶ËäÖȾÄÚÈݵķ½·¨¾ÍÓÐÁË¡£ÔÙÅäºÏÉÏ <blue-buy> ×Ô¶¨ÒåÔªËØ£¬Ò»Öַdz£½Ó½üÓÚͨÓà Web ×é¼þµÄ¶«Î÷¾Í³öÀ´ÁË£º

<blue-buy sku="t_porsche">
<!--#include virtual="/blue-buy?sku=t_porsche" -->
</blue-buy>

#include ×¢ÊÍÊÇ·þÎñ¶Ë°üº¬ Server Side Includes µÄÒ»²¿·Ö£¬Õâ¸ö¹¦ÄÜÔÚ´ó²¿·Ö Web ·þÎñÆ÷Öж¼Ö§³Ö¡£Ã»´í£¬Õâ¸ö¾ÍÊǺÜÔçÒÔÇ°ÎÒÃÇÔÚÍøÕ¾ÖÐǶÈ뵱ǰÈÕÆÚËù²ÉÓõÄͬÑù¼¼Êõ¡£Ò²Óм¸¸öÆäËû¿ÉÑ¡¼¼Êõ±ÈÈç ESI¡¢nodesi¡¢compoxure ºÍ tailor£¬µ«ÊǶÔÓÚÎÒÃǵÄÏîÄ¿ SSI ÒѾ­±»Ö¤Ã÷ÊÇÒ»¸ö¼òµ¥Í¬Ê±Ò²Ï൱Îȶ¨µÄ½â¾ö·½°¸¡£

ÔÚ Web ·þÎñÆ÷½«ÍêÕûµÄÒ³Ãæ·¢Ë͵½ä¯ÀÀÆ÷֮ǰ #include ×¢Êͱ»Ì滻Ϊ /blue-buy?sku=t_porsche µÄ·µ»ØÖµ¡£ÔÚ Nginx ÖÐÅäÖÃÈçÏ£º

upstream team_blue {
server team_blue: 3001;
}
upstream team_green {
server team_green: 3002;
}
upstream team_red {
server team_red: 3003;
}

server {
listen 3000;
ssi on;

location / blue {
proxy_pass http: //team_blue;
}
location / green {
proxy_pass http: //team_green;
}
location / red {
proxy_pass http: //team_red;
}
location / {
proxy_pass http: //team_red;
}
}

Ö¸Áî ssi:on; ÓÃÀ´¿ªÆô SSI ¹¦ÄÜ£¬ upstream ºÍ location ¿éÓÃÀ´È·±£Ã¿¸öÍÅ¶ÓµÄ url ¶¼»á±»ÕýÈ··ÖÅäµ½¶ÔÓ¦µÄ·þÎñ£¬±ÈÈçÒÔ /blue ¿ªÍ·µÄ url »á±»Â·Óɵ½ÏàÓ¦µÄÓ¦Ó÷þÎñ( team_blue:3001)¡£ÁíÍ⣬ / ·Óɱ»Ó³Éäµ½¸ºÔðÊ×Ò³ºÍ²úÆ·Ò³µÄ²úÆ·×é(ºìÉ«)¡£

ÏÂÃæµÄ¶¯»­ÑÝʾÁËÔÚÒ»¸ö JavaScript ±»½ûÓõÄä¯ÀÀÆ÷ÖÐÍÏÀ­»úÉ̵êʹÓÃÇé¿ö¡£

±äÁ¿Ñ¡Ôñ°´Å¥ÏÖÔÚÊÇÒ»¸öÕæʵµÄÁ´½ÓÁË£¬Ã¿Ò»´Îµã»÷¶¼»áÈÃÕû¸öÒ³ÃæÖØмÓÔØ¡£ÓұߵÄÖÕ¶ËչʾÁËÒ»¸öÇëÇóÈçºÎ±»Â·Óɵ½²úÆ·×éµÄÁ÷³Ì£¬²úÆ·×éÔò¿ØÖÆÕû¸ö²úÆ·Ò³£¬ÀïÃæµÄ±ê¼ÇÔòÓÉÍƼö×éºÍ½»Ò××éµÄÄÚÈÝƬ¶ÎÀ´Ìṩ¡£

µ±´ò¿ªÆôÓà JavaScript µÄ¿ª¹Øºó£¬ÔÚ·þÎñ¶ËÈÕÖ¾ÏûÏ¢ÖÐÖ»ÓеÚÒ»ÌõÇëÇó²Å»áÏÔʾ¡£ËùÓкóÐøµÄÍÏÀ­»ú±ä»¯Âß¼­¶¼ÔÚ¿Í»§¶Ë´¦ÀíÁË£¬¾ÍºÍÇ°ÃæµÚÒ»¸öʾÀýÒ»Ñù¡£ÔÚºóÃæµÄʾÀýÖУ¬²úÆ·Êý¾Ý½«»á´Ó JavaScript ´úÂëÖб»³éÀë³öÀ´£¬²¢ÔÚÐèÒªµÄʱºòͨ¹ýÒ»¸ö REST API ½øÐмÓÔØ¡£

Äã¿ÉÒÔÔÚ±¾»úÔËÐÐÕâ¸ö´úÂë¡£Ö»ÐèÒª°²×°

git clone https://github.com/neuland/micro-frontends.git
cd micro-frontends/2-composition-universal
docker-compose up --build

Docker »áÔÚ 3000 ¶Ë¿ÚÆô¶¯ Nginx£¬²¢ÎªÃ¿¸öÍŶӹ¹½¨ node.js ¾µÏñ¡£µ±ÄãÔÚä¯ÀÀÆ÷Öдò¿ª http://127.0.0.1:3000/ ʱӦ¸Ã»á¿´µ½Ò»¸öºìÉ«µÄÍÏÀ­»ú¡£Í¨¹ý docker-compose ¸ø³öµÄ×éºÏÈÕÖ¾¿ÉÒÔºÜÇáËɵĿ´µ½ÍøÂçÖз¢ÉúÁËʲô¡£²»ºÃµÄÊÇÄ¿Ç°»¹²»ÄÜ¿ØÖÆÊä³öÐÅÏ¢µÄÑÕÉ«£¬ËùÒÔÄã²»µÃ²»½ÓÊÜÒ»¸öÊÂʵ£¬ÄǾÍÊÇÀ¶É«µÄ½»Ò××é¿ÉÄܱ»¸ßÁÁ³ÉÂÌÉ« :)

src ÖеÄÎļþ»á±»Ó³Éäµ½¶ÀÁ¢µÄÈÝÆ÷ÖУ¬µ±Äã½øÐдúÂë¸ü¸Äºó node Ó¦ÓûáÖØÆô¡£ÐÞ¸Ä nginx.conf ÐèÒªÖØÆô docker-compose ²ÅÄÜÉúЧ¡£È»ºóÄã¾Í¾¡ÇéϹ¸ã²¢Ìṩ·´À¡°É¡£

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

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

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

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