- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- vue實(shí)現一個(gè)單文件組件的完整過(guò)程記錄
前端開(kāi)發(fā)人員只要了解過(guò)vue.js框架可能都知道單文件組件。vue.js中的單文件組件允許在一個(gè)文件中定義一個(gè)組件的所有內容。這是一個(gè)非常有用的解決方案，在瀏覽器網(wǎng)頁(yè)中已經(jīng)開(kāi)始提倡這種機制。但是不幸的是，這個(gè)概念自從2017年8月被提出以來(lái)，到現在沒(méi)有任何進(jìn)展，像是已經(jīng)要消亡了一樣。然而，深入研究這個(gè)主題并試著(zhù)使用現有的技術(shù)來(lái)實(shí)現單文件組件是很有趣的，值得嘗試。
知道“漸進(jìn)增強”這個(gè)概念的前端開(kāi)發(fā)人員想必也聽(tīng)說(shuō)過(guò)“分層”這個(gè)概念。在組件中，同樣有這樣的概念。事實(shí)上，每個(gè)組件至少有3層，甚至多余3層：內容/模板，表現和行為。又或者保守的說(shuō)，每個(gè)組件會(huì )被分成至少3個(gè)文件，比如：一個(gè)按鈕組件的文件結構可能是下面這樣的：
Button/
| -- Button.html
| -- Button.css
| -- Button.js
采用這種方式分層相當于技術(shù)的分離（內容/模板：使用html，表現：使用css，行為：使用JavaScript）。如果沒(méi)有采用任何構建工具打包，這意味著(zhù)瀏覽器需要獲取這3個(gè)文件。因此，一個(gè)想法是：迫切需要一種分離組件代碼而不分離技術(shù)（文件）的技術(shù)來(lái)解決這個(gè)問(wèn)題。這就是這篇文章要討論的主題—單文件組件。
總的來(lái)說(shuō)，我對“技術(shù)分層”持懷疑態(tài)度。它來(lái)自一個(gè)事實(shí)，就是組件分層常常因為繞不開(kāi)“技術(shù)分層”而被放棄，而這兩者是完全分離的。
回到主題，用單文件組件實(shí)現按鈕可能是這樣的：
<template> <!-- Button.html contents go here. --> </template> <style> /* Button.css contents go here. */ </style> <script> // Button.js contents go here. </script>
可以看到這個(gè)單文件組件很像最初前端開(kāi)發(fā)中的html文檔，它有自己的style標簽和script標簽，只是表現層使用一個(gè)template標簽。由于使用了簡(jiǎn)單的方式，得到一個(gè)強大的分層組件（內容/模板：<template>，表現：<style>，行為：<script>），而不需要使用3個(gè)分離的文件。
首先，我們創(chuàng )建一個(gè)全局函數loadComponent()來(lái)加載組件。
window.loadComponent = (function() {
function loadComponent( URL ) {}
return loadComponent;
}());
這里使用了JavaScript模塊模式。它允許定義所有必要的輔助函數，但是只向外公開(kāi)loadComponent()函數。當然，現在這個(gè)函數還是空的。
后面，我們要創(chuàng )建一個(gè)<hello-world>組件，顯式下面的內容。
Hello, world! My name is <given name>.
另外，點(diǎn)擊這個(gè)組件，彈出一個(gè)信息：
Don't touch me!
組件代碼保存為一個(gè)文件HelloWorld.wc（這里.wc代表Web Component）。初始代碼如下：
<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>
目前，沒(méi)有給組件添加任何行為，只是定義了模板和樣式。模板中，可以使用常見(jiàn)的html標簽，比如<div>，另外，template中出現了<slot>元素表明組件將實(shí)現影子DOM。并且默認情況下這個(gè)DOM自身所有樣式和模板都隱藏在這個(gè)DOM中。
組件在網(wǎng)頁(yè)中使用的方式非常簡(jiǎn)單。
<hello-world>Comandeer</hello-world> <script src="loader.js"></script> <script> loadComponent( 'HelloWorld.wc' ); </script>
可以像標準的自定義元素一樣使用組件。唯一的區別是需要在使用loadComponent()方法前先加載它（這個(gè)方法放在loader.js中）。loadComponent()方法完成所有繁重的工作，比如獲取組件，并通過(guò)customElements.define()注冊它。
在了解了所有概念之后，是時(shí)候動(dòng)手實(shí)踐了。
如果想從外部文件中加載文件，需要使用萬(wàn)能的ajax。但是現在已經(jīng)是2020年了，在大部分瀏覽器中，你可以大膽的使用Fetch API。
function loadComponent( URL ) {
return fetch( URL );
}
但是，這只是獲取到文件，沒(méi)有對文件做任何處理，接下來(lái)要做的是把ajax返回內容轉換成text文本，如下：
function loadComponent( URL ) {
return fetch( URL ).then( ( response ) => {
return response.text();
} );
}
由于loadComponent()函數返回的是fetch函數的執行結果，所以它是一個(gè)Promise對象?？梢栽趖hen方法中檢查文件（HelloWorld.wc）是不是真的被加載，還有，是不是被轉成文本了：
運行結果如下：
chrome瀏覽器下，使用console()方法，我們看到HelloWorld.wc的內容被轉成了text并輸出，所以貌似行得通！
然而，僅僅把文本輸出并沒(méi)有達到我們的目的。最終要把它轉換成DOM用于顯示，并能和用戶(hù)真正交互起來(lái)。
在瀏覽器環(huán)境中有一個(gè)非常實(shí)用的類(lèi)DOMParser,可以實(shí)用它創(chuàng )建一個(gè)DOM解析器。實(shí)例化一個(gè)DOMParser類(lèi)得到一個(gè)對象，實(shí)用這個(gè)對象可以將組件文本轉換成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í)例將組件內容轉化成DOM（2）。值得注意的是，這里實(shí)用的是HTML模式（‘text/html'）。如果希望代碼更好的符合JSX標準或者原始的Vue.js組件，可以實(shí)用XML模式（‘text/XML'）。但是，在這種情況下，需要更改組件本身的結構（例如，添加可以容納其他元素的主元素）。
這是再輸出loadComponent()函數的返回結果，就是一個(gè)DOM樹(shù)了。
在chrome瀏覽器下，console.log()輸出解析后的HelloWorld.wc文件，是一個(gè)DOM樹(shù)。
注意，parser.parseFromString方法自動(dòng)給組件添加上<html>，<head>，<body>標簽元素。這是由HTML解析器的工作原理造成的。在HTML LS規范中詳細描述了構建DOM樹(shù)的算法。這篇文章很長(cháng)，要花點(diǎn)時(shí)間閱讀，可以簡(jiǎn)單地理解為解析器會(huì )默認把所有內容放在<head>元素中，直至遇到一個(gè)只能放在<body>標簽內的DOM元素。所以，組件代碼中所有的元素（<element>，<style>，<script>）都允許放在<head>中。如果在<template>外層包一個(gè)<p>元素，那么解析器將把它放在<body>中。
還有一個(gè)問(wèn)題，組件被解析之后并沒(méi)有<!DOCTYPE html>聲明，所以這得到的是一個(gè)非正常的html文檔，因此瀏覽器會(huì )使用一種被成為怪異模式的方式來(lái)渲染這種html文檔。所幸的是，在這里它不會(huì )帶來(lái)任何負面作用，因為這里只使用DOM解析器將組件分割成適當的部分。
有了DOM樹(shù)之后，可以只截取我們需要的部分。
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;
}());
從外部文件中獲取組件代碼的方式不止Fetch API這一種，XMLHttpRequest有一個(gè)專(zhuān)用的文檔模式，允許您省略整個(gè)解析步驟。但是XMLHttpRequest返回的不是一個(gè)Promise，這個(gè)需要自己包裝。
現在有了組件的層，可以創(chuàng )建registerComponent()方法來(lái)注冊新的自定義組件了。
window.loadComponent = (function () {
function fetchAndParse(URL) {
[…]
}
function registerComponent() {
}
function loadComponent(URL) {
return fetchAndParse(URL).then(registerComponent);
}
return loadComponent;
}());
要注意的是，自定義組件必須是一個(gè)繼承自HTMLElement的類(lèi)。此外，每個(gè)組件都將使用用于存儲樣式和模板內容的影子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));
}
}
}
應該在registerComponent()方法內創(chuàng )建UnityComponent類(lèi)，因為這個(gè)類(lèi)要使用傳入registerComponent()的參數。這個(gè)類(lèi)會(huì )使用一種稍加修改的機制來(lái)實(shí)現影子DOM，在這篇關(guān)于影子DOM的文章（波蘭文）中我有詳細介紹。
關(guān)于注冊組件，現在只剩下一件事，給單文件組件一個(gè)名字，并把它加到當前頁(yè)面的DOM中。
function registerComponent( { template, style, script } ) {
class UnityComponent extends HTMLElement {
[...]
}
return customElements.define( 'hello-world', UnityComponent );
}
現在可以打開(kāi)看一下了，如下：
在chrome中，這個(gè)按鈕組件中，有一個(gè)紅色矩形，文字內容：Hello, world! My name is Comandeer。
現在一個(gè)簡(jiǎn)單的按鈕組件已經(jīng)實(shí)現?，F在要實(shí)現最困難的部分，添加行為層，并自定義按鈕內內容。在上面的步驟中，我們應該使用到按鈕的地方傳入內容，而不是在組件代碼中硬編碼按鈕內的文字內容。同理還要處理組件內綁定的事件監聽(tīng)，這里我們使用類(lèi)似Vue.js的約定，如下：
<template>
[…]
</template>
<style>
[…]
</style>
<script>
export default { // 1
name: 'hello-world', // 2
onClick() { // 3
alert( `Don't touch me!` );
}
}
</script>
可以假設組件內<script>標簽中的內容是一個(gè)JavaScript模塊，它導出內容（1）。模塊導出的對象包含組件的名稱(chēng)（2）和一個(gè)已“on..”開(kāi)頭的事件監聽(tīng)方法（3）。
這看上去很工整，沒(méi)有內容暴露在模塊外部（因為JavaScript中modules并不是在全局作用域中）。這里有一個(gè)問(wèn)題：沒(méi)有一個(gè)標準可以處理從內部模塊導出的對象（這些代碼直接定義在HTML文檔中）。import語(yǔ)句會(huì )假設獲取到一個(gè)模塊標識，根據這個(gè)標識導入。最常見(jiàn)的是從一個(gè)包含代碼的文件的URL路徑。組件不是一個(gè)js文件，沒(méi)有這樣一個(gè)標識，內部的模塊是沒(méi)有這樣的標識的。
在繳械投降之前，可以使用跟一個(gè)超級臟的hack。最少有2中方式讓瀏覽器像處理一個(gè)文件一樣處理一段文本：Data URI和Object URI。也有一些建議是使用Service Worker。但是在這里顯得有點(diǎn)大材小用。
Data URI是一個(gè)古老，原始的方法。它的基礎是將文件內容轉換成URL，去掉不必要的空格，然后使用Base64對所有內容進(jìn)行編碼。假設有一個(gè)JavaScript文件，內容如下：
export default true;
轉換成Data URI如下：
data:application/javascript;base64,ZXhwb3J0IGRlZmF1bHQgdHJ1ZTs=
然后，可以像引入一個(gè)文件一樣引入這個(gè)URI：
import test from 'data:application/javascript;base64,ZXhwb3J0IGRlZmF1bHQgdHJ1ZTs='; console.log( test );
Data URI這種方式的一個(gè)明顯的缺點(diǎn)是隨著(zhù)JavaScript文件內容增多，這個(gè)URL的長(cháng)度會(huì )隨之變得很長(cháng)。還有把二進(jìn)制數據放在Data URI非常困難。
所以，現在有一種新的Object URI。它是從幾種標準中衍生出來(lái)的，包括File API和HTML5中的<video>和<audio>標簽。Object URI的目的很簡(jiǎn)單，從給定的二進(jìn)制數據創(chuàng )建一個(gè)“偽文件”，在當前上下文中給出一個(gè)唯一URI。簡(jiǎn)單點(diǎn)說(shuō)，就是在內存中創(chuàng )建一個(gè)有唯一名稱(chēng)的文件。Object URI有Data URI所有的優(yōu)點(diǎn)（一種創(chuàng )建"文件"的方法），而沒(méi)它的缺點(diǎn)（即使文件有100M也沒(méi)關(guān)系）。
對象uri通常是從多媒體流(例如在<video>或<audio>上下文中)或通過(guò)輸入[type=file]和拖放機制發(fā)送的文件創(chuàng )建的。還可以使用File，Blob這兩個(gè)類(lèi)手動(dòng)創(chuàng )建。在本例中，我們使用Bolb，先把內容放在模塊中，然后轉換成Object URI：
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
不過(guò)，還有一個(gè)問(wèn)題：import語(yǔ)句不接受變量作為模塊標識符。這意味著(zhù)除了使用該方法將模塊轉換成“文件”之外，還是無(wú)法導入它。還是無(wú)解的嗎？
也不盡然。這個(gè)問(wèn)題在很久之前就被提出了，使用動(dòng)可以解決。它是ES2020標準的一部分，并且在Firefox，Safari和Node.js13.x中已經(jīng)被實(shí)現。使用一個(gè)變量作為要動(dòng)態(tài)導入的模塊的標示符已經(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對象，then方法中得到模塊對象。在它的default屬性中包含了模塊中定義的所有導出對象。
現在我們已經(jīng)知道思路了，現在可以著(zhù)手實(shí)現它。在添加一個(gè)工具方法，getSetting()。在registerComponents()方法之前調用它，進(jìn)而從腳本代碼中獲取所有信息。
function getSettings( { template, style, script } ) {
return {
template,
style,
script
};
}
[...]
function loadComponent( URL ) {
return fetchAndParse( URL ).then( getSettings ).then( registerComponent );
}
現在，這個(gè)方法返回了所有傳入的參數。按照上面介紹的邏輯，將腳本代碼轉換成Object URI：
const jsFile = new Blob( [ script.textContent ], { type: 'application/javascript' } );
const jsURL = URL.createObjectURL( jsFile );
下一步，使用import加載模塊，返回模板，樣式和組件的名稱(chēng)：
return import( jsURL ).then( ( module ) => {
return {
name: module.default.name,
template,
style
}
} );
由于這個(gè)原因，registerComponent()仍然獲得3個(gè)參數，但是現在它獲取的是name，而不是腳本。正確的代碼如下：
function registerComponent( { template, style, name } ) {
class UnityComponent extends HTMLElement {
[...]
}
return customElements.define( name, UnityComponent );
}
組件還剩下最后一層：行為層，用來(lái)處理事件?，F在我們只是在getSettings()方法中獲取到了組件的名字，還要獲取事件監聽(tīng)?？梢允褂肙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
}
} );
}
現在方法變得有點(diǎn)復雜了。添加了一個(gè)新的函數getListeners()（1） ，將模塊的輸出傳入這個(gè)參數中。
然后使用Object.entries()（3）方法遍歷導出的模塊。如果當前屬性以“on”（4）開(kāi)頭，說(shuō)明是一個(gè)監聽(tīng)函數，將這個(gè)節點(diǎn)的值（監聽(tīng)函數）添加到listeners對象中去，使用setting[2].toLowerCase()+setting.substr(3)（5）得到鍵值。
鍵值是通過(guò)去掉開(kāi)頭的“on”，并將后面的“Click”首字母轉換成小寫(xiě)組成的（就是從onClick得到click作為建值）。然后傳入isteners對象（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;
}, {} );
}
現在，可以將監聽(tīng)綁定在組件內部的類(lè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è)參數，并且在class中添加了一個(gè)新方法_attachListeners()（2）。在這里可以再次使用Object.entries()來(lái)遍歷listeners（3），并把他們綁定到element（4）。
最后，點(diǎn)擊組件可以彈出“Don't touch me!”，如下：
可以看到，為了實(shí)現這個(gè)單文件組件，大部分工作圍繞如何支持基本的Form。很多部分使用了臟hacks（使用Object URI來(lái)加載ES中的模塊，沒(méi)有瀏覽器的支持，這種技術(shù)沒(méi)有什么意義）。還好，所有的技術(shù)在主流瀏覽器下運行正常，包括：Chrome，Firefox和Safari。
盡管如此，創(chuàng )建一個(gè)這樣的項目會(huì )接觸到很多瀏覽器技術(shù)和最新的web標準，也是一件很有趣的事情。
最后，可以在網(wǎng)上獲取這個(gè)項目的到。
到此這篇關(guān)于vue實(shí)現一個(gè)單文件組件的文章就介紹到這了,更多相關(guān)vue單文件組件內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
