概述

前端開發(fā)人員只要了解過vue.js框架可能都知道單文件組件。vue.js中的單文件組件允許在一個(gè)文件中定義一個(gè)組件的所有內(nèi)容。這是一個(gè)非常有用的解決方案，在瀏覽器網(wǎng)頁中已經(jīng)開始提倡這種機(jī)制。但是不幸的是，這個(gè)概念自從2017年8月被提出以來，到現(xiàn)在沒有任何進(jìn)展，像是已經(jīng)要消亡了一樣。然而，深入研究這個(gè)主題并試著使用現(xiàn)有的技術(shù)來實(shí)現(xiàn)單文件組件是很有趣的，值得嘗試。

單文件組件

知道“漸進(jìn)增強(qiáng)”這個(gè)概念的前端開發(fā)人員想必也聽說過“分層”這個(gè)概念。在組件中，同樣有這樣的概念。事實(shí)上，每個(gè)組件至少有3層，甚至多余3層：內(nèi)容/模板，表現(xiàn)和行為。又或者保守的說，每個(gè)組件會(huì)被分成至少3個(gè)文件，比如：一個(gè)按鈕組件的文件結(jié)構(gòu)可能是下面這樣的：

Button/
| -- Button.html
| -- Button.css
| -- Button.js

采用這種方式分層相當(dāng)于技術(shù)的分離（內(nèi)容/模板：使用html，表現(xiàn)：使用css，行為：使用JavaScript）。如果沒有采用任何構(gòu)建工具打包，這意味著瀏覽器需要獲取這3個(gè)文件。因此，一個(gè)想法是：迫切需要一種分離組件代碼而不分離技術(shù)（文件）的技術(shù)來解決這個(gè)問題。這就是這篇文章要討論的主題—單文件組件。

總的來說，我對(duì)“技術(shù)分層”持懷疑態(tài)度。它來自一個(gè)事實(shí)，就是組件分層常常因?yàn)槔@不開“技術(shù)分層”而被放棄，而這兩者是完全分離的。

回到主題，用單文件組件實(shí)現(xiàn)按鈕可能是這樣的：

<template>
  <!-- Button.html contents go here. -->
</template>

<style>
  /* Button.css contents go here. */
</style>

<script>
  // Button.js contents go here.
</script>

可以看到這個(gè)單文件組件很像最初前端開發(fā)中的html文檔，它有自己的style標(biāo)簽和script標(biāo)簽，只是表現(xiàn)層使用一個(gè)template標(biāo)簽。由于使用了簡單的方式，得到一個(gè)強(qiáng)大的分層組件（內(nèi)容/模板：<template>，表現(xiàn)：<style>，行為：<script>），而不需要使用3個(gè)分離的文件。

基本概念

首先，我們創(chuàng)建一個(gè)全局函數(shù)loadComponent()來加載組件。

window.loadComponent = (function() {
  function loadComponent( URL ) {}
  return loadComponent;
}());

這里使用了JavaScript模塊模式。它允許定義所有必要的輔助函數(shù)，但是只向外公開loadComponent()函數(shù)。當(dāng)然，現(xiàn)在這個(gè)函數(shù)還是空的。

后面，我們要?jiǎng)?chuàng)建一個(gè)<hello-world>組件，顯式下面的內(nèi)容。

Hello, world! My name is<given name>.

另外，點(diǎn)擊這個(gè)組件，彈出一個(gè)信息：

Don't touch me!

組件代碼保存為一個(gè)文件HelloWorld.wc（這里.wc代表WebComponent）。初始代碼如下：

<template>
  <div class="hello">
    <p>Hello, world! My name is <slot></slot>.</p>
  </div>
</template>
<style>
  div {
    background: red;
    border-radius: 30px;
    padding: 20px;
    font-size: 20px;
    text-align: center;
    width: 300px;
    margin: 0 auto;
  }
</style>
<script></script>

