ES8搜索引擎從基礎(chǔ)入門到深度原理，實(shí)現(xiàn)綜合運(yùn)用實(shí)戰(zhàn)

我已經(jīng)學(xué)了挺好的，分享給大家一起學(xué)習(xí)

手機(jī)上綠色圖標(biāo)軟件??搜下面數(shù)字就可以啦

373871949

備注需要哪個(gè)哦~~~~

許多初學(xué)者會(huì)問“我應(yīng)該學(xué)習(xí)哪個(gè)框架？”和“在學(xué)習(xí)框架之前，我需求學(xué)幾 JS 或 TS？” - 無數(shù)意見文章都在宣傳作者喜歡的框架或庫的優(yōu)勢(shì)，而不是向讀者展現(xiàn)背后的概念，以便停止明智的決策。那么，讓我們先處理第二個(gè)問題：

“在學(xué)習(xí)框架之前，我需求學(xué)幾 JS/TS？”
在學(xué)習(xí)框架之前，你需求控制足夠多的根底學(xué)問，使你可以了解它們所基于的概念。這些學(xué)問包括根本數(shù)據(jù)類型、函數(shù)、根本運(yùn)算符和文檔對(duì)象模型 (DOM)。固然除此之外的學(xué)問并不會(huì)有害，但嚴(yán)厲來說不是控制框架或庫所必需的。

假如你是完整的新手，可能是你的第一步的好資源。繼續(xù)行進(jìn)，直到你感到自信為止。這就是你曉得足夠多的 JS/TS 的時(shí)分，能夠轉(zhuǎn)向框架。其他的東西你能夠在過程中學(xué)習(xí)。

你指的是哪些概念？
State
Effects
Memoization
Templating and rendering
一切現(xiàn)代框架都從這些概念中取得其功用。

State
狀態(tài)只是為應(yīng)用程序提供動(dòng)力的數(shù)據(jù)。 它可能在應(yīng)用程序的較大局部的全局級(jí)別上，也可能是單個(gè)組件上。 以簡(jiǎn)單的計(jì)數(shù)器為例。 它保存的計(jì)數(shù)即為狀態(tài)。 我們能夠讀取狀態(tài)并寫入它以增加計(jì)數(shù)。

最簡(jiǎn)單的表示通常是一個(gè)變量，其中包含我們的狀態(tài)所包含的數(shù)據(jù)：

let count = 0;
const increment = () => { count++; };
const button = document.createElement('button');
button.textContent = count;
button.addEventListener('click', increment);
document.body.appendChild(button);
但是，這段代碼存在一個(gè)問題：對(duì) count 的更改（例如經(jīng)過 increment 停止的更改）不會(huì)更新按鈕的文本內(nèi)容。 我們能夠手動(dòng)更新一切內(nèi)容，但關(guān)于更復(fù)雜的用例不太適用。

count 可以更新其用戶的才能稱為響應(yīng)性。 這是經(jīng)過訂閱并重新運(yùn)轉(zhuǎn)應(yīng)用程序的訂閱局部來更新而完成的。

簡(jiǎn)直每種現(xiàn)代的前端框架和庫都有一種辦法來管理反響性狀態(tài)。 處理計(jì)劃有三個(gè)局部，至少運(yùn)用一個(gè)或多個(gè)局部：

可觀測(cè)值/信號(hào)
不可變卦新的諧和
轉(zhuǎn)換
可觀測(cè)值/信號(hào)
可觀測(cè)值根本上是允許經(jīng)過訂閱讀者的函數(shù)停止讀取的構(gòu)造。 然后在更新時(shí)重新運(yùn)轉(zhuǎn)訂閱者：

const state = (initialValue) => ({
?_value: initialValue,
?get: function() {
? ?/* subscribe */;
? ?return this._value;
?},
?set: function(value) {
? ?this._value = value;
? ?/* re-run subscribers */;
?}
});
此概念的第一次運(yùn)用是在 中，它運(yùn)用相同的函數(shù)，寫訪問時(shí)無參數(shù)，讀訪問時(shí)有參數(shù)。

這種形式目前正在以信號(hào)的方式復(fù)興，例如在 Solid.js 和中，但 Vue 和 Svelte 也運(yùn)用了相同的形式。

RxJS 是這個(gè)準(zhǔn)繩在簡(jiǎn)單狀態(tài)之外的延伸，但能夠說它模仿復(fù)雜性的才能是針對(duì)你的腳的一整套槍。 Solid.js 還提供了這些信號(hào)的進(jìn)一步籠統(tǒng)，即存儲(chǔ)（能夠經(jīng)過 setter 操作的對(duì)象）和可變對(duì)象（能夠像正常的 JS 對(duì)象一樣運(yùn)用的對(duì)象或 Vue 中的狀態(tài)來處置嵌套狀態(tài)對(duì)象）。

