日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
講真！開(kāi)發(fā)者要了解的微前端架構(gòu)

隨著前端技術(shù)的發(fā)展，針對(duì)此類(lèi)架構(gòu)的解決方案也不斷涌現(xiàn)。如下圖所示，前端架構(gòu)領(lǐng)域的主要思路是將前端分別獨(dú)立出來(lái)，以便后期組合一個(gè)更大的整體，同時(shí)也方便獨(dú)立的團(tuán)隊(duì)對(duì)其進(jìn)行維護(hù)。

創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計(jì)公司,作為專(zhuān)業(yè)的成都網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)公司依托強(qiáng)大的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專(zhuān)業(yè)的成都網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開(kāi)發(fā)服務(wù)！

讓我們先來(lái)總結(jié)一下微服務(wù)，給開(kāi)發(fā)應(yīng)用帶來(lái)的好處：

  • 解耦的代碼庫(kù)。
  • 自治的團(tuán)隊(duì)。
  • 與技術(shù)和框架無(wú)關(guān)。
  • 能夠獨(dú)立部署。
  • 具有可擴(kuò)展性。
  • 具有可重用性。

什么是微前端

如下圖所示，微前端(Micro-frontends)延續(xù)了上述僅在后端實(shí)現(xiàn)的微服務(wù)的各項(xiàng)優(yōu)勢(shì)，能夠讓不同的團(tuán)隊(duì)實(shí)現(xiàn)端到端的代碼交付。

使用微前端的場(chǎng)景：

  • 不同團(tuán)隊(duì)疲于應(yīng)付大量的代碼庫(kù)。
  • 代碼的所有權(quán)頻繁發(fā)生變更。
  • 產(chǎn)品的部署被應(yīng)用程序的其他部分拖延。
  • 希望使用不同的前端(FE)框架。

編排(Orchestration)

借助業(yè)務(wù)流程，我們可以在服務(wù)器端和客戶(hù)端上，利用不同的方法將不同的微前端組合成為一個(gè)功能完備的應(yīng)用程序，以發(fā)揮最佳性能。

在此，我們介紹一種方案--構(gòu)建時(shí)間整合(Build time integration)。其特點(diǎn)是：

  • 每個(gè)微前端應(yīng)用程序都代表一個(gè)npm軟件包。
  • 主應(yīng)用程序(orchestrator/container)將自身構(gòu)建為具有所有依賴(lài)項(xiàng)(微前端)的最終捆綁包。

JavaScript

 
 
 
 
    
  
  
  
  
  1. { 
    2.   
  
  
  
  2.   "name": "@super-app/container", 
    3.   
  
  
  
  3.   "version": "1.0.0", 
    4.   
  
  
  
  4.   "description": "My super app", 
    5.   
  
  
  
  5.   "dependencies": { 
    6.   
  
  
  
  6.    "@super-app/products-list": "2.0.0", 
    7.   
  
  
  
  7.    "@super-app/header": "4.5.2", 
    8.   
  
  
  
  8.    "@super-app/order": "1.0.0" 
    9.   
  
  
  
  9.   } 
    10.   
  
  
  
  10. } 
    11.

上述代碼似乎符合邏輯，但實(shí)際上卻暗藏著一個(gè)巨大的缺陷：每當(dāng)微前端應(yīng)用程序發(fā)生變更時(shí)，整個(gè)orchestrator及其所有的依賴(lài)項(xiàng)都必須隨即重建，以創(chuàng)建出新的版本。那么，這樣會(huì)導(dǎo)致每個(gè)微前端的潛在延遲、回滾、甚至是錯(cuò)誤。與此同時(shí)，由于每個(gè)團(tuán)隊(duì)都對(duì)相同的軟件包版本存在著依賴(lài)性，因此這實(shí)際上會(huì)導(dǎo)致新版本的創(chuàng)建更加困難。下面，我們來(lái)看看如何避免此類(lèi)情況的發(fā)生。