目前，沒有給組件添加任何行為，只是定義了模板和樣式。模板中，可以使用常見的html標(biāo)簽，比如<div>，另外，template中出現(xiàn)了<slot>元素表明組件將實(shí)現(xiàn)影子DOM。并且默認(rèn)情況下這個(gè)DOM自身所有樣式和模板都隱藏在這個(gè)DOM中。

組件在網(wǎng)頁中使用的方式非常簡單。

<hello-world>Comandeer</hello-world>
<script src="loader.js"></script>
<script>
  loadComponent( 'HelloWorld.wc' );
</script>

可以像標(biāo)準(zhǔn)的自定義元素一樣使用組件。唯一的區(qū)別是需要在使用loadComponent()方法前先加載它（這個(gè)方法放在loader.js中）。loadComponent()方法完成所有繁重的工作，比如獲取組件，并通過customElements.define()注冊(cè)它。

在了解了所有概念之后，是時(shí)候動(dòng)手實(shí)踐了。

簡單的loader

如果想從外部文件中加載文件，需要使用萬能的ajax。但是現(xiàn)在已經(jīng)是2020年了，在大部分瀏覽器中，你可以大膽的使用FetchAPI。

function loadComponent( URL ) {
  return fetch( URL );
}

但是，這只是獲取到文件，沒有對(duì)文件做任何處理，接下來要做的是把a(bǔ)jax返回內(nèi)容轉(zhuǎn)換成text文本，如下：

function loadComponent( URL ) {
  return fetch( URL ).then( ( response ) => {
    return response.text();
  } );
}

由于loadComponent()函數(shù)返回的是fetch函數(shù)的執(zhí)行結(jié)果，所以它是一個(gè)Promise對(duì)象?？梢栽趖hen方法中檢查文件（HelloWorld.wc）是不是真的被加載，還有，是不是被轉(zhuǎn)成文本了：

loadComponent('HelloWorld.wc').then((component) => {
    console.log(component);
});

運(yùn)行結(jié)果如下：

chrome瀏覽器下，使用console()方法，我們看到HelloWorld.wc的內(nèi)容被轉(zhuǎn)成了text并輸出，所以貌似行得通！

解析組件內(nèi)容

然而，僅僅把文本輸出并沒有達(dá)到我們的目的。最終要把它轉(zhuǎn)換成DOM用于顯示，并能和用戶真正交互起來。

在瀏覽器環(huán)境中有一個(gè)非常實(shí)用的類DOMParser,可以實(shí)用它創(chuàng)建一個(gè)DOM解析器。實(shí)例化一個(gè)DOMParser類得到一個(gè)對(duì)象，實(shí)用這個(gè)對(duì)象可以將組件文本轉(zhuǎn)換成DOM：

window.loadComponent = (function () {
    function loadComponent(URL) {
        return fetch(URL).then((response) => {
            return response.text();
        }).then((html) => {
            const parser = new DOMParser(); // 1
            return parser.parseFromString(html, 'text/html'); // 2
        });
    }
    return loadComponent;
}());

首先，創(chuàng)建一個(gè)DOMParser實(shí)例parser（1），然后用這個(gè)實(shí)例將組件內(nèi)容轉(zhuǎn)化成DOM（2）。值得注意的是，這里實(shí)用的是HTML模式（‘text/html'）。如果希望代碼更好的符合JSX標(biāo)準(zhǔn)或者原始的Vue.js組件，可以實(shí)用XML模式（‘text/XML'）。但是，在這種情況下，需要更改組件本身的結(jié)構(gòu)（例如，添加可以容納其他元素的主元素）。

這是再輸出loadComponent()函數(shù)的返回結(jié)果，就是一個(gè)DOM樹了。

在chrome瀏覽器下，console.log()輸出解析后的HelloWorld.wc文件，是一個(gè)DOM樹。

