[14:37:27] [EN] manipulate your DOM. So what is the DOM API? [14:37:27] [中] 操作您的 DOM 元素。那麼 DOM API 是什麼？ [14:37:30] [EN] So the DOM API is a set of methods that we can [14:37:30] [中] 所以 DOM API 是一組我們可以使用的方法。 [14:37:32] [EN] can utilize to manipulate a DOM. [14:37:32] [中] 可以利用來操作 DOM 的方法。 [14:37:35] [EN] And usually we don't use it directly [14:37:35] [中] 通常我們不會直接使用它。 [14:37:38] [EN] because most of the libraries are handling the DOM [14:37:38] [中] 因為大多數的庫都在處理 DOM。 [14:37:42] [EN] mutations for us, for instance, React, Angular, or Vue. [14:37:42] [中] Mutation 事件由React、Angular或Vue等大多數庫為我們處理。 [14:37:45] [EN] but there are cases where we actually [14:37:45] [中] 但是有些情況我們實際上需要使用它。 [14:37:48] [EN] we actually need to use the DOM API. [14:37:48] [中] 我們Actually需要使用DOM API。 [14:37:51] [EN] One of that is when you're building some low-level [14:37:51] [中] 其中之一就是在建立一些低階層次的元件時。 [14:37:54] [EN] of a library that works with virtual [14:37:54] [中] 與虛擬元素工作的庫中 [14:37:57] [EN] or some DOM management. Also, [14:37:57] [中] 或某些 DOM 管理。亦或 [14:38:00] [EN] Also, it's used when you need to create some generic components [14:38:00] [中] 亦或你需要創建一些通用元件。 [14:38:03] [EN] components that can be ported to any library or framework. [14:38:03] [中] 元件可以移植到任何庫或框架中。 [14:38:06] [EN] can be a video player or a chart engine. [14:38:06] [中] 可以是影片播放器或圖表引擎。 [14:38:09] [EN] And also, for instance, you are building your [14:38:09] [中] 並且，舉例來說，你正在建立你的 [14:38:13] [EN] your portfolio website and you want to minimize [14:38:13] [中] 你的組態網站並且你希望最小化 [14:38:15] [EN] the blueprint of your application [14:38:15] [中] 你的應用程式-blueprint [14:38:18] [EN] by not importing too many libraries. So this way [14:38:18] [中] 不导入太多的庫。所以這樣 [14:38:21] [EN] you can just use the DOM API and your app will be [14:38:21] [中] 你可以只使用 DOM API 並且你的應用程式將會 [14:38:24] [EN] be lightweight. So this is actually [14:38:24] [中] 會輕量級。所以這 Actually [14:38:27] [EN] This section will give us a quick refresher on how to use [14:38:27] [中] 這段會Give我們一個快速复习如何使用 [14:38:30] [EN] use the DOM API. [14:38:30] [中] 使用 DOM API。 [14:38:33] [EN] So first, let's overview the objects [14:38:33] [中] 所以首先，讓我們概觀一下物件。 [14:38:36] [EN] that are available to us and how can we use [14:38:36] [中] 那都是我們可以使用的物件以及我們如何使用。 [14:38:39] [EN] we used to don't want BI. So the first close [14:38:39] [中] 我們用過不想BI。所以第一個close [14:38:42] [EN] global object that we are all aware of is the [14:38:42] [中] 全球物件我們都知道的是the [14:38:45] [EN] window. The window is a globally [14:38:45] [中] window. The window 是一個全局地 [14:38:48] [EN] accessible objects, so you don't need to import anything. [14:38:48] [中] 可存取的物件，所以你不需要導入任何東西。 [14:38:51] [EN] And the next one is the document. [14:38:51] [中] 並且下一個是 document。 [14:38:54] [EN] The document represents HTML element, basically the base [14:38:54] [中] The document 代表 HTML 元素，基本上的基底 [14:38:57] [EN] page that we are currently rendering. [14:38:57] [中] 我們目前渲染的頁面。 [14:39:00] [EN] The document can be accessed through the window [14:39:00] [中] The document 可以透過 window 存取。 [14:39:03] [EN] or directly by referencing [14:39:03] [中] 或直接透過引用 [14:39:06] [EN] in this as a global object. [14:39:06] [中] 在這作為全球物件。 [14:39:09] [EN] Then we have some quick access links [14:39:09] [中] 然後我們有些快速存取連結。 [14:39:12] [EN] that we can use on the document. It's a body and a head. [14:39:12] [中] 我們可以使用的連結。它是一個body和一個head。 [14:39:15] [EN] gives you us the body tech and head respectively. [14:39:15] [中] 給我們body技術和head respectively。 [14:39:18] [EN] Now let's go for [14:39:18] [中] 現在讓我們開始 [14:39:21] [EN] through the class hierarchy. [14:39:21] [中] 透過類階層。 [14:39:24] [EN] All the elements on the HTML page are [14:39:24] [中] 所有的 HTML 頁面上的元素都是 [14:39:27] [EN] are represented by HTML element. [14:39:27] [中] 都是由 HTML 元素來代表。 [14:39:30] [EN] apparently the HTML element doesn't have any DOM API, [14:39:30] [中] 顯然 HTML 元素沒有任何 DOM API。 [14:39:33] [EN] assigned to that. The DOM API is actually assigned [14:39:33] [中] Assigned to that。DOM API实际上是分配給那個。 [14:39:36] [EN] assigned to the element product [14:39:36] [中] Assigned到該元素 product。 [14:39:39] [EN] prototype. So why is that? Because the [14:39:39] [中] 原型。所以為什麼會這樣？因為那樣做。 [14:39:42] [EN] the Dome API can actually work not with [14:39:42] [中] Dome API實際上可以工作不與 [14:39:45] [EN] with just HTML, so it can be also SVG elements or [14:39:45] [中] 與僅僅 HTML 元素一樣，也可以是 SVG 元素或 [14:39:48] [EN] or XML-like things. That's why the [14:39:48] [中] 或 XML 類似的東西。那這就是為什麼的 [14:39:51] [EN] The DOM API lives on the element prototype instead of HTML [14:39:51] [中] DOM API生活在元素原型上而不是 HTML [14:39:54] [EN] element. And we also have [14:39:54] [中] 元素。我們 juga 也有 [14:39:57] [EN] have the note the dome is a tree [14:39:57] [中] 也有note dome是樹狀結構 [14:40:00] [EN] and somehow we need to access the tree properties [14:40:00] [中] 而且我們必須某种程度上訪問樹狀結構的屬性 [14:40:03] [EN] So that's why we have a special class that designed [14:40:03] [中] 所以我們有一個特別的類別是專門設計的 [14:40:06] [EN] to represent a tree leaf and this is the node. [14:40:06] [中] 用來代表樹葉節點以及這就是節點。 [14:40:09] [EN] and we have exception which is [14:40:09] [中] 而且我們有例外情況是 [14:40:13] [EN] is a text node which basically extends the node class the text node [14:40:13] [中] 是文字節點，基本上是繼承自節點類別的文字節點。 [14:40:15] [EN] Xnode is used when we use [14:40:15] [中] Xnode是在我們使用時使用的一种節點。 [14:40:18] [EN] any text, that when we need to wrap our text [14:40:18] [中] 任何文字，當我們需要包裝我們的文字时 [14:40:22] [EN] text in the HTML element. So the browser needs to somehow [14:40:22] [中] HTML元素中的文字。因此瀏覽器需要 somehow 以某些方式。 [14:40:24] [EN] how we represent the text that we place in our [14:40:24] [中] 我們放置在我們的 HTML 元素中的文字是如何代表的。 [14:40:27] [EN] in our tags. Then we have the [14:40:27] [中] 在我们的標籤中。然後我們有 the [14:40:30] [EN] HTML document. An HTML document is an outlier here because [14:40:30] [中] HTML文件。HTML文件在此處是一個例外，因為 [14:40:33] [EN] because it has the DOM API assigned to its [14:40:33] [中] 因為它被分配了DOM API。 [14:40:36] [EN] its prototype, but it extends the node. [14:40:36] [中] 它的原型，但擴展了節點。 [14:40:39] [EN] I don't know the reason why, but this is the exception in the whole [14:40:39] [中] 我不知道原因，但這是整體中的例外。 [14:40:42] [EN] and the whole hierarchy that we need to live with. [14:40:42] [中] 並且我們必須面對的整個階層結構。 [14:40:45] [EN] And the next one is the window. [14:40:45] [中] 並且下一個是 window。 [14:40:49] [EN] Basically, the window has an instance of first HTML document, and it doesn't [14:40:49] [中] 基本來說，window 有一個第一個 HTML 文件的實例，並且不 [14:40:51] [EN] It doesn't have any interesting properties on its product. [14:40:51] [中] 它的產品並沒有任何有趣的屬性。 [14:40:54] [EN] So it represents the browser viewport. Query method. [14:40:54] [中] 所以它代表瀏覽器視窗。查詢方法。 [14:40:57] [EN] methods. Let's now understand how the browser [14:40:57] [中] 方法。我們現在來了解瀏覽器如何运作。 [14:41:00] [EN] queries elements on a page. [14:41:00] [中] 查詢頁面上的元素。 [14:41:03] [EN] page, how the DOM API queries the elements. [14:41:03] [中] 頁面，DOM API 如何查詢頁面上的元素。 [14:41:06] [EN] So let's start with the first, the most simple method, which is [14:41:06] [中] 所以讓我們從最簡單的方法開始， WHICH IS [14:41:09] [EN] is getElementById. So when the browser [14:41:09] [中] 是 getElementById。所以當瀏覽器 [14:41:12] [EN] reads the page, it constructs the hash model [14:41:12] [中] 讀取頁面時，它構建哈希模型 [14:41:15] [EN] of the elements, so it reached the ID [14:41:15] [中] 元素的哈希模型，所以它reach了ID [14:41:18] [EN] and then it basically builds the cache where the IDE [14:41:18] [中] 然後它基本上建立緩存讓IDE [14:41:21] [EN] is assigned to some HTML reference. [14:41:21] [中] 是被分配給某些HTML引用。 [14:41:24] [EN] So this means that when we try to [14:41:24] [中] 所以這意味著當我們試圖 [14:41:27] [EN] to get the element by the time complexity and [14:41:27] [中] 依照時間複雜度取得元素 [14:41:30] [EN] and read cost is just 0.1. [14:41:30] [中] 讀取成本只是0.1。 [14:41:33] [EN] because this is just basically accessing the object [14:41:33] [中] 因為這只是基本上存取物件。 [14:41:36] [EN] by its key. [14:41:36] [中] 由其金鑰。 [14:41:39] [EN] The situation is slightly different when it comes to [14:41:39] [中] 當涉及到這 situation 的情況略有不同。 [14:41:42] [EN] get elements by class name. [14:41:42] [中] 依照類名取得元素。 [14:41:45] [EN] So to get the elements by the class name, [14:41:45] [中] 所以依照類名取得元素。 [14:41:48] [EN] we need to actually traverse the whole tree. [14:41:48] [中] 我們必須實際遍歷整棵樹。 [14:41:52] [EN] And the way the browser traverses a tree, it's used to [14:41:52] [中] 並且瀏覽器遍歷一棵樹的方式，通常是用來 [14:41:55] [EN] approach. So it basically goes for the elements [14:41:55] [中] 方式。所以它基本上會遍歷那些元素。 [14:41:57] [EN] and finds all the [14:41:57] [中] 並且尋找所有該類名的元素。 [14:42:00] [EN] elements on a page with a class text. [14:42:00] [中] 頁面上具有 class text 的元素。 [14:42:04] [EN] So, and the time complexity for this is [14:42:04] [中] 所以，而這種情況的時間複雜度是 [14:42:07] [EN] is linear, so we need to go through all elements. [14:42:07] [中] 是線性的，所以我們需要遍歷所有元素。 [14:42:10] [EN] elements in the worst case, but you see there is a star [14:42:10] [中] 頁面上最壞情況下的所有元素，但你看到有一個星。 [14:42:12] [EN] are here. This is because the browser is quite [14:42:12] [中] 是在這裡。這是因為瀏覽器相當 [14:42:16] [EN] quite smart and it utilizes the hash map when you [14:42:16] [中] 相當聰明，並在你使用時利用了散列map。 [14:42:19] [EN] when you try to query things. So the first question [14:42:19] [中] 當您尝试查询事物時。所以第一个問題 [14:42:22] [EN] query will take some time but when if you're [14:42:22] [中] 查詢會花費一些時間，但當你 [14:42:24] [EN] execute this same query next time the browser [14:42:24] [中] 執行相同的查詢，下一次瀏覽器 [14:42:28] [EN] it will be almost immediately because browser utilizes [14:42:28] [中] 它將幾乎立即因為瀏覽器利用了 [14:42:31] [EN] that utilizes the caching mechanism. [14:42:31] [中] 這個利用了Cache機制。 [14:42:33] [EN] One thing about this method is also [14:42:33] [中] 這個方法還有一件事也是 [14:42:36] [EN] so it returns the HTML collection. [14:42:36] [中] 所以它返回了HTML集合。 [14:42:39] [EN] HTML collection is the special, actually, legacy collection [14:42:39] [中] HTML集合實際上是特殊的遺產集合。 [14:42:42] [EN] collection which [14:42:42] [中] 集合 which [14:42:45] [EN] has one interesting characteristic, it's life. [14:42:45] [中] 有一個有趣的特性，它是life。 [14:42:48] [EN] So this means that if we modify the DOM tree [14:42:48] [中] 所以這代表如果我們修改了DOM樹 [14:42:51] [EN] for instance remove one element from the DOM, [14:42:51] [中] 例如從DOM移除一個元素， [14:42:54] [EN] This will be reflected on our HTML collection [14:42:54] [中] 這會反映在我们的HTML集合中。 [14:42:58] [EN] collection. So, and that's why the read code [14:42:58] [中] 集合。所以，這就是為什麼讀取程式碼 [14:43:00] [EN] cost of the HTML collection is [14:43:00] [中] HTML集合的成本是 [14:43:03] [EN] big O of N because every time when [14:43:03] [中] 大 O 數 N 因為每次 [14:43:06] [EN] we need to read a single element, the browser [14:43:06] [中] 我們需要讀取一個單元素，瀏覽器 [14:43:09] [EN] will barst the tree again to verify [14:43:09] [中] 會重新解析樹以驗證 [14:43:12] [EN] verify its position. [14:43:12] [中] 驗證其位置。 [14:43:15] [EN] This is a disadvantage of this thing. [14:43:15] [中] 這是一項缺點。 [14:43:19] [EN] On the other hand, the memory cost is low [14:43:19] [中] 另一方面，記憶體成本較低。 [14:43:22] [EN] because the browser doesn't need to clone any objects. [14:43:22] [中] 因為瀏覽器不需要克隆任何物件。 [14:43:25] [EN] It just takes the already existing reference [14:43:25] [中] 它只是採用現有的引用。 [14:43:27] [EN] references. So you can utilize the HTML [14:43:27] [中] 參考。所以你可以利用 HTML [14:43:30] [EN] collection when you [14:43:30] [中] 你收集資料時 [14:43:34] [EN] need to be low, like when you're low on memory, you need to [14:43:34] [中] 需要-low，如同記憶體不足時，你需要- [14:43:37] [EN] you need to use as less memory as possible. [14:43:37] [中] 你需要使用尽可能少的記憶體。 [14:43:40] [EN] Okay, same is [14:43:40] [中] 好的，同樣是 [14:43:43] [EN] It's the same way works the getElementByTagName. [14:43:43] [中] 這是 getElementByTagName 一樣-working 方式。 [14:43:46] [EN] So there is no difference at all. It's just like it allows [14:43:46] [中] 所以完全沒有差異。它只是允許 [14:43:49] [EN] allows us to query things by the tech. [14:43:49] [中] 允許我們依技術查閱事物。 [14:43:52] [EN] So the query selector works [14:43:52] [中] 所以查詢選擇器工作 [14:43:55] [EN] slightly different. So it utilizes [14:43:55] [中] 稍微不同。所以它利用 [14:43:58] [EN] the CSS selector, so the time complexity depends [14:43:58] [中] CSS 選擇器，所以時間複雜度依賴 [14:44:01] [EN] depends on the selection that we use. [14:44:01] [中] depends on the selection that we use. [14:44:04] [EN] always pay some tax [14:44:04] [中] 總是需支付一些稅款。 [14:44:07] [EN] on compiling the selector. [14:44:07] [中] 在編譯選擇器時。 [14:44:10] [EN] So this means that the more complex selection [14:44:10] [中] 所以這意味著選擇越複雜 [14:44:13] [EN] the more time it takes to compile it for you. [14:44:13] [中] 編譯它所需時間就越長。 [14:44:16] [EN] for a CSS. [14:44:16] [中] 對於一個 CSS。 [14:44:19] [EN] So the read access and the memory cost is [14:44:19] [中] 所以讀取存取和記憶體開銷是 [14:44:22] [EN] because we're just returning the single [14:44:22] [中] 因為我們只是返回單一 [14:44:25] [EN] the single element and the querying mechanism [14:44:25] [中] 單一元素和查詢機制 [14:44:28] [EN] when we try to use the class names or the text [14:44:28] [中] 當我們尝试使用類別名稱或文字 [14:44:31] [EN] it's the same as the DFS if we use the ID [14:44:31] [中] 如果我們使用ID，這和DFS是相同的。 [14:44:34] [EN] then we're going to convert the statement to get element [14:44:34] [中] 然後我們會將陳述式轉換以取得元素 [14:44:37] [EN] and by ID instead. [14:44:37] [中] 以及透過ID而非其他方式。 [14:44:40] [EN] So one interesting thing about the query selection [14:44:40] [中] 所以查詢選取有一件有趣的事就是 [14:44:43] [EN] and this is the query selector O is because [14:44:43] [中] 而且這是由於查詢選取器O的原因 [14:44:46] [EN] because it returns a nod list. The nod list is a [14:44:46] [中] 因為它會返回一個節點列表。節點列表是一個 [14:44:49] [EN] another type of collection, but it's not life. It's just basically [14:44:49] [中] 另一種集合類型，但不是 LIVE。它只是基本上 [14:44:52] [EN] the copy of the elements. So what the browser does [14:44:52] [中] 元素的複本。所以瀏覽器所做的事 [14:44:55] [EN] does, it's just copies the HTML [14:44:55] [中] 所做的事，就是複製了HTML [14:44:58] [EN] HTML objects, and this means that we pay additional [14:44:58] [中] HTML物件，這意味著我們付出了額外的代价 [14:45:01] [EN] memory cost when we do the querying, so it's [14:45:01] [中] 記憶體開銷當我們進行查詢，所以它的是 [14:45:04] [EN] it's not advisable to query too many things because [14:45:04] [中] 查詢太多東西並不可取因為 [14:45:07] [EN] because you may end up having the memory spike. [14:45:07] [中] 因為你可能會遇到記憶體用量暴增。 [14:45:10] [EN] But the read access is 0.1 because you just [14:45:10] [中] 但讀取存取是0.1因為你只是 [14:45:13] [EN] accessing the object directly from the array instead of [14:45:13] [中] 直接從陣列存取物件而不是 [14:45:16] [EN] traversing the tree again by maintaining the life [14:45:16] [中] 遍歷樹再次維護生命 [14:45:19] [EN] life collection. And the querying mechanism is the same. [14:45:19] [中] 生命收集。查詢機制相同。 [14:45:22] [EN] DFS Plus HashMap. [14:45:22] [中] 深度搜尋加哈希映射。 [14:45:25] [EN] Quick summary. So the getElementsById [14:45:25] [中] 快速摘要。所以 getElementsById [14:45:28] [EN] provide the best performance but [14:45:28] [中] 提供最佳 PERFORMANCE 但 [14:45:31] [EN] but because the browser builds the cache but you need [14:45:31] [中] 但因為瀏覽器建立緩存但你需要 [14:45:34] [EN] you need to make sure that you utilize the ID space correctly. [14:45:34] [中] 你需要確保正確利用ID空間。 [14:45:37] [EN] So it's basically anti-partner to you to rely on ideas [14:45:37] [中] 所以這對你來說基本上是反對倚靠這些概念。 [14:45:40] [EN] IDs too much because the ID namespaces [14:45:40] [中] ID命名空間太過於因為ID命名空間 [14:45:43] [EN] is shared across your multiple components and [14:45:43] [中] 是被你的多個元件共享 [14:45:46] [EN] Just make sure that you don't overuse IDs [14:45:46] [中] 請確保不要過度使用ID [14:45:49] [EN] in your app. The get elements [14:45:49] [中] 在你的應用程式中。取得元素 [14:45:52] [EN] GetElementsByClassName or GetElementsByTickName [14:45:52] [中] 取得具有特定class名稱或tick名稱的元素 [14:45:55] [EN] a low memory overhead because it returns a live collection [14:45:55] [中] 因為它會返回一個活動集合，因此佔用記憶體較低 [14:45:58] [EN] collection with just a reference [14:45:58] [中] 集合僅含參考項目的集合 [14:46:01] [EN] references to existing objects, but because it [14:46:01] [中] 參考現有的物件，但因為它 [14:46:04] [EN] the read access is high, so [14:46:04] [中] 讀取存取較高，所以 [14:46:07] [EN] You need to make sure that you utilize [14:46:07] [中] 你需要確保你有效利用 [14:46:10] [EN] you utilize this collection right, because if you're going to [14:46:10] [中] 你需要正確利用這個集合，因為如果你要 [14:46:13] [EN] to loop for this collection, guess it will convert to [14:46:13] [中] 為了遍歷這個集合，猜測會轉換為 [14:46:16] [EN] to quadratic time. And we don't want... [14:46:16] [中] 轉換為二次時間複雜度。並且我們不希望... [14:46:19] [EN] And we don't want to do that in our app on the large set of elements. [14:46:19] [中] 並且我們不希望在應用程式中對大量元素進行這種操作。 [14:46:22] [EN] elements. The query selected [14:46:22] [中] 元素。查詢已選定 [14:46:25] [EN] selector have slightly worse performance than [14:46:25] [中] 選取器的 PERFORMANCE 稍差於 [14:46:28] [EN] at getElementById, but the browser [14:46:28] [中] 在 getElementById，但瀏覽器 [14:46:31] [EN] The browser itself heavily optimizes any CSS [14:46:31] [中] 瀏覽器本身會高度優化任何 CSS [14:46:34] [EN] selectors. So in different browsers you may [14:46:34] [中] 選取器。所以不同瀏覽器中可能 [14:46:37] [EN] you may get different results, but on average it's very close actually. [14:46:37] [中] 您可能會得到不同的結果，但平均來說其實非常接近。 [14:46:40] [EN] actually to get element by id but [14:46:40] [中] 實際上是透過 id 得到元素但 [14:46:43] [EN] the elements that are returned from this [14:46:43] [中] 從這個返回的元素 [14:46:46] [EN] this query to not represent the live collection so [14:46:46] [中] 這個查詢並不想代表當前的實時集合 [14:46:50] [EN] so if you remove the element from the DOM tree, you may [14:46:50] [中] 所以如果你從 DOM 樹中移除該元素，你可能 [14:46:52] [EN] You may end up having the stale element in your color. [14:46:52] [中] 您可能在您的色彩中得到陳舊的元素。 [14:46:55] [EN] collection. Yeah, the sample is to the [14:46:55] [中] 集合。Yeah, 範例是到的。 [14:46:58] [EN] to the querySelectureAll, but [14:46:58] [中] 到 querySelectureAll，但 [14:47:01] [EN] because it copies all the elements you don't want [14:47:01] [中] 因為它複製了你不想複製的所有元素 [14:47:04] [EN] wants to query too many elements with this method. [14:47:04] [中] 想要使用此方法查詢太多的元素。 [14:47:07] [EN] Could you clarify the difference between the time [14:47:07] [中] Could you clarify the difference between the time [14:47:10] [EN] complexity of querying versus the read cost. [14:47:10] [中] 查詢的複雜度與讀取成本之間的差異。 [14:47:13] [EN] Yeah, okay. So if we'll go back [14:47:13] [中] 好，我們就回去 [14:47:16] [EN] back to get elements by Tegna [14:47:16] [中] 回到由Tegna取得元素 [14:47:19] [EN] for instance. So the time comes [14:47:19] [中] 例如。所以時間到了 [14:47:22] [EN] complexity it takes to go through the elements [14:47:22] [中] 遍歷元素所需的時間複雜度 [14:47:25] [EN] to find all the elements that we are looking for, [14:47:25] [中] 找到我們正在尋找的所有元素 [14:47:28] [EN] is big of an because we need to query [14:47:28] [中] 是很大的因為我們需要查詢 [14:47:31] [EN] we need to go through all elements in the worst case. [14:47:31] [中] 我們在最糟的情況下需要遍歷所有元素。 [14:47:34] [EN] but the read cost is also [14:47:34] [中] 但讀取成本也是不小的。 [14:47:37] [EN] also bigger of n because [14:47:37] [中] 也比 O(n) 更大因為 [14:47:40] [EN] we maintain the life collection and when we maintain [14:47:40] [中] 我們維護 LIFE 數據集，當我們維護 [14:47:44] [EN] maintain a live collection, this means the browser needs [14:47:44] [中] 維護一個 LIVE 數據集，這表示瀏覽器需要 [14:47:46] [EN] needs to verify that the element exists [14:47:46] [中] 需要驗證該元素是否存在 [14:47:50] [EN] in the DOM tree. So every time you're trying to [14:47:50] [中] 在 DOM 樹中。所以每次你嘗試 [14:47:53] [EN] access this life collection, the browser queries the element [14:47:53] [中] 存取這個LIFE數據集，瀏覽器查詢該元素 [14:47:56] [EN] again to verify that the elements still [14:47:56] [中] 再次驗證該元素是否仍然存在。 [14:47:58] [EN] still present. That's why it can result [14:47:58] [中] Still present。那就是為什麼可能會導致。 [14:48:02] [EN] result to the time complexity being, in the worst case, we'll need [14:48:02] [中] 結果使最壞情況的時間複雜度為，在最壞情況下，我們需要 [14:48:05] [EN] we'll need to parse all elements again. Is there a reason [14:48:05] [中] 我們需要重新解析所有元素。這是為什麼？ [14:48:07] [EN] the query selector all returns the [14:48:07] [中] 查詢選項所有返回的 [14:48:10] [EN] non-live element list compared [14:48:10] [中] 非活動元素清單相比 [14:48:13] [EN] compared to this one, for example, comparing or [14:48:13] [中] 相比這個一個，例如比較或 [14:48:17] [EN] returning the live? - So the [14:48:17] [中] 返回活躍的元素？ - 所以 [14:48:19] [EN] The Life Collection is actually a legacy one. [14:48:19] [中] LIFE Collection其实是遺留下來的一個。 [14:48:22] [EN] It's not recommended to use for [14:48:22] [中] 不建議使用。 [14:48:25] [EN] normal cases. And I guess [14:48:25] [中] 正常情況下。我猜 [14:48:29] [EN] Yes, the query selector returns non-live collection, [14:48:29] [中] 是的，查詢選取器返回非活躍的集合。 [14:48:31] [EN] because we needed to have some alternative. [14:48:31] [中] 因為我們需要一些替代方案。 [14:48:34] [EN] The live collection has more drawbacks and if [14:48:34] [中] 活躍的集合有更多的缺點和如果 [14:48:37] [EN] if not used wisely, can lead to more issues. [14:48:37] [中] 如果不明智地使用，可能會導致更多問題。 [14:48:41] [EN] issues. But in our application development, we [14:48:41] [中] 問題。但在我們的應用程式開發中，我們 [14:48:44] [EN] we don't really need to manage the live collections and for most [14:48:44] [中] 我們不需要真的管理活躍的集合，而且對於大多數 [14:48:47] [EN] most of the developers, the queries lecture is [14:48:47] [中] 大多數開發者的查詢講解是 [14:48:49] [EN] the better I go because it doesn't have [14:48:49] [中] 因為它沒有 [14:48:53] [EN] the expensive read access. [14:48:53] [中] 貴重的讀取存取。 [14:48:56] [EN] Why would query selector all [14:48:56] [中] 為什麼查詢選擇器會選取所有資料？ [14:48:58] [EN] impact memory, we're returning references to [14:48:58] [中] 影響記憶體，我們返回參考到 [14:49:01] [EN] notes which already exist in the DOM. [14:49:01] [中] DOM中已存在的筆記。 [14:49:04] [EN] Not exactly. We actually [14:49:04] [中] 不是exact。我們實際上 [14:49:07] [EN] return the copies of the [14:49:07] [中] 返回筆記的複製版本。 [14:49:11] [EN] basically the browser creates a new object with a [14:49:11] [中] 基本上瀏覽器會創建一個新的物件ewith a [14:49:13] [EN] the same values and the copies and when you [14:49:13] [中] 相同的值和複製版本，當你 [14:49:16] [EN] change the properties of this object [14:49:16] [中] 變更此物件的屬性 [14:49:20] [EN] objects it will impact the region [14:49:20] [中] 物件改變的話會影響該區域 [14:49:22] [EN] regional object. But, uh... [14:49:22] [中] 區域物件。但， Uh... [14:49:26] [EN] it's still we have two separate objects basically with a [14:49:26] [中] 它們基本上還是兩個獨立的物件 [14:49:29] [EN] with the same properties and they are connected with each other for the proxy [14:49:29] [中] 與相同的屬性，並且彼此透過代理連接。 [14:49:32] [EN] proxy mechanism. So it's a slightly different way. [14:49:32] [中] 代理機制。所以這是稍微不同的方式。 [14:49:35] [EN] When we use the live collection, we actually guarantee [14:49:35] [中] 當我們使用實時集合時，我們實際上能夠確保 [14:49:38] [EN] we can actually reuse the real reference to the object. [14:49:38] [中] 我們 Actually 可以重新使用真正的物件參考。 [14:49:40] [EN] object instead. [14:49:40] [中] 物件Instead. [14:49:44] [EN] When you're saying that the cash would [14:49:44] [中] 當你說到現金會 [14:49:47] [EN] would make things faster next time. Are you... [14:49:47] [中] 會讓下一次更快。你是... [14:49:49] [EN] always sure about that because [14:49:49] [中] 總是確定的因為 [14:49:53] [EN] because class names can be dynamic. [14:49:53] [中] 因為類別名稱可以是動態的。 [14:49:55] [EN] So you can't control that [14:49:55] [中] 所以你無法控制那件事情。 [14:49:59] [EN] that because it's up to the browser engine. [14:49:59] [中] 那因為這是由瀏覽器引擎決定的。 [14:50:02] [EN] it's up to develop it the same query methods can [14:50:02] [中] 這是由開發人員決定的，因此相同的查詢方法可以 [14:50:05] [EN] can behave differently in Safari or Chrome. [14:50:05] [中] 可以在 Safari 或 Chrome 中行為不同。 [14:50:08] [EN] depending on how developers optimize that. For instance, [14:50:08] [中] 根據開發人員如何優化那部分。例如， [14:50:11] [EN] For instance, Safari browser uses the [14:50:11] [中] 例如，Safari 瀏覽器使用的是 [14:50:14] [EN] WebAssembly compilation for the native selectors while the [14:50:14] [中] WebAssembly 編譯-native 選擇器而 Safari 浏覽器使用的是 [14:50:17] [EN] the Chrome doesn't use that because they perform [14:50:17] [中] Chrome 不使用這個原因是因为他們進行了其他優化。 [14:50:20] [EN] they find that the performance of existing queries, [14:50:20] [中] 他們發現現有查詢的 PERFORMANCE 結果較佳。 [14:50:23] [EN] electricity is fine on average. [14:50:23] [中] 電力平均來說沒有問題。 [14:50:26] [EN] can't guarantee the same results and it's up to the [14:50:26] [中] 不能保證相同的結果，且取決於 [14:50:29] [EN] to the engine. So the logic of caching the [14:50:29] [中] 到引擎。所以緩存的邏輯 [14:50:32] [EN] the element, the class, the query selectors [14:50:32] [中] 元素, 類別, 查詢選擇器 [14:50:35] [EN] is quite complex and yeah, no guarantee. [14:50:35] [中] 是非常複雜且沒有保證。 [14:50:38] [EN] tea. [14:50:38] [中] 茶。 [14:50:40] [EN] Let's move on to [14:50:40] [中] 讓我們繼續進行。 [14:50:44] [EN] to performance best practices. [14:50:44] [中] 到 PERFORMANCE 最佳實踐。 [14:50:47] [EN] The first and the most obvious one and [14:50:47] [中] 第一個也是最顯而易見的一个 [14:50:50] [EN] like the one overlooked uh [14:50:50] [中] 像那個被忽略的 [14:50:53] [EN] the most is that we can actually improve the performance [14:50:53] [中] 最顯著的是我們 Actually can improvem the performance [14:50:56] [EN] of querying by simplifying this lecture. [14:50:56] [中] 查詢效能通過簡化這堂課來提升。 [14:50:59] [EN] So each time you use the complex selector, [14:50:59] [中] 所以每次你使用複雜選項時， [14:51:02] [EN] the CSS compiler needs to translate [14:51:02] [中] CSSCompiler需要將其轉換 [14:51:05] [EN] transpile this and it takes more time so you pay [14:51:05] [中] 轉譯這部分需要更多時間因此你得付費 [14:51:08] [EN] pay extra tax on using the complex selectors. [14:51:08] [中] 使用複雜選項需額外付稅。 [14:51:11] [EN] So you may notice that it's [14:51:11] [中] 所以你可能會注意到那是 [14:51:14] [EN] it's not significant so you may pay like five milliseconds [14:51:14] [中] 那是不具意義的所以你可能會付出約五毫秒 [14:51:17] [EN] on the query to compile the selection [14:51:17] [中] 查詢編譯選項时 [14:51:20] [EN] lecture but all these things are [14:51:20] [中] 講義但所有這些事物都是 [14:51:23] [EN] accumulating. So if you do hundreds of queries, [14:51:23] [中] 累積中。所以如果你執行數百次查詢， [14:51:26] [EN] So it will result maybe to 50 milliseconds [14:51:26] [中] 所以可能會結果到五十毫秒 [14:51:29] [EN] milliseconds on average in the delay. [14:51:29] [中] 平均在延遲上會有幾毫秒。 [14:51:32] [EN] If we combine all possible optimizations, [14:51:32] [中] 如果我們結合所有可能的優化， [14:51:35] [EN] with this one, the results can be quite significant. [14:51:35] [中] 與此結合，結果可能會相當顯著。 [14:51:38] [EN] Although the ID is not the best practice, you still can [14:51:38] [中] 雖然 ID 不是最佳作法，你Still can 依舊可以 使用它。 [14:51:41] [EN] can utilize IDs for the core container when [14:51:41] [中] 可以利用 ID 來核心容器時 [14:51:44] [EN] For instance, you need to query the [14:51:44] [中] 例如，你需要查詢 [14:51:47] [EN] elements from the very large tree. [14:51:47] [中] 從非常大的樹狀結構中撷取元素。 [14:51:50] [EN] if we have some DOM tree that has [14:51:50] [中] 如果我們有一些 DOM 树具有 [14:51:54] [EN] as 10,000 elements, if you query from HTML, [14:51:54] [中] 如果我們有一些 10,000 個元素的 DOM 树，如果你從 HTML 查詢， [14:51:56] [EN] then you need to go through 10,000 L [14:51:56] [中] 然後你需要檢視 10,000 個 L [14:51:59] [EN] elements on the first query but if you're from [14:51:59] [中] 第一個查詢的元素，但如果你是 [14:52:02] [EN] for instance, could select this section with an ID [14:52:02] [中] 例如，可以使用 ID 選取此區段 [14:52:05] [EN] and then you know that this operation should be repeated [14:52:05] [中] 然後你知道這項操作應該被重複執行 [14:52:08] [EN] multiple times, then you can just provide an end [14:52:08] [中] 多次，然後你就可以 hanya 提供一个 end [14:52:11] [EN] and query from this section, and it will [14:52:11] [中] 然後你可以從此區段開始查詢，並且它會 [14:52:14] [EN] just one operation. So next section is adding [14:52:14] [中] 只需一個操作。所以下一區段是新增 [14:52:17] [EN] removing [14:52:17] [中] 移除 [14:55:38] [EN] moving elements. [14:55:38] [中] 移動元素。 [14:55:42] [EN] And before we jump to that, any questions so far? [14:55:42] [中] 在跳到那個部分之前，到目前為止有任何問題嗎？ [14:55:44] [EN] So you talked about these, [14:55:44] [中] 所以你談到了這些。 [14:55:47] [EN] understanding the differences between these [14:55:47] [中] 了解這些之間的差異 [14:55:51] [EN] these methods being useful if you were going to build something more low level [14:55:51] [中] 這些方法如果要建立更低層級的東西會很有用 [14:55:53] [EN] if you are working on something that is used [14:55:53] [中] 如果你正在工作的東西是被用來 [14:55:57] [EN] using a framework like React or Angular. [14:55:57] [中] 使用像 React 或 Angular 这样的框架。 [14:56:00] [EN] are there recommendations you would make for [14:56:00] [中] 有沒有什麼推薦的建議你會做出來？ [14:56:03] [EN] improving performance or like knowing what their [14:56:03] [中] 改善 PERFORMANCE 或像是了解他們的用途 [14:56:06] [EN] their methods are using under the hood? Or do you just [14:56:06] [中] 他們的方法在後端有什麼建議？或是一切順便就好？ [14:56:09] [EN] you just kind of trust that the library authors have spent a lot of time [14:56:09] [中] 你只是信任那套庫的作者花了很多時間 [14:56:12] [EN] which I'm thinking about. - Yeah, when you utilize [14:56:12] [中] 我正在思考的。- 嗯，當你使用 [14:56:15] [EN] any library that manages the DOM for you [14:56:15] [中] 任何庫幫你管理 DOM 的情況 [14:56:18] [EN] you just rely on this library. The only way [14:56:18] [中] 你只是依賴這個庫。唯一的辦法 [14:56:21] [EN] way you can possibly think you may use [14:56:21] [中] 你可能會使用的唯一方式 [14:56:24] [EN] use the DOM API within the SUMIF [14:56:24] [中] 使用 SUMIF 內的 DOM API [14:56:27] [EN] effects in the React when you need to query things. This is the [14:56:27] [中] 在 React 中你需要查詢東西時的效果。這就是 [14:56:30] [EN] This is the place where you could optimize potentially. [14:56:30] [中] 這就是你有可能進行優化的地方。 [14:56:33] [EN] trying to optimize a React is not a good [14:56:33] [中] 嘗試優化一個 React 是不好的。 [14:56:36] [EN] good idea because it's quite complex inside. Is the cost [14:56:36] [中] 因為內部結構相當複雜。成本可能是值得的。 [14:56:39] [EN] of CSS only during compile. [14:56:39] [中] 僅在編譯期間使用 CSS。 [14:56:42] [EN] compile time when the runtime of complex select [14:56:42] [中] 編譯期間when運行時選擇複雜的選項 [14:56:45] [EN] selectors also be bad on performance? [14:56:45] [中] 選取器在運行時也会影响 PERFORMANCE？ [14:56:48] [EN] performance? No, actually, you compile this... [14:56:48] [中] PERFORMANCE？不，實際上，你會編譯這個... [14:56:51] [EN] First you compile your styles in CSS. [14:56:51] [中] 首先你會編譯你的風格在 CSS。 [14:56:54] [EN] when you initiate the page. But when you execute the job, [14:56:54] [中] 當你啟動頁面時。但當你執行工作時。 [14:56:57] [EN] JavaScript with some query selector. This is dynamic selector. [14:56:57] [中] JavaScript 使用一些 query selector。這是動態選取器。 [14:57:00] [EN] This means it should be compiled in runtime. [14:57:00] [中] 這表示應該在運行時編譯。 [14:57:03] [EN] So you pay the cost every time you execute that. [14:57:03] [中] 所以每次執行時你都要付出這個成本。 [14:57:06] [EN] So let's now understand how we can add or remove [14:57:06] [中] 所以讓我們現在了解我們如何可以加入或移除 [14:57:09] [EN] elements. And when we [14:57:09] [中] 元素。當我們 [14:57:12] [EN] when it comes to aiding or removing every method [14:57:12] [中] 當谈到輔助或移除每個方法 [14:57:15] [EN] method is bad. So basically, we don't have a good [14:57:15] [中] 方法是不好的。所以基本上，我們沒有一个好的 [14:57:18] [EN] good. So the performance in [14:57:18] [中] 好的。所以效能方面 [14:57:21] [EN] impact is always significant. So there is no [14:57:21] [中] 影響總是十分顯著。所以沒有 [14:57:24] [EN] of good methods to insert data because [14:57:24] [中] 因為沒有好的方法可以插入資料因為 [14:57:27] [EN] every time we modify the DOM it triggers the [14:57:27] [中] 每次修改 DOM 時都會觸發 [14:57:29] [EN] the reflow. [14:57:29] [中] 重整。 [14:57:33] [EN] in our application we want to minimize the refresh [14:57:33] [中] 在我们的應用程式中，我們想要減最少化刷新。 [14:57:36] [EN] reflow operation. And so, but [14:57:36] [中] 重整操作。因此，但是。 [14:57:39] [EN] But there are a few methods that are particularly [14:57:39] [中] 但是有一些方法特別是 [14:57:42] [EN] impact the performance. The first one is inner HTML. [14:57:42] [中] 影響 PERFORMANCE。第一個是 inner HTML。 [14:57:45] [EN] So when you use the inner HTML, you basically [14:57:45] [中] 所以当你使用 inner HTML 時，你基本上 [14:57:48] [EN] you basically set the HTML of the element [14:57:48] [中] 你基本上設定該元素的 HTML [14:57:51] [EN] the browser needs to involve the HTML [14:57:51] [中] 瀏覽器需要涉入 HTML [14:57:54] [EN] HTML parser to compile your HTML again [14:57:54] [中] HTML 解析器重新編譯你的 HTML [14:57:57] [EN] to do the full reflow, validate your [14:57:57] [中] 進行完整的重新排版，驗證你的 [14:58:00] [EN] your HTML and so on. So you pay the cost of the [14:58:00] [中] 你的 HTML 和其他費用。所以你得承擔這些成本。 [14:58:03] [EN] the parsing. Same applies to insert adjacent [14:58:03] [中] 解析。相同的原則也適用於插入Adjacent。 [14:58:06] [EN] in HTML because we use the raw [14:58:06] [中] 在 HTML 中因為我們使用原始 [14:58:09] [EN] raw HTML, the browser still needs to parse that. [14:58:09] [中] 原始 HTML，瀏覽器仍需解析那部分。 [14:58:12] [EN] step. But if you need [14:58:12] [中] 步驟。但如果你需要 [14:58:15] [EN] need to modify the DOM make sure that you don't [14:58:15] [中] 需要修改 DOM 時確保不要 [14:58:18] [EN] you don't utilize linear HTML too often. [14:58:18] [中] 你不應經常使用線性 HTML。 [14:58:21] [EN] to use this once per perinusus [14:58:21] [中] 每次使用此功能時不要 [14:58:24] [EN] stylization but if you [14:58:24] [中] 風格化，但如果你 [14:58:27] [EN] you expected to insert elements dynamically [14:58:27] [中] 你期望動態插入元素 [14:58:30] [EN] then it's better to utilize the insert_adjson_l [14:58:30] [中] 然後-best 時，較好利用 insert_adjson_l 功能。 [14:58:33] [EN] element or append child because it takes [14:58:33] [中] 元素或附加子元素因為它會取用 [14:58:36] [EN] It takes the compiled HTML object [14:58:36] [中] 它取用已編譯的 HTML 物件 [14:58:39] [EN] already and just renders this on a DOM [14:58:39] [中] 已經且僅僅渲染此內容於 DOM [14:58:42] [EN] DOM, and we can see how it works. [14:58:42] [中] DOM，我們可以看看它如何運作。 [14:58:45] [EN] So the method is pretty flexible because [14:58:45] [中] 所以這個方法相當靈活因為 [14:58:48] [EN] because it accepts the position where we can insert the element [14:58:48] [中] 因為它接受我們可以插入元素的位置 [14:58:51] [EN] The first one is Before Begin, which basically [14:58:51] [中] 第一個是 Before Begin，which basically [14:58:54] [EN] basically insert the element before the [14:58:54] [中] 基本上插入元素在該位置之前 [14:58:57] [EN] the target element. So we can try to insert that and [14:58:57] [中] 目標元素之前。所以我們可以試著插入那個元素。 [14:59:00] [EN] and the element is distorted. So the afterbegin, [14:59:00] [中] 所以該元素被扭曲。至於 afterbegin， [14:59:03] [EN] will give you the first channel position. [14:59:03] [中] 將給你第一個通路位置。 [14:59:06] [EN] Why? [14:59:06] [中] 為什麼？ [14:59:09] [EN] While the before-and, what [14:59:09] [中] WHILE THE BEFORE-AND，什麼 [14:59:12] [EN] or will render element as a lust child. [14:59:12] [中] 或會將元素渲染為第一子元素。 [14:59:15] [EN] And after "End" will give you the position right [14:59:15] [中] 和「End」之後，將給你正確的位置。 [14:59:18] [EN] right after the target element. So this method is for [14:59:18] [中] 正確目標元素之後。所以這個方法是用來 [14:59:21] [EN] that's pretty flexible and can be used [14:59:21] [中] 那是相當靈活的，可以被使用 [14:59:24] [EN] almost anywhere. [14:59:24] [中] 幾乎隨時都可以使用。 [14:59:27] [EN] Then how do we remove elements? [14:59:27] [中] 然後我們要如何移除元素？ [14:59:30] [EN] removing elements can be done through the remove [14:59:30] [中] 移除元素可以透過 remove 方法來進行。 [14:59:33] [EN] basically we need to have a reference to the [14:59:33] [中] 基本我們需要有一個參考到的 [14:59:36] [EN] to the object, and we can also reset the whole HTML [14:59:36] [中] 對象，也可以重設整個 HTML [14:59:39] [EN] HTML by setting the empty string. [14:59:39] [中] HTML可以設為空字串。 [14:59:46] [EN] We're going to [14:59:46] [中] 我們要-going-to 這個部分語意不清，無法完整翻譯。 [14:59:48] [EN] do some live coding, very simple [14:59:48] [中] 進行一些即時編程，非常簡單。 [14:59:51] [EN] exercise. So we have some HTML [14:59:51] [中] 練習。所以我們有些 HTML。 [14:59:54] [EN] HTML template that we need to utilize. [14:59:54] [中] 我們需要使用的 HTML 模板。 [14:59:57] [EN] and we have our createCartComponent function. [14:59:57] [中] 並且我們有我们的 createCartComponent 函數。 [15:00:00] [EN] So we need to implement the function [15:00:00] [中] 所以我們需要實現這個函數。 [15:00:03] [EN] It takes the title and the body, this is the string variables, [15:00:03] [中] 它接受標題和正文，這些是字串變數。 [15:00:06] [EN] and sets it to the [15:00:06] [中] 並且設定它到elfast [15:00:09] [EN] the age-free tech and card body content. [15:00:09] [中] 無障礙技術和卡片內容。 [15:00:12] [EN] There are multiple ways how can you [15:00:12] [中] 有多种方式你可以 [15:00:15] [EN] implement this but let's see what we [15:00:15] [中] 實現這個但讓我們看看我們有什麼 [15:00:18] [EN] we can do here. And here we call this function [15:00:18] [中] 我們可以做到這裡。這裡我們呼叫這個函數。 [15:00:21] [EN] function, so this function should determine HTML elements [15:00:21] [中] 函數，所以這個函數應該決定 HTML 元素。 [15:00:24] [EN] and then we append this element to the container [15:00:24] [中] 然後我们将這個元素附加到容器中。 [15:00:27] [EN] So to start with exercise, check out [15:00:27] [中] 所以首先開始練習，查看 [15:00:30] [EN] repository. I hope you will have the [15:00:30] [中] repository.我希望你會有 [15:00:33] [EN] the links to your repository in the chat or [15:00:33] [中] 你的 reposiory 中的連結在聊天中或 [15:00:36] [EN] You can also click on the slides. [15:00:36] [中] 你可以 ALSO 點擊滑鼠點選Slides。 [15:00:39] [EN] and open the folder begin and open [15:00:39] [中] 然後開啟開始選單並開啟檔案夹。 [15:00:42] [EN] open the file index.html. We don't need any-- [15:00:42] [中] 開啟 file index.html。我們不需要任何 [15:00:46] [EN] compiler or complex setup, it will be enough [15:00:46] [中] 編譯器或複雜的設定，就足夠了。 [15:00:49] [EN] enough just to work with the HTML, use your favorite [15:00:49] [中] 足夠了，只需與 HTML 互動，使用你喜愛的 [15:00:51] [EN] favorite editor. And now I'm going to [15:00:51] [中] 喜歡的編輯器。現在我要開始bove。 [15:00:54] [EN] switch to the code. So I opened [15:00:54] [中] 切換到代碼視圖。所以我開啟了 [15:00:57] [EN] the index.html. So here we have [15:00:57] [中] index.html。所以這裡我們有 [15:01:01] [EN] We have our container, then we have our [15:01:01] [中] 我們有我们的容器，然後我們有我们的 [15:01:04] [EN] HTML, which is right now stored as a string. [15:01:04] [中] HTML, WHICH IS RIGHT NOW STORED AS A STRING. [15:01:06] [EN] string. And also we have our [15:01:06] [中] 字串。我們還有一個 [15:01:09] [EN] or HTML element. [15:01:09] [中] 或是 HTML 元素。 [15:01:12] [EN] the function that creates our cart element. [15:01:12] [中] 產生我們購物車元素的函數。 [15:01:16] [EN] Right now it's empty, so our goal will be to implement this. [15:01:16] [中] 現在是空的，所以我們的目標將是實現這個。 [15:01:18] [EN] So what can we do here? [15:01:18] [中] 那麼我們可以做什麼呢？ [15:01:21] [EN] We could potentially just say [15:01:21] [中] 我們可以直接說 [15:01:24] [EN] for instance, container, and then [15:01:24] [中] 例如，容器，然後 [15:01:27] [EN] and then set the inner HTML. [15:01:27] [中] 然後設定內部HTML。 [15:01:30] [EN] We would have to work with the HTML director, with the [15:01:30] [中] 我們必須與HTML导演合作，與 [15:01:33] [EN] string directly and representing the HTML [15:01:33] [中] 字符串直接表示HTML [15:01:36] [EN] as a string is not the best way to do things. [15:01:36] [中] 作為字符串不是最好的做法。 [15:01:39] [EN] So we want to have some kind of reusable [15:01:39] [中] 所以我們希望有一些可重複使用的 [15:01:42] [EN] way, how can we represent the templates? So, [15:01:42] [中] 方式，我們要如何表示模板？所以， [15:01:46] [EN] So, and apparently in HTML, we have the special [15:01:46] [中] 所以，顯然在HTML中，我們有一個特殊的 [15:01:49] [EN] a special tag called template. [15:01:49] [中] 一個特殊標籤叫作template。 [15:01:52] [EN] So we can remove this line. [15:01:52] [中] 所以我們可以移除這一行。 [15:01:55] [EN] And in the head, I'm going to use the template tag [15:01:55] [中] 所以在head中，我將使用template標籤。 [15:01:57] [EN] so what this template does [15:01:57] [中] 所以這個template做什麼 [15:02:00] [EN] it basically stores your edge [15:02:00] [中] 它基本上儲存你的邊緣 [15:02:03] [EN] HTML in the lightweight uh [15:02:03] [中] 輕量級的HTML [15:02:06] [EN] object in memory. [15:02:06] [中] 物件在記憶體中。 [15:02:09] [EN] So this content [15:02:09] [中] 所以這個內容 [15:02:12] [EN] is not querible by any DOM API. [15:02:12] [中] 任何DOM API都無法查詢此內容。 [15:02:15] [EN] so any external scripts will not be able to [15:02:15] [中] 所以任何外部脚本将无法 [15:02:18] [EN] to access this content. [15:02:18] [中] 存取此內容。 [15:02:22] [EN] So it's also not rendered on the final render [15:02:22] [中] 所以這內容也未在最終渲染中顯示。 [15:02:25] [EN] So if a user tries to traverse the DOM [15:02:25] [中] 所以如果使用者嘗試遍歷DOM [15:02:28] [EN] the Dome Tree. They will not be able to [15:02:28] [中] 遍歷Dome Tree。他們將無法 [15:02:31] [EN] be able to see that this template is utilized. [15:02:31] [中] 能夠看到這個模板被利用。 [15:02:34] [EN] So it's kind of a lightweight representation of our [15:02:34] [中] 所以這是一種我們的輕量級表示。 [15:02:37] [EN] cart. So we edit the cart template into the [15:02:37] [中] 購物車。所以我們將購物車模板編輯成 [15:02:40] [EN] template tag and we're also assigned the ID [15:02:40] [中] 模板標籤，我們也被指定了ID。 [15:02:43] [EN] ID. So the content of the template is not querible, but [15:02:43] [中] ID。所以模板內容無法查詢，但 [15:02:46] [EN] but the template is, so we need to clone the con [15:02:46] [中] 但模板是這樣，所以我們需要克隆這個 [15:02:49] [EN] content of the template. So let's update [15:02:49] [中] 模板內容。所以讓我們更新 [15:02:52] [EN] Let's first query the template. [15:02:52] [中] 讓我們首先查詢模板。 [15:02:55] [EN] So we can do document, get [15:02:55] [中] 所以我們可以執行文件，取得 [15:02:58] [EN] GetElementById. [15:02:58] [中] 取得ElementById。 [15:03:01] [EN] And then we use our car. [15:03:01] [中] 然後我們使用我們的車。 [15:03:04] [EN] CarTemplate. So now we [15:03:04] [中] 車模版。所以現在我們 [15:03:07] [EN] Now we have the reference to the current template. [15:03:07] [中] 現在我們取得當前模板的參考。 [15:03:10] [EN] Let's clone the content. [15:03:10] [中] 讓我們克隆內容。 [15:03:13] [EN] content as we know the templates use a fragment [15:03:13] [中] 內容如同我們知道的，模板使用了一個片段。 [15:03:16] [EN] So we need to clone the content of the fragment. [15:03:16] [中] 所以我們需要克隆片段的內容。 [15:03:18] [EN] for the special method that that [15:03:18] [中] 為了特別的方法那是 [15:03:22] [EN] that I'm going to show now. So we're going to access it [15:03:22] [中] 我將要展示的那個。所以我們將存取它。 [15:03:25] [EN] the template and the template has the property called [15:03:25] [中] 模版和模版具有稱為的屬性 [15:03:28] [EN] content so the content gives us the [15:03:28] [中] 內容所以內容給我們的 [15:03:31] [EN] the fragment that we need to work [15:03:31] [中] 我們需要工作的片段 [15:03:34] [EN] work with. So then I'm going to use the clone [15:03:34] [中] 工作_with。所以接著我將使用clone。 [15:03:37] [EN] node and I'm providing the [15:03:37] [中] 節點，我正在提供_the_。 [15:03:40] [EN] the true flag to do the deep clone. [15:03:40] [中] 真值旗標以進行深度複製。 [15:03:43] [EN] and then I used [15:03:43] [中] 然後我使用了 [15:03:46] [EN] the first element channel [15:03:46] [中] 第一個元素通道 [15:03:49] [EN] child that will return me the article. So by default [15:03:49] [中] 子節點，將回傳給我文章。所以預設 [15:03:52] [EN] First, it will return the fragment, but we need to [15:03:52] [中] 首先，它會回傳片段，但我們需要 [15:03:55] [EN] to access this element. And this element is the [15:03:55] [中] 要存取這個元素。這個元素是 the [15:03:58] [EN] the element. And that's why we use the first [15:03:58] [中] 元素。而這是為什麼我們使用第一個 [15:04:01] [EN] element child. So now we have our article [15:04:01] [中] 元素子節點。所以現在我們的文章有了。 [15:04:04] [EN] we want to update the article content. [15:04:04] [中] 我們想要更新文章內容。 [15:04:07] [EN] So we need to set the car title [15:04:07] [中] 所以我們需要設定車名稱 [15:04:10] [EN] and the card body content. So let's query that. [15:04:10] [中] 並將卡片內容設置。所以我們來查詢那 bergen. [15:04:13] [EN] that. So let's call it [15:04:13] [中] 那就稱之為它吧。所以讓我們呼叫它 [15:04:16] [EN] card title and card body [15:04:16] [中] 卡片標題和卡片內容 [15:04:19] [EN] body and then we use the document query [15:04:19] [中] 並將內容使用文件查詢 [15:04:22] [EN] query select your all. [15:04:22] [中] 查詢選擇您的所有。 [15:04:25] [EN] And then we're providing to [15:04:25] [中] 然後我們提供給它。 [15:04:28] [EN] selectors. The first one is the cart title [15:04:28] [中] 選項器。第一個是購物車標題。 [15:04:31] [EN] Then we need to post a [15:04:31] [中] 然後我們需要張貼一个 [15:04:33] [EN] car [15:04:33] [中] 車 [15:04:37] [EN] start body content class. [15:04:37] [中] 開始 BODY 標籤內容 class。 [15:04:40] [EN] So now we're selected to [15:04:40] [中] 所以現在我們選取到 [15:04:43] [EN] two elements, card title and the card body, and now we want [15:04:43] [中] 兩個元素，卡片標題和卡片內容，現在我們want [15:04:46] [EN] we want to update the text content of this. [15:04:46] [中] 我們想要更新這項文字內容。 [15:04:49] [EN] elements. So we use the text content property and then [15:04:49] [中] 元素。所以我們使用 textContent 屬性然後 [15:04:52] [EN] assign title. Then we need to use [15:04:52] [中] 分配標題。然後我們需要使用 [15:04:55] [EN] card body and then assign [15:04:55] [中] 卡片內容，然後分配 [15:04:58] [EN] assigned text content to the [15:04:58] [中] 將文字內容分配到 [15:05:01] [EN] body variable. Okay. [15:05:01] [中] body 變數。好。 [15:05:04] [EN] OK, now we return the cart. [15:05:04] [中] 好，現在我們返回購物車。 [15:05:07] [EN] And if we run this example, [15:05:07] [中] 如果我們執行這個範例， [15:05:10] [EN] So now we're creating a new cart element. [15:05:10] [中] 所以現在我們正在創建一个新的購物車元素。 [15:05:13] [EN] and then we're returning this card element [15:05:13] [中] 然後我們返回這個卡元素。 [15:05:16] [EN] from the Create Card Component function [15:05:16] [中] 從 Create Card Component 函數返回 [15:05:19] [EN] assign some random text and if you run the browser [15:05:19] [中] 分配一些隨機文字，然後執行瀏覽器 [15:05:22] [EN] we see that [15:05:22] [中] 我們看到那樣 [15:05:25] [EN] that this doesn't work, and let's see why. [15:05:25] [中] 那是因為這不起作用，讓我們看看為什麼。 [15:05:28] [EN] And apparently, where it's [15:05:28] [中] 顯然，那裡似乎不起作用。 [15:05:31] [EN] We're trying to set the text content [15:05:31] [中] 我們正在設定文字內容 [15:05:34] [EN] So the property undefined. So probably we have a mistake. [15:05:34] [中] 所以屬性未定义。所以可能我們有錯誤。 [15:05:37] [EN] mistake and how we query things. Yeah, so we need [15:05:37] [中] 錯誤以及我們如何查詢事物。 yeah，所以我們需要 [15:05:40] [EN] So we don't need to query the document. We need to query cart. [15:05:40] [中] 所以我們不需要查詢文件。我們需要查詢購物車。 [15:05:43] [EN] So if we fix that. [15:05:43] [中] 所以我們如果修正那部分。 [15:05:46] [EN] Yeah, now we have our cart rendered [15:05:46] [中] yeah，現在我們的購物車已經渲染出來了 [15:05:49] [EN] and all elements set. And this is it for the [15:05:49] [中] 並且所有元素設定完成。這就是購物車的部分了。 [15:05:52] [EN] first exercise. Okay, let's have the quick [15:05:52] [中] 第一個練習。好，讓我們來快速看一下。 [15:05:56] [EN] quick look of how could we potentially solve that. [15:05:56] [中] 快速查看我們如何潛在解決這個問題。 [15:05:58] [EN] The first solution would involve [15:05:58] [中] 第一個解決方案會涉及 [15:06:01] [EN] had treated the article as a [15:06:01] [中] 處理了這篇文章作為 [15:06:04] [EN] string so we could create a placeholders within the [15:06:04] [中] 字符串，這樣我們就能在其中創建佔位符。 [15:06:07] [EN] within the context and just replace it with a [15:06:07] [中] 在上下文中，只需替換它為一個 [15:06:11] [EN] replace function, but this means we would need to work with a string. [15:06:11] [中] 替換功能，但這意味著我們需要處理一串字元。 [15:06:13] [EN] And then we could append [15:06:13] [中] 然後我們就可以附加 [15:06:16] [EN] append the content using the inner HTML, but the [15:06:16] [中] 附加內容使用 inner HTML，但這表示 [15:06:19] [EN] This is not the best way because [15:06:19] [中] 這是不理想的辦法因為 [15:06:22] [EN] We will have to parse the content [15:06:22] [中] 我們必須解析內容 [15:06:25] [EN] content here in inner HTML and if we [15:06:25] [中] 內容放入 inner HTML 中，但如果我們 [15:06:28] [EN] if we want to repeat this operation, then it's not [15:06:28] [中] 如果我們想要重複執行此操作，則不是 [15:06:31] [EN] the most efficient way. So what we did is we just [15:06:31] [中] 這是最有效率的方式。所以我們做的是我們Just [15:06:35] [EN] We just use the document fragment, which is the lightweight representation. [15:06:35] [中] 我們Just使用 document fragment，這是輕量級的表示方式。 [15:06:37] [EN] representation of HTML element. [15:06:37] [中] HTML元素的輕量級表示方式。 [15:06:41] [EN] Since it's shielded from causing the rift [15:06:41] [中] 既然它被Shielded從造成裂隙中隔離了。 [15:06:44] [EN] In Reflow, we can do whatever we want in memory. [15:06:44] [中] 在Reflo流程中，我們可以在記憶體中做任何事情。 [15:06:47] [EN] So it can also be reused many times and it says isolated [15:06:47] [中] 所以它可以重複使用多次且是隔離的。 [15:06:50] [EN] from the queries. And yeah, we utilize [15:06:50] [中] 從查詢中隔離。而且，我們利用 [15:06:52] [EN] utilize it to keep our markup component in [15:06:52] [中] 利用它來保持我們的標記元件在 [15:06:55] [EN] HTML which is a very natural play [15:06:55] [中] HTML WHICH IS A VERY NATURAL PLAY [15:06:58] [EN] place where we should keep such things. [15:06:58] [中] 我們應該存放這些東西的地方。 [15:07:01] [EN] and then we just update it [15:07:01] [中] 然後我們只需更新它。 [15:07:04] [EN] data level function and the solutions [15:07:04] [中] 資料層功能和解決方案 [15:07:07] [EN] and here is the final solution. [15:07:07] [中] 這裡是最終的解決方案。 [15:07:10] [EN] Before we jump to the next section, [15:07:10] [中] 在我們跳到下一節之前 [15:07:13] [EN] Do we have any question? [15:07:13] [中] 我們有什麼問題嗎？ [15:07:17] [EN] Can you just explain again briefly why doing it that way doesn't trigger [15:07:17] [中] 可以再簡短解釋一次，為什麼這樣做不會觸發嗎？ [15:07:19] [EN] trigger reflow? Yeah. So... [15:07:19] [中] 觸發重新流？Yeah. So... [15:07:23] [EN] So when you modify the [15:07:23] [中] 所以當你修改 Dresses.css 文件中的媒体查询时会发生什麼？ [15:07:25] [EN] fragment. [15:07:25] [中] 片段。 [15:07:29] [EN] It's not within the DOM tree, it's actually just in memory. [15:07:29] [中] 它不在 DOM 樹中，實際上只是在記憶體中。 [15:07:31] [EN] So when you update any properties, [15:07:31] [中] 所以當你更新任何屬性時， [15:07:35] [EN] so it doesn't trigger any reflow. So if you could [15:07:35] [中] 所以它不會觸發任何重新流。所以如果你能夠 [15:07:38] [EN] could potentially have the element in the DOM tree [15:07:38] [中] 可能會讓元素在 DOM 樹中出现 [15:07:40] [EN] and you start updating [15:07:40] [中] 並且你開始更新 [15:07:44] [EN] the elements of the the properties of this element then this [15:07:44] [中] 這個元素的屬性元素然後這會 [15:07:46] [EN] this would cause reflow because the element already [15:07:46] [中] 這會造成重新流因為元素已經 [15:07:50] [EN] already in a DOM tree. But since it's in memory, yeah, [15:07:50] [中] 已經在 DOM 樹中。但因為它在記憶體中，對啊。 [15:07:53] [EN] Yeah, we can do any operations and [15:07:53] [中] Yeah, 我們可以進行任何操作和 [15:07:56] [EN] It's disconnected from the main DOM tree. [15:07:56] [中] 它與主要的 DOM 樹 disconnected。 [15:07:59] [EN] The only thing that counts the reflow is when we use a bandchild. [15:07:59] [中] 使用的 bandchild 會造成重新流。 [15:08:02] [EN] So the DOM API is actually pretty simple. [15:08:02] [中] 所以 DOM API 確實相当簡單。 [15:08:05] [EN] has some limited set of methods that we can utilize [15:08:05] [中] 具有一些有限的方法集我們可以利用 [15:08:07] [EN] and it's very useful if we're trying [15:08:07] [中] 而且如果我們正在尝试 [15:08:11] [EN] to build some low-level things but [15:08:11] [中] 為了建立一些基礎事物但 [15:08:14] [EN] But we need to think about the carrots that the [15:08:14] [中] 但我們需要思考那些诱因Carousel提供的 [15:08:16] [EN] DOM API has served [15:08:16] [中] DOM API 已經服務了 [15:08:20] [EN] For instance, make sure that you utilize the HTML [15:08:20] [中] 例如，請確保您利用了 HTML [15:08:23] [EN] HTML life collection wisely, so don't [15:08:23] [中] 請明智地利用 HTML 生命收藏，所以不要 [15:08:26] [EN] query too many elements and then don't try to [15:08:26] [中] 查詢太多元素，然後不要嘗試 [15:08:29] [EN] to read the HTML live collection because [15:08:29] [中] 因為讀取 HTML 生命收藏可能會造成效能問題 [15:08:32] [EN] because it will result to quadratic time. [15:08:32] [中] 因為這可能會導致 Quadratic 时间。 [15:08:35] [EN] For most of the cases, the query selector [15:08:35] [中] 對於大多數情況，查詢選擇器 [15:08:38] [EN] lecture has a good performance and you can just use [15:08:38] [中] 講座具有良好的 PERFORMANCE 你can just use [15:08:41] [EN] utilize it almost everywhere. [15:08:41] [中] 幾乎可以隨時使用它。 [15:08:44] [EN] So for rare cases when you really need to have the life [15:08:44] [中] 所以對於Really需要life更新的情況，你可以讀取HTML生生命收藏。 [15:08:47] [EN] collection, make sure that you work with a small subset of [15:08:47] [中] 集合, 請確定你僅處理一小部分資料。 [15:08:50] [EN] set of data to reduce any performance impact. [15:08:50] [中] 資料以減少任何 PERFORMANCE 影響。