国产一区二区三区视频精品_国产精品无码AV在线毛片_中文字幕人成无码

每個開發人員都應該關注代碼中的可重用性以及代碼的業務隔離，這樣可以讓業務邏輯與應用架構分離，提升系統的擴展性。而 Web Component 就是這樣一個技術，可以讓我們創建一個獨立的可重用組件。

本文將介紹使用 Svelte 創建通用的 Web Component 的完成過程。『通用』指的是該組件不局限于 Svelte 應用，還可以用于任何 JavaScript 應用程序（如 Vue、React 等），同時還將介紹使用 Svelte 創建 Web Component 的一些局限性。

什么是 Web Component?

Web Component 可以讓我們創建可重用的、自定義的封裝了樣式以及功能的 HTML 元素。

例如，我們使用如下代碼來創建一個導航條：

如果用 Web Component 技術，我們可以定義一個自定義元素（如），然后你可以在網頁任一地方使用該元素顯示導航條，同時這個導航條的樣式和頁面其他元素的樣式是完全隔離的，不會相互影響。而這項技術被稱之為 Shadow DOM （影子 DOM）。

什么是 Shadow DOM?

Shadow DOM 是一個較小的、獨立的 DOM，它與主 DOM 分開渲染，允許我們將樣式和標記行為隔離到單個組件中。Shadow DOM 本質上允許我們將組件功能進行封裝和隔離，我們可以單獨對其設置樣式、編寫功能腳本，而不會干擾應用程序的其余元素。
你大概對 Web Component 有一個基本的認識，下面我們開始用 Svelte 來編寫一個簡單的組件。

構建 Web Component

準備工作

為了完成本文剩余的內容學習，需要你對掌握以下知識：

對 HTML, CSS 和 JavaScript 有基本的認識

熟悉命令行操作環境

需要一個文本編輯器

最好對 Svelte 有一些基本的了解（可以看看我之前翻譯的文章https://my.oschina.net/javayou/blog/5309554）

開始

本文我們將開發兩個組件：

第一個組件是一個卡片組件，接收三個屬性分別是：卡片標題、卡片描述以及圖片，該組件名為

第二個組件是一個帶樣式的按鈕，接收一個type的屬性，通過該屬性來確定按鈕的顯示樣式，組件名稱為

同時我們將使用兩種組件的發布方式，一個是打包到單一文件，另外一個是每個組件發布到一個獨立的文件中。

下圖顯示的是兩個組件運行后的外觀：

我們從創建一個 Svelte 應用開始，并安裝必須的包：

npx degit sveltejs/template web-component-tut
cd web-component-tut
npm install

上述命令執行完畢就可以使用如下命令啟動一個測試環境：

npm run dev

然后我們打開瀏覽器訪問http://localhost:8080就可以看到一個最基礎的 Svelte 應用運行起來后的樣子：

開發一個組件

使用 Svelte 生成通用 Web Component 的過程類似于創建常規 Svelte 組件的過程，只是進行了一些修改。

為了創建第一個卡片組件，我們首先創建一個文件src/Card.svelte并定義組件的屬性、樣式以及 HTML 標簽，代碼如下：




  
    
      
      
        
          
            {card_title}

{card_desc}

你可以在其他組件中使用這個卡片組件，如下所示（這一步可忽略）：

接下來是按鈕組件，文件名/src/Button.svelte代碼如下：

該組件的使用方法如下（可忽略）：

importButtonfrom"./Button.svelte";

Click me

將自定義組件轉成通用組件

我們需要將自定義 Svelte 組件轉成通用的 Web Component ，這樣才可以在其他框架中直接使用。

要做這個轉換操作，我們需要在 Svelte 配置文件中設置讓編譯器生成自定義元素。打開rollup.config.js在 plugins 增加一個compilerOptions配置項，在該配置項下增加customElement: true配置信息，如下所示：

...
 plugins:[
    svelte({
      compilerOptions:{
        dev:!production,
        customElement:true,
...

然后我們需要給兩個組件分別定義一個元素名稱，打開Card.svelte文件，在文件開頭第一行插入如下內容：

上述tag屬性值代表組件的標簽名稱。

同樣的，打開 Button.svelte 給第二個組件指定一個標簽名稱：

最后一步是在main.js中引入這兩個組件，打開/src/main.js將里面的內容替換成如下兩行：

importButtonfrom"./Button.svelte";
importCardfrom"./Card.svelte";

這里我們已經完成了兩個組件的開發步驟，下一步就是打包組件以便其他的應用可以使用這兩個組件，打開命令行窗口進入項目所在目錄執行如下命令：

npm run build

該命令將生成兩個文件，分別是build.js和build.map.js, 文件位于項目下的/build目錄。其中build.js是打包的兩個組件，而build.map.js是build.js源代碼映射文件。

如果上述步驟順利完成，我們就可以將bundle.js拷貝到一個新目錄，然后創建一個index.html文件，內容如下：



  
    My website
    
  

  
    
      
        
          
          
           
        
        
          
             Solid Cool Button 
             Outlined Cool Button

這是一個再簡單不過的 HTML 頁面了，該頁面使用了上述兩個組件，在瀏覽器中顯示為如下效果：

組件分割

在某些情況下我們不需要將多個組件打包到同一個 js 文件中，我們希望每個組件有一個獨立的 js 文件。要實現這個場景只需在rollup.config.js的input 和 output 中進行配置即可。

在 input 的配置中我們可以指定一個數組，數組的元素就是每個組件的文件路徑，而 output 指定為輸出的目錄即可：

exportdefault{
  input:["src/Card.svelte","./src/Button.svelte"],
  output:{
    format:"iife",
    dir:"public/build/",
  },
...

修改完成后再次執行npm run build，我們就可以在 build 目錄中看到兩個文件Button.js和Card.js。
使用方法類似:


Click Me

主要缺點

到這里我們已經掌握了使用 Svelte 開發 Web Component 的方法，這個過程非常之簡單，但是，使用 Svelte 開發 Web 組件會有一些缺點如下：

組件的屬性名稱不允許使用駝峰命名法，例如你會發現使用形如 cardTitle 這樣的屬性名就無法正常工作，而駝峰命名法又是 JavaScript 推薦的命名風格。這是一個 Bug，不過如果你使用的是 Vite ，那么有一個workaround plugin可以解決這個問題。

如果不標記 Web 組件，就無法在 Svelte 中重用它們 - 不幸的是，您還必須標記要在自定義 Web 組件中使用的每個 Svelte 組件

加入你有一個Header.svelte文件需要作為組件輸出，但同時這個組件又依賴另外一個Nav.svelte文件，而 Nav.svelte 我們不希望作為 Web 組件輸出，這個問題使得我們必須將 Nav.svelte 也作為組件輸出，否則程序就會報錯。好在這個問題現在也有解了（詳情請看https://github.com/svelte-society/recipes-mvp/issues/41#issue-638005462），我們可以通過配置來解決這個問題，雖然看起來不是那么的爽，就這樣吧，又不是不能用。

瀏覽器的支持問題 — JavaScriptcustomElementAPI 就是用來創建 Web Component 的底層 API，該 API 目前并沒有被所有的瀏覽器支持，我們需要引入 Polyfill 來解決這個文件，詳情請看https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements。

總結

在本文中，我們學習了如何使用 Svelte 創建通用卡片和按鈕組件，生成捆綁文件，拆分它們，甚至在單獨的 HTML 頁面中重用此組件。

動手試試吧？

審核編輯：湯梓紅

聲明：本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人，不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用，如有內容侵權或者其他違規問題，請聯系本站處理。舉報投訴