1.客戶(hù)端編排

  • 客戶(hù)端路由。
  • 狀態(tài)共享。
  • 注冊(cè)所有的應(yīng)用程序。
  • 如果有可能的話，盡量解決共享依賴(lài)項(xiàng)。
  • 初始化主應(yīng)用程序。
  • 編寫(xiě)來(lái)自不同微前端應(yīng)用的程序片段。

為了達(dá)到上述功能，您可以使用如下程序庫(kù)：

  • single-spa：一種頂級(jí)的路由器。
  • hinclude：包含了HTML程序片段。
  • h-include：包括使用各種Web組件的HTML片段。

我們可以通過(guò)對(duì)不同API的簡(jiǎn)單Ajax調(diào)用，來(lái)完成程序片段的編寫(xiě)。為了返回預(yù)先渲染(pre-rendered)的HTML，API可以在前端被合并，或者僅返回所需的腳本標(biāo)簽，以及帶有ID的特定HTML標(biāo)簽，以方便加載那些程序片段可以呈現(xiàn)的ID。

此外，您也可以使用Vanilla JS、或其他類(lèi)型的框架，來(lái)自行實(shí)現(xiàn)編排的目的。

1.1路由

  • 使用History API，來(lái)初始化應(yīng)用內(nèi)的路由器。
  • 自定義瀏覽器事件、或PubSub庫(kù)。
  • 將路由保留在Orchestrator應(yīng)用上。

1.2共享全局狀態(tài)，并在應(yīng)用之間進(jìn)行通信

  • 每個(gè)微前端都具有公開(kāi)狀態(tài)的Observable模式。RxJS非常適用于這種模式。
  • 自定義瀏覽器事件。
  • 實(shí)現(xiàn)Cookie、會(huì)話或本地存儲(chǔ)。

1.3共享主要UI庫(kù)的代碼

  • 在選擇第三方庫(kù)時(shí)，應(yīng)選擇一個(gè)在微前端中能夠支持所有可能用到的框架類(lèi)型的庫(kù)。
  • 如果您想自行開(kāi)發(fā)庫(kù)，則可以使用Web組件，以保持通用性。
  • 團(tuán)隊(duì)成員各司其職對(duì)庫(kù)進(jìn)行開(kāi)發(fā)與維護(hù)，而不必專(zhuān)門(mén)創(chuàng)建某個(gè)特定的團(tuán)隊(duì)。

1.4樣式?jīng)_突

  • 為每個(gè)團(tuán)隊(duì)確定不同CSS類(lèi)的特定前綴。
  • 使用BEM樣式。
  • 使用JSS等樣式組件(styled-components)，以避免在使用CSS和JS庫(kù)時(shí)發(fā)生沖突。
  • 使用Web組件中的Shadow DOM。

1.5 SEO和UX

  • Skeleton UI是一種在未加載內(nèi)容之前的預(yù)定義初始化屏幕。
  • 在ESI或SSI的幫助下，進(jìn)行服務(wù)器端的渲染。

1.6 Web組件

它們包括4個(gè)規(guī)范定義：

1.6.1自定義元素(Custom Element)

  • https://w3c.github.io/webcomponents/spec/custom/。

通過(guò)使用自定義元素的API，您可以使用各種生命周期、屬性變更處理程序、事件處理程序等方法，來(lái)創(chuàng)建功能齊全的自定義HTML元素。

如下是創(chuàng)建自定義元素的過(guò)程：

  • 創(chuàng)建一個(gè)擴(kuò)展HTMLElement的類(lèi)。
  • 自定義生命周期方法、及其屬性。
  • 在connectedCallback()生命周期方法的內(nèi)部，將新元素與HTML模板相關(guān)聯(lián)。
  • 使用自定義元素API注冊(cè)該元素。
  • 在HTML中使用此元素。