注意，parser.parseFromString方法自動(dòng)給組件添加上<html>，<head>，<body>標(biāo)簽元素。這是由HTML解析器的工作原理造成的。在HTML LS規(guī)范中詳細(xì)描述了構(gòu)建DOM樹的算法。這篇文章很長，要花點(diǎn)時(shí)間閱讀，可以簡單地理解為解析器會(huì)默認(rèn)把所有內(nèi)容放在<head>元素中，直至遇到一個(gè)只能放在<body>標(biāo)簽內(nèi)的DOM元素。所以，組件代碼中所有的元素（<element>，<style>，<script>）都允許放在<head>中。如果在<template>外層包一個(gè)<p>元素，那么解析器將把它放在<body>中。

還有一個(gè)問題，組件被解析之后并沒有<!DOCTYPE html>聲明，所以這得到的是一個(gè)非正常的html文檔，因此瀏覽器會(huì)使用一種被成為怪異模式的方式來渲染這種html文檔。所幸的是，在這里它不會(huì)帶來任何負(fù)面作用，因?yàn)檫@里只使用DOM解析器將組件分割成適當(dāng)?shù)牟糠帧?/p>

有了DOM樹之后，可以只截取我們需要的部分。

return fetch(URL).then((response) => {
    return response.text();
}).then((html) => {
    const parser = new DOMParser();
    const document = parser.parseFromString(html, 'text/html');
    const head = document.head;
    const template = head.querySelector('template');
    const style = head.querySelector('style');
    const script = head.querySelector('script');

    return {
        template,
        style,
        script
    };
}); 

最后整理一下代碼，loadComponent方法如下。

window.loadComponent = (function () {
    function fetchAndParse(URL) {
        return fetch(URL).then((response) => {
            return response.text();
        }).then((html) => {
            const parser = new DOMParser();
            const document = parser.parseFromString(html, 'text/html');
            const head = document.head;
            const template = head.querySelector('template');
            const style = head.querySelector('style');
            const script = head.querySelector('script');

            return {
                template,
                style,
                script
            };
        });
    }

    function loadComponent(URL) {
        return fetchAndParse(URL);
    }

    return loadComponent;
}()); 

從外部文件中獲取組件代碼的方式不止FetchAPI這一種，XMLHttpRequest有一個(gè)專用的文檔模式，允許您省略整個(gè)解析步驟。但是XMLHttpRequest返回的不是一個(gè)Promise，這個(gè)需要自己包裝。

注冊(cè)組件

現(xiàn)在有了組件的層，可以創(chuàng)建registerComponent()方法來注冊(cè)新的自定義組件了。

window.loadComponent = (function () {
    function fetchAndParse(URL) {
        […]
    }
    function registerComponent() {
    }
    function loadComponent(URL) {
        return fetchAndParse(URL).then(registerComponent);
    }
    return loadComponent;
}()); 

要注意的是，自定義組件必須是一個(gè)繼承自HTMLElement的類。此外，每個(gè)組件都將使用用于存儲(chǔ)樣式和模板內(nèi)容的影子DOM。所以每個(gè)引用這個(gè)組件的場合下，這個(gè)組件都有相同的樣式。方法如下：

function registerComponent({template, style, script}) {
    class UnityComponent extends HTMLElement {
        connectedCallback() {
            this._upcast();
        }

        _upcast() {
            const shadow = this.attachShadow({mode: 'open'});
            shadow.appendChild(style.cloneNode(true));
            shadow.appendChild(document.importNode(template.content, true));
        }
    }
} 

應(yīng)該在registerComponent()方法內(nèi)創(chuàng)建UnityComponent類，因?yàn)檫@個(gè)類要使用傳入registerComponent()的參數(shù)。這個(gè)類會(huì)使用一種稍加修改的機(jī)制來實(shí)現(xiàn)影子DOM，在這篇關(guān)于影子DOM的文章（波蘭文）中我有詳細(xì)介紹。

關(guān)于注冊(cè)組件，現(xiàn)在只剩下一件事，給單文件組件一個(gè)名字，并把它加到當(dāng)前頁面的DOM中。

