av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

講真！開發(fā)者要了解的微前端架構(gòu)

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

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

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

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

什么是微前端

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

使用微前端的場景：

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

編排(Orchestration)

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

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

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

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.

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

1.客戶端編排

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

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

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

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

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

1.1路由

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

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

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

1.3共享主要UI庫的代碼

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

1.4樣式?jīng)_突

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

1.5 SEO和UX

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

1.6 Web組件

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

1.6.1自定義元素(Custom Element)

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

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

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

  • 創(chuàng)建一個擴(kuò)展HTMLElement的類。
  • 自定義生命周期方法、及其屬性。
  • 在connectedCallback()生命周期方法的內(nèi)部，將新元素與HTML模板相關(guān)聯(lián)。
  • 使用自定義元素API注冊該元素。
  • 在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方法僅采用了一個屬性為mode的對象作為參數(shù)。據(jù)此，您可以使用open和closed兩種模式，來創(chuàng)建在作用域樣式和獨立組件上隔離的DOM樹。其中，Open意味著您可以使用在主頁上下文中編寫的JavaScript，去訪問Shadow DOM。而closed則意味著僅使用自定義元素上下文中的Javascript，去訪問Shadow DOM?？梢姡?dāng)您必須隔離CSS時，此法非常實用。

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)建在加載時未能呈現(xiàn)的HTML片段。當(dāng)然，您也可以在運行時，使用JavaScript對其進(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.

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

    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)，其值與我們在span元素上的slot屬性值相匹配。

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

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

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

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

    2.2.1 Zalandos解決方案

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

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

    下圖展示了如何通過微前端工作流程，來創(chuàng)建一個開源項目的完整步驟：

    2.2.2 Facebook解決方案

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

    2.3片段組成的可能性

    針對服務(wù)器端的片段組成，我們可以使用Server side include(SSI)和Edge side include(ESI)，這兩種傳統(tǒng)技術(shù)，來輕松地將不同的HTML標(biāo)記組合為一個。當(dāng)然，這兩種技術(shù)，都需要我們維護(hù)一個對應(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。
    • 是一種簡單的解釋型服務(wù)器端腳本語言。
    • 得到了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)語言。
    • 目前只是建議，并非標(biāo)準(zhǔn)。
    • 由包括Nginx和Varnish等不同的技術(shù)或庫，來提供支持。
    • 對于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自行實現(xiàn)

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

    結(jié)論

    您可以根據(jù)自己所面對的問題，通過分析，來選擇適合自己的微前端。常見的實現(xiàn)方式有如下兩種：

    完全獨立

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

    戰(zhàn)略合作

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

    網(wǎng)站題目：講真！開發(fā)者要了解的微前端架構(gòu)
    瀏覽路徑：http://uogjgqi.cn/article/ccsdijh.html
    掃二維碼與項目經(jīng)理溝通

    我們在微信上24小時期待你的聲音

    解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流