不可變卦新的諧和
不可變意味著，假如對(duì)象的屬性發(fā)作更改，則必需更改整個(gè)對(duì)象援用，因而能夠輕松檢測(cè)能否存在更改（這就是諧和器所做的），只需簡(jiǎn)單比擬援用。

const state1 = {
?todos: [{ text: 'understand immutability', complete: false }],
?currentText: ''
};
// updating the current text:
const state2 = {
?todos: state1.todos,
?currentText: 'understand reconciliation'
};
// adding a to-do:
const state3 = {
?todos: [
? ?state.todos[0],
? ?{ text: 'understand reconciliation', complete: true }
?],
?currentText: ''
};
//這破了不變性：
state3.currentText = 'I am not immutable!';
如你所見，未更改項(xiàng)的援用被重用。 假如諧和器檢測(cè)到不同的對(duì)象援用，它將運(yùn)用狀態(tài)（props，memos，effects，context）再次運(yùn)轉(zhuǎn)一切組件。 由于讀訪問是被動(dòng)的，因而需求手動(dòng)指定對(duì)響應(yīng)性值的依賴關(guān)系。

顯然，我們不會(huì)以這種方式定義狀態(tài)。 要么從現(xiàn)有屬性結(jié)構(gòu)它，要么運(yùn)用所謂的 reducer。 reducer 是一個(gè)將一個(gè)狀態(tài)轉(zhuǎn)換為另一個(gè)狀態(tài)的函數(shù)。

React 和 preact 運(yùn)用了這種形式。 它適用于與 vDOM 一同運(yùn)用，我們將在后面描繪模板時(shí)進(jìn)一步討論。

并非每個(gè)框架都運(yùn)用其 vDOM 使?fàn)顟B(tài)完整響應(yīng)性。 例如， 在組件中設(shè)置的事情之后從狀態(tài)更改中更新； 否則，必需手動(dòng)觸發(fā) m.redraw()。

轉(zhuǎn)換
轉(zhuǎn)換是一個(gè)構(gòu)建步驟，它重寫我們的代碼，使其在舊閱讀器上運(yùn)轉(zhuǎn)或使其具有額外的才能；在這種狀況下，技術(shù)用于將簡(jiǎn)單變質(zhì)變?yōu)榉错懴到y(tǒng)的一局部。

Svelte 基于轉(zhuǎn)換器，該轉(zhuǎn)換器也從看似簡(jiǎn)單的變量聲明和訪問中為其反響系統(tǒng)提供動(dòng)力。

順便提一下，Solid.js 運(yùn)用轉(zhuǎn)換，但不是用于其狀態(tài)，只是用于模板。

Effects
在大多數(shù)狀況下，我們需求做更多的事情來處置響應(yīng)性狀態(tài)，而不只僅是從中導(dǎo)出并將其渲染到 DOM 中。 我們必需管理反作用，這是一切由于狀態(tài)更改而發(fā)作的事情（雖然一些像 Solid.js 的框架將視圖更改視為effects ）。

記得第一個(gè)來自狀態(tài)的示例嗎，其中訂閱處置成心省略了？ 讓我們填充這個(gè)以在更新時(shí)處置effects ：

const context = [];
const state = (initialValue) => ({
?_subscribers: new Set(),
?_value: initialValue,
?get: function() {
? ?const current = context.at(-1);
? ?if (current) { this._subscribers.add(current); }
? ?return this._value;
?},
?set: function(value) {
? ?if (this._value === value) { return; }
? ?this._value = value;
? ?this._subscribers.forEach(sub => sub());
?}
});
const effect = (fn) => {
?const execute = () => {
? ?context.push(execute);
? ?try { fn(); } finally { context.pop(); }
?};
?execute();
};
這根本上是對(duì) 信號(hào)或 中響應(yīng)態(tài)的簡(jiǎn)化，但沒有錯(cuò)誤處置和狀態(tài)變化形式（運(yùn)用接納前一個(gè)值并返回下一個(gè)值的函數(shù)），但是很容易添加。

這可會(huì)使上一個(gè)示例變成向應(yīng)性：

const count = state(0);
const increment = () => count.set(count.get() + 1);
const button = document.createElement('button');
effect(() => {
?button.textContent = count.get();
});
button.addEventListener('click', increment);
document.body.appendChild(button);
在大多數(shù)狀況下，框架允許運(yùn)用不同的時(shí)間來讓 effects 在渲染 DOM 之前、期間或之后運(yùn)轉(zhuǎn)。

Memoization
Memoization 指的是緩存從狀態(tài)中計(jì)算出來的值，以便在它來源的狀態(tài)更改時(shí)更新。它根本上是一個(gè) effect，返回一個(gè)派生的狀態(tài)。

