±à¼ÍƼö: |
±¾ÎÄÖ÷Òª½«½éÉÜ
ǰ¶Ë¼Ü¹¹Ä£Ê½£¬Ç°¶ËÓëºó¶Ë¼Ü¹¹µÄÑݽø ,²¢Ê¾Àý£ºÈçºÎÂõÏò Componentless ¼Ü¹¹£¿
±¾ÎÄÀ´×ÔÓÚ
phodal
,ÓÉ»ðÁú¹ûÈí¼þAlice±à¼¡¢ÍƼö¡£ |
|
PS£ºÕâÊÇÒ»ÖֺܺÃÍæµÄǰ¶Ë¼Ü¹¹Ä£Ê½£¬¿ÉÒÔ´´Ôì³öÎÞÏÞµÄÀÖȤ¡£Äã²»Ò»¶¨ÐèÒªÖªµÀËü£¬µ«ÊÇËüÕæµÄºÜºÃÍæ¡£ÎÒдÕâÆªÎÄÕÂÖ÷ÒªÊÇÒòΪºÃÍæ£¬Ò²Ã»ÓÐɶж«Î÷¡£
ºÜ¸ßÐËÔÚ¹ýÈ¥µÄ¼¸ÄêÀ΢ǰ¶ËÒѾ³ÉΪǰ¶Ë¼Ü¹¹µÄÒ»¸ö¹²Ê¶Ê½µÄ¼Ü¹¹Ä£Ê½£¬Ò²²»Í÷·ÑÎÒ×÷Ϊ¹úÄÚ×îÔçµÄÒý·Õߣ¬Ð´Á˹úÄÚµÚÒ»¸ö΢ǰ¶Ë¿ò¼ÜºÍÊé¼®£¬²¢ÍƹãÖÁ½ñ¡£ËùÒÔ£¬ÈÃÎÒÃǼÌÐøÍùǰ×ß°É£¬Ì½Ë÷Õû¸öÁìÓò¸ü¶àµÄ¿ÉÄÜÐÔ¡£´ÓÎÞ×é¼þ¶¨ÒåµÄÓ¢ÎÄÃû³Æ Componentless£¬Äã¾Í¿ÉÒÔÖªµÀËüËùÒª¶Ô±êµÄÊÇÀà Serverless Ò»ÑùµÄºó¶Ë¼Ü¹¹Ä£Ê½ÉÏ¡£ËùÒÔ£¬ÔÚ¶¨ÒåÉÏºÍ Serverless ¼Ü¹¹µÄ¶¨ÒåÆÄΪÏàËÆ¡£
ÎÞ×é¼þ£¨Componentless£©¼Ü¹¹ÊÇÒ»Öּܹ¹Ä£Ê½£¬ËüÊÇÖ¸´óÁ¿ÒÀÀµÓÚ Èý·½×é¼þ £¨ÔËÐÐʱÒÀÀµµÄ×é¼þ¶ø·Ç±àÒëʱÒÀÀµµÄ×é¼þ£¬¼´±àÒë¼´·þÎñ£©»òÔÝ´æÈÝÆ÷ÖÐÔËÐеÄ×Ô¶¨Òå´úÂëµÄǰ¶ËÓ¦Óá£Ó¦ÓõÄÈý·½×é¼þÈçͬÈý·½ API ·þÎñÒ»Ñù£¬¿É¸÷×Ô¶ÀÁ¢·¢²¼¡¢¶ÀÁ¢²¿Êð£¬Ó¦ÓÃÎÞÐèÖØÐ±àÒë¡¢¹¹½¨ºÍ²¿Êð¡£
Õâ¾ÍÊÇΪʲô£¬ÎÒÃǶ¨ÒåΪÎÞ×é¼þ¼Ü¹¹µÄÔÒò£¬Äã¿ÉÒÔ²»ÐèÒª±àдÈκεÄ×é¼þ£¬Ö»ÐèÒª±àдÂß¼´úÂë»òÕß DSL À´ÊµÏÖËüÃǵÄ×éºÏ¡£ÉõÖÁÓÚ£¬ÎÒÃÇ¿ÉÒÔÖ»Ìṩһ¸ö DSL + ͨÓÃµÄ URL£¬ÓÉä¯ÀÀÆ÷¸ù¾Ý DSL Íê³ÉÓ¦ÓõÄÈ«×Ô¶¯¹¹½¨ºÍÔËÐС£
¿´Ò»¸ö¼òµ¥µÄʾÀý£¬±ãÊÇ Quake µÄ Transflow Éè¼Æ£º from ( 'todo' , 'blog' ). to (< quake - calendar >); £¬ÈÃ×é¼þ±ê×¼»¯£¬Êý¾Ý±ê×¼»¯£¬×ÔÈ»¶øÈ»µØÎÒÃǾͲ»ÐèÒª¿¼ÂÇÈκÎ×é¼þµÄÉè¼Æ¡£
ǰ¶ËÓëºó¶Ë¼Ü¹¹µÄÑݽø
ÏÈǰ£¬¾³£ºÍ±ðÈ˽»Á÷ÆðÁìÓòÇý¶¯Éè¼Æ£¨DDD£©ÔÚǰ¶ËµÄÓ¦Óã¬Ò²ÊÇÆÄΪÓÐÒâ˼µÄ¡£×÷Ϊ ¡°¾ÅÓÖËÄ·ÖÖ®Èý¡± / 10 ¸ö DDD ·½ÃæµÄש¼Ò£¬¹ýÈ¥£¬ÎÒÒ»Ö±¾õµÃÁìÓòÇý¶¯Éè¼Æ²¢²»ÊʺÏÓÚǰ¶Ë£¬Õû½àǰ¶Ë¼Ü¹¹ ²ÅÊÇÈËÃÇËùÐèÒªµÄ£¬µ«ÊÇÉè¼Æ + ÉÏÊÖÄѶÈÂÔ´ó¡£ÔÚ½ñÄêÀÓÖË«…¬¶Ô¶à¸öºó¶ËÓ¦ÓÃʹÓÃÁË DDD µÄÉè¼ÆºÍ¹æ»®£¬ÓÖÓÐÁËеÄÌå»á£¨ËäÈ»ÒÀ¾É²»ÐУ©¡£Ç°¶Ë¿ÉÒÔÓÐÀàËÆÓÚ DDD µÄ·½Ê½£¬Ö»ÊÇ·½Ê½ÍêÈ«ºÍºó¶Ë²»Ò»Ñù¡£ºó¶ËÒÔÄ£Ðͺͺ¯Êý×÷ΪÁ½ÖÖ·ç¸ñ²»Í¬±à³Ì·ç¸ñµÄ»ù´¡£¬Ç°¶ËÔòÊÇÒÔ ×é¼þ + ʼþ ×÷Ϊ±à³Ì·ç¸ñµÄ»ù´¡¡£×é¼þÊÇ¿ÉÏûÃðµÄ£¬Ê¼þÔòÓÉÊÇÉè¼ÆÊ¼þÁ÷À´±àÅÅ¡£

Clean Frontend
ËùÒÔ£¬Äã²¢²»Ö±½Ó½«ºó¶Ë DDD µÄ˼Ï룬ֱ½ÓÌ×ÓÃÔÚǰ¶ËÓ¦ÓÃÉÏ£¬³ý·ÇÄãÓ¦ÓõÄÂß¼Ö÷ÒªÊÇÔÚǰ¶Ë¡£
΢·þÎñÓë΢ǰ¶Ë
¶ÔÓÚÏÖ½ñµÄ´ó¶àÊýϵͳÀ´Ëµ£¬ËüÃÇÒÀ¾ÉÎ¬ÐøÔÚÒ»ÖÖ£º¡¸ ºó¶Ë΢·þÎñ£¬Ç°¶Ë¡°´óÄàÇò¡± ¡¹µÄ״̬¡£ºó¶ËµÄ΢·þÎñÒѾ°´ÕÕ¡¸¿µÍþ¶¨ÂÉ¡¹²ðΪһ¸ö¸öµÄ΢·þÎñ£¨µ±È»ÁË£¬²»ºÏÀíµØ²ð·Ö΢·þÎñÊÇÁíÍâµÄÒ»¸öÎÊÌ⣩£¬¶øÇ°¶Ë»¹´¦ÔÚÒ»¸ö´óÄàÇòµÄ״̬¡£ËùÒÔ£¬Î¢Ç°¶Ë±ã×÷Ϊ ÆäÖеÄÒ»ÖÖ £¨²¢·ÇΨһ£©¼¼ÊõÀ´½â¾ö×éÖ¯¼Ü¹¹¶ÔÆë£¬²¢ÊµÏÖ¿ìËÙ·¢²¼ÉÏÏߵļܹ¹Ä£Ê½¡£Ëü¿ÉÒÔ½«µ¥Ìå´óÓ¦Óòð·ÖΪ¶à¸ö½ÏСµÄ×ÔÖÎÓ¦Ó㬵«ËüÃÇÒÀ¾É¾ÛºÏΪһ¡£¿ÉÒÔÓÃÓÚ½â¾öÇ¨ÒÆÒÅÁôϵͳ¡¢Í³Ò»Óû§ÌåÑé¡¢°ïÖú¶àÍŶÓÐ×÷µÈ¡£
ÔÚ½øÐкó¶ËÏµÍ³Ç¨ÒÆÊ±£¬ÎÒÃÇʹÓà DDD£¨ÁìÓòÇý¶¯Éè¼Æ£©µÄ·½Ê½Ñ°ÕÒºÏÀíµØÎ¢·þÎñ¼Ü¹¹Éè¼ÆÒÀ¾Ý£¬Î¢·þÎñ³ÉΪÎÒÃǸÄÔìÒÅÁôϵͳµÄ·½Ê½¡£ÎÒÃÇ´ÓÒ»¸öÄ£¿é¡¢Ò»¸ö¹¦ÄÜ¿ªÊ¼£¬Öð²½µØÌæ»»¾ÉµÄµ¥ÌåÓ¦Óã¬Ö±ÖÁÕû¸öϵͳÍê³ÉÌæ»»¡£Õâ¸öÌæ»»Ä£Ê½¶ÔÓÚǰ¶ËÓ¦ÓÃÀ´Ëµ£¬ËüÒ²ÊÇÆÄΪÀàËÆµÄ¡£
ËùÒÔ£¬ÔÚ½øÐÐÁË΢ǰ¶ËµÄ¸ÄÔìºó£¬¼Ü¹¹ÉÏ¶ÔÆëÁË£¬ÈËÔ±ÉÏ¶ÔÆëÁË£¬½Ô´ó»¶Ï²¡£

Team Align
ÔÙÍùÇ°ÄØ£¬ÎÒÃÇÓ¦¸ÃÈçºÎ¼ÌÐøÑݽøÏµÍ³£¿
Serverless Óë ComponentLess
2017 Ä꣬ÔÚѧϰÁË DDD Óë Serverless Ö®ºó£¬¿ªÔ´ÁË¡¶Serverless Ó¦Óÿª·¢Ö¸ÄÏ¡·£¨https://serverless.ink/£© Ö®ºó£¬ÎÒÒ»Ö±ÔÚ˼¿¼ÔÚǰ¶ËÁìÓòÈçºÎÓ¦ÓÃʹÓÃÀàËÆÓÚ Serverless µÄ˼Ï룿ÓÚÊÇ£¬¾ÍÓÐÁ˹ØÓÚ¿ç¿ò¼Ü×é¼þ¿âµÄÏë·¨£º¡¶Ç°¶Ëϰ볡£º¹¹½¨¿ç¿ò¼ÜµÄ UI ¿â¡·£¬Ö»ÊǹúÄÚÕâЩд×é¼þ¿âµÄ¹«Ë¾£¬²¢Ã»ÓÐÕâÖִ󵨵ÄÏë·¨£¬Ì«¿ÉϧÁË ¡ª¡ª Ö»»á°æ±¾ºÅ + 1£¬±ðÈË×öʲô¸ú×Å×öʲô£¿»¹ÓÐÒ»ÌõÓÐÒâ˼µÄ¹ÊÊÂÏߣ¬ÔÚ¾ÀúÁËÎÞ´úÂë±à³ÌµÄ»ðÈÈÖ®ºó£¬ÎÒÖØÐÂ˼¿¼ÁËÒ»ÏÂǰ¶ËºÍºó¶ËµÄδÀ´£º¡¶Ç°ºó¶ËÒ»Ì廯£ºÇ°ºó¶Ë·ÖÀ뽫ËÀ£¿¡·¡£
ÆðÏÈ£¬ÎÒÒÔΪÎÞ´úÂë±à³ÌÊÇÒ»¸ö ComponentLess ·½Ïò£¬µ«ÊÇÒ»Ñо¿·¢ÏÖ²¢²»ÊÇ¡£ÎÞ´úÂë±à³ÌÇãÏòÓÚ¿ÉÊÓ»¯±à³Ì£¬¶ø ComponentLess ÇãÏòÓÚʹÓà DSL ±à³Ì¡£¾ÍÕâÒ»µãÀ´Ëµ£¬ÎÒ±ãÆ«ÏòÓÚʹÓà Web Components + WAM ¼¼ÊõÀ´¹¹½¨ÐµÄǰ¶Ë¼Ü¹¹¡£
Ö±µ½ÎÒ×î½üÔÚ¿ªÔ´ÖªÊ¶¹ÜÀí¹¤¾ß Quake £¨https://github.com/phodal/quake£©ÖØÐÂÓ¦ÓÃÁËÕâ¸ö˼ÏëÖ®ºó£¬·¢ÏÖÁËÌØ±ðÓÐÒâ˼£¬ÎÒ±ãÏë×ÅдһƪÎÄÕÂÀ´½éÉÜÏà¹ØµÄÀíÄî ¡ª¡ª ±Ï¾¹£¬Êг¡ÉÏÒѾ½ÓÊÜÁË Serverless µÄ¹ÛÄ½ÓÊÜÁË΢ǰ¶ËµÄ¹ÛÄî¡£ÄÇô£¬Ê£ÏµÄÎÊÌâ¾Í±äµÃ·Ç³£µÄ¼òµ¥ÁË¡£
ÎÞ×é¼þ¼Ü¹¹
¼ÌÐø»Øµ½¿ªÍ·Éϵ͍Ò壺
ÎÞ×é¼þ£¨Componentless£©¼Ü¹¹ÊÇÒ»Öּܹ¹Ä£Ê½£¬ËüÊÇÖ¸´óÁ¿ÒÀÀµÓÚ Èý·½×é¼þ £¨ÔËÐÐʱÒÀÀµµÄ×é¼þ¶ø·Ç±àÒëʱÒÀÀµµÄ×é¼þ£¬¼´±àÒë¼´·þÎñ£©»òÔÝ´æÈÝÆ÷ÖÐÔËÐеÄ×Ô¶¨Òå´úÂëµÄǰ¶ËÓ¦Óá£Ó¦ÓõÄÈý·½×é¼þÈçͬÈý·½ API ·þÎñÒ»Ñù£¬¿É¸÷×Ô¶ÀÁ¢·¢²¼¡¢¶ÀÁ¢²¿Êð£¬Ó¦ÓÃÎÞÐèÖØÐ±àÒë¡¢¹¹½¨ºÍ²¿Êð¡£
¼òµ¥À´Ëµ£¬ÎÞ×é¼þËùÒª×öµÄÊÂÇé¾ÍÊǽ«×é¼þ±ä³ÉÒ»ÖÖ ÔËÐÐʱ·þÎñ £¬¶ø·Ç ¹ýÈ¥µÄ±àÒëʱÒÀÀµ ¡£µ±ËùÓеÄ×é¼þ¶¼±ä³ÉÒ»ÖÖÕæÕýµÄ»ù´¡Éèʩʱ£¬ÎÒÃǾͲ»ÔÙÐèÒªÕâЩ×é¼þ£¬½ø¶ø´ÓÓ¦Óÿª·¢²àÈÃ×é¼þÏûʧ£¬´ï³ÉÁËÓ¦ÓÃÎÞÐè×é¼þµÄ״̬¡£Èç´ËÒ»À´£¬ËüÒ²±ä³ÉÁËÒ»¸öµÍ´úÂ루LowCode£©Ê½µÄϵͳ£¬ÅäºÏ¼òµ¥µÄ´úÂëÉú³É£¬¿ÉÒÔ´ïµ½ÎÞÂëµÄ״̬£¨NoCode£©¡£
´ÓÐÎʽÉÏÀ´Ëµ£¬Ê¹ÓÃ΢ǰ¶ËÏà¹ØµÄ¼¼Êõ¿ÉÒÔÌṩÎÞ×é¼þ¼Ü¹¹ËùÐèÒªµÄһϵÁлù´¡¼¼Êõ¡£ÆäÖУ¬×îΪ¼òµ¥µÄ·½Ê½ÊÇʹÓãºWeb Components ¡£ÄÇô£¬ÏÈÈÃÎÒÃÇÀ´¿´Ò»¸ö»ùÓÚ Web Components µÄ Componentless ¼Ü¹¹Ê¾Àý¡£
ʾÀý£ºÈçºÎÂõÏò Componentless ¼Ü¹¹£¿
´Ó¹ý³ÌÀ´Ëµ£¬¿ÉÒÔ·ÖΪÈý²½£º
- ʹÓà Web Component ·Ö½âÓ¦ÓÃ
- ²ð·Ö¸ü¶àµÄ×é¼þÒÔÏûÃð×é¼þ
- ¹¹½¨Éú³ÉʽµÍ´úÂëģʽ
ʣϵIJ¿·Ö¾ÍÊÇÌî¿ÕʽµÄ±à³ÌÁË¡£
1. ʹÓà Web Component ·Ö½âÓ¦ÓÃ
ÏÈÀ´¿´¸öʾÀý£¬±ÈÈçÎÒÃǵÄǰ¶Ë²¿·ÖÓÐ A¡¢B Á½¸ö΢ӦÓ㬿ÅÁ£¶ÈÒѾ·Ç³£Ð¡µÄ£¬µ«ÊÇÒÀ¾ÉÊÇ Ó¦Óü¶±ð µÄÓ¦Óá£Ó¦Óà B ʹÓÃÁË Web Components ¼¼Êõ¹¹½¨£¬²¢ÇÒÔÚ΢ӦÓà B ÀïÒýÈëÁËÁ½¸öÈý·½µÄ Web Components ×é¼þ¡£³£¹æµÄǰ¶ËÓ¦ÓÃÀÈç¹ûÎÒÃǸüÐÂÁËÕâÁ½¸ö×é¼þ£¬¶ÔÓ¦µÄÓ¦ÓÃÐèÒªÖØÐ±àÒ룬ÔÙ·¢²¼ÉÏÏß¡£

Slot
¶øÔÚÏÖÔÚ£¬ÔÚ Custom Element + Shadow DOM µÄ¼Ó³ÖÏ£¬ÎÒÃÇÖ»ÐèÒª¸üÐÂÖ¸Ïò×é¼þ¿âµÄ script ±êÇ©µÄÁ´½Ó£¬»òÕß»º´æ¼´¿É¡£
2. ²ð·Ö¸ü¶àµÄ×é¼þÒÔÏûÃð×é¼þ
½Ó×Å£¬ÈÃÎÒÃǽøÒ»²½µØÓÅ»¯£¬È¥³ýÓ¦Óà A ºÍ Ó¦Óà B µÄËùÓÐÄÚ²¿×é¼þ£¬½«ÕâЩ×é¼þÍâÖ㬰´¹¦ÄÜÄ£¿é¹¹½¨³ÉÒ»¸ö¸öµÄ×é¼þ¼¯¡£ÕâЩ×é¼þ¼¯£¬ÎÒÃÇ¿ÉÒÔ°´¹¦ÄÜÍŶӻ®·Ö£¬»òÕß»®µ½ËùΪµÄǰ¶ËÖÐ̨£¬ÓÖ»òÕßÊÇǰ¶ËÀ¬»ø»ØÊÕÕ¾¡£

