JS如何實(shí)現(xiàn)一個(gè)單文件組件
前端開發(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)簽。由于使用了簡(jiǎn)單的方式，得到一個(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)頁中使用的方式非常簡(jiǎn)單。
<hello-world>Comandeer</hello-world><script src='http://www.lshqa.cn/bcjs/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í)踐了。
簡(jiǎn)單的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ì)象。可以在then方法中檢查文件（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樹的算法。這篇文章很長(zhǎng)，要花點(diǎn)時(shí)間閱讀，可以簡(jiǎn)單地理解為解析器會(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è)組件的場(chǎng)合下，這個(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è)簡(jiǎn)單的按鈕組件已經(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和ObjectURIDataURI是一個(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的長(zhǎng)度會(huì)隨之變得很長(zhǎng)。還有把二進(jìn)制數(shù)據(jù)放在DataURI非常困難。
所以，現(xiàn)在有一種新的ObjectURI。它是從幾種標(biāo)準(zhǔn)中衍生出來的，包括FileAPI和HTML5中的<video>和<audio>標(biāo)簽。ObjectURI的目的很簡(jiǎn)單，從給定的二進(jìn)制數(shù)據(jù)創(chuàng)建一個(gè)“偽文件”，在當(dāng)前上下文中給出一個(gè)唯一URI。簡(jiǎn)單點(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)聽。可以使用Object.entrie()方法獲取。在getSettings()方法中添加合適的代碼：
function getSettings( { template, style, script } ) { [...] function getListeners( settings ) { // 1 const listeners = {}; Object.entries( settings ).forEach( ( [ setting, value ] ) => { // 3 if ( setting.startsWith( ’on’ ) ) { // 4listeners[ 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 ] ) => { // 3this.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)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
網(wǎng)公網(wǎng)安備