function registerComponent( { template, style, script } ) {
  class UnityComponent extends HTMLElement {
    [...]
  }

  return customElements.define( 'hello-world', UnityComponent );
} 

現(xiàn)在可以打開看一下了，如下：

在chrome中，這個(gè)按鈕組件中，有一個(gè)紅色矩形，文字內(nèi)容：Hello, world! My name is Comandeer。

獲取腳本內(nèi)容

現(xiàn)在一個(gè)簡單的按鈕組件已經(jīng)實(shí)現(xiàn)。現(xiàn)在要實(shí)現(xiàn)最困難的部分，添加行為層，并自定義按鈕內(nèi)內(nèi)容。在上面的步驟中，我們應(yīng)該使用到按鈕的地方傳入內(nèi)容，而不是在組件代碼中硬編碼按鈕內(nèi)的文字內(nèi)容。同理還要處理組件內(nèi)綁定的事件監(jiān)聽，這里我們使用類似Vue.js的約定，如下：

<template>
  […]
</template>

<style>
  […]
</style>

<script>
  export default { // 1
    name: 'hello-world', // 2
    onClick() { // 3
      alert( `Don't touch me!` );
    }
  }
</script> 

可以假設(shè)組件內(nèi)<script>標(biāo)簽中的內(nèi)容是一個(gè)JavaScript模塊，它導(dǎo)出內(nèi)容（1）。模塊導(dǎo)出的對(duì)象包含組件的名稱（2）和一個(gè)已“on..”開頭的事件監(jiān)聽方法（3）。

這看上去很工整，沒有內(nèi)容暴露在模塊外部（因?yàn)镴avaScript中modules并不是在全局作用域中）。這里有一個(gè)問題：沒有一個(gè)標(biāo)準(zhǔn)可以處理從內(nèi)部模塊導(dǎo)出的對(duì)象（這些代碼直接定義在HTML文檔中）。import語句會(huì)假設(shè)獲取到一個(gè)模塊標(biāo)識(shí)，根據(jù)這個(gè)標(biāo)識(shí)導(dǎo)入。最常見的是從一個(gè)包含代碼的文件的URL路徑。組件不是一個(gè)js文件，沒有這樣一個(gè)標(biāo)識(shí)，內(nèi)部的模塊是沒有這樣的標(biāo)識(shí)的。

在繳械投降之前，可以使用跟一個(gè)超級(jí)臟的hack。最少有2中方式讓瀏覽器像處理一個(gè)文件一樣處理一段文本：DataURI和ObjectURI。也有一些建議是使用ServiceWorker。但是在這里顯得有點(diǎn)大材小用。

DataURI和ObjectURI

DataURI是一個(gè)古老，原始的方法。它的基礎(chǔ)是將文件內(nèi)容轉(zhuǎn)換成URL，去掉不必要的空格，然后使用Base64對(duì)所有內(nèi)容進(jìn)行編碼。假設(shè)有一個(gè)JavaScript文件，內(nèi)容如下：

export default true; 

轉(zhuǎn)換成DataURI如下：

data:application/javascript;base64,ZXhwb3J0IGRlZmF1bHQgdHJ1ZTs= 

然后，可以像引入一個(gè)文件一樣引入這個(gè)URI：

import test from 'data:application/javascript;base64,ZXhwb3J0IGRlZmF1bHQgdHJ1ZTs=';
console.log( test ); 

DataURI這種方式的一個(gè)明顯的缺點(diǎn)是隨著JavaScript文件內(nèi)容增多，這個(gè)URL的長度會(huì)隨之變得很長。還有把二進(jìn)制數(shù)據(jù)放在DataURI非常困難。

