柚子快報激活碼778899分享：如何構(gòu)建一個簡單的前端框架

http://yzkb.51969.com/

先讓我來解釋一下什么是前端框架。所謂的前端框架，就是一種能夠讓我們避免去寫常規(guī)的HTML和JavaScript代碼

而是讓我們能夠編寫出像這樣簡約的HTML和JavaScript代碼（Vue）：

或者是下面這個(react)

export default function Para() {

const coolPara = 'Lorem ipsum';

return

{ coolPara }

}

這樣一個框架的優(yōu)點(diǎn)是顯而易見的。記住諸如document、innerText和getElementById等單詞或短語是很困難的。當(dāng)然看玩笑的，這個不是主要的原因。

特點(diǎn)

Reactivity ?

第一個主要原因是，在第二個和第三個例子中， 我們可以只設(shè)置或更新變量的值，標(biāo)記（即元素）就會更新，而無需顯式設(shè)置其 .coolPara``

``innerText

這稱為反應(yīng)性，UI 與這樣的數(shù)據(jù)相關(guān)聯(lián) 僅更改數(shù)據(jù)即可更新 UI 的方式。

Composability ?

第二個主要原因是能夠定義組件和 重用它，而不必在每次我們需要使用它時重新定義它。這 稱為可組合性。

常規(guī)HTML + JavaScript默認(rèn)沒有這個。所以 以下代碼不會執(zhí)行應(yīng)有的操作：

Lorem ipsum.

反應(yīng)性和可組合性是Vue、React等常見前端框架給我們的兩個主要優(yōu)勢。

這些抽象不是免費(fèi)提供的，我們必須預(yù)先加載一堆框架特定的概念，處理它們在以難以解釋的神奇方式工作時出現(xiàn)的缺陷，更不用說，還有一大堆容易出錯的依賴項(xiàng)。

但是，事實(shí)證明，使用現(xiàn)代Web API來實(shí)現(xiàn)這兩點(diǎn)并不難。而且，對于大多數(shù)用例，我們可能實(shí)際上并不需要使用通常的框架以及它們的復(fù)雜性的混亂。

介紹

Reactivity

解釋反應(yīng)性的簡單語句是，當(dāng)數(shù)據(jù)更新時，自動更新 UI。

第一部分是知道數(shù)據(jù)何時更新。這 不幸的是，這不是普通對象可以做的事情。我們不能 只需附加一個調(diào)用以偵聽數(shù)據(jù)的偵聽器 更新事件。ondataupdate

幸運(yùn)的是，JavaScript 正好允許我們做到這一點(diǎn)， 它被稱為代理。

Proxy對象

Proxy允許我們從常規(guī)對象創(chuàng)建代理對象：

const user = { name: 'Lin' };

const proxy = new Proxy(user, {});

然后，此代理對象可以偵聽對數(shù)據(jù)的更改。

在上面的例子中，我們有一個代理對象，但它并不是真的 當(dāng)知道已經(jīng)改變時，做任何事情。name

為此，我們需要一個處理程序，它是一個對象，它告訴代理對象在數(shù)據(jù)更新時要做什么。

const handler = {

set(user, value, property) {

console.log(`${property} is being updated`);

return Reflect.set(user, value, property);

},

};

//用handler創(chuàng)建一個代理

const user = { name: 'Lin' };

const proxy = new Proxy(user, handler);

現(xiàn)在，每當(dāng)我們使用該對象進(jìn)行更新時，我們都會收到一條消息，說.name``proxy``"name is being updated"

下面來看這樣寫的好處：

代理方法具有通用性，并且可以重用處理器在代理對象上設(shè)置的任何值都可以遞歸地轉(zhuǎn)換為代理現(xiàn)在這個神奇的對象可以無論嵌套多深都能對數(shù)據(jù)更新作出反應(yīng)。

除此之外，您還可[處理其他幾個訪問事件，例如讀取、更新、刪除屬性等。

實(shí)現(xiàn)

更新用戶界面

如果您還記得，反應(yīng)性的第二部分是自動更新 UI。為此，我們需要獲取要更新的相應(yīng) UI 元素。但在此之前，我們 需要首先根據(jù)需要標(biāo)記 UI 元素。

為此，我們將使用 data-attributes，該功能允許我們在元素上設(shè)置任意值：

data-attributes的優(yōu)點(diǎn)在于，我們現(xiàn)在可以使用以下方法找到所有合適的元素：

document.querySelectorAll('[data-mark="name"]');

現(xiàn)在我們只需設(shè)置所有適當(dāng)元素：innerText

const handler = {

set(user, value, property) {

const query = `[data-mark="${property}"]`;

const elements = document.querySelectorAll(query);

for (const el of elements) {

el.innerText = value;

}

return Reflect.set(user, value, property);

},

};

const user = new Proxy({ name: 'Lin' }, handler);

就是這樣，這就是反應(yīng)性的關(guān)鍵！

由于我們的一般性質(zhì)，對于設(shè)置的任何屬性，所有適當(dāng)?shù)?UI 元素都將更新。handler``user

這就是 JavaScript 功能的強(qiáng)大之處，具有 零依賴性和一些聰明，它可以給我們這些神奇的反應(yīng)對象。Proxy

現(xiàn)在進(jìn)入第二個主要問題

可組合性

事實(shí)證明，瀏覽器已經(jīng)有專門用于此的整個功能 叫Web組件

很少使用它，因?yàn)樗褂闷饋碛悬c(diǎn)痛苦。

對于可組合性，我們首先需要定義組件。

標(biāo)記用于包含標(biāo)記，即 不由瀏覽器呈現(xiàn)。例如，您可以添加以下內(nèi)容 HTML 中的標(biāo)記：