亚洲AV影音先锋在线播放,91在线无码精品秘入口九色1 ,各种传媒淫荡视频免费看

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

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

什么是 Web Component?

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

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

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

什么是 Shadow DOM?

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

構(gòu)建 Web Component

準(zhǔn)備工作

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

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

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

需要一個(gè)文本編輯器

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

開始

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

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

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

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

下圖顯示的是兩個(gè)組件運(yùn)行后的外觀：

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

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

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

npm run dev

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

開發(fā)一個(gè)組件

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

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




  
    
      
      
        
          
            {card_title}

{card_desc}

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

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

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

importButtonfrom"./Button.svelte";

Click me

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

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

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

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

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

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

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

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

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

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

npm run build

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

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



  
    My website
    
  

  
    
      
        
          
          
           
        
        
          
             Solid Cool Button 
             Outlined Cool Button

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

組件分割

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

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

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

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


Click Me

主要缺點(diǎn)

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

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

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

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

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

總結(jié)

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

動(dòng)手試試吧？

審核編輯：湯梓紅

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