在像 React 和 Preact 這樣重新運(yùn)轉(zhuǎn)組件函數(shù)的框架中，這允許在其依賴的狀態(tài)不變時(shí)再次選擇組件的一局部。

關(guān)于其他框架，狀況正好相反：它允許你將組件的局部與響應(yīng)性更新相關(guān)聯(lián)，同時(shí)緩存前一個(gè)計(jì)算。

關(guān)于我們簡(jiǎn)單的響應(yīng)系統(tǒng)，memo 看起來像這樣：

const memo = (fn) => {
?let memoized;
?effect(() => {
? ?if (memoized) {
? ? ?memoized.set(fn());

button.textContent = count.get();
});
button.addEventListener('click', increment);
document.body.appendChild(button);
? ?} else {
? ? ?memoized = state(fn());
? ?}
?});
?return memoized.get;
};
Templating and rendering
既然我們有了純狀態(tài)、派生狀態(tài)弛緩存狀態(tài)，我們想要向用戶顯現(xiàn)它。在我們的示例中，我們直接運(yùn)用 DOM 添加了一個(gè)按鈕并更新了其文本內(nèi)容。

為了更友好于開發(fā)人員，簡(jiǎn)直一切現(xiàn)代框架都支持一些范疇特定言語來在代碼內(nèi)編寫與所需輸出相似的內(nèi)容。雖然有不同的作風(fēng)，例如 .jsx、.vue 或 .svelte 文件，但這都是在相似于 HTML 的代碼中表示 DOM 的東西，因而根本上
button.textContent = count.get();
});
button.addEventListener('click', increment);
document.body.appendChild(button);
<div>Hello, World</div>
// in your JS
// becomes in your HTML:
<div>Hello, World</div>
你可能會(huì)問：“我應(yīng)該把我的狀態(tài)放在哪里？”這是個(gè)很棒的問題。在大多數(shù)狀況下，{} 用于表示動(dòng)態(tài)內(nèi)容，既在屬性中也在節(jié)點(diǎn)四周。

JS 的最常用模板言語擴(kuò)展無疑是 JSX。關(guān)于 React，它被編譯成純 JavaScript，使它可以創(chuàng)立 DOM 的虛擬表示，稱為虛擬文檔對(duì)象模型（virtual document object model，簡(jiǎn)稱 vDOM）的內(nèi)部視圖狀態(tài)。

這是基于這樣一個(gè)前提：創(chuàng)立對(duì)象比訪問 DOM 快得多，因而假如你能夠用當(dāng)前值交換后者，就能夠儉省時(shí)間。但是，假如在任何狀況下都有大量 DOM 更改或者為了沒有更改而創(chuàng)立無數(shù)個(gè)對(duì)象，這種處理計(jì)劃的優(yōu)勢(shì)很容易變成優(yōu)勢(shì)，需求經(jīng)過緩存來躲避。
button.textContent = count.get();
});
button.addEventListener('click', increment);
document.body.appendChild(button);
// original code
<div>Hello, {name}</div>
// transpiled to js
createElement("div", null, "Hello, ", name);
// executed js
{
?"$$typeof": Symbol(react.element),
?"type": "div",
?"key": null,
?"ref": null,
?"props": {
? ?"children": "Hello, World"
?},
?"_owner": null
}
// rendered vdom
/* HTMLDivElement */<div>Hello, World</div>
不過，JSX并不局限于react。例如，Solid運(yùn)用其轉(zhuǎn)碼器來更大幅度地改動(dòng)代碼。

// 1. original code
<div>Hello, {name()}</div>
// 2. transpiled to js
const _tmpl$ = /*#__PURE__*/_$template(`<div>Hello, </div>`, 2);
(() => {
?const _el$ = _tmpl$.cloneNode(true),
? ?_el$2 = _el$.firstChild;
?_$insert(_el$, name, null);
?return _el$;
})();
// 3. executed js code
/* HTMLDivElement */<div>Hello, World</div>
這轉(zhuǎn)譯代碼看起來有點(diǎn)嚇人，其實(shí)很容易解釋發(fā)作了什么。首先，創(chuàng)立具有一切靜態(tài)局部的模板，然后克隆它以創(chuàng)立其內(nèi)容的新實(shí)例，并將動(dòng)態(tài)局部添加并銜接到狀態(tài)更改上。Svelte以至進(jìn)一步轉(zhuǎn)譯了模板和狀態(tài)。