JavaScript

 
 
 
 
    
  
  
  
  
  1. class MyIcon extends HTMLElement { 
    2.   
  
  
  
  2.   constructor() { 
    3.   
  
  
  
  3.     super(); 
    4.   
  
  
  
  4.     this._iconCode = null; 
    5.   
  
  
  
  5.   } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.   static get observedAttributes() { 
    9.   
  
  
  
  9.     return ["code"]; 
    10.   
  
  
  
  10.   } 
    11.   
  
  
  
  11.   attributeChangedCallback(name, oldValue, newValue) { 
    12.   
  
  
  
  12.     // name will always be "code" due to observedAttributes 
    13.   
  
  
  
  13.     this._iconCode = newValue; 
    14.   
  
  
  
  14.     this._render(); 
    15.   
  
  
  
  15.   } 
    16.   
  
  
  
  16.   connectedCallback() { 
    17.   
  
  
  
  17.     this._render(); 
    18.   
  
  
  
  18.   } 
    19.   
  
  
  
  19.   get code() { 
    20.   
  
  
  
  20.     return this._iconCode; 
    21.   
  
  
  
  21.   } 
    22.   
  
  
  
  22.   set code(value) { 
    23.   
  
  
  
  23.     this.setAttribute("code", value); 
    24.   
  
  
  
  24.   } 
    25.   
  
  
  
  25.   _render() { 
    26.   
  
  
  
  26.     // append needed elements to the DOM or the shadow DOM 
    27.   
  
  
  
  27.   } 
    28.   
  
  
  
  28. } 
    29.   
  
  
  
  29. customElements.define("my-icon", MyIcon); 
    30.   
  
  
  
  30. // Usage:  
    31.

1.6.2 Shadow DOM

  • https://w3c.github.io/webcomponents/spec/shadow/。
  • https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM。

JavaScript

 
 
 
 
    
  
  
  
  
  1. Element.attachShadow(); 
    2.

上述的attachShadow方法僅采用了一個(gè)屬性為mode的對(duì)象作為參數(shù)。據(jù)此，您可以使用open和closed兩種模式，來(lái)創(chuàng)建在作用域樣式和獨(dú)立組件上隔離的DOM樹(shù)。其中，Open意味著您可以使用在主頁(yè)上下文中編寫(xiě)的JavaScript，去訪問(wèn)Shadow DOM。而closed則意味著僅使用自定義元素上下文中的Javascript，去訪問(wèn)Shadow DOM?？梢?jiàn)，當(dāng)您必須隔離CSS時(shí)，此法非常實(shí)用。

JavaScript

 
 
 
 
    
  
  
  
  
  1. import React from 'react'; 
    2.   
  
  
  
  2. import ReactDOM from 'react-dom'; 
    3.   
  
  
  
  3. import App from './App'; 
    4.   
  
  
  
  4. class MyCusotomElement extends HTMLElement { 
    5.   
  
  
  
  5.   constructor() { 
    6.   
  
  
  
  6.     super(); 
    7.   
  
  
  
  7.     this.shadow = this.attachShadow({ mode: 'closed' }); // Or open 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9.   connectedCallback() { 
    10.   
  
  
  
  10.     ReactDOM.render(, this.shadow); 
    11.   
  
  
  
  11.   } 
    12.   
  
  
  
  12. } 
    13.   
  
  
  
  13. customElements.define("my-custom-element", MyCusotomElement); 
    14.

1.6.3 ES模塊

  • https://html.spec.whatwg.org/multipage/webappapis.html#integration-with-the-javascript-module-system。

在此，我們只需要導(dǎo)入、導(dǎo)出JS模塊即可。

1.6.4 HTML模板

  • https://html.spec.whatwg.org/multipage/scripting.html#the-template-element/。
  • https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element。

使用HTML模板(如下面代碼中的)，您可以創(chuàng)建在加載時(shí)未能呈現(xiàn)的HTML片段。當(dāng)然，您也可以在運(yùn)行時(shí)，使用JavaScript對(duì)其進(jìn)行初始化。