所以，現(xiàn)在有一種新的ObjectURI。它是從幾種標(biāo)準(zhǔn)中衍生出來的，包括FileAPI和HTML5中的<video>和<audio>標(biāo)簽。ObjectURI的目的很簡單，從給定的二進(jìn)制數(shù)據(jù)創(chuàng)建一個(gè)“偽文件”，在當(dāng)前上下文中給出一個(gè)唯一URI。簡單點(diǎn)說，就是在內(nèi)存中創(chuàng)建一個(gè)有唯一名稱的文件。ObjectURI有DataURI所有的優(yōu)點(diǎn)（一種創(chuàng)建"文件"的方法），而沒它的缺點(diǎn)（即使文件有100M也沒關(guān)系）。

對(duì)象uri通常是從多媒體流(例如在<video>或<audio>上下文中)或通過輸入[type=file]和拖放機(jī)制發(fā)送的文件創(chuàng)建的。還可以使用File，Blob這兩個(gè)類手動(dòng)創(chuàng)建。在本例中，我們使用Bolb，先把內(nèi)容放在模塊中，然后轉(zhuǎn)換成ObjectURI：

const myJSFile = new Blob( [ 'export default true;' ], { type: 'application/javascript' } );
const myJSURL = URL.createObjectURL( myJSFile );

console.log( myJSURL ); // blob:https://blog.comandeer.pl/8e8fbd73-5505-470d-a797-dfb06ca71333 

動(dòng)態(tài)導(dǎo)入

不過，還有一個(gè)問題：import語句不接受變量作為模塊標(biāo)識(shí)符。這意味著除了使用該方法將模塊轉(zhuǎn)換成“文件”之外，還是無法導(dǎo)入它。還是無解的嗎？

也不盡然。這個(gè)問題在很久之前就被提出了，使用動(dòng)態(tài)導(dǎo)入機(jī)制可以解決。它是ES2020標(biāo)準(zhǔn)的一部分，并且在Firefox，Safari和Node.js13.x中已經(jīng)被實(shí)現(xiàn)。使用一個(gè)變量作為要?jiǎng)討B(tài)導(dǎo)入的模塊的標(biāo)示符已經(jīng)不再是一個(gè)難題了：

const myJSFile = new Blob( [ 'export default true;' ], { type: 'application/javascript' } );
const myJSURL = URL.createObjectURL( myJSFile );

import( myJSURL ).then( ( module ) => {
  console.log( module.default ); // true
}); 

從上面代碼中可以看到，import()命令可以像方法一樣使用，它返回一個(gè)Promise對(duì)象，then方法中得到模塊對(duì)象。在它的default屬性中包含了模塊中定義的所有導(dǎo)出對(duì)象。

實(shí)現(xiàn)

現(xiàn)在我們已經(jīng)知道思路了，現(xiàn)在可以著手實(shí)現(xiàn)它。在添加一個(gè)工具方法，getSetting()。在registerComponents()方法之前調(diào)用它，進(jìn)而從腳本代碼中獲取所有信息。

function getSettings( { template, style, script } ) {
  return {
    template,
    style,
    script
  };
}
[...]
function loadComponent( URL ) {
  return fetchAndParse( URL ).then( getSettings ).then( registerComponent );
} 

現(xiàn)在，這個(gè)方法返回了所有傳入的參數(shù)。按照上面介紹的邏輯，將腳本代碼轉(zhuǎn)換成ObjectURI：

const jsFile = new Blob( [ script.textContent ], { type: 'application/javascript' } );
const jsURL = URL.createObjectURL( jsFile ); 

下一步，使用import加載模塊，返回模板，樣式和組件的名稱：

return import( jsURL ).then( ( module ) => {
  return {
    name: module.default.name,
    template,
    style
  }
} ); 

由于這個(gè)原因，registerComponent()仍然獲得3個(gè)參數(shù)，但是現(xiàn)在它獲取的是name，而不是腳本。正確的代碼如下：

function registerComponent( { template, style, name } ) {
  class UnityComponent extends HTMLElement {
    [...]
  }

  return customElements.define( name, UnityComponent );
} 

