人妻无码午夜视频,美利坚合众国国产精品视频

每個開發(fā)人員都應(yīng)該關(guān)注代碼中的可重用性以及代碼的業(yè)務(wù)隔離，這樣可以讓業(yè)務(wù)邏輯與應(yīng)用架構(gòu)分離，提升系統(tǒng)的擴(kuò)展性。而 Web Component 就是這樣一個技術(shù)，可以讓我們創(chuàng)建一個獨立的可重用組件。

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

什么是 Web Component?

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

例如，我們使用如下代碼來創(chuàng)建一個導(dǎo)航條：

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

什么是 Shadow DOM?

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

構(gòu)建 Web Component

準(zhǔn)備工作

為了完成本文剩余的內(nèi)容學(xué)習(xí)，需要你對掌握以下知識：

對 HTML, CSS 和 JavaScript 有基本的認(rèn)識

熟悉命令行操作環(huán)境

需要一個文本編輯器

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

開始

本文我們將開發(fā)兩個組件：

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

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

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

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

我們從創(chuàng)建一個 Svelte 應(yīng)用開始，并安裝必須的包：

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

上述命令執(zhí)行完畢就可以使用如下命令啟動一個測試環(huán)境：

npm run dev

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

開發(fā)一個組件

使用 Svelte 生成通用 Web Component 的過程類似于創(chuàng)建常規(guī) Svelte 組件的過程，只是進(jìn)行了一些修改。

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




  
    
      
      
        
          
            {card_title}

{card_desc}

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

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

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

importButtonfrom"./Button.svelte";

Click me

將自定義組件轉(zhuǎn)成通用組件

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

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

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

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

上述tag屬性值代表組件的標(biāo)簽名稱。

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

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

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

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

npm run build

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

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



  
    My website
    
  

  
    
      
        
          
          
           
        
        
          
             Solid Cool Button 
             Outlined Cool Button

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

組件分割

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

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

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

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


Click Me

主要缺點

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

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

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

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

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

總結(jié)

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

動手試試吧？

審核編輯：湯梓紅

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。舉報投訴