// 1. original code
button.textContent = count.get();
});
button.addEventListener('click', increment);
document.body.appendChild(button);
<div>Hello, {name}</div>
// 2. transpiled to js
/* generated by Svelte v3.55.0 */
import {
? ? ? ?SvelteComponent,
? ? ? ?append,
? ? ? ?detach,
? ? ? ?element,
? ? ? ?init,
? ? ? ?insert,
? ? ? ?noop,
? ? ? ?safe_not_equal,
? ? ? ?set_data,
? ? ? ?text
} from "svelte/internal";
function create_fragment(ctx) {
? ? ? ?let div;
? ? ? ?let t0;
? ? ? ?let t1;
? ? ? ?return {
? ? ? ? ? ? ? ?c() {
? ? ? ? ? ? ? ? ? ? ? ?div = element("div");
? ? ? ? ? ? ? ? ? ? ? ?t0 = text("Hello, ");
? ? ? ? ? ? ? ? ? ? ? ?t1 = text(/*name*/ ctx[0]);
? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?m(target, anchor) {
? ? ? ? ? ? ? ? ? ? ? ?insert(target, div, anchor);
? ? ? ? ? ? ? ? ? ? ? ?append(div, t0);
? ? ? ? ? ? ? ? ? ? ? ?append(div, t1);
? ? ? ? ? ? ? ?},button.textContent = count.get();
});
button.addEventListener('click', increment);
document.body.appendChild(button);
? ? ? ? ? ? ? ?p(ctx, [dirty]) {
? ? ? ? ? ? ? ? ? ? ? ?if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]);
? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?i: noop,
? ? ? ? ? ? ? ?o: noop,
? ? ? ? ? ? ? ?d(detaching) {
? ? ? ? ? ? ? ? ? ? ? ?if (detaching) detach(div);
? ? ? ? ? ? ? ?}
? ? ? ?};
}
function instance($$self, $$props, $$invalidate) {
? ? ? ?let name = 'World';
? ? ? ?setTimeout(
? ? ? ? ? ? ? ?() => {
? ? ? ? ? ? ? ? ? ? ? ?$$invalidate(0, name = 'you');
? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?1000
? ? ? ?);
? ? ? ?return [name];
}
class Component extends SvelteComponent {
? ? ? ?constructor(options) {
? ? ? ? ? ? ? ?super();
? ? ? ? ? ? ? ?init(this, options, instance, create_fragment, safe_not_equal, {});
? ? ? ?}
}
export default Component;
// 3. executed JS code
/* HTMLDivElement */<div>Hello, World</div>
但也有例外。例如，在Mithril.js中，固然能夠運(yùn)用JSX，但我們鼓舞你寫JS。

// 1. original JS code
const Hello = {
?name: 'World',
?oninit: () => setTimeout(() => {
? ?Hello.name = 'you';
? ?m.redraw();
?}, 1000),
?view: () => m('div', 'Hello, ' + Hello.name + '!')
};
// 2. executed JS code
/* HTMLDivElement */<div>Hello, World</div>
固然大多數(shù)人會(huì)發(fā)現(xiàn)開發(fā)人員體驗(yàn)不夠，但其別人更喜歡對(duì)代碼完整控制。依據(jù)他們要處理的問題，短少轉(zhuǎn)譯步驟以至可能是有益的。許多其他框架也允許在不停止轉(zhuǎn)譯的狀況下運(yùn)用，雖然很少像這樣引薦運(yùn)用。

"那么我如今應(yīng)該學(xué)習(xí)哪個(gè)框架或庫？"
我有一些好音訊和一些壞音訊要通知你。

壞音訊是：沒有銀彈。沒有一個(gè)框架會(huì)在每個(gè)方面都比其他一切的框架好得多。它們中的每一個(gè)都有本人的優(yōu)勢(shì)和妥協(xié)。React有它的鉤子規(guī)則，Angular缺乏簡(jiǎn)單的信號(hào)，Vue缺乏向后的兼容性，Svelte不能很好地?cái)U(kuò)展，Solid.js制止重構(gòu)，Mithril.js不是真正的響應(yīng)式，這只是舉幾個(gè)例子。

好音訊是：沒有錯(cuò)誤的選擇--至少，除非一個(gè)項(xiàng)目的請(qǐng)求真的很有限，無論是在包的大小還是性能方面。每個(gè)框架都會(huì)完成它的工作。有些可能需求繞過他們的設(shè)計(jì)決議，這可能會(huì)拖慢你的速度，但在任何狀況下你都應(yīng)該可以得到一個(gè)有效的結(jié)果。

也就是說，不運(yùn)用框架可能也是一個(gè)可行的選擇。許多項(xiàng)目被過度運(yùn)用的JavaScript毀壞了，而靜態(tài)頁面加上一些互動(dòng)性的東西也能完成工作。

如今你曉得了這些框架和庫所應(yīng)用的概念，選擇那些最合適你當(dāng)前任務(wù)的框架。不關(guān)鍵怕在你的下一個(gè)項(xiàng)目中轉(zhuǎn)換框架。沒有必要學(xué)習(xí)一切的框架。

本文使用 文章同步助手 同步