行為層

組件還剩下最后一層：行為層，用來處理事件。現(xiàn)在我們只是在getSettings()方法中獲取到了組件的名字，還要獲取事件監(jiān)聽?？梢允褂肙bject.entrie()方法獲取。在getSettings()方法中添加合適的代碼：

function getSettings( { template, style, script } ) {
  [...]

  function getListeners( settings ) { // 1
    const listeners = {};

    Object.entries( settings ).forEach( ( [ setting, value ] ) => { // 3
      if ( setting.startsWith( 'on' ) ) { // 4
        listeners[ setting[ 2 ].toLowerCase() + setting.substr( 3 ) ] = value; // 5
      }
    } );

    return listeners;
  }

  return import( jsURL ).then( ( module ) => {
    const listeners = getListeners( module.default ); // 2

    return {
      name: module.default.name,
      listeners, // 6
      template,
      style
    }
  } );
} 

現(xiàn)在方法變得有點(diǎn)復(fù)雜了。添加了一個(gè)新的函數(shù)getListeners()（1） ，將模塊的輸出傳入這個(gè)參數(shù)中。

然后使用Object.entries()（3）方法遍歷導(dǎo)出的模塊。如果當(dāng)前屬性以“on”（4）開頭，說明是一個(gè)監(jiān)聽函數(shù)，將這個(gè)節(jié)點(diǎn)的值（監(jiān)聽函數(shù)）添加到listeners對(duì)象中去，使用setting[2].toLowerCase()+setting.substr(3)（5）得到鍵值。

鍵值是通過去掉開頭的“on”，并將后面的“Click”首字母轉(zhuǎn)換成小寫組成的（就是從onClick得到click作為建值）。然后傳入isteners對(duì)象（6）。

可以使用[].reduce()方法代替[].forEach()方法，這樣可以省略掉listeners這個(gè)變量，如下：

function getListeners( settings ) {
  return Object.entries( settings ).reduce( ( listeners, [ setting, value ] ) => {
    if ( setting.startsWith( 'on' ) ) {
      listeners[ setting[ 2 ].toLowerCase() + setting.substr( 3 ) ] = value;
    }

    return listeners;
  }, {} );
} 

現(xiàn)在，可以將監(jiān)聽綁定在組件內(nèi)部的類中：

function registerComponent( { template, style, name, listeners } ) { // 1
  class UnityComponent extends HTMLElement {
    connectedCallback() {
      this._upcast();
      this._attachListeners(); // 2
    }
    [...]
    _attachListeners() {
      Object.entries( listeners ).forEach( ( [ event, listener ] ) => { // 3
        this.addEventListener( event, listener, false ); // 4
      } );
    }
  }
  return customElements.define( name, UnityComponent );
} 

在listeners方法（1）上增加了一個(gè)參數(shù)，并且在class中添加了一個(gè)新方法_attachListeners()（2）。在這里可以再次使用Object.entries()來遍歷listeners（3），并把他們綁定到element（4）。

最后，點(diǎn)擊組件可以彈出“Don't touch me!”，如下

兼容性問題及其他

可以看到，為了實(shí)現(xiàn)這個(gè)單文件組件，大部分工作圍繞如何支持基本的Form。很多部分使用了臟hacks（使用ObjectURI來加載ES中的模塊，沒有瀏覽器的支持，這種技術(shù)沒有什么意義）。還好，所有的技術(shù)在主流瀏覽器下運(yùn)行正常，包括：Chrome，F(xiàn)irefox和Safari。

盡管如此，創(chuàng)建一個(gè)這樣的項(xiàng)目會(huì)接觸到很多瀏覽器技術(shù)和最新的web標(biāo)準(zhǔn)，也是一件很有趣的事情。

以上就是JS如何實(shí)現(xiàn)一個(gè)單文件組件的詳細(xì)內(nèi)容，更多關(guān)于JS實(shí)現(xiàn)一個(gè)單文件組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！