鍓嶈█锛氭渶杩戞劅瑙夊井鍓嶇宸茬粡鎴愪负鍓嶇宸ョ▼甯堢殑鏍囬厤浜嗐€備粠single-spa鍒皅iankun锛屽悇绉嶅井鍓嶇鏋舵瀯鏂规灞傚嚭涓嶇┓銆傞偅澶╂櫄涓婏紝鎴戝湪娴忚github鐨勬椂鍊欙紝娉ㄦ剰鍒颁竴涓柊鐨勫井鍓嶇妗嗘灦鈥斺€斾含涓滈浂鍞紑婧愮殑MicroApp锛屽彿绉颁笉闇€瑕佸儚涓婇潰鎻愬埌鐨勪袱涓鏋朵竴鏍疯皟鏁村瓙搴旂敤鐨勬覆鏌撻€昏緫锛岀敋鑷充笉闇€瑕佷慨鏀箇ebpack閰嶇疆銆傚彟涓€浠舵垚鍔熷紩璧锋垜娉ㄦ剰鐨勪簨鎯呮槸锛氬畠浣跨敤浜嗙綉缁滅粍浠剁殑姒傚康锛佽鎴戜滑鎵惧嚭绛旀锛?.閰嶈彍-WebComponents馃嵉浼楁墍鍛ㄧ煡锛學ebComponents鏄竴绉嶅師鐢熷疄鐜板彲椋熺敤Web缁勪欢鐨勮В鍐虫柟妗堛€備綘鍙互鐞嗚В涓哄湪vue銆丷eact绛夋鏋朵笅寮€鍙戠殑缁勪欢銆備笉鍚岀殑鏄紝鍩轰簬璇ユ爣鍑嗗紑鍙戠殑缁勪欢鍙互鐩存帴鍦℉TML涓娇鐢紝鏃犻渶渚濊禆鍏朵粬绗笁鏂瑰簱銆傛崲鍙ヨ瘽璇达細涓€浜涚幇浠ｆ祻瑙堝櫒鎻愪緵鐨凙PI浣垮緱鎴戜滑鍙互鍦ㄤ笉渚濊禆浠讳綍妗嗘灦鐨勬儏鍐典笅鍒涘缓涓€涓彲閲嶇敤鐨勭粍浠讹紝骞朵笖涓嶄細鍙楀埌妗嗘灦鐨勯檺鍒躲€備富瑕佸寘鎷互涓嬪姛鑳斤細浣跨敤鑷畾涔夊厓绱犺嚜瀹氫箟鏍囩ShadowDOM鐢ㄤ簬鏍峰紡闅旂浣跨敤妯℃澘鍜屾彃妲藉疄鐜扮粍浠舵墿灞曪紙鏈湡涓嶅睍寮€锛塛ebComponents濡備綍鍒涘缓缁勪欢锛熶笅闈㈡垜浠潵鐪嬩竴涓媁eb缁勪欢鐨刣emo缁冧範1.1缁冧範銆傛垜鍦╣ithub涓婃壘鍒颁簡涓€涓紨绀恒€傚涓嬪浘锛屽亣璁句竴涓〉闈㈢敱涓変釜涓嶅悓鐨勫洟闃熺嫭绔嬪紑鍙戯紝A鍥㈤槦璐熻矗绾㈣壊鍖哄煙鐨勬暣浣撳睍绀哄姛鑳斤紝B鍥㈤槦鍜孋鍥㈤槦鍒嗗埆璐熻矗钃濊壊鍜岀豢鑹插尯鍩燂紙鏄剧ず鍦ㄧ孩鑹插尯鍩燂級锛岄偅涔堝畠浠槸濡備綍瀹炵幇鐨勫憿锛熶笅闈互缁胯壊鍖哄煙鐨勫姛鑳戒负渚嬫潵鐪嬩竴涓媎emo鐨勪唬鐮佺ず渚嬨€傛湰璐ㄤ笂鍙互鐞嗚В涓哄畾涔変簡涓€涓粍浠秅reen-recos銆傞€氳繃涓婂浘鎴戜滑鏉ュ垎鏋愪竴涓嬭繖娈典唬鐮侊紝涓昏鍖呮嫭浠ヤ笅淇℃伅锛氬浣曡嚜瀹氫箟鍏冪礌锛?閫氳繃Api:window.customElements涓殑defind鏂规硶瀹氫箟娉ㄥ唽瀹炰緥濡備綍瀹氫箟缁勪欢瀹炰緥锛燂細閫氳繃缁ф壙HTMLElement鏉ュ畾涔変竴涓疄渚嬬被濡備綍涓庡鐣岄€氫俊锛燂細閫氳繃鍒涘缓涓€涓狢ustomEvent鏉ヨ嚜瀹氫箟涓€涓柊鐨勪簨浠讹紝鐒跺悗閫氳繃addEventListener鍜宔lement.dispatchEvent()鏉ョ洃鍚垎鍙戜簨浠躲€傚浣曟帶鍒剁粍浠剁殑鐢熷懡鍛ㄦ湡锛?涓昏鍖呮嫭杩欏嚑涓敓鍛藉懆鏈熷嚱鏁帮紝椤哄簭濡備笅馃憞constructor锛堝厓绱犲垵濮嬪寲锛?>attributeChangedCallback锛堝厓绱犲鍒犳敼鑷韩灞炴€ф椂璋冪敤锛?>connectedCallback锛堝厓绱犳彃鍏ユ枃妗OM鏃惰皟鐢級绗竴娆★紝璋冪敤)->disconnectedCallback(鑷畾涔夊厓绱犱粠鏂囨。DOM涓垹闄ゆ椂璋冪敤)`鎵╁睍锛氬叿浣揹emo鍙互fork杩欎釜浠撳簱锛氶摼鎺ヰ煋?.2鍏充簬鍏煎鎬ю煈ㄢ€嶐煄撻樋涔愬悓瀛︼細铚€姹燂紝鍚閭ebComponent鍏煎鎬т笉鏄緢濂斤紵鎬庝箞浜嗭紵澶у鍙互鐪嬩笂鍥攫煈嗭紝澶ч儴鍒嗘柊鐨勬祻瑙堝櫒鐗堟湰閮芥敮鎸佷簡銆傚鏋滀綘鎯冲吋瀹硅€佺増鏈紝涓嶈鐫€鎬ワ紝寮曞叆polyfillwebcomponents/polyfills灏卞彲浠ヨВ鍐冲吋瀹规€ч棶棰樸€傞€氳繃鍔犲己WebComponentsReady浜嬩欢涔熷彲浠ョ煡閬搘eb缁勪欢鏄惁鍔犺浇鎴愬姛1.3鍏充簬鏍峰紡鍐茬獊鍏充簬鏍峰紡锛屼笂闈緥瀛愪腑鐨勬牱寮忔槸鍏ㄥ眬寮曠敤鐨勶紝骞舵病鏈夎В鍐虫牱寮忓啿绐佺殑闂銆傚鏋滀綘鎯冲熀浜嶹ebComponents寮€鍙戠粍浠讹紝鍙堟媴蹇冪粍浠朵箣闂寸殑鏍峰紡鍐茬獊锛屽彲浠ヤ娇鐢⊿hadowDOM鏉ヨВ鍐筹紝鏈夌偣绫讳技浜巚ue涓畾涔夌粍浠朵腑鐨剆coped澶勭悊ShadowDOM锛氬張鍚峴hadowDOM锛屽畠鍙互灏嗕竴涓殣钘忕殑銆佺嫭绔嬬殑DOM闄勫姞鍒颁竴涓厓绱犮€傚涓婱DN瀹樻柟浠嬬粛鍥炬墍绀猴紝濡備綍鍩轰簬web缁勪欢寮€鍙戜竴涓寕鍦?shadow-root涓婄殑缁勪欢锛熷姣斾笂闈㈢殑渚嬪瓙鍜屼笂涓€鑺傜殑渚嬪瓙鎴戜滑鍙互鐪嬪埌锛屽鍔犱簡attachShadow鐨勬柟娉曘€傚畠鏄粈涔堬紵瀹樻柟浠嬬粛锛氶€氳繃attachShadow缁欎换鎰忓厓绱犻檮鍔犱竴涓猻hadowroot銆傚畠浠ヤ竴涓厤缃璞′綔涓哄弬鏁帮紝瀹冩湁涓€涓ā寮忓睘鎬с€傚綋mode涓簍rue鏃讹紝琛ㄧず鍦ㄨ嚜瀹氫箟缁勪欢鐨勯〉闈腑鍙互閫氳繃JavaScript鏂规硶鑾峰彇ShadowDOM锛熸槸鐨勶紝浣嗛渶瑕佹敞鎰忕殑涓€鐐规槸锛孷ue缁勪欢鐨勫紑鍙戜笌鑷畾涔夊厓绱犻潪甯哥浉浼笺€傚鏋滄垜浠笉鍋氫竴浜涒€滄墜娈碘€濈殑澶勭悊锛孷ue浼氭妸浣犲熀浜嶹ebComponents寮€鍙戠殑缁勪欢褰撲綔鑷繁妗嗘灦涓嬬殑缁勪欢锛屾墍浠ユ垜浠渶瑕侀厤缃甶gnoredElements銆備笅鍥炬槸vue瀹樼綉鐨勪緥瀛愩€傚鏋滀綘鎯充簡瑙ｆ洿澶氬叧浜嶹ebComponent鐨勭粍浠跺紑鍙戯紝鍙互鐪嬬湅涓嬮潰杩欎釜寮€婧愮粍浠跺簱github锛歺y-ui2mrcio-app涓嶅皬蹇冭窇鍋忎簡锛岃█褰掓浼犺亰鑱婁粖澶╃殑涓昏锛氬井搴旂敤涔惧潳绔ラ瀷浣跨敤鍚庣煡閬擄紝闇€瑕佸湪搴曞骇涓婇泦鎴愪竴涓井搴旂敤锛屾病鏈変互涓嬩笁涓绱狅細鍦ㄥ簳搴т笂娉ㄥ唽涓€涓瓙搴旂敤锛岄渶瑕佸湪瀛愬簲鐢ㄤ腑瀹氫箟涓€涓敓鍛藉懆鏈熷嚱鏁颁慨鏀瑰井搴旂敤铏界劧webpack鎵撳寘鏂瑰紡鐨勬敼閫犳垚鏈笉鏄壒鍒珮锛屼絾鏄敖閲忓噺灏戝婧愮爜鐨勪镜鍏ヤ笉鏄緢濂藉悧锛烳rcio-app璧扮殑鏄瀬绠€璺嚎銆傚彧闇€淇敼涓€鐐圭偣浠ｇ爜锛屽嵆鍙疄鐜板井搴旂敤鐨勯泦鎴愩€傚畠澹扮О鏄闂競鍦轰笂寰墠绔殑鎴愭湰鏈€浣庣殑瑙ｅ喅鏂规銆傞偅涔堝畠鏄浣曞仛鍒扮殑鍛紵2.1鍘熺悊寰簲鐢ㄦ湰璐ㄤ笂鏄竴绉嶅熀浜庣被WebComponent+HTMLEntry鐨勫井鍓嶇鏋舵瀯銆傚畼鏂逛粙缁嶏細閫氳繃鑷畾涔夊厓绱犲井搴旂敤鐨勭敓鍛藉懆鏈熷嚱鏁癱onnectedCallback锛屾覆鏌撶洃鎺у厓绱狅紝鍔犺浇瀛愬簲鐢ㄧ殑html骞惰浆鍖栦负DOM缁撴瀯銆傞€掑綊鏌ヨ鍔犺浇鎵€鏈塲s銆乧ss绛夐潤鎬佽祫婧愶紝璁剧疆鍏冪礌闅旂锛屾嫤鎴墍鏈夊姩鎬佸垱寤虹殑script銆乴ink绛夋爣绛撅紝鎻愬彇鏍囩鍐呭銆傚姞杞界殑js缁忚繃鎻掍欢绯荤粺澶勭悊鍚庯紝鏀惧叆娌欑杩愯锛岄殧绂籧ss璧勬簮鐨勬牱寮忋€傛渶鍚庡皢鏍煎紡鍖栧悗鐨勫厓绱犳斁鍏ュ井搴旂敤涓紝鏈€鍚庡皢寰簲鐢ㄥ厓绱犳覆鏌撲负寰墠绔殑child銆傚簲鐢ㄣ€傚湪娓叉煋杩囩▼涓紝浼氭墽琛屽紑鍙戣€呯粦瀹氱殑鐢熷懡鍛ㄦ湡鍑芥暟锛岃繘琛岃繘涓€姝ョ殑鎿嶄綔銆傚叧浜嶩TMLEntry锛氱浉淇＄敤杩噏iankun鐨勭闉嬪簲璇ヤ笉闄岀敓銆傚氨鏄姞杞藉井搴旂敤鐨勫叆鍙ｆ枃浠躲€傚畠涓€鏂归潰鎷夊彇寰簲鐢ㄧ殑闈欐€佽祫婧恓s銆丆SS绛夋枃浠讹紝鍙︿竴鏂归潰娓叉煋寰簲鐢ㄧ殑dom绫籛ebComponent锛氭垜浠湪涓婁竴鑺傚涔爓ebComponent鏃讹紝鎴戜滑浜嗚В浜嗕袱涓姛鑳斤細CustomElement鍜孲hadowDom銆傚墠鑰呭厑璁告垜浠垱寤鸿嚜瀹氫箟鏍囩锛屽悗鑰呭厑璁告垜浠垱寤烘敮鎸侀殧绂绘牱寮忓拰鍏冪礌闅旂鐨勫奖瀛怐OM銆傝€岀涓€娆℃彁鍒扮殑绫籛ebComponent鏄粈涔堬紵鏈川涓婂氨鏄娇鐢–ustomElement缁撳悎鑷畾涔塖hadowDom鏉ュ疄鐜颁笌WebComponent鍩烘湰鐩稿悓鐨勫姛鑳姐€備篃灏辨槸璇达細璁╁井鍓嶇涓嬬殑寰簲鐢ㄥ疄鐜扮湡姝ｇ殑缁勪欢鍖栥€傚ソ璇勶細涓嶉渶瑕佸儚qiankun閭ｆ牱鍦ㄦ瘡涓井app涓鍏堝畾涔夌敓鍛藉懆鏈熷嚱鏁帮紝姣斿锛歝reated銆乵ounted绛夛紝鑰屾槸鍙﹁緹韫婂緞銆傞泦鎴愬埌鍩哄湴涓悗锛岀洿鎺ュ湪鍩哄湴涓畾涔夊嵆鍙紝涔熷彲浠ヨ繘琛屽叏灞€鐩戞帶銆備笂鍥剧殑灞炴€ч厤缃腑锛宯ame涓哄井搴旂敤鐨勫悕绉伴厤缃紝url涓哄瓙搴旂敤椤甸潰鐨勫湴鍧€閰嶇疆锛屽叾浠栦负鍚勪釜鐢熷懡鍛ㄦ湡鍑芥暟鐨勫畾涔夈€傝祫婧愬湴鍧€鑷姩琛ュ叏锛氬綋鎴戜滑鍦╞ase涓婂姞杞藉井搴旂敤鏃讹紝褰撳井搴旂敤娑夊強鍔犺浇鍥剧墖鎴栧叾浠栬祫婧愭椂锛屽鏋滆闂矾寰勬槸鐩稿鍦板潃锛屾垜浠細鍙戠幇闈欐€佽祫婧愪細琛ュ叏涓哄熀纭€搴旂敤鐨勫煙鍚嶅湴鍧€锛屽鑷磋祫婧愬姞杞介敊璇€傚皬绋嬪簭鏀寔灏嗗瓙搴旂敤闈欐€佽祫婧愮殑鐩稿鍦板潃琛ュ叏涓虹粷瀵瑰湴鍧€锛岃В鍐充簡涓婅堪闂2.3瀹炶返2.3.1涓婃墜demo涔熼潪甯哥畝鍗曘€備互vue2搴旂敤涓轰緥锛屽叿浣撳弬鑰僩ithub鏂囨。銆傛澶勪笉鍐嶈禈杩般€傞€氳繃vue寰簲鐢―emo瀹樻柟鍦ㄧ嚎婕旂ず锛屾垜浠潵鐪嬬湅闆嗘垚鍚庣殑鏁堟灉銆傚湪鎺у埗鍙颁腑锛屾垜浠彲浠ョ湅鍒癰ase涓婂姞杞戒簡鈥渧ue2鈥濆井搴旂敤锛岃嚜瀹氫箟鏍囩寰簲鐢ㄦ覆鏌撳畬鎴愬悗锛屾槸涓€涓畬鏁寸殑瀛愬簲鐢╠om锛屾劅瑙夋湁鐐瑰儚iframe锛岀劧鍚庢槸瀛愬簲鐢ㄧ殑css鏍峰紡鏈変竴涓墠缂€micro-app[name=vue2]銆傝繖鏄埄鐢ㄦ爣绛剧殑name灞炴€т负姣忎釜鏍峰紡娣诲姞鍓嶇紑锛屽皢瀛愬簲鐢ㄧ殑鏍峰紡褰卞搷闄愬埗鍦ㄥ綋鍓嶆爣绛惧尯鍩燂紝閬垮厤寰簲鐢ㄤ箣闂寸殑鏍峰紡鍐茬獊銆傝繖鏄井搴旂敤榛樿鐨勯殧绂绘満鍒躲€備箰鍚屽锛氳垝姹燂紝浠栨槸鎬庝箞鍋氬埌杩欎釜鍏冪礌闅旂鐨勶紵浣犲惉鎴戣В閲婏紝鐪嬩笅涓€鑺傛簮鐮佸垎鏋?.3.2寰簲鐢ㄦ覆鏌撴祦绋嬪井搴旂敤娓叉煋娴佺▼鐨勪富瑕佹祦绋嬪浘鍙互鍙傝€冨畼鏂规彁渚涚殑锛屼富瑕佸寘鎷互涓嬫祦绋媐etchsub-applicationHTMl锛氳幏鍙杊tml锛岀劧鍚庡皢鍏惰浆鍖栦负dom缁撴瀯锛屽苟瀵规瘡涓瓙鍏冪礌杩涜閫掑綊澶勭悊锛屽涓嶅悓鐨勫厓绱犺繘琛岀浉搴旂殑澶勭悊銆傛簮鐮侀摼鎺ョ殑浣滅敤鏄彁鍙栧井搴旂敤鐨勯摼鎺ュ拰鑴氭湰锛岀粦瀹氭牱寮忚寖鍥淬€傛渶鍚庡湪寰簲鐢ㄥご閮ㄦ寕涓婂井搴旂敤鐨勬牱寮忋€傛牳蹇冩簮鐮佸涓嬨€傞€氳繃婧愮爜鐨勯槄璇伙紝褰撴垜浠厤缃皬绋嬪簭鍒濆鍖栨椂瀹氫箟鐨刟pp.scopecss锛堥粯璁ゅ紑鍚級鏃讹紝浼氳皟鐢╯copedCSS瀵筪om杩涜澶勭悊銆傛瀹炵幇缁戝畾浜嗗井搴旂敤鐨刢ss鑼冨洿銆傛垜浠湅涓€涓嬭繖涓柟娉曠殑婧愮爜閾炬帴銆傛垜鍦ㄦ簮鐮佷腑鐪嬪埌锛宻coped_css涓昏鍖哄垎浜嗗嚑涓猚ssRules銆傛亽鍚屽锛氳垝姹燂紝浠€涔堟槸CSSRule锛熻繖鏄竴涓巻鍙叉蹇碉紝CSSRule浠ｈ〃涓€涓狢SS瑙勫垯銆侰SS鏍峰紡琛ㄥ寘鍚竴缁勮〃绀鸿鍒欑殑CSSRule瀵硅薄銆侰SSRule鏈夊嚑绉嶄笉鍚岀殑瑙勫垯绫诲瀷銆傚井搴旂敤涓彲浠ュ浠ヤ笅甯歌cssRules杩涜CSSRule.STYLE_RULE鐨勫尯鍒嗗鐞嗭細閫氱敤鏍峰紡瑙勫垯CSSRule.MEDIA_RULE锛欳SS@media濯掍綋灞炴€ф煡璇㈣鍒機SSRule.SUPPORTS_RULE锛欳SS@support鍙互鏍规嵁娴忚鍣ㄧ殑鏀寔瀹氫箟涓嶅悓鐨勬牱寮忚鍒欑敤浜嶤SS鍔熻兘銆傛渶鍚庡皢杞崲鎴愬姛鐨勬牱寮忓唴瀹硅拷鍔犲埌寰簲鐢ㄥご閮ㄣ€傛亽鍚屽锛氫功姹燂紝浣犺寰簲鐢ㄩ殧绂诲厓绱犳敮鎸乻hadowDom锛熸槸鐨勶紝濡傛灉鍚敤浜唖hadowDOM锛屼笂闈㈡彁鍒扮殑榛樿鏍峰紡闅旂灏嗗け鏁堛€傝€屼笖鍏煎鎬т細寰堝樊銆備互涓嬩负鍒犲噺鐗堬細鍏充簬寰簲鐢ㄩ€氳繃WebComponent+shadowDOM瀹炵幇瀛愬簲鐢ㄥ垵濮嬪寲鐨勫畾涔夛紝鍏蜂綋婧愮爜鍙互闃呰妗嗘灦婧愮爜涓璵icro_app_element鐨勫畾涔夈€傛簮浠ｇ爜閾炬帴瀹炶川涓婂惎鐢ㄤ簡shadowDom銆?micro-app>鏍囩鏄疻ebComponent3鐨勭湡姝ｅ疄鐜般€傛渶鍚庡啓浜咼S娌欑锛坰andbox锛夊拰鏁版嵁閫氫俊鐨勫疄鐜版満鍒躲€傜◢鍚庡啀鍒嗕韩缁欑闉嬩滑銆備綘濂斤紝鎴戞槸馃尣鏍戦叡锛岃鍠濅竴鏉煃佃浣忎笁杩瀪1.鐪嬪畬璁板緱鐐硅禐锛屼綘灏辨湁浜嗮煈嶅姩鍔?.鍏虫敞鍓嶇閭ｄ簺鏈夎叮鐨勫叕浼楀彿锛屽拰浣犺亰鑱婂ぉ鍏充簬鍓嶇鐨勮叮浜?.鏂囩珷鏀跺綍鍦℅ithubfrontendThings璋㈣阿Star鉁?/p>