HTML
 
  •  
  •    
  •     
    •  
  •       
    •  
  •       
    •  
  •     
    •  
  •   
    • What is this? My example template.
     
  •   

    • JavaScript

     
 
 
 
      
  
  
  
  
    1. // Find our template  
      2.   
  
  
  
    2. var template = document.querySelector('#example-template'); 
      3.   
  
  
  
    3. // Find our target element 
      4.   
  
  
  
    4. var target = document.querySelector('#example'); 
      5.   
  
  
  
    5. // Clone the content of our template 
      6.   
  
  
  
    6. var content = document.importNode(template.content, true); 
      7.   
  
  
  
    7. // Append the template content to our target element 
      8.   
  
  
  
    8. target.appendChild(content); 
      9.

    如下面的代碼所示，另一個(gè)實(shí)用的元素是。它是Web組件技術(shù)的一部分，可用作Web組件內(nèi)的占位符，您可以使用自己的標(biāo)記來(lái)填充它。

    HTML

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.     
      Attributes
       
      4.   
  
  
  
    4.     
      None
       
      5.   
  
  
  
    5.   
     
  •  
  •  
  •   Attributes from web component.
  •  

    • JavaScript

     
 
 
 
      
  
  
  
  
    1. customElements.define('element-attributes', 
      2.   
  
  
  
    2.   class extends HTMLElement { 
      3.   
  
  
  
    3.     constructor() { 
      4.   
  
  
  
    4.       super(); 
      5.   
  
  
  
    5.       const template = document 
      6.   
  
  
  
    6.         .getElementById('example-template') 
      7.   
  
  
  
    7.         .content; 
      8.   
  
  
  
    8.       this.attachShadow({ mode: 'open' }) 
      9.   
  
  
  
    9.         .appendChild(template.cloneNode(true)); 
      10.   
  
  
  
    10.     } 
      11.   
  
  
  
    11.   } 
      12.

    其結(jié)果模板為：

    具有slot屬性的已定義span元素,將在具有name屬性的slot元素內(nèi)被呈現(xiàn)，其值與我們?cè)趕pan元素上的slot屬性值相匹配。

    2.服務(wù)器端編排

    • 具有代理請(qǐng)求的服務(wù)器路由。
    • 注冊(cè)所有應(yīng)用程序。
    • 如果有的話，可解決共享依賴(lài)項(xiàng)。
    • 服務(wù)與組合那些來(lái)自不同的微前端應(yīng)用的程序片段。

    2.2 引導(dǎo)程序應(yīng)用

    通常，我們可以將服務(wù)器端業(yè)務(wù)流程的方案，稱(chēng)為Bootstrap應(yīng)用。由于它們比較復(fù)雜，因此我們往往會(huì)用到如下兩個(gè)典型的方案。

    2.2.1 Zalandos解決方案

    Project Mosaic9(https://www.mosaic9.org/)。

    用戶(hù)只需進(jìn)入其頁(yè)面，通過(guò)瀏覽器點(diǎn)擊其路由器，以決定是采用API調(diào)用、還是布局式調(diào)用。對(duì)于API調(diào)用而言，路由器會(huì)將請(qǐng)求代理到所需的API處。而在布局調(diào)用中，路由器會(huì)調(diào)用布局服務(wù)，以了解所有可能的布局，進(jìn)而從不同的端點(diǎn)加載它們。

    下圖展示了如何通過(guò)微前端工作流程，來(lái)創(chuàng)建一個(gè)開(kāi)源項(xiàng)目的完整步驟：

    2.2.2 Facebook解決方案

    上述Zalando中Tailor.js的靈感，實(shí)際上來(lái)源于Facebook的BigPipe。由于具有相似之處，我們不做過(guò)多的介紹，您可以參閱：https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/，以獲悉其工作原理。

    2.3片段組成的可能性

    針對(duì)服務(wù)器端的片段組成，我們可以使用Server side include(SSI)和Edge side include(ESI)，這兩種傳統(tǒng)技術(shù)，來(lái)輕松地將不同的HTML標(biāo)記組合為一個(gè)。當(dāng)然，這兩種技術(shù)，都需要我們維護(hù)一個(gè)對(duì)應(yīng)著靜態(tài)HTML文件的URL映射。

    2.3.1 Server side include(SSI)

    • http://www.alticore.eu/wasd_root/doc/env/env_0400.html。
    • https://www.owasp.org/index.php/Server-Side_Includes_(SSI)_Injection。
    • https://www.w3.org/Jigsaw/Doc/User/SSI.html。
    • http://httpd.apache.org/docs/current/howto/ssi.html#basic。
    • 是一種簡(jiǎn)單的解釋型服務(wù)器端腳本語(yǔ)言。
    • 得到了Apache和Nginx的支持。

    下面是其主HTML文件的代碼：

    HTML

     
 
 
 
      
  
  
  
  
    1.   
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.     
      4.   
  
  
  
    4.     SSI 
      5.   
  
  
  
    5.    
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7.      
      8.   
  
  
  
    8.    
      9.   
  
  
  
    9.  
      10.

    在Nginx中的配置為：

    Java

     
 
 
 
      
  
  
  
  
    1. server { 
      2.   
  
  
  
    2.   listen 8080; 
      3.   
  
  
  
    3.   server_name localhost; 
      4.   
  
  
  
    4.   root /usr/share/nginx/html;
      5.   
  
  
  
    5.   index index.html; 
      6.   
  
  
  
    6.   # Turn on the SSI ferature 
      7.   
  
  
  
    7.   ssi on; 
      8.   
  
  
  
    8.   # Set the $PAGE variable used inside the main HTML 
      9.   
  
  
  
    9.   location /browse { 
      10.   
  
  
  
    10.     set $PAGE 'browse'; 
      11.   
  
  
  
    11.   } 
      12.   
  
  
  
    12.   location /profile { 
      13.   
  
  
  
    13.     set $PAGE 'profile' 
      14.   
  
  
  
    14.   } 
      15.   
  
  
  
    15. } 
      16.

    2.3.2 Edge side include(ESI)

    • https://www.w3.org/TR/esi-lang。
    • 使用到了小標(biāo)記(Small markup)語(yǔ)言。
    • 目前只是建議，并非標(biāo)準(zhǔn)。
    • 由包括Nginx和Varnish等不同的技術(shù)或庫(kù)，來(lái)提供支持。
    • 對(duì)于NodeJS而言，具有nodei的npm軟件包。

    HTML

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.      
      3.   
  
  
  
    3.        
      4.   
  
  
  
    4.        ESI 
      5.   
  
  
  
    5.       
      6.   
  
  
  
    6.       
      7.   
  
  
  
    7.        
      8.   
  
  
  
    8.       
      9.   
  
  
  
    9.  
      10.

    2.3.3自行實(shí)現(xiàn)

    當(dāng)然，您也可以在服務(wù)器端實(shí)現(xiàn)自己的解析器、或某種標(biāo)記幫助器。幾乎每一個(gè)模板庫(kù)都可以實(shí)現(xiàn)自定義的標(biāo)簽解析。

    結(jié)論

    您可以根據(jù)自己所面對(duì)的問(wèn)題，通過(guò)分析，來(lái)選擇適合自己的微前端。常見(jiàn)的實(shí)現(xiàn)方式有如下兩種：

    完全獨(dú)立

    • 每個(gè)團(tuán)隊(duì)都選擇自己的技術(shù)棧，且不共享代碼。
    • 每個(gè)片段都進(jìn)行自己的API調(diào)用。
    • 每個(gè)視圖都由功能齊全的片段所組成。
    • 每個(gè)微前端應(yīng)用都有自己的CI/CD。

    戰(zhàn)略合作

    • 大家同意技術(shù)棧，并共享公共庫(kù)。
    • API調(diào)用流需經(jīng)過(guò)bootstrap應(yīng)用。
    • 共享UI庫(kù)。
    • 共享CI/CD。

    新聞標(biāo)題：講真！開(kāi)發(fā)者要了解的微前端架構(gòu)
    本文路徑：http://www.dlmjj.cn/article/ccsdijh.html