WC ComponentLes
ÕâЩ²¢²»ÖØÒª£¬ÏÖÔÚÎÒÃǵÄÓ¦ÓÃÀïµÄ¡¸ ×é¼þ ¡¹ÒѾ·Ç³£Ö®ÉÙÁË ¡ª¡ª ÎÒÃÇ»¹Ê£ÏÂһЩ¶ÔÓÚÕâЩ×é¼þ±àÅŵÄ×é¼þ + һЩ¶îÍâµÄÒµÎñÂß¼¡£
3. ¹¹½¨Éú³ÉʽµÍ´úÂëģʽ
ÏÖÔÚ£¬ÔٻعËһϠServerless £¨AWS Lambda£¬ËüÃÇû¸ø¹ã¸æ·Ñ£©ÖбàдµÄ¡°hello, world¡±º¯Êý£º
module . exports . hello = ( event , context , callback ) => {
callback ( null , "hello, world" );
}; |
ÔÚʹÓà Serverless Framework ÕâÑùµÄ¿ò¼Üʱ£¬ÎÒÃÇÖ»ÐèÒªÔÚÕâ¸öº¯ÊýÉÏ£¬ÌîдÎÒÃǵÄÒµÎñÂß¼¼´¿É£¬¼´ Ìî¿Õʽ±à³Ì ¡£¶ÔÓÚǰ¶ËÀ´Ëµ£¬Õâ¸ö¹ý³ÌÒ²ÊÇÀàËÆµÄ£¬ÎÒÃǵÄÊý¾ÝÓÐÁË£¬ÎÒÃǵÄÄ¿±ê×é¼þÓÐÁË£¬Ö»ÐèÒªÒ»¸öÓÐÏÞÐÔ ´úÂëÉú³É µÄ¹¦ÄÜ¡£¼´£¬ÎÒÃÇÖ»ÐèÒªÉú³ÉÒ»¸öÓдýÍêÉÆµÄ¿Õº¯Êý¼´¿É£¬Èç Quake ÖÐµÄ Transflow£º from ( 'todo' , 'blog' ). to (< quake - calendar >) £¬Éú³ÉµÄº¯ÊýºÍÂß¼£¨²¿·Ö´úÂëʾÀý£©£º
const tl_temp_1 = async ( context , commands ) => { const el = document . createElement ( 'quake-calendar' );
...
return el ; } |
ÔÚÕâʱ£¬Ö»ÐèҪȷ±£Â·ÓÉÓ뺯Êý²»±»Ð޸ģ¬ÄÇôʣϵIJ¿·Ö¾ÍÊǶÔÓÚÊý¾Ý´¦ÀíµÄÌî¿ÕÁË¡£
Ç¨ÒÆ·½Ê½
³ýÁËÉÏÊöµÄÖ±½Ó·Ö½âµÄ·½Ê½£¬»¹ÓÐÆäËüµÄ½¥½øÊ½Ç¨ÒÆ·½Ê½¡£
Ç¨ÒÆ·½Ê½ 2£ºÐÂǶÀÏ
- ʹÓÃеļ¼ÊõºÍ¿ò¼Ü´´½¨Ó¦ÓõļÜ×Ó¡£
- ÌáÈ¡ Web Component Ì×Èë¾ÉµÄ×é¼þ£¬×ª±ä»¯¹«¹²ÄÜÁ¦¡£
- ÔÚеÄÓ¦ÓÃÖÐǶÈë¾ÉµÄÂÖ×Ó¡£
Ç¨ÒÆ·½Ê½ 3£ºÀÏǶÐÂ
- ¹¹½¨Ð嵀 Web Component ×é¼þ¡£ÅäºÏ monorepo ¹ÜÀí
- ǶÈë×é¼þµ½ÏÖÓÐÓ¦ÓÃÖС£
- ÍêÉÆÎÞ×é¼þ¼Ü¹¹»úÖÆ¡£
- ¹¹½¨µÍ´úÂë±àÅÅģʽ¡£
ÎÞ×é¼þ¼Ü¹¹ÀíÄî
´Óµ±Ç°¸öÈ˵ÄÀí½â£¬ËüµÄºËÐÄÀíÄîÊÇ£º ×é¼þ¼´¡¸·þÎñ¡¹ ¡£¼´ÈÃ×é¼þÏñ·þÎñÒ»Ñù£¬¿ÉÒÔ×ÔÓɲ¿Êð£¬×ÔÓɸüС£ÔÚ×é¼þ¸üкó£¬Ó¦ÓÃÒ²´ÓijÖÖÒâÒåÉÏ´ïµ½ÁËÓ¦ÓõĸüС£
³ý´Ë£¬»¹ÓÐÖîÈçÓÚ£º
- ×Ô¶¯»¯»·¾³¸ôÀ롣ʥµ®½ÚÂíÉϾ͵½ÁË
- Éú³ÉʽµÍ´úÂë¡£ÕæÕýÒâÒåµÄǰ¶Ë½ºË®
¸ü¶àµÄÄÚÈÝ£¬»¹Óдý̽Ë÷¡£
ÎÞ×é¼þ¼Ü¹¹ÎÊÌâ
³ýÁËÉÏÊöµÄÖî¶àÓŵ㣬Ëü»¹ÓÐһϵÁеÄȱµãÐèÒª½â¾ö£º
- ä¯ÀÀÆ÷¼æÈÝÐÔ¡£Web Component µÄ¼æÈÝÐÔÎÊÌâ
- ²âÊÔÄѶȡ£×ÔÓɵļܹ¹ÍùÍùÒâζ×ŲâÊÔÉϵijɱ¾£¬ÔÚÕâÒ»µãÒ²Óë΢·þÎñ¡¢Serverless ÀàËÆ£¬½«ÐèÒªÓɸü¶àµÄ¶Ëµ½¶Ë²âÊÔ²ÅÄܱ£ÕÏÏîÄ¿µÄÖÊÁ¿¡£
- ×é¼þÄ£¿é»¯µÄ»®·ÖÒÀ¾Ý¡£µ±ÎÒÃǹ¹½¨³öÒ»¸ö¸öµÄ×é¼þ¼¯Ö®ºó£¬¾ÍÐèҪѰÕÒÒ»ÖÖ·½Ê½À´ºÏÀí¹æ»®¡£
- Monorepo ¹ÜÀí·½Ê½¡£repo Ô½¶à£¬¹ÜÀíÉϾͻáÔ½¸´ÔÓ¡£ÐèÒªÒýÈë nx¡¢pnpm ÕâÑùµÄ¹¤¾ß½øÐйÜÀí¡£
- ¸üвßÂÔ¡£¼´Ó¦ÓÃÓë×é¼þ¼¯µÄ¸üвßÂÔÓ¦±£³Ö²»Ò»Ö¡£
- ¡¡
ÓÅÊÆ³¡¾°£º½áºÏµÍ´úÂë
´ÓijÖÖÒâÒåÉÏÀ´Ëµ£¬ÎÞ×é¼þ¼Ü¹¹ÊÇ¿ÉÒ»ÖÖ¹ãÒåµÍ´úÂëµÄʵÏÖģʽ¡£ÒòΪ¸ü¶ÀÁ¢µÄ×é¼þģʽ£¬Ëü¹¹½¨³öÀ´µÄµÍ´úÂëϵͳ¾Í¸üÓÐÒâ˼£º
- ÅäÖü´ÔËÐÐʱ¡£ÀàËÆÓÚ Oracle DB µÄÃæÏò¹ý³Ìʽ£¬ÊµÏÖ¿ìËÙÉÏÏßÐÂÌØÐÔ¡£
- ´úÂëÉú³ÉµÄÌî¿Õʽ±à³Ì¡£ÈçÉÏËùÃæµÄÀý×ÓËùÊö£¬¿ÉÒÔÉú³É»ù±¾µÄº¯Êý´úÂë£¬Ëæºó¿ª·¢ÈËÔ±²¹³ä´úÂëÂß¼¼´¿É¡£
- »ùÓÚÁ÷±àÅŵĵʹúÂ롣ͬÑùÊÊÓÃÓÚ´«Í³µÄµÍ´úÂë¼Ü¹¹Ä£Ê½¡£
- DSL ʽµÍ´úÂë¡£Èç Quake ÖлùÓÚ DSL À´¹¹½¨µÄ¡£
Ö»ÊÇÄØ£¬´ÓģʽÉÏÀ´Ëµ£¬Ò²Ïà²î²»ÁËÌ«¶à¡£
ÎÞ×é¼þģʽ
ÉÏÃæµÄ¶¼Ã»É¶Òâ˼£¬ÔÚÎÒÃDzÉÄÉÁË Web Component ×÷ΪÎÞ×é¼þ¼Ü¹¹µÄʵʩ¼¼ÊõÖ®ºó£¬Ôڼܹ¹ÉϽ«»áÓиü¶àµÄʩչ¿Õ¼ä¡£Web Component ÒѾÊÇÒ»¸ö·Ç³£ºÃµÄ¡¢ÀàËÆÓÚ Docker µÄÈÝÆ÷£¬¿ÉÒÔÍæ¸÷ÖÖ fancy µÄÈÝÆ÷»¯Ä£Ê½¡£ÎÒÃÇÔÚ Quake ³¢ÊÔÁËһЩģʽ£¬Ëü´øÀ´ÁËһϵÁеÄÌôÕ½£¬È´Ò²·Ç³£ÓÐÒâ˼¡£
ÊÊÅäÆ÷£º¼æÈÝÏÖÓеÄ×é¼þ¡£
»ùÓÚ WC ×Ô´øµÄÌØÐÔ£¬·â×°ÏÖÓеÄÖ÷Á÷¿ò¼Ü Angular¡¢React¡¢Vue µÈµÄ×é¼þ£¬¾Í¿ÉÒÔ¿ìËÙÌṩÕâÑùµÄÄÜÁ¦£¬ÖîÈçÓÚÎÒÃÇÔÚ Quake ÖÐÌṩµÄ QuakeTimeline ºÍ QuakeCalendar µÈ¶¼ÊÇͨ¹ýÕâÖÖ·½Ê½£¬½« React ×é¼þ·âװΪ Web Component ×é¼þ£º
class ReactElement extends HTMLElement {
... } customElements . define ( 'quake-calendar' , ReactElement ); |
ÓÉÓÚ£¬¶ÔÍⱩ¶µÄÊÇ WC ×é¼þ£¬¾ÍÎÞËùνÓÚʹÓõÄÊǺÎÖÖǰ¶Ë¿ò¼Ü¡£
´óʹģʽ
ÔÚÔÆÔÉúģʽÀ´óʹģʽ£¨Ambassador£©¿ÉÒÔ´´½¨´ú±íÏû·ÑÕß·þÎñ»òÓ¦ÓóÌÐò£¬·¢ËÍÍøÂçÇëÇóµÄ°ïÖú·þÎñ¡£Í¬ÑùµÄʼþ£¬Ò²¿ÉÒÔͨ¹ý×é¼þÀ´·â×°£¬
const fetchEl = document . createElement ( 'fetch-api' );
fetchEl . setAttribute ( "url" , " / action / suggest );
fetchEl . addEventListener ( "fetchSuccess" , ( res : any ) => {
let response = res . detail ; loading . onDidDismiss (). then (() => {}); callback ( response ); }) |
²»¹ý£¬ÎÒÕâôд¾ÍÖ»ÊÇΪÁ˺ÃÍæ£¬´´½¨Ò»¸ö Loading ×é¼þ£¬ÔÚ Loading Àï²åÈë <fetch-api> ×é¼þ·¢Æð HTTP ÇëÇó£¬ÇëÇó³É¹¦ºó£¬°Ñ DOM Ïú»Ù¡£
ÕâÑùÒ»À´£¬ÎÒÖ»ÐèÒªÌæ»»Õâ¸öÇëÇó×é¼þ£¬¾Í¿ÉÒÔÌæ»»ËùÓеÄÇëÇó API¡£
ÎÞÏÞ ¡°Ì×ÍÞ¡± ģʽ
³£¹æµÄģʽÏ£¬ÎÒÃÇÔÚ A ×é¼þÀïµ÷ÓÃÁË B ×é¼þ£¬ÄÇôÀíÂÛÉÏ£¬ÎÒÃǾͲ»ÐèÒªÔÚ B ×é¼þÀïµ÷Óà A ×é¼þ£¬»áÐγÉÑ»·µÄÒýÓ㬵«ÊÇÔÚ Web Components ÖÐËü³ÉÁËÒ»ÖÖ¹¦ÄÜ¡£
ÈçÎÒÃÇÔÚ Quake µÄ markdown äÖȾÒýÇæÀï <quake-render> À°´Ìõ¼þäÖȾÁËǶÈëÒ³ÃæµÄ <embed-link> £¬¶ø <embed-link> ǶÈëµÄÒ³ÃæÒ²ÊÇ markdown µÄ£¬ËùÒÔÐèÒªÒ»¸ö <quake-render> £¬ËùÒÔ¿ÉÒÔÎÞÏÞ ¡°Ì×ÍÞ¡±£¬Ö±µ½ä¯ÀÀÆ÷µÄµ±Ç°Ò³Ãæ¹ÒÁË¡£
´ÓʹÓ÷½Ê½ÉÏÀ´Ëµ£¬A¡¢B Á½¸ö×é¼þ²¢²»´æÔÚÕâÑùµÄÏ໥µ÷ÓõĹØÏµ¡£
PS£ºÆäʵÕâÊÇÒ»¸ö bug£¬ºóÀ´ÎÒ¾õµÃÕâÊÇÒ»¸ö featurs¡£
Sidecar ģʽ
ÔÚÔÆÔÉúģʽ¹û£¬¿æ¶·Ä£Ê½ÊÇÖ¸½«Ó¦ÓóÌÐòµÄ×é¼þ²¿Êðµ½µ¥¶ÀµÄ½ø³Ì»òÈÝÆ÷ÖÐÒÔÌṩ¸ôÀëºÍ·â×°¡£ÕâÒ»µãÀ´Ëµ£¬¶ÔÓÚ Web Components Ò²ÊǷdz£¼òµ¥µÄ¡£
ÆäËüģʽ
ÒÀ¾ÉºÜ¶à£¬ÓпտÉÒÔÂýÂýÍæ¡£
×ܽá
Ìø³ö¿ò¼ÜÀ´Ë¼¿¼ÎÊÌ⣬±ã»á·¢ÏÖ¸÷Öַdz£ÓÐÒâ˼µÄÊÂÇé¡£ |