在上一篇文章中，我們了解了物件導向程式設計並對 Python 的 Magic/Dunder 方法進行了全面概述。 **Python 中的物件導向程式設計 (OOP)**：Python 中的這種範例圍繞著建立可重複使用程式碼。它涉及使用類別作為物件的藍圖。這些物件可以具有定義其行為和交互的屬性（資料）和方法（函數）。 **Python 的 Magic/Dunder 方法**：Python 中的 Magic 或 Dunder（雙底線）方法是名稱以雙底線開頭和結尾的特殊方法（例如，`__init__`、`__str__`、`__repr__`）。 您可以在這裡閱讀相關內容。 👇 https://dev.to/swirl/python-mastery-pythons-object-oriented-programming-overview-and-fundamentals-22m1 今天，我們將對其進行擴展，並使用物件導向程式設計的知識來理解和建立 Python 中的鍊錶。並會對其執行一些操作。 ## 開源 Python 專案：[Swirl](https://github.com/swirlai/swirl-search) [](https://github.com/swirlai/swirl-search) 如果您對 Python 感興趣，您將會💖 [**Swirl**](https://github.com/swirlai/swirl-search)。 Swirl 是一個開源搜尋平台，它將為您提供以下知識： - Python - 人工智慧 - 在任何產品中整合大型語言模型 - 了解如何開發搜尋平台。 檢查我們的 GitHub 儲存庫： https://github.com/swirlai/swirl-search 如果您能夠：我們將非常高興： https://github.com/swirlai/swirl-search ## Linked List 連結列表是物件有序的集合。它是一種資料結構，旨在將資料保存在不連續的記憶體區塊中。 與使用連續記憶體區塊的陣列或傳統列表不同，鍊錶儲存在非連續記憶體位置。這種設計允許高效的插入和刪除，而無需重新排列整個資料結構。 這種設計允許高效的插入和刪除，而不需要重新排列整個資料結構。 ### 基本鍊錶 基本鍊錶是一種線性資料結構，其中每個元素（稱為節點）包含兩部分：資料和對清單中下一個節點的引用。這種結構允許有效地插入和刪除元素，因為它不需要移動元素，這與陣列不同。 典型的節點設計： **資料**：包含資料，可以是數字、地址、文字等。 **Next**：指向下一個資料節點或儲存下一個資料節點的位址。  第一個節點稱為列表的頭，最後一個節點指向 None（在 Python 中）（或在其他語言中為 Null），稱為尾節點。 當你把很多節點收集在一起時，它就變成了一個鍊錶。  ### 鍊錶的好處和操作的時間複雜度 連結清單有很多好處，特別是在動態資料操作場景中。以下是一些主要優勢： 1. **動態大小**：與陣列不同，鍊錶可以動態增長或縮小大小，這對於記憶體使用來說是高效的。 2. **易於插入/刪除**：插入或刪除節點相對簡單，因為它通常只涉及更改一些引用，而不需要像陣列中那樣移動元素。 3. **靈活性**：它們可以實現其他資料結構，如堆疊、佇列和圖鄰接表。 |運營|時間複雜度| |----------------|-----------------| |存取 | O(n) | |搜尋 | O(n) | |插入| O(1) | O(1) | |刪除 | O(1) | O(1) | _注意_：我們考慮的是單鍊錶。 ## 在 Python 中實作鍊錶。 這是將在 Python 中建立節點的程式碼。如果您對 `__repr__` 方法感到困惑，請注意。請查看本系列中的[上一篇文章](https://dev.to/swirl/python-mastery-pythons-object-oriented-programming-overview-and-fundamentals-22m1)。 ``` class Node: def __init__(self, data): self.data = data self.next = None def __repr__(self): return f"Node({self.data})" ``` 連結列表類別的程式碼。這利用了 Node 類別來建立資料並將它們連接在一起。 ``` class LinkedList: def __init__(self): self.head = None def append(self, data): new_node = Node(data) if self.head is None: self.head = new_node return last_node = self.head while last_node.next: last_node = last_node.next last_node.next = new_node def __repr__(self): nodes = [] current = self.head while current: nodes.append(repr(current)) current = current.next return "->".join(nodes) ``` 這段程式碼做了兩件事： 1. **追加**：在鍊錶末端追加一個節點。 2. `__repr__` ：此方法遍歷鍊錶並以Pythonic方式列印它。 1. 這也可以使用稱為 traverse 的方法來完成。 _這是呼叫「__repr__」方法的「print(llist)」的輸出：  ### 遍歷鍊錶。 遍歷鍊錶就是遍歷每個節點並列印它的過程。 ``` def traverse(linked_list): current = linked_list.head while current: print(current.data) current = current.next llist = LinkedList() llist.append(1) llist.append(2) llist.append(3) print("Traversing the linked list:") traverse(llist) ```  ## 反轉鍊錶 這個想法是迭代鍊錶，並且對於每個節點，將其“下一個”指標切換為指向前一個節點而不是下一個節點。這將幫助我們反轉鍊錶。 ``` def reverse_linked_list(head): previous = None current = head while current: next_node = current.next current.next = previous previous = current current = next_node return previous llist = LinkedList() llist.append(1) llist.append(2) llist.append(3) print("Original List:", llist) new_head = reverse_linked_list(llist.head) llist.head = new_head print("Reversed List:", llist) ```  ## 在連結清單中插入值 我們已經有一個追加函數，可以將值加到鍊錶的末尾。但是，如果我們想要一個在特定位置加入的方法，並且如果該位置不存在，則將值附加到末尾，該怎麼辦？ ``` class LinkedList: def insert_after_value(self, data_after, data_to_insert): if self.head is None: return current = self.head while current: if current.data == data_after: new_node = Node(data_to_insert) new_node.next = current.next current.next = new_node return current = current.next self.append(data_to_insert) ``` ## 刪除鍊錶中的節點 若要從鍊錶中刪除節點，請建立一個函數，該函數將鍊錶的頭和要刪除的節點的資料作為參數。並遍歷鍊錶，直到找到資料，然後將其刪除。 ``` class LinkedList: def delete_node(self, data): current = self.head if current is None or current.data == data: self.head = current.next if current else None return while current.next: if current.next.data == data: current.next = current.next.next return current = current.next ```  感謝您閱讀本文。在本系列的後續文章中，我們將討論 Python 和 Python 資料結構的更複雜的細節。 ## 為 [Swirl] 做出貢獻(https://github.com/swirlai/swirl-search) [](https://github.com/swirlai/swirl-search) [Swirl](https://github.com/swirlai/swirl-search) 是一個開源 Python 專案。為 Swirl 做出貢獻可以幫助您獲得生產級的 Python 知識並提高您的技能。 檢查我們的 GitHub 儲存庫： https://github.com/swirlai/swirl-search 如果您能夠：我們將非常高興： https://github.com/swirlai/swirl-search 謝謝閱讀， 你們都令人嘆為觀止。  --- 原文出處：https://dev.to/swirl/python-mastery-overview-of-linked-list-in-python-essential-linked-list-operations-hn3
您是否嘗試過實際建立神經網路？不，我也沒有……直到今天！ 在這篇文章中，我們將介紹我學到的一些東西，以及一些用 vanilla JS 編寫的非常簡單的神經網路的 2 個演示。 ## 介紹 今天早些時候，我正在閱讀 @supabase_io [“AI 內容風暴”](https://supabase.com/blog/supabase-ai-content-storm) 文章。 我突然意識到一件事。我得到了神經網路......但我實際上根本沒有得到它們！ 就像，我得到了神經元的概念。但數學是如何運作的呢？ 特別是如何使用「反向傳播」來訓練神經網路？偏差和權重如何發揮作用？什麼或誰是 sigmoid？ ETC。 現在，明智的做法是閱讀大量文章，獲取一個庫並使用它。 **但我不懂事。** 因此，我閱讀了大量文章……然後決定建立我的第一個神經網路。 但這還不夠難，所以我決定用 JavaScript 來做（因為每個人似乎都使用 Python...）。哦，我決定在沒有任何庫的情況下完成它。哦，我也想在其中建立一個視覺化工具。 我有些不對勁……我似乎在痛苦中茁壯成長。 無論如何，我做到了，這就是我學到的東西。 ## 注意：這不是教學課程 聽著，我想澄清一下，這不是教學！ 這只是我分享一些我在學習和我的**第一個**神經網路時發現有趣的事情。 請注意，這裡強調**第一**，所以請不要將其視為除了有趣的東西之外的任何東西。 我也盡力解釋每個部分及其作用，但與所有事情一樣，你對某些東西越熟練，你就越能更好地解釋它......所以我的一些解釋可能有點“偏離” ！ 無論如何，既然所有這些都已經解決了，讓我們繼續吧！ 如果您想直接跳到[最終演示](#the-demo)，請繼續！ ## 第一步 好的，首先，我可以建立的最基本的神經網路是什麼？ 經過一番閱讀後，我發現神經網路可以像一些輸入神經元和一些輸出神經元一樣簡單。 每個輸入神經元都連接到一個輸出神經元，然後我們可以為每個連接加入權重。 考慮到這一點，我必須想出一個易於理解的問題來解決，但又足夠複雜以確保我的網路正常運作。 我決定建立一個神經網絡，它獲取圖表上某個點的 X 和 Y 座標，然後根據它們是正還是負為它們分配一個「團隊」（顏色）。 這樣我們就有了 2 個輸入（X 和 Y 位置），然後有 4 個輸出： 1. X > 0 且 Y > 0 2. X < 0 且 Y > 0 3. X > 0 且 Y < 0 4. X < 0 且 Y < 0 由於這裡的要求非常簡單，我們可以擺脫一些「隱藏」神經元（這是我稍後將介紹的內容）並讓事情變得超級簡單！ 所以本質上我們必須建構一個看起來像這樣的神經網路：  左邊的圓圈是我們的輸入（X 和 Y 位置），右邊的圓圈是我們之前討論的輸出。 ### 我們的第一個神經元 好的，現在我們可以真正開始了。 現在我實際上並沒有先建置神經元。事實上，我實際上首先建立了一個視覺化工具，因為這是查看事情是否正常運作的最簡單方法，但我稍後會介紹這一點。 因此，讓我們建立一個神經元（或更具體地說，一些神經元及其連接）。 幸運的是，神經元其實非常簡單！ （或者我應該說，它們*可以*非常簡單......它們在大型語言模型（LLM）等中變得更加複雜。） 簡單神經元具有偏差（將其視為內部權重，我們將加入到最終計算中以對每個神經元進行加權的數字），並透過每個連接之間的權重連接到其他神經元。 現在回想起來，單獨加入到每個神經元的連接可能是一個更好的主意，但我決定將每層神經元和每層連接作為單獨的專案加入，因為這樣更容易理解。 所以建構我的第一個神經網路的程式碼如下所示： ``` class NeuralNetwork { constructor(inputLen, outputLen) { this.inputLen = inputLen; this.outputLen = outputLen; this.weights = Array.from({ length: this.outputLen }, () => Array.from({ length: this.inputLen }, () => Math.random()) ); this.bias = Array(this.outputLen).fill(0); } } const neuralNetwork = new NeuralNetwork(2, 4); ``` 好的，我跳過了一些步驟，所以讓我們簡要介紹一下每個部分。 `this.inputLen = inputLen;` 和 `this.outputLen = outputLen;` 只是為了讓我們可以引用輸入和輸出的數量。 `this.weights = [...]` 是連線。現在看起來可能有點嚇人，但這就是我們正在做的事情： - 建立輸出神經元陣列（`outputLen`） - 將長度為“inputLen”的陣列加入到每個陣列條目，並用 0 到 1 之間的一些隨機值填充它以開始我們的工作。 該程式碼的輸出範例如下所示： ``` this.weights = [ [0.7583747881712366,0.4306037998314902], [0.40553698492617807,0.4419651593960727], [0.852978801662627,0.9762509253699836], [0.8701610553353811,0.5583309725764114] ] ``` 它們本質上代表以下內容： ``` [input 1 to output 1, input 2 to output 1], [input 1 to output 2, input 2 to output 2], [input 1 to output 3, input 2 to output 3], [input 1 to output 4, input 2 to output 4], ``` 然後我們還有「this.bias」。 這適用於輸出層中的每個神經元。我們稍後用它來加入輸出值，使一些神經元更強，一些神經元更弱。 它只是一個由 4 個 0 組成的陣列來讓我們開始，因為我們不想要初始偏差！ 現在，雖然這是一個神經網絡，但它完全沒有用。 我們無法實際使用它......如果我們確實使用它，它產生的結果將是完全隨機的！ 所以我們需要解決這些問題！ ### 使用我們的網路！ 我們需要做的第一件事是實際獲取一些輸入，透過我們的網路執行它們並收集輸出。 這是我想出來的： ``` propagate(inputs) { const output = new Array(this.outputLen); for (let i = 0; i < this.outputLen; i++) { output[i] = 0; for (let j = 0; j < this.inputLen; j++) { output[i] += this.weights[i][j] * inputs[j]; } output[i] += this.bias[i]; output[i] = this.sigmoid(output[i]); } return output; } sigmoid(x) { return 1 / (1 + Math.exp(-x)); } ``` 現在這裡有兩件有趣的事情。 ####乙狀結腸 首先，一件有趣的事情是我們的“sigmoid”函數。它所做的只是沿著「S 形」曲線將我們輸入的值（例如 12）轉換為 0 到 1 之間的值。 這是我們將價值觀從極端標準化為更統一的**且始終為正值的方式。** 進一步閱讀後，這裡還有其他關於如何將值更改為 0 到 1 之間的選項，但我還沒有完全探索它們（例如 [ReLU](https://en.wikipedia.org/wiki/Rectifier_(neural_networks)) 如果你想閱讀相關內容）。 我確信有一些很好的解釋為什麼需要這樣做，但在我的猴腦中，這只是將值保持在 0 和 1 之間的方法，以便乘法保持在一定範圍內並且值被「展平」。 這樣你就不會在過於強大的神經元之間出現「失控」的路徑。 例如，假設您有一個權重為 16 的連接和一個權重為 1 的連接，使用我們的 sigmoid 函數，我們可以將其從 16 倍的差異減少到大約 35% 的差異（「sigmoid(1)」為0.73 ，執行我們的函數後，`sigmoid(16)` 為0.99）。 這也意味著負值變成正值。 因此，透過 sigmoid 函數執行值意味著負數會轉換為 0 到 0.5 之間的值，0 的值恰好變成 0.5，大於 0 的值變成 0.5 到 1 之間的值。  如果你考慮一下，這是有道理的，因為當我們開始將負數和正數相乘時，我們可以極大地改變我們的輸出。 例如，如果我們在 100 的路徑中有一個負神經元，而其餘的都是正神經元，這會將強值更改為弱值，並且可能會導致問題。 不管怎樣，隨著我閱讀更多和實驗更多，我相信我會更好地理解這一部分！ #### 我需要偏見嗎？ 第二個有趣的是「output[i] += this.bias[i];」。 好吧，在這個神經網路中，所有 4 個輸出都同樣重要，而且我們沒有隱藏神經元，所以我後來刪除了它以簡化程式碼！ 但諷刺的是，在我們更複雜的神經網路上，由於網路反向傳播的工作方式，我需要重新加入輸出神經元的偏差。否則，一個輸出神經元會一直啟動。 我無法弄清楚這是否是必要的步驟，或者我的神經網路是否犯了一個錯誤，而這是為了彌補它。 再次提醒大家，我還在學習中，只是掌握了基礎知識，所以我不知道它是什麼！ 🤣 #### 我們快到了 上面的其餘程式碼相當簡單。我們只是將每個輸入乘以與每個輸出相關的權重（並加入不必要的偏差！）。 事實上，我們現在就可以執行它，但結果會很糟糕！讓我們來解決這個問題！ ### 訓練時間到了！ 好吧，神經網路的最後一個重要部分是訓練它！ 現在，隨著這篇文章越來越長，我將只介紹以下訓練程式碼的要點（順便說一下，我花了將近一個小時來編寫......我告訴過你我對此是個菜鳥！ ） ``` train(inputs, target) { const output = this.propagate(inputs); const errors = new Array(this.outputLen); for (let i = 0; i < this.outputLen; i++) { errors[i] = target[i] - output[i]; for (let j = 0; j < this.inputLen; j++) { this.weights[i][j] += this.learningRate * errors[i] * output[i] * (1 - output[i]) * inputs[j]; } this.bias[i] += this.learningRate * errors[i]; } } ``` “為什麼花了這麼長時間？”我聽到你問了！好吧，它讓我思考了所有需要相乘才能更新每個權重的位元。 另外 `this.learningRate` 也需要一點時間來適應。這只是降低我們改變權重的速率，這樣我們就不會“超過”每個權重的目標值，但是將其調整到合理的值需要經驗......我沒有經驗並且設置得太低，所以我的程式碼看起來被破壞了！ 經過一番擺弄後，我將數值定為 0.1（而不是 0.01 🤦🏼♂️），突然間事情開始變得更好了！ 是的，所以我們有一個訓練函數。但請記住，此訓練功能僅進行一次訓練。 我們需要對我們的網路進行多次訓練，希望每次訓練都能使其更加準確。 我們將在一秒鐘內討論這一點，但我想分享一個快速的側面/我學到的東西。 #### 訓練資料調整 我知道我們甚至還沒有涵蓋最終的訓練資料，但這是我學到的一個有趣的觀點，適合這裡（因為它解釋了為什麼我花了這麼長時間來編寫這個訓練函數）。 最初我產生了數百個不同的訓練 X 和 Y 座標，全部都是隨機的。 但經過進一步閱讀後，我只產生 4 個靜態訓練點，得到了更好的結果： ``` const trainingData = [ { x: -0.5, y: -0.5, label: "blue" }, { x: 0.5, y: -0.5, label: "red" }, { x: -0.5, y: 0.5, label: "green" }, { x: 0.5, y: 0.5, label: "purple" } ]; ``` 一旦你明白了，就很有意義了！ 我們希望「拉」值更接近目標，上述值是我們每個區域的確切「中心點」。 因此，對於給定的距離，我們的錯誤率將始終保持一致。 這意味著我們的神經網路學習得更快，因為我們的錯誤率更大，這取決於它們距離 X 更遠還是距離 Y 更遠。 我可以更好地解釋這一點，但這超出了本文的範圍。希望如果您仔細考慮一下，那麼它也會像對我一樣為您「點擊」！ 諷刺的是，我回到了更大模型的更隨機的資料集，因為我想真正測試我對學習率、過度訓練等的理解。 ## 我們有一個有效且有用的神經網路！ 實際上，這就是我們的整個神經網路。 不過，我們需要做一件事。 我們的訓練函數需要執行很多次！ 因此，我們需要最後一個函數來做到這一點，它獲取我們的訓練資料並執行我們的訓練函數數百次： ``` function train() { for (let i = 0; i < 10000; i++) { const data = trainingData[Math.floor(Math.random() * trainingData.length)]; neuralNetwork.train([data.x, data.y], encode(data.label)); } console.log("Training complete"); } ``` ### 金髮女孩迭代 請注意，我們在「for」循環中訓練網路 10,000 次。 10,000 次迭代足以訓練這個特定的神經網路。但對於我們稍後將介紹的更複雜的問題，我需要更多的迭代（並降低學習率）。 這是機器學習有趣的部分之一，您需要足夠地訓練神經網路（這很難做到正確），但如果訓練太多，就會發生“過度擬合”，並且實際上開始得到更糟糕的結果。因此，為了獲得最佳結果，需要完美平衡！ 不管怎樣，已經很多了，我們終於迎來了第一個示範！ ## 簡單的普通 JS 神經網路演示 雖然有點亂，但我們的神經網路和所有訓練部分都在下面 CodePen 的前 67 行。 其餘程式碼行實際上執行我們的網路（“neuralNetwork.propagate([x, y]);”大約第 85 行），然後將點及其預測顏色輸出到“<canvas>”上。 「encode」和「decode」純粹是為了獲取我們的輸出神經元，找到哪個神經元具有最高的激活，然後將其映射到我們可視化的顏色。 這是最後要理解的事。我們的輸出神經元都會有一個值。神經網路不僅僅輸出 1, 0, 0, 0。 相反，它會輸出每個輸出神經元的「確定性」或猜測。因此我們將得到類似「0.92,0.76,0.55,0.87」的輸出。 這就是為什麼我們有“解碼”函數，它找到最高輸出的神經元並將其作為我們的最終猜測！ ``` // this line finds the max value of all of our output neurons and then returns its index so we can use that to classify our X and Y coordinates. const maxIndex = output.indexOf(Math.max(...output)); ``` ### 用法和實際演示 要使用該範例，您有 3 個按鈕： - **訓練** - 在我們的神經網路開始未經訓練和隨機化時對其進行訓練。 - **分類點** - 這是為了執行我們的神經網路。它將在圖表上繪製點並為它們分配顏色。我建議在訓練之前和之後執行這個。 - **重設** - 這將建立一個未經訓練的新神經網路。非常適合在訓練前後測試點的分類。 另請注意，每個區域都根據該區域應顯示的顏色進行著色。它真的可以讓您看到隨機且未經訓練的神經網路距離成功還有多遠（重置然後對測試點進行分類）！ 玩吧！ https://codepen.io/GrahamTheDev/pen/abPxoqb ### 我們最基本的神經網路結束 這樣我們就有了最基本的神經網路！ 它可以很好地滿足我們的需求，並且我們設法了解了一些關於反向傳播（我們在主類別中的“train”函數）以及權重和偏差的知識。 但這是非常有限的。如果我們將來想做更高級的事情，我們需要加入一些隱藏神經元！ ## 版本 2 - 隱藏神經元 好的，那為什麼要隱藏神經元呢？他們的目的是什麼？ 在更複雜的範例中，它們充當獲取輸入並為它們的分類方式加入更多維度的方式。 我們仍然使用 2 個輸入神經元和 4 個輸出神經元，但這次我們在中間加入了一個附加層（我們可以更改和調整其中神經元的數量）。 所以我們的神經網路看起來像這樣：  由於神經網路需要處理更多的輸入並進行更複雜的計算，隱藏層中的額外神經元使它們能夠更好地對輸入進行分類並提供更好的結果。 隱藏層也可以是不同的「深度」。 假設我們有 2 個輸入神經元。我們可以將它們連接到 6 個「隱藏」神經元，然後將它們連接到 4 個輸出神經元。 但我們也可以將第一層的 6 個神經元連結到第二層隱藏神經元。第二層可能有 8 個神經元，然後連接到我們的 4 個輸出神經元。 但要遵循的內容還有很多，這是為了讓我學習基礎知識，所以我選擇加入一個隱藏層。這也意味著我可以將每個連接層保留為單獨的陣列，這在現階段更容易理解！ ### 那麼有什麼新內容呢？ 沒有太大變化，只是我們有了更多的連結和更多的神經元！ 您可以將其視為串聯加入 2 個原始神經網絡，只是第一個神經網路的輸出現在充當第二個神經網路的輸入。 雖然程式碼可能更加複雜，但我們的神經網路遵循相同的原則。 這是程式碼： ``` class NeuralNetwork { constructor(inputSize, hiddenSize, outputSize) { this.inputSize = inputSize; this.hiddenSize = hiddenSize; this.outputSize = outputSize; this.weightsInputToHidden = Array.from({ length: hiddenSize }, () => Array.from({ length: inputSize }, () => Math.random() * 2 - 1) ); this.biasHidden = Array(hiddenSize).fill(0); this.weightsHiddenToOutput = Array.from({ length: outputSize }, () => Array.from({ length: hiddenSize }, () => Math.random() * 2 - 1) ); this.biasOutput = Array(outputSize).fill(0); this.learningRate = document.querySelector('#learningRate').value; // Adjusted learning rate this.hiddenLayer = new Array(this.hiddenSize); } feedForward(inputs) { for (let i = 0; i < this.hiddenSize; i++) { this.hiddenLayer[i] = 0; for (let j = 0; j < this.inputSize; j++) { this.hiddenLayer[i] += this.weightsInputToHidden[i][j] * inputs[j]; } this.hiddenLayer[i] += this.biasHidden[i]; this.hiddenLayer[i] = sigmoid(this.hiddenLayer[i]); } const output = new Array(this.outputSize); for (let i = 0; i < this.outputSize; i++) { output[i] = 0; for (let j = 0; j < this.hiddenSize; j++) { output[i] += this.weightsHiddenToOutput[i][j] * this.hiddenLayer[j]; } output[i] += this.biasOutput[i]; output[i] = sigmoid(output[i]); } return output; } train(inputs, target) { for (let i = 0; i < this.hiddenSize; i++) { this.hiddenLayer[i] = 0; for (let j = 0; j < this.inputSize; j++) { this.hiddenLayer[i] += this.weightsInputToHidden[i][j] * inputs[j]; } this.hiddenLayer[i] += this.biasHidden[i]; this.hiddenLayer[i] = sigmoid(this.hiddenLayer[i]); } const output = new Array(this.outputSize); for (let i = 0; i < this.outputSize; i++) { output[i] = 0; for (let j = 0; j < this.hiddenSize; j++) { output[i] += this.weightsHiddenToOutput[i][j] * this.hiddenLayer[j]; } output[i] += this.biasOutput[i]; output[i] = sigmoid(output[i]); } const errorsOutput = new Array(this.outputSize); const errorsHidden = new Array(this.hiddenSize); for (let i = 0; i < this.outputSize; i++) { errorsOutput[i] = target[i] - output[i]; for (let j = 0; j < this.hiddenSize; j++) { this.weightsHiddenToOutput[i][j] += this.learningRate * errorsOutput[i] * output[i] * (1 - output[i]) * this.hiddenLayer[j]; } this.biasOutput[i] += this.learningRate * errorsOutput[i]; } for (let i = 0; i < this.hiddenSize; i++) { errorsHidden[i] = 0; for (let j = 0; j < this.outputSize; j++) { errorsHidden[i] += this.weightsHiddenToOutput[j][i] * errorsOutput[j]; } this.biasHidden[i] += this.learningRate * errorsHidden[i]; for (let j = 0; j < this.inputSize; j++) { this.weightsInputToHidden[i][j] += this.learningRate * errorsHidden[i] * this.hiddenLayer[i] * (1 - this.hiddenLayer[i]) * inputs[j]; } } } } ``` 現在，不要被嚇倒，我剛剛複製了幾個循環，其中要操作的目標資料集略有不同。 我們加入了一組額外的偏差（對於我們的隱藏層）和一組額外的連接：我們的輸入層到我們的隱藏層，然後我們的隱藏層現在連接到我們的輸出層。 最後，我們的「train」函數有一些額外的循環，只是為了透過每個步驟進行反向傳播。 唯一值得一提的其他變化是我們現在有第三個輸入參數（中間），用於隱藏神經元的數量。 ### 醜陋，但似乎有用 看，我想再說一遍，這是我一邊學習一邊學習，所以程式碼反映了這一點。 這裡有很多重複，可擴展性不太好。 然而，據我所知，它是有效的。 話雖如此，雖然它有效，但它的性能似乎比我們原來的、簡單得多的神經網路要差。 這要么意味著我犯了一個錯誤（可能），要么是我沒有「撥入」正確的訓練設定。 說到這裡... ### 加入一些變數來玩 由於這更複雜，我在一些快速設定中「迴避」了。 現在我們可以更新： - **訓練資料大小** - 我們產生的不同隨機點的數量 - **訓練迭代** - 我們從訓練集中選擇隨機資料點並將其輸入神經網路上的「訓練」函數的次數。 - **學習率** - 我們根據錯誤調整速度的乘數。 - **隱藏節點（超過2個！）** - 調整第二層有多少個隱藏節點（需要您再次初始化網絡，否則會損壞！） - **要分類的點** - 傳遞給我們訓練過的神經網路並繪製在圖表上的點數。 這意味著我們可以更快地處理這些值，看看它們對我們的神經網路及其準確性有什麼影響！ ### 最後一件事 哦，我加入了一個按鈕來視覺化神經網路的樣子。 無論如何按“可視化神經元和權重”，但它還沒有完成。我也沒有立即完成它的打算，因為我想完全重新設計建構神經網路的方法，使其更具可擴展性。 不過，按鈕就在那裡，請隨意按下。更好的是，請隨時為我修復它！ 🤣💗 ## 演示 控制項與以前相同，加上前面 2 個小節中提到的輸入。 試試一下，看看是否可以微調學習率、神經元數量和訓練設定以獲得真正準確的結果！ https://codepen.io/GrahamTheDev/pen/qBLwBxP 請務必更新一些值，重新初始化神經網絡，嘗試使用不同數量的隱藏神經元等。 如果您像我一樣是初學者，希望您能開始理解一些事情！ ## 結論 用 vanilla JS 建立神經網路真的很有趣。 我沒有見過很多人這樣做，所以我希望它對你或至少對某人有用！ 我學到了很多關於偏差、反向傳播（神經網路的關鍵）等的知識。 顯然這個例子和這裡學到的東西只是機器學習的1%。但對於像我這樣的微小的、未優化的神經網路和巨大的數十億參數模型來說，核心原理是相同的。 這個例子就像機器學習 (ML) 和神經網路的「hello world」。 接下來，我真的想嘗試建立一個更大的、結構更好、更容易擴展的神經網絡，看看我們是否可以進行一些光學字元辨識（OCR）。您可以將其視為機器學習和神經網路的“待辦事項清單”！ ### 發表評論。 您是神經網路專家嗎？告訴我我哪裡錯了！ 你是像我一樣的初學者嗎？那麼請告訴我這是否有助於您理解，至少一點點！或者，如果這實際上讓事情變得更加混亂！ 😱 最重要的是，如果這篇文章激發了您對我糟糕的編碼做鬼臉，或者想要建置您自己的神經網絡......那麼我很高興它對您產生了一些影響，並且很樂意聽到它！ 💗 --- 原文出處：https://dev.to/grahamthedev/a-noob-learns-ai-my-first-neural-networkin-vanilla-jswith-no-libraries-1f92
原文出處：https://dev.to/rjwignar/are-you-stealing-from-other-projects-4f0n ### 優秀的程式設計師抄襲；更優秀的程式設計師會偷竊嗎？ > 優秀的藝術家臨摹；偉大的藝術家偷竊 > \- 巴勃羅·畢卡索 巴勃羅·畢卡索經常因說出上述引言而受到讚譽。我不會提供我自己對這句話的解釋，因為有興趣的人可以在網路上找到大量的解釋。然而，我經常想知道這句話如何應用於程式設計和開源開發。 ### 我們的程式設計知識真的是我們自己的嗎？ 網路上有很多資源可以教您幾乎所有與程式設計相關的知識。我自己和我的許多同學幾乎所有的程式設計知識都是從教科書、線上資源/文件和 YouTube 教學中學到的。這些資源教會了我們今天擁有並應用的程式設計知識，但是所有這些知識都被盜了嗎？如果您從數千人觀看的 YouTube 教程中學會了編寫第一個“Hello World”程序，您是否在竊取程式碼？影片上傳者也學會使用外部資源編寫「Hello World」程式的可能性有多大？上傳者的知識被偷了嗎？ 我不能說這些知識是否被盜，但我相信這種知識對於我們建立和擴展我們的技能是必要的。沒有人能夠知道每一個完美的實現，或是為每個專案編寫每一行程式碼。 ### 開源軟體是為使用而生的！ 開源軟體的存在不應該被忽視，開源軟體是用來使用的！如果開源專案提供了您需要的功能，那麼當其他人為您精心完成這些功能時，為什麼還要自己實現這些功能呢？只要該庫得到積極維護並滿足您的需要，您就應該使用和研究開源庫。如果您發現任何錯誤、問題或缺少的功能，請嘗試建立自己的解決方案並為該專案做出貢獻，使其對每個人都更好！同樣，如果開源程式庫提供了您需要的功能，但您無法整合該程式庫，請以開源專案為靈感，在您自己的專案中實現該功能。 ### 從其他專案中獲取靈感 在我之前的[關於程式碼閱讀的部落格文章](https://dev.to/rjwignar/code-reading-i7h)中，我閱讀了Docusaurus 的程式碼庫來研究該專案如何為受保護的程式碼區塊實現語法突出顯示。我的研究告訴我，Docusaurus 實際上使用第三方函式庫 [Prism-React-Renderer](https://github.com/FormidableLabs/prism-react-renderer) 來提供語法突出顯示。這些知識很有用，因為我想在我的 Markdown 到 HTML 轉換器 [ctil](https://github.com/rjwignar/ctil) 新增語法突出顯示，但不想從頭開始實現該功能。雖然我無法在自己的專案中使用 Prism React Renderer，但研究 Docusaurus 給了我找到一個我可以使用的開源程式庫的想法。 ### 使用highlight.js 進行語法高亮顯示 在搜尋第三方語法螢光筆時，我找到了 [highlight.js](https://highlightjs.org/)。 ctil 將文字（`.txt`）和 Markdown （`.md`）轉換為生成的 HTML（`.html`）文件，因此我希望生成的 HTML 文件支援語法突出顯示。透過使用內容分發網路（CDN），highlight.js 可以用作 HTML 標籤，因此我可以透過將以下行新增至產生的 HTML 檔案來新增highlight.js： ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script>hljs.highlightAll();</script> ``` 透過這些行，我能夠[加入語法突出顯示](https://github.com/rjwignar/ctil/commit/c597f05724b60731e129aead33f1c3017a99ec17)：  ### 與 Docusaurus 方法的比較 在我的[上一篇部落格文章](https://dev.to/rjwignar/code-reading-i7h)中，我描述了 Docusaurus 如何使用 Prism React Renderer 新增語法突出顯示。與 Docusaurus 一樣，我使用了第三方函式庫highlight.js 來加入語法突出顯示。然而，在 Docusaurus 中新增和修改了設定檔以設定 Prism React Renderer，並透過使用「<Highlight />」元件加入了語法突出顯示。 Prism React Renderer 還提供了使用者可以在其專案中配置的突出顯示主題。對於我的專案，只需將highlight.js 加入到生成的 HTML 文件中，作為要透過 CDN 傳送的 HTML 標籤。現在我對基本的語法突出顯示感到滿意，所以我不關心有一個特定的突出顯示主題。透過 CDN 使用highlight.js 的一個缺點是，如果使用者在線，語法突出顯示可能無法運作。將來我可能會將highlight.js加入到專案本身中，這樣語法突出顯示就可以離線工作。 ### 下一步。 此功能仍在開發中。在目前迭代中，html 用作 `<code>...</code>` 區塊的預設語言類別。目前這是可以接受的，但此解決方案將忽略原始 Markdown 文件中的任何語言類設定。我希望 ctil 解析 Markdown 文件中的語言標籤，以確定使用哪種語言進行突出顯示。這將是未來需要解決的問題。有興趣的人可以在[此處](https://github.com/rjwignar/ctil/issues/11)找到問題。 ### 那麼從開源專案複製程式碼算不算偷竊？ 只要專案許可證允許複製，並且您遵循專案許可證的要求，您就不會竊取。同樣，我認為從開源專案中尋找靈感並不是偷竊。
我曾經不同意淺色和深色模式切換。 “切換開關是用戶系統偏好設置！”我會天真地感嘆，選擇讓 [prefers-color-scheme CSS 媒體查詢](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 控制我個人網站上的主題。沒有切換。沒有選擇。 🫠 自從黑暗模式出現以來，我一直是它的用戶。但最近，我更喜歡在輕型模式下使用_**一些**_網站和工具 - 包括我的個人網站 - 同時將我的系統設置牢牢地保留在黑暗中。我需要一個開關。我需要一個選擇！其他人也是如此。 在這篇文章中，我將向您展示如何使用 JavaScript 為我的網站建置終極主題 Toggle™️： 1. 在本地瀏覽器存儲中存儲和檢索主題首選項， 1. 退回到用戶系統首選項， 1. 如果未檢測到上述情況，則回退到默認主題。 TL;DR：[這是 CodePen 上的程式碼](https://codepen.io/whitep4nth3r/pen/VwEqrQL)。 原文出處：https://dev.to/whitep4nth3r/the-best-lightdark-mode-theme-toggle-in-javascript-368f ## 將資料屬性加入到 HTML 標記中 在 HTML 標記上，加入一個資料屬性，例如“data-theme”，並為其指定默認值“淺色”或“深色”。過去我使用自定義屬性“color-mode”而不是資料屬性（例如“color-mode=”light“”）。雖然這可行，但它沒有被歸類為有效的 HTML，而且我找不到任何相關文件！對此的任何見解都非常感激。 😅 ``` <html lang="en" data-theme="light"> <!-- all other HTML --> </html> ``` ## 通過 CSS 自定義屬性配置主題 在 CSS 中，通過“data-theme”每個值下的 [CSS 自定義屬性](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)（或變數）配置主題顏色` 屬性。請注意，您不一定需要將 `:root` 與 `data-theme` 結合使用，但它對於不隨主題變化的全局屬性很有用（如下例所示）。 [在 MDN 上了解有關 :root CSS 偽類的更多訊息。](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) ``` :root { --grid-unit: 1rem; --border-radius-base: 0.5rem; } [data-theme="light"] { --color-bg: #ffffff; --color-fg: #000000; } [data-theme="dark"] { --color-bg: #000000; --color-fg: #ffffff; } /* example use of CSS custom properties */ body { background-color: var(--color-bg); color: var(--color-fg); } ``` 在 HTML 標籤上手動切換“data-theme”屬性，您就會看到主題已經發生變化（只要您使用這些 CSS 屬性來設置元素的樣式）！ ## 在 HTML 中建置一個切換按鈕 將 HTML 按鈕加入到您的網站標題或任何需要主題切換的位置。加入一個 `data-theme-toggle` 屬性（稍後我們將使用它來定位 JavaScript 中的按鈕）和一個 [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)如果您計劃在按鈕上使用圖標（例如太陽和月亮分別代表淺色和深色模式），以便螢幕閱讀器和輔助技術可以理解按鈕的用途互動按鈕。 ``` <button type="button" data-theme-toggle aria-label="Change to light theme" >Change to light theme (or icon here)</button> ``` ## 計算頁面加載時的主題設置 在這裡，我們將根據我所說的“_**偏好級聯**_”來計算主題設置。 ### 從本地存儲獲取主題首選項 我們可以使用 [JavaScript 中的 localStorage 屬性](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 將用戶首選項保存在瀏覽器中，該首選項在會話之間持續存在（或直到它手動清除）。在 The Ultimate Theme Toggle™️ 中，存儲的用戶首選項是最重要的設置，因此我們將首先查找它。 頁面加載時，使用 localStorage.getItem("theme") 檢查之前存儲的首選項。在本文後面，我們將在每次按下切換按鈕時更新主題值。如果沒有本地存儲值，則該值為“null”。 ``` // get theme on page load localStorage.getItem("theme"); // set theme on button press localStorage.setItem("theme", newTheme); ``` ### 在 JavaScript 中檢測用戶系統設置 如果“localStorage”中沒有存儲的主題首選項，我們將使用 [window.matchMedia() 方法](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)通過傳入媒體查詢字串。您只需計算一項設置即可實現首選項級聯，但下面的程式碼顯示瞭如何檢測淺色或深色系統設置。 ``` const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); // or const systemSettingLight = window.matchMedia("(prefers-color-scheme: light)"); ``` `window.matchMedia()` 返回一個 `MediaQueryList`，其中包含您請求的媒體查詢字串，以及它是否與用戶系統設置“匹配”（true/false）。 ``` { matches: true, media: "(prefers-color-scheme: dark)", onchange: null } ``` ### 回退到默認主題 現在您可以通過“window.matchMedia()”存取“localStorage”值和系統設置，您可以使用首選項級聯（本地存儲，然後系統設置）計算首選主題設置，並回退到默認主題您的選擇（這應該是您之前在 HTML 標記上指定的默認主題）。 我們將在頁面加載時執行此程式碼來計算當前的主題設置。 ``` function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) { if (localStorageTheme !== null) { return localStorageTheme; } if (systemSettingDark.matches) { return "dark"; } return "light"; } const localStorageTheme = localStorage.getItem("theme"); const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }); ``` ## 加入事件監聽器到切換按鈕 接下來，我們將設置一個事件監聽器，以便在按下按鈕時切換主題。使用我們之前加入的資料屬性（`data-theme-toggle`）定位 DOM 中的按鈕，並加入一個[事件監聽器](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) 加入到單擊按鈕。 - 將新主題計算為字串 - 計算並更新按鈕文本（如果您在按鈕上使用圖標，則可以在此處進行切換） - 更新按鈕上的aria標籤 - 切換HTML標籤上的data-theme屬性 - 將新的主題首選項保存在本地存儲中 - 更新內存中的currentThemeSetting ``` // target the button using the data attribute we added earlier const button = document.querySelector("[data-theme-toggle]"); button.addEventListener("click", () => { const newTheme = currentThemeSetting === "dark" ? "light" : "dark"; // update the button text const newCta = newTheme === "dark" ? "Change to light theme" : "Change to dark theme"; button.innerText = newCta; // use an aria-label if you are omitting text on the button // and using sun/moon icons, for example button.setAttribute("aria-label", newCta); // update theme attribute on HTML to switch theme in CSS document.querySelector("html").setAttribute("data-theme", newTheme); // update in local storage localStorage.setItem("theme", newTheme); // update the currentThemeSetting in memory currentThemeSetting = newTheme; }); ``` 要確認“localStorage”正在更新，請打開開發工具，導航到“Application”選項卡，展開“Local Storage”並選擇您的站點。你會看到一個鍵：值列表；查找“主題”並單擊按鈕即可觀看其實時更新。重新加載您的頁面，您將看到保留的主題首選項！  ## 把它們放在一起！ 您現在可以通過以下方式建置您自己的終極主題切換™️： - 使用CSS自定義屬性來指定不同的主題顏色，通過HTML標籤上的資料屬性進行切換 - 使用 HTML 按鈕來啟動切換 - 使用首選項級聯計算頁面加載時的首選主題（本地存儲 > 系統設置 > 後備默認主題） - 單擊切換按鈕即可切換主題，並將用戶首選項存儲在瀏覽器中以供將來存取 這是完整的 CodePen，您可以在我的個人網站上查看工作版本。快樂切換！ https://codepen.io/whitep4nth3r/pen/VwEqrQL
[【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？](https://ithelp.ithome.com.tw/articles/10312056) ## 前情提要 如果說蟑螂怕拖鞋，老鼠愛大米，任何事物都有相生相剋的道理，那麼前端最害怕什麼呢？ 恐怕就是todo-list。 這應該是前端的四大惡夢之一，並不是因為太難了，而是因為太簡單而且太無聊了， 不只無聊，還是每次教學都必須寫的一個磨難，簡直是瞬間殺死靈魂中隊前端的愛。 今天要來用不同風格寫出todo-list，把代辦事項寫出新滋味。 body裡面一行都沒有也能搞？ 就是可以搞，讓我們馬上來欣賞這段有特別滋味的玩法！ε(*´･∀･｀)зﾞ ## 程式碼 ``` <!DOCTYPE html> <html> <head> <title>Todo List</title> </head> <body></body> <script> //渲染DOM AddHtml(); //資料內容 function AddHtml() { const Data = { h1: "Todo List", button: "Add", }; //主體的DOM const html = `<h1>${Data.h1}</h1> <input type="text" id="input" /> <button onclick="CheckNull()">${Data.button}</button> <ul id="list"></ul>`; //渲染至畫面上 document.body.innerHTML += html; } //邏輯確認:是否有輸入值 function CheckNull() { if (!input.value.trim("")) { return; } else { AddItem(); } } //新增代辦事項 function AddItem() { const li = `<li>${document.getElementById("input").value}</li>`; document.getElementById("list").innerHTML += li; input.value = ""; } </script> </html> ``` [可以貼到try it的地方執行看看效果](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_submit) ## 觀念筆記 所謂MVC架構就是模型、視圖、控制，背後其實有一個元素貫串任何程式，那就是：「邏輯」 每當你要下手寫一個程式卻不知道怎麼開始動手， 那就是邏輯沒有通順。 網頁不外乎就是畫面，以及資料，還有使用者的操作。 對於todo-list來說就是一個簡單的input畫面，使用者輸入的資料，點下按鈕送出的操作。 這段程式特地不寫任何一行body裡面的東西， 玩弄了一般人對於程式區分的概念。 用模板符的特性讓所有一切交給變數與函式處理，最後三個function： AddHtml、CheckNull、AddItem完美演繹了代辦清單這個網頁所需要構成的底層邏輯。 必須先加入畫面，然後確認使用者操作的條件，最後新增資料。 這樣子的流程對於新手或許不習慣，但是以邏輯面來看比一般人的寫法清晰許多。 這也是未來框架導入後，對資料流更敏感的培養練習。 ## 心得 無聊的todo-list竟然可以搞成這樣！？ 真的是太有趣了(๑╹◡╹๑)！ 原來前端的惡夢也可以變成寫不同風格的天堂，沒錯，寫程式就是這麼千變萬化！ 重點是背後的邏輯抓到了，那麼想要怎麼寫，真的就是藝術的發揮。 請繼續關注， 跟著我們這個系列繼續動手玩創意！！未來還有更多更新鮮的花招呢(｡◕∀◕｡)
*先說清楚一件事：* *這不是要抨擊其他框架，如 React、Vue 或 Angular。我使用了所有這些工具，而 React（使用 NextJS）仍然是我的首選。* 原文出處：https://dev.to/jannikwempe/why-svelte-is-different-and-awesome-4381 # 什麼是 Svelte？ > Svelte 是一種全新的用戶界面建置方法。 React 和 Vue 等傳統框架在瀏覽器中完成大部分工作，而 Svelte 將這些工作轉移到建置應用程式時發生的**編譯步驟**。 TLDR; 它類似於 React 或 Vue，但主要區別在於它是 [編譯器](https://svelte.dev/blog/frameworks-without-the-framework)。 上面連結的博客文章中引用了一句話： >等等，這個新框架有 runtime 嗎？啊。謝謝，我先不用了。 > – 2018 年的前端開發人員 儘管這在 2018 年沒有發生，但我認為我們會在某個時候達到這種心態。 ## “Svelte 是一個編譯器”是什麼意思？ 它本質上意味著特定於 Svelte 的程式碼被編譯（考慮轉換）為 JavaScript，可由瀏覽器執行。 您可能知道的另一個編譯器是 TypeScript 編譯器 (`tsc`)，它將 TypeScript 編譯為 JavaScript。這是同一個概念。 那麼這是怎麼回事呢？您還可以將 React 程式碼編寫為 `.js` 並發布。的確如此，但是如果沒有發布 React 執行時系統，JavaScript 程式碼將無法在瀏覽器中執行。 > 執行時系統是指使軟體程序能夠在計算機系統上執行的軟體和硬件資源的集合。 *注意：儘管我很多人都在談論“（無）runtime 時”，但更準確地說應該是“（無）runtime **系統**”。* 閱讀來自 [Dan Abramov](https://mobile.twitter.com/dan_abramov) 的精彩 [React as a UI Runtime](https://overreacted.io/react-as-a-ui-runtime/) 博文.它深入解釋了 React 是一個 runtime（系統）。 除了不需要 runtime 之外，還有另一個好處。 Svelte 可以擴展和更改 JavaScript 語法，因為編譯器最終將其編譯為 JavaScript。因此 Svelte 可以擺脫 JavaScript 語法提供的一些限制。 這也可能是一個缺點，因為如果 Svelte 嚴重偏離 JavaScript 語法，它實際上將成為另一種需要學習的語言。不用擔心，Svelte 試圖堅持 JavaScript 語法。 # Svelte 作為編譯器的好處 由於 Svelte 是一個編譯器，因此不需要將執行時系統加載到客戶端中，因此有幾個優點。這些都是 Svelte 的特別之處。我想到的最重要的優勢將在下一節中展示。 ## 效能 這應該是顯而易見的：沒有為客戶端加載的執行時會導致更快的加載時間。 下圖顯示了 JS 框架基準測試的摘錄（請參閱 [this GitHub repo](https://github.com/krausest/js-framework-benchmark)）。它基於一個帶有隨機條目的大表，並測量各種操作的時間，包括渲染持續時間。  使用 Svelte 的應用程式提供了最少的程式碼。 *（不知何故，Svelte 似乎需要比普通 JS 更少的程式碼，我不知道這是怎麼發生的 😀）* 但它不僅向客戶端發送更少的程式碼，而且執行速度更快：  原因之一是 Svelte 不使用虛擬 DOM (vDOM)。 Svelte 不依賴於 vDOM 和 DOM 之間的差異來更新 DOM。其他提到的框架，如 React、Vue ~~和 Angular~~ *（編輯：Angular 使用增量 DOM）* 確實使用 vDOM。您可以在 Sveltes 博客文章 [Virtual DOM is pure overhead](https://svelte.dev/blog/virtual-dom-is-pure-overhead) 中了解有關此內容的詳細訊息。 該帖子的快速引用： > Svelte 是一個編譯器，它知道**在建置時**你的應用程式會發生什麼變化，而不是等到執行時才開始工作。 ## 微前端架構中的 Svelte 微前端 (MFE) 本身就是一個主題（在 [本文](https://martinfowler.com/articles/micro-frontends.html) 中閱讀它）由 [Martin Fowler](https://twitter.com/martinfowler)）。但這個概念基本上是不同的團隊可以分別開發前端的不同部分。團隊還可以選擇他們想要使用的技術堆棧。因此，客戶端最終可能會加載不同版本的 Angular、Vue、React 等： > 一些微前端的實現會導致重複依賴，*增加我們的用戶必須下載的字節數*。 *（來自上面連結的 Martin Fowler 文章）* 但是 Svelte 呢？ Svelte（也使用它的不同版本）並沒有增加客戶端必須加載的 kbs 的缺點。 Svelte 是 MFE 架構的絕佳選擇。 # 其他福利 這些好處並不是因為 Svelte 是一個編譯器，而是它們讓 Svelte 脫穎而出。 ## REPL Svelte 有一個很棒的 REPL。您可以毫不費力地開始玩耍和嘗試。這太棒了！ [試用](https://svelte.dev/repl/hello-world?version=3.37.0)。 也可以分別點擊“JS Output”或“CSS Output”查看編譯後的JS和輸出的CSS（可以寫在同一個`.svelte`文件中）。 這足以證明 Svelte 是一個編譯器嗎？ 😉 REPL 也用在他們很棒的教程中。您可以動手學習 Svelte：[Svelte 教程](https://svelte.dev/tutorial/basics)。 ## 內置功能 Svelte 內置了一些幾乎所有應用程式（至少是大型應用程式）都需要的功能，例如過渡、動畫和 store。首先不需要額外的依賴或在各種選擇之間做出決定。 > store 只是一個具有訂閱方法的物件，只要 store 值發生變化，就可以通知感興趣的各方。 ``` import { writable } from 'svelte/store'; export const count = writable(0); export const increment = () => { count.update(n => n + 1); } ``` 就是這樣。您可以在您的應用中導入 `count` 和 `increment`。簡單的！ [試用 Svelte store 教程](https://svelte.dev/tutorial/writable-stores) Svelte 中的動畫和過渡很容易使用。你能猜出下面的程式碼在做什麼嗎？ ``` {#if visible} <p in:fly="{{ y: 200, duration: 2000 }}" out:fade> Flies in, fades out </p> {/if} ``` [試用 Svelte 轉換教程](https://svelte.dev/tutorial/in-and-out) 但它們也可以用於更複雜的事情，如下所示：  享受在 React 中建置它的樂趣🤪 [試用 Svelte 動畫教程](https://svelte.dev/tutorial/animate) #SvelteKit [SvelteKit](https://kit.svelte.dev/) 是它自己的主題。但這是我如此興奮的主要原因之一。想想 SvelteKit 之於 Svelte，就像 NextJS 之於 React。 但為什麼它很棒？ >SvelteKit **完全接受無伺服器範式**，並將在支持所有主要無伺服器提供商的情況下推出，並帶有一個“適配器”API，用於針對我們未正式迎合的任何平台。 閱讀 [SvelteKit 有何關係？](https://svelte.dev/blog/whats-the-deal-with-sveltekit) 在我撰寫本文時，SvelteKit 目前處於測試階段。等不及發布了！ # 結論 我可以繼續下去（我有沒有提到 Svelte 是用 TypeScript 編寫的？）。但這結束了。你可以看到我很興奮，對吧？我會賭 Svelte。學習 Svelte 以及與基於執行時系統的框架的區別絕對不是浪費時間。 我期待 Sveltes 未來的發展。我希望它能很快得到更廣泛的使用，我可以使用 Svelte 開始客戶專案😉 *閱讀更多關於 [我的博客上的前端和無伺服器](https://blog.jannikwempe.com/)。*
原文出處：https://dev.to/mikenikles/why-i-moved-from-react-to-svelte-and-others-will-follow-210l # React 多年來一直是我的首選 2015 年 10 月 14 日，我主持了 [首屆 React 溫哥華聚會](https://www.meetup.com/ReactJS-Vancouver-Meetup/events/225362860/)。當時我在一年中的大部分時間裡都在使用 React，並希望將志同道合的開發人員聚集在一起。 那時的 React，我敢說，是 web 前端世界的革命性的。與 jQuery、Backbone.js 或 Angular 1.x 等替代方案相比，使用 React 進行開發感覺直觀、清新且富有成效。就個人而言，隔離建置塊（又名元件）的想法真的很吸引我，因為它自然會導致結構化、組織良好且更易於維護的程式碼庫。 在接下來的幾年裡，我一直密切關注 Angular 2.x+、Vue 等，但沒有一個是值得跳槽的選擇。 # 然後我了解了 Svelte 我第一次了解 Svelte 是在 2018 年年中，也就是 3.0 版發布前將近一年（見下文）。 “[計算機，為我建置一個應用程式。](https://www.youtube.com/watch?v=qqt6YxAZoOc)”[Rich Harris](https://twitter.com/Rich_Harris) 讓我著迷Svelte。 > 如果您不熟悉 Svelte ([https://svelte.dev/](https://svelte.dev/))，請存取網站並花 5 分鐘閱讀介紹。 閱讀了嗎？真的？優秀👍 看完影片後，我心中的主要問題是是否值得學習 Svelte 並開始將其用於新專案甚至現有專案。平心而論，Svelte 給我留下了深刻的印象，但仍然不足以讓我完全接受它。 # Svelte 3.x 2019 年 4 月 22 日 - [Svelte 3：重新思考反應性](https://svelte.dev/blog/svelte-3-rethinking-reactivity) 是我一直在等待的博文。 > 請花一些時間閱讀博文並[觀看影片](https://www.youtube.com/watch?v=AdNJ3fydeao) - 這是關於電子表格的，但我保證它很有趣😉 為什麼這是一件大事？首先，Svelte 團隊一直在談論版本 3，我想看看它的實際應用。另一方面，Svelte 及其承諾比我第一次聽說 React 時更讓我興奮。 那時我指導 Web 開發人員，並花了很多時間讓他們加快 React 的速度。為了開發 React 應用程式，需要學習、理解並在一定程度上掌握 JSX、CSS-in-JS、Redux、create-react-app、SSR 和其他概念。 > 對於 Svelte，這些都不是必需的。 ``` <script> let name = 'world'; </script> <style> h1 { color: blue; } </style> <h1>Hello {name}!</h1> ``` 夠簡單嗎？我同意。事實上，它非常簡單，我將它推薦給我的 Web 開發新手。 ## 很快，那段程式碼發生了什麼？ `script` 標籤是元件邏輯所在的位置。 `style` 標籤定義了這個元件的 CSS - 這些都不會洩漏到元件之外，所以我們可以安全地使用 h1 並且它只適用於這個元件。它是真正的 CSS，而不是偽裝成 CSS 的 Javascript 對像或偽裝成 CSS 的字串文字。 底部是元件的 HTML。使用帶有 `{myVariable}` 的變數。與 React 的 JSX 相比，Svelte 允許您使用正確的 HTML 標籤，例如 `for`、`class` 而不是 `forHtml` 和 `className`。請參閱 React 文件中的“[屬性差異](https://reactjs.org/docs/dom-elements.html#differences-in-attributes)”以獲取所有非標準 HTML 屬性的列表。 # 讓我們重建 React 示例 為了讓您了解 Svelte 與 React 的對比，讓我們重新建置 [https://reactjs.org/](https://reactjs.org/) 上列出的內容。 ## 一個簡單的元件 請參閱上面的程式碼片段。 ## 一個有狀態的元件 [互動演示](https://svelte.dev/repl/6e9ef214ae774287b21f902d7e6f0e68?version=3.16.6) ``` <script> let seconds = 0; setInterval(() => seconds += 1, 1000); </script> Seconds: {seconds} ``` React：33行 Svelte：6 行 ## 一個應用程式 [互動演示](https://svelte.dev/repl/817d413fd6c344bf859f0dbf8063de2f?version=3.16.6) ``` <script> /* App.svelte */ import TodoList from './TodoList.svelte'; let items = []; let text = ''; const handleSubmit = () => { if (!text.length) { return } const newItem = { text, id: Date.now(), }; items = items.concat(newItem); } </script> <div> <h3>TODO</h3> <TodoList {items} /> <form on:submit|preventDefault={handleSubmit}> <label for="new-todo"> What needs to be done? </label> <input id="new-todo" bind:value={text} /> <button> Add #{items.length + 1} </button> </form> </div> ``` ``` <script> /* TodoList.svelte */ export let items = []; </script> <ul> {#each items as item} <li key={item.id}>{item.text}</li> {/each} </ul> ``` React：66行 Svelte：43 行 ## 使用外部插件的元件 [互動演示](https://svelte.dev/repl/28f4b2e36e4244b8b23cae3d584c4c88?version=3.16.6) ``` <script> const md = new window.remarkable.Remarkable(); let value = 'Hello, **world**!'; </script> <svelte:head> <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/2.0.0/remarkable.min.js"></script> </svelte:head> <div className="MarkdownEditor"> <h3>Input</h3> <label htmlFor="markdown-content"> Enter some markdown </label> <textarea id="markdown-content" bind:value={value} /> <h3>Output</h3> <div className="content"> {@html md.render(value)} </div> </div> ``` React：42行 Svelte：24 行 > 更少的程式碼 = 更少的錯誤 > 更少的程式碼 = 更好的性能 = 更好的用戶體驗 > 更少的程式碼 = 更少的維護 = 更多的時間來開發功能 # 我還喜歡 Svelte 什麼？ ## 反應性 另一個強大的功能是 [反應式聲明](https://svelte.dev/tutorial/reactive-declarations)。讓我們從一個例子開始： ``` <script> let count = 0; $: doubled = count * 2; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> <p>{count} doubled is {doubled}</p> ``` 每當你有依賴於其他變數的變數時，用 `$: myVariable = [引用其他變數的程式碼]` 聲明它們。以上，每當 count 發生變化時，doubled 都會自動重新計算，並且 UI 會更新以反映新值。 ## Stores 在需要跨元件共享狀態的情況下，Svelte 提供了存儲的概念。 [教程很好地解釋了 store](https://svelte.dev/tutorial/auto-subscriptions)。無需閱讀冗長的教程 - store 就這麼簡單。 ### Derived stores 通常，一家 store 依賴於其他 store。這就是 Svelte 提供 derived() 來組合 store 的地方。 [有關詳細訊息，請參閱教程](https://svelte.dev/tutorial/derived-stores)。 ## 作為邏輯塊等待 好吧，這是一個非常優雅的。讓我們從程式碼開始（[交互式演示](https://svelte.dev/repl/b9fc662a253443dc901ff189ce1cdd4b?version=3.16.7)）： ``` <script> let githubRepoInfoPromise; let repoName = 'mikenikles/ghost-v3-google-cloud-storage'; const loadRepoInfo = async () => { const response = await fetch(`https://api.github.com/repos/${repoName}`); if (response.status === 200) { return await response.json(); } else { throw new Error(response.statusText); } } const handleClick = () => { githubRepoInfoPromise = loadRepoInfo(); } </script> <input type="text" placeholder="user/repo" bind:value={repoName} /> <button on:click={handleClick}> load Github repo info </button> {#await githubRepoInfoPromise} <p>...loading</p> {:then apiResponse} <p>{apiResponse ? `${apiResponse.full_name} is written in ${apiResponse.language}` : ''}</p> {:catch error} <p style="color: red">{error.message}</p> {/await} ``` 看到 HTML 中的“#await”塊了嗎？在真實世界的應用程式中，您將有一個加載元件、一個錯誤元件和在這種情況下呈現 API 響應的實際元件。嘗試在文本框中輸入無效的 repo 名稱以觸發錯誤案例。 # “等等，那……呢？” ## 開源元件？ 當我向某人介紹 Svelte 時，我得到的主要回應是“但是生態系統、元件、教程、工具等呢？” 是的，開源 Svelte 元件遠不及 React 元件多。話雖如此，您多久使用一個開源 React 元件並在沒有任何問題或不必要的開銷的情況下集成它？我認為我們 Javascript 社區中的許多人已經變得過於依賴 `npm install ...` 來拼湊一個 web 應用程式。通常建置自己的元件，尤其是在 Svelte 中，可以減少整體花費的時間。我沒有資料可以證明，這是基於我個人的經驗。 不過，與此相關的是，對於任何願意重用開源元件的人來說，Svelte 元件的列表越來越多。 ## 正在找工作？ 機會很多，請參閱 [https://sveltejobs.dev/](https://sveltejobs.dev/)。 Apple 的欺詐工程團隊正在[尋找 Svelte 開發人員](https://sveltejobs.dev/jobs/apple-senior-front-end-developer)（截至 2019 年 12 月）。 還要記住，與申請需要 React、Vue、Angular 等的工作相比，競爭要小得多。 # 然後，有 Sapper 來部署 Svelte 應用程式 開發應用程式只是整個蛋糕的一小部分——應用程式還需要部署。為此，Svelte 團隊提供了 [Sapper](https://sapper.svelte.dev/)。這本身就是一篇完整的帖子，所以現在請查看網站了解詳細訊息。 # 結論 每天，新的 Web 開發人員開始他們的旅程，許多人遇到的第一件事就是不確定首先要學什麼。我說未來就是簡單、快速的開發時間，我想不出比這更簡單、更快的事情了： ``` <script> let name = 'world'; </script> <style> h1 { color: blue; } </style> <h1>Hello {name}!</h1> ``` 以上分享，希望對您有幫助
原文出處：https://dev.to/vintharas/discovering-svelte-getting-started-with-svelte-writing-a-pomodoro-technique-app-2lph ## 開始使用 Svelte [開始使用 Svelte 的最簡單方法](https://svelte.dev/blog/the-easiest-way-to-get-started) 是： 1. 瀏覽 [svelte.dev 中的 Svelte 教程](https://svelte.dev/tutorial) 2. 在 [svelte.dev 中的 Svelte REPL](https://svelte.dev/repl) 中進行試玩 3. 使用 svelte 模板從頭開始建立應用程式 儘管我認為通讀教程對於學習 Svelte 的語法和可用的東西確實很有幫助，但我認為**學習某些東西的最佳方法是在盡可能接近它的環境中實際操作**會在現實世界中開發一個 Svelte 應用程式。 **[你需要自己努力解決問題才能真正學到東西](https://amzn.to/2soWN5m)**。 ## 建立一個新專案 我們使用 [degit](https://github.com/Rich-Harris/degit)（也是由 Svelte 的建立者 Rich Harris 編寫的專案腳手架工具）生成一個新專案。類型： ``` $ npx degit sveltejs/template il-pomodoro ``` 這將在 `il-pomodoro` 目錄中建立一個全新的 Svelte 專案。我們跳進去，安裝依賴項並執行開發伺服器： ``` # Jump in $ cd il-pomodoro # Install the dependencies $ npm install # Run the development server $ npm run dev ``` 現在我們在 localhost:5000 上打開瀏覽器，讓我們看看我們得到了什麼…… **塔達！測試成功！**  ## 設置你的編輯器 Svelte 是一個編譯器優先的框架，它編譯代表 Svelte 元件的 .svelte 文件來建置 Web 應用程式。我在教程中看到的那個特殊的 .svelte 擴展和非 Web 標準語法告訴我，我需要在我的編輯器中提供一些額外的支持來處理 Svelte。 Svelte 博客有一篇關於[如何設置編輯器以使用 Svelte](https://svelte.dev/blog/setting-up-your-editor) 的好文章。我通常使用 Vim 或 VSCode，所以讓我們設置這兩個編輯器以使用 Svelte。 ### 設置 VSCode 以使用 Svelte 對於 VSCode，有 [svelte-code](https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode) 插件，它支持 `.svelte` 語法突出顯示、診斷、自動完成和 [更多](https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode)。 ### 設置 Vim 以使用 Svelte 對於 Vim，[設置你的編輯器文章](https://svelte.dev/blog/setting-up-your-editor) 沒有提供很多支持。它基本上告訴您將 .svelte 文件的文件類型更改為 HTML。經過一番挖掘，我發現了一些插件，它們可以讓你在 Vim 中獲得更好的 Svelte 體驗，並達到 VSCode 的標準： * [vim-svelte](https://github.com/evanleck/vim-svelte) 為 .svelte 文件提供語法高亮和縮進 * [coc-svelte](https://github.com/coc-extensions/coc-svelte) 通過連接到 Svelte LSP [^2] 為 Svelte 開發提供類似 IDE 的高級支持。這是 [coc.nvim](https://github.com/neoclide/coc.nvim) 自動補全插件（恰好是我最喜歡的 vim 補全插件）的擴展。 好的，現在我們已經設置好了編輯器，讓我們仔細看看我們的新 Svelte 專案。 ## 檔案結構 我們在編輯器中打開 il-pomodoro 文件夾，我們會看到一堆文件和文件夾： * 一個 `src` 文件夾，其中包含 Svelte hello world 應用程式的源程式碼 * 一個 `public` 文件夾，在 Svelte 編譯器編譯和處理後將包含我們的 Web 應用程式 * `rollup.config.js`，其中包含我們的捆綁器 ([rollup](https://rollupjs.org/)) 的配置。 Rollup 負責使用 Svelte 處理我們的源程式碼文件，以生成可以在瀏覽器中執行的開發和生產包。 對於初學者來說非常有趣的部分發生在 `src` 文件夾中，所以我們接下來要看的地方。該文件夾僅包含兩個文件： * `App.svelte` 這是我們應用程式的根元件 * `main.js`，其中包含用於初始化我們的應用程式的引導程式碼 作為我們應用程式入口點的文件是“main.js”： ``` import App from './App.svelte'; const app = new App({ target: document.body, props: { name: 'world' } }); export default app; ``` 這會建立一個新的 Svelte `App` 元件，並將其附加到 `document.body`，並使用一個名為 `title` 的屬性，其值為 `world`。 讓我們看看 `App` 到底是什麼： ``` <script> export let name; </script> <main> <h1>Hello {name}!</h1> <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> ``` 我懂了！所以 Svelte 元件是一些可重用的 UI，它封裝了元件的標記 (HTML)、它的行為（`<script>` 標籤內的 JavaScript）及其外觀和感覺（`<style>` 標籤內的 CSS） .涼爽的！這就說得通了。 如果我們回到標記中，我們可以理解當我們將它指向 localhost:5000 時我們在瀏覽器中看到的內容： ``` <main> <h1>Hello {name}!</h1> <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main> ``` prop `name` 在實例化時傳遞給元件，並保存在該 `name` 變數中： ``` <script> export let name; </script> ``` 然後傳播到元件的標記，並呈現在我們在瀏覽器中看到的“h1”標籤內。涼爽的！有點奇怪但熟悉的“export let name”語法必須是**Svelte 元件將其 API 定義為 props 的方式**。 ## 加入標題 讓我們開始修補一些簡單的東西，比如為應用程式的第一個視圖加入標題並將其綁定到一些資料。初始模板給了我如何做到這一點的提示。我只需要向我的元件加入一個新變數以包含該標題。因為我在原始模板中沒有用到 `name` 變數，所以我將替換它： ``` <script> export let title </script> ``` 並更新 `main.js` 以注入我的應用程式的標題： ``` import App from './App.svelte'; const app = new App({ target: document.body, props: { title: 'il Pomodoro' } }); export default app; ``` 再想一想，我真的不需要將該變數公開為道具。我們不希望此元件的用戶更改此標題，因此我們將其保留為元件內部的一部分。 讓我們重寫我們的 App 元件來執行此操作： ``` <script> let title = "il Pomodoro"; </script> ``` 最後，我將更新 HTML 模板以使用“title”而不是“name”： ``` <main> <h1>{title}</h1> </main> ``` **搞定了！**  ## 任務列表 驚人的！讓我們繼續建立一個非常簡單的任務列表。由於這感覺像是一個完全獨立的責任，我們將把它放在它自己的元件中。 我建立了一個新文件“TaskList.svelte”來表示該新元件並加入了一些標記，以便在我從“App.svelte”中使用它時盡可能少地出錯： ``` <p>I'm a list of tasks</p> ``` 我將它加入到 `App.svelte`： ``` <script> let title = "il Pomodoro"; </script> <main> <h1>{title}</h1> <TaskList /> </main> <style> /* styles omitted for sake of clarity. They'd be here. */ </style> ``` 而且……沒用。嗯……我做錯了什麼…… VSCode 和瀏覽器都會警告我以下內容： ``` 'TaskList' is not defined. svelte(missing-declaration) ``` 這告訴我兩件事： 1. 我的 vim 設置沒有按預期工作，因為我在編輯器中沒有收到錯誤（稍後要解決的問題），並且 2.我好像忘記導入元件了！ 當然！所以我將它加入到“App.svelte”元件中： ``` <script> let title = "il Pomodoro"; import TaskList from './TaskList.svelte'; </script> <main> <h1>{title}</h1> <TaskList /> </main> ``` 是的！**  現在讓我們加入一些任務。我今天的前 3 項任務是： ``` <script> const tasks = [ "plan some fun trip with Teo", "buy some flowers to my wife", "write an article about Svelte" ]; </script> ``` 現在我需要在列表中的螢幕上顯示這些內容。 Svelte 有一種特殊的方法來迭代模板內的列表：[{#each} 塊](https://svelte.dev/docs#each)。 它是這樣工作的： ``` <ul> {#each tasks as task} <li>{task}</li> {/each} </ul> ``` 因此，我們遍歷 tasks 列表中的每個 task 並將其放入列表項 li 元素中。我們還從列表中刪除了點，因為它們看起來很糟糕： ``` <style> ul { list-style: none; } </style> ``` 這就是我們得到的：  **叮叮叮！** 番茄鐘結束了。得走了！我們將很快繼續使用更多 Svelte、交互式任務列表和番茄鐘。 > ### 尋找番茄鐘應用程式的源程式碼？ > https://github.com/Vintharas/il-pomodoro-in-svelte > https://svelte.dev/repl/27164871e86d4ce1a9815489dc323500?version=3.16.7 ## 到目前為止的一些思考 驚人的！這是開始使用 Svelte 的快速方法。到目前為止，這是我的印象： * [svelte.dev](https://svelte.dev/docs) 真的很棒。 * [交互式教程](https://svelte.dev/tutorial) 有一個循序漸進的介紹，帶您了解 Svelte 的所有功能和重要概念。 * [Svelte playground](https://svelte.dev/repl) 真的很酷，它可以讓你修改 Svelte 建立多文件應用程式，保存它們並與你的朋友和同事分享。 * [開發文件非常好](https://svelte.dev/docs) 也非常全面並且有很多示例。將它們加入書籤並根據需要用作參考。 * **以上所有內容都提供了與 Svelte 的美妙初次接觸**，當您第一次進入一個新的生態系統時，您會非常感激。 * 開始新專案的方式有點奇怪。我已經習慣了所有具有 CLI 的流行框架，使用 `npx degit etc...` 來建立一個新專案有點令人困惑。但在前 5 秒的混亂之後，我只是執行命令並繼續我的生活。 * **我對文本編輯器支持的第一印象並不好**，例如，VSCode 沒有在 Svelte 模板內為我提供語句完成功能，而我希望它能工作（例如，允許我過濾“任務” `）。在我試用 Svelte 的短暫時間內，我沒有讓 Vim 設置正常工作。 * **使用 Svelte 本身就是一種非常好的體驗**。 * 初次接觸時，感覺 Web 標準非常友好，並且一切如您所願。最小驚奇原則非常適用於 Svelte。 * 我喜歡 Svelte 元件的平面結構，以及它在 HTML 標記、Javascript (`<script>`) 和 CSS (`<style>`) 中劃分元件的方式，這很有意義。樣板文件的數量幾乎可以忽略不計。 * 在標記中註入資料很簡單 * 使用 `export` 暴露 props 雖然不是標準的但很有意義並且很容易理解。 * 我想知道為什麼 Svelte 使用 `{#each tasks as task}` 而它可以使用 `{#for task of tasks}` 並減少學習 Svelte 的人的認知負荷。 （也就是需要學習更多的自定義語法） 這就是今天的全部內容！希望你喜歡這篇文章。保重並期待更多 Svelte 即將推出。 > 您是一位經驗豐富的 Svelte 用戶嗎？如果是這樣，請不要猶豫，告訴我我做事有多麼錯誤 :D 我很樂意聽取您的意見，我們都會因此變得更好。 ## 在 Vim 中修復 Svelte 經過一些故障排除後，我意識到按照 Svelte 博客中的建議，我之前使用自動命令設置 Svelte 以將 .svelte 文件的文件類型更新為 html： ``` augroup svelte au! BufNewFile,BufRead *.svelte set ft=html augroup END ``` 這意味著沒有應用 coc-vim 和 svelte 語法文件，因為它們需要 svelte 的文件類型。刪除自動命令後，一切都像在 Visual Studio Code 中一樣好用。哇哇！ [^1]：查看 [這個超級古老的番茄工作法應用程式](https://www.barbarianmeetscoding.com/projects/ilpomodoro/) 我在開始進行 Web 開發的那一天使用 Knockout.js 編寫的。 [^2]: LSP 代表語言伺服器協議。 （來自維基百科）它是一個開放的、基於 JSON-RPC 的協議，用於文本編輯器或 IDE 和提供編程語言特定功能的伺服器之間。該協議的目標是允許獨立於任何給定的編輯器或 IDE 實現和分發編程語言支持。
這裡有多種簡短而強大的 JavaScript 技巧，可以最大限度地提高生產力 ⚡️ 並最大限度地減少痛苦 🩸。 讓我們深入研究看看🤘 原文出處：https://dev.to/ironcladdev/15-killer-js-techniques-youve-probably-never-heard-of-1lgp ### 唯一陣列 過濾掉陣列中的重複值。 ``` const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a', 'b', 'c', 'd', 'e'] ``` ### 唯一的物件陣列 `Set` 物件不允許您過濾掉重複的物件，因為每個物件都是不同的。 `JSON.stringify` 在這裡幫我們解決了這個問題。 ``` const arr = [{ key: 'value' }, { key2: 'value2' }, { key: 'value' }, { key3: 'value3' }]; const uniqueObjects = Array.from( new Set( arr.map(JSON.stringify) ) ).map(JSON.parse) console.log(uniqueObjects); ``` 在 [此評論](https://dev.to/jonrandy/comment/24ojn) 中查看更有效但稍長的方法。 ### 陣列迭代器索引 通過 `.map` 和 `.forEach` javascript 迭代函數，您可以獲得每個項目的索引。 ``` const arr = ['a', 'b', 'c']; const letterPositions = arr.map( (char, index) => `${char} is at index ${index}` ) ``` ### 按字元數拆分字串 我們可以使用 `.match` 正則表達式函數將字串拆分為 `n` 個字符。 ``` const str = "asdfghjklmnopq"; const splitPairs = str.match(/.{1,2}/g); console.log(splitPairs); // ['as', 'df', 'gh', 'jk', 'lm', 'no', 'pq'] ``` ### 用不同的字元拆分字串 另一個使用 .match 的正則表達式 hack 允許您將像“aabbc”這樣的字串拆分為陣列“[”aa”，“bb”，“c”]`。 ``` const str = "abbcccdeefghhiijklll"; const splitChars = str.match(/(.)\1*/g); console.log(splitChars); // ['a', 'bb', 'ccc', 'd', 'ee', 'f', 'g', 'hh', 'ii', 'j', 'k', 'lll'] ``` ### 遍歷物件 `Object.entries` 允許我們將 JSON 物件轉換為鍵值對陣列，從而使我們能夠使用循環或陣列迭代器對其進行迭代。 ``` const obj = { "key1": "value1", "key2": "value2", "key3": "value3" }; const iteratedObject = Object.entries(obj) .map(([key, value]) => `${key} = ${value}`); console.log(iteratedObject); // ['key1 = value1', 'key2 = value2', 'key3 = value3'] ``` ### 鍵值陣列到物件 您可以使用“Object.fromEntries”將“Object.entryified”鍵值對陣列轉換回物件 ``` const entryified = [ ["key1", "value1"], ["key2", "value2"], ["key3", "value3"] ]; const originalObject = Object.fromEntries(entryified); console.log(originalObject); // { key1: 'value1', ... } ``` ### 發生次數計數 您可能想計算一個專案在陣列中出現的次數。我們可以使用帶有迭代器的 .filter 函數來完成此操作。 ``` const occurrences = ["a", "b", "c", "c", "d", "a", "a", "e", "f", "e", "f", "g", "f", "f", "f"]; // creating a unique array to avoid counting the same char more than once const unique = Array.from(new Set(occurrences)); const occurrenceCount = Object.fromEntries( unique.map(char => { const occurrenceCount = occurrences.filter(c => c === char).length; return [char, occurrenceCount] }) ) console.log(occurrenceCount); // { a: 3, b: 1, c: 2, ... } ``` 在 [此評論](https://dev.to/jonrandy/comment/24ojn) 中查看可靠的單行程式碼以執行此操作！ ### 替換回調 `.replace` 函數並不限制您只能用固定字串替換。您可以將回調傳遞給它並使用匹配的子字串。 ``` const string = "a dog went to dig and dug a doggone large hole"; const replacedString = string.replace(/d.g/g, str => str + "gy") console.log(replacedString); // a doggy went to diggy and duggy a doggygone large hole ``` ### 條件串接 你們中的許多人都熟悉在 JS 中遇到未定義的錯誤，條件連結可以防止很多這種情況的發生。 > **可選連結** (`?.`) 運算符存取物件的屬性或呼叫函數。如果使用此運算符存取的對像或呼叫的函數未定義或為空，則表達式短路併計算為未定義，而不是拋出錯誤。 ``` const obj = { "a": "aaaaaaa", "b": null }; console.log(obj.b.d); // throws an error console.log(obj.b?.d); // returns undefined ``` ### 限定一個數字 通常，您可能需要將數字限制在特定範圍內。每次需要時都用三元運算符來做是一件很痛苦的事情。函數要乾淨得多。 ``` const constrain = (num, min, max) => { if(num < min) return min; else if(num > max) return max; else return num; } constrain(5, 1, 3) // 3 constrain(2, 1, 5) // 2 constrain(0, -100, 100) // 0 ``` 一個更好的方法是像這樣使用 `Math.min` 和 `Math.max`： ``` const constrain = (num, min, max) => Math.min(Math.max(num, min), max) ``` ### 索引陣列的前後 `.at` 函數允許您使用正數和負數從頭到尾對陣列進行索引。 ``` const arr = [1, 2, 3, 4, 5]; arr.at(0) // 1 arr.at(1) // 2 arr.at(-1) // 5 arr.at(-2) // 4 ``` ### 按字母順序排序 按字母順序對字串陣列進行排序 ``` const words = ["javascript", "typescript", "python", "ruby", "swift", "go", "clojure"]; const sorted = words.sort((a, b) => a.localeCompare(b)); console.log(sorted); // ['clojure', 'go', 'javascript', 'python', 'ruby', 'swift', 'typescript'] ``` 💡 **提示**：您可以通過將 `a.localeCompare(b)` 切換為 `b.localeCompare(a)` 來切換升序和降序 ### 按 Truthy/Falsy 值排序 您可以按真值/假值對陣列進行排序，將具有真值的值放在最前面，然後是假值。 ``` const users = [ { "name": "john", "subscribed": false }, { "name": "jane", "subscribed": true }, { "name": "jean", "subscribed": false }, { "name": "george", "subscribed": true }, { "name": "jelly", "subscribed": true }, { "name": "john", "subscribed": false } ]; const subscribedUsersFirst = users.sort((a, b) => Number(b.subscribed) - Number(a.subscribed)) ``` `Number(false)` 等於 0，`Number(true)` 等於 1。這就是我們如何通過排序函數傳遞它。 ### 四捨五入到 `n` 位 您可以使用 .toFixed 將小數四捨五入為 n 位。請注意，`.toFixed` 將數字轉換為字串，因此我們必須將其重新解析為數字。 ``` console.log(Math.PI); // 3.141592653589793 console.log(Number(Math.PI.toFixed(2))) ``` --- 感謝閱讀✨！
自從改用 React Hooks 搭配 Functional Component 之後，Class 的概念都快忘光光了呢~ (也有可能是根本沒懂過？) 決定 refresh 一下 Class 如何使用。 # 甚麼是 Class？ class 是用來創造 Object 的。 想像成 class 是一間汽車工廠，只要給不同的零件就能生成不同型號的車。 # Property 和 Method ### Property Property 用來表示 Object 內有什麼東西。 在定義 Class 之初，需要先建構一個 constructor，用來接收外部參數並指派這些參數給對應的 Property。 ### Method Method 用來表示 Object 可以執行什麼動作。Method 會定義在 constructor 之後。 範例： ``` class Animal { constructor(_species, _sound){ this.species = _species this.sound = _sound } makeSound(){ return `${this.sound.toUpperCase()}!` } } const scooby = new Animal('dog','scooby-dooby-doo'); console.log(`Scooby is a ${scooby.species}`); // Scooby is a dog console.log(`Scooby says "${scooby.makeSound()}"`) // Scooby says "SCOOBY-DOOBY-DOO!" ``` **注意** 如果在 constructor 以外的地方要使用傳進來的參數，要指派給 Property 再用 this.PropertyName 來取用喔！ --- 參考資料: [JavaScript Classes Tutorial from freecodecamp_YT](https://youtu.be/2ZphE5HcQPQ)
作為開發人員，我們在終端機上花費了大量時間。有很多有用的 CLI 工具，它們可以讓您在命令行中的生活更輕鬆、更快速，而且通常更有趣。 這篇文章概述了 50 個必備的好用 CLI 工具。 原文出處：https://dev.to/lissy93/cli-tools-you-cant-live-without-57f6 --- ## 工具 ### [`thefuck`](https://github.com/nvbn/thefuck) - 自動更正錯誤輸入的命令 > `thefuck` 是您一旦嘗試過就離不開的實用程式之一。每當您輸入錯誤的命令並出現錯誤時，只需執行 `fuck`，它就會自動更正它。使用向上/向下選擇一個更正，或者只執行 `fuck --yeah` 立即執行最有可能的。  --- ### [`zoxide`](https://github.com/ajeetdsouza/zoxide) - 輕鬆導航 _(更好的 cd)_ > `z` 讓您可以跳轉到任何目錄，而無需記住或指定其完整路徑。它會記住您存取過的目錄，因此您可以快速跳轉——您甚至不需要鍵入完整的文件夾名稱。它還具有互動式選項，使用“fzf”，因此您可以即時過濾目錄結果  --- ### [`tldr`](https://github.com/tldr-pages/tldr) - 社區維護的文件 _(更好的 `man`)_ > `tldr` 是社區維護的手冊頁的巨大集合。與傳統的手冊頁不同，它們進行了總結，包含有用的用法範例，並且配色良好，便於閱讀  --- ### [`scc`](https://github.com/boyter/scc) - 計算程式碼行數_（更好的`cloc`）_ > `scc` 為您提供了針對特定目錄以每種語言編寫的程式碼行數的細分。它還顯示了一些有趣的統計資料，例如估計的開發成本和復雜性訊息。它的速度非常快，非常準確，並且支持多種語言  --- ### [`exa`](https://github.com/ogham/exa) - 列出文件 _(更好的 `ls`)_ > `exa` 是基於 Rust 的現代替代 `ls` 命令，用於列出文件。它可以顯示文件類型圖標、顏色、文件/文件夾訊息，並有多種輸出格式——樹、網格或列表  --- ### [`duf`](https://github.com/muesli/duf) - 硬碟使用量 _(更好的 `df`)_ > `duf` 非常適合顯示有關已安裝硬碟的訊息和檢查可用空間。它產生清晰多彩的輸出，並包括用於排序和自定義結果的選項。  --- ### [`aria2`](https://github.com/aria2/aria2) - 下載實用程式 _（更好的 `wget`）_ > `aria2` 是一種輕量級、多協議、用於 HTTP/HTTPS、FTP、SFTP、BitTorrent 和 Metalink 的恢復下載實用程序，支持通過 RPC 接口進行控制。它的[功能豐富](https://aria2.github.io/manual/en/html/README.html)令人難以置信，並且有大量的[選項](https://aria2.github.io/manual/en/ html/aria2c.html）。還有 [ziahamza/webui-aria2](https://github.com/ziahamza/webui-aria2) - 一個不錯的網路介面搭配。  --- ### [`bat`](https://github.com/sharkdp/bat) - 讀取文件_(更好的`cat`)_ > `bat` 是 `cat` 的複製品，但具有語法高亮顯示和 git 集成。它是用 Rust 編寫的，性能非常好，並且有多個用於自定義輸出和主題的選項。支持自動管道和文件連接  --- ### [`diff-so-fancy`](https://github.com/so-fancy/diff-so-fancy) - 文件比較_(更好的`diff`)_ > `diff-so-fancy` 為比較字串、文件、目錄和 git 更改提供了更好看的差異。更改突出顯示使發現更改變得更加容易，並且您可以自定義輸出佈局和顏色  --- ### [`entr`](https://github.com/eradman/entr) - 觀察變化 > `entr` 允許您在文件更改時執行任意命令。您可以傳遞一個文件、目錄、符號連結或正則表達式來指定它應該監視哪些文件。它對於自動重建專案、響應日誌、自動化測試等非常有用。與類似專案不同，它使用 kqueue(2) 或 inotify(7) 來避免輪詢，並提高性能  --- ### [`exiftool`](https://github.com/exiftool/exiftool) - 讀取+寫入元資料 > ExifTool 是一個方便的實用程序，用於讀取、寫入、剝離和建立各種文件類型的元訊息。再次分享照片時不要不小心洩露您的位置！  --- ### [`fdupes`](https://github.com/jbruchon/jdupes) - 重複文件查找器 > `jdupes` 用於辨識和/或刪除指定目錄中的重複文件。當您有兩個或更多相同的文件時，它對於釋放硬碟空間很有用  --- ### [`fzf`](https://github.com/junegunn/fzf) - 模糊文件查找器_(更好的`find`)_ > `fzf` 是一個非常強大且易於使用的模糊文件查找器和過濾工具。它允許您跨文件搜尋字串或模式。 fzf 也有可用於大多數 shell 和 IDE 的[插件](https://github.com/junegunn/fzf/wiki/Related-projects)，用於在搜尋時顯示即時結果。這篇由 Alexey Samoshkin 撰寫的 [文章](https://www.freecodecamp.org/news/fzf-a-command-line-fuzzy-finder-missing-demo-a7de312403ff/) 重點介紹了它的一些用例。  --- ### [`hyperfine`](https://github.com/sharkdp/hyperfine) - 命令基準測試 > `hyperfine` 可以輕鬆準確地對任意命令或腳本進行基準測試和比較。它負責預熱執行、清除緩存以獲得準確的結果並防止來自其他程序的干擾。它還可以將結果導出為原始資料並生成圖表。  --- ### [`just`](https://github.com/casey/just) - 現代命令執行器_(更好的`make`)_ > `just` 與 `make` 類似，但增加了一些不錯的功能。它讓您可以將專案命令分組到副本中，這些副本可以輕鬆列出和執行。支持別名、位置參數、不同的 shell、dot env 集成、字串插入以及幾乎所有您可能需要的東西 --- ### [`jq`](https://github.com/stedolan/jq) - JSON 處理器 > `jq` 類似於 `sed`，但對於 JSON - 您可以使用它輕鬆地切片、過濾、映射和轉換結構化資料。它可用於編寫複雜的查詢以提取或操作 JSON 資料。還有一個 [jq playground](https://jqplay.org/)，您可以用來試用，或通過即時回饋制定查詢 --- ### [`most`](https://www.jedsoft.org/most/) - 多窗口滾動尋呼機_（更好的 less）_ > `most` 是一個尋呼機，用於讀取長文件或命令輸出。 `most` 支持多窗口並且可以選擇不換行 --- ### [`procs`](https://github.com/dalance/procs) - 進程查看器_（更好的 ps）_ > `procs` 是一個易於導航的流程查看器，它具有彩色突出顯示，使流程的排序和搜尋變得容易，具有樹視圖和實時更新  --- ### [`rip`](https://github.com/nivekuil/rip) - 刪除工具_(更好的 rm)_ > `rip` 是一種安全、符合人體工程學且高性能的刪除工具。它讓您直觀地刪除文件和目錄，並輕鬆恢復已刪除的文件  --- ### [`ripgrep`](https://github.com/BurntSushi/ripgrep) - 在文件中搜尋 _(更好的 `grep`)_ > `ripgrep` 是一種面向行的搜尋工具，可遞歸地在當前目錄中搜尋正則表達式模式。它可以忽略 .gitignore 的內容並跳過二進製文件。它能夠在壓縮檔案中搜尋，或只搜尋特定的擴展名，並使用各種編碼方法理解文件  --- ### [`rsync`](https://rsync.samba.org/) - 快速、增量文件傳輸 > `rsync` 讓您可以在本地複制大文件，或將大文件複製到遠程主機或外部驅動器或從遠程主機或外部驅動器複製。它可用於保持多個位置的文件同步，非常適合建立、更新和恢復備份 --- ### [`sd`](https://github.com/chmln/sd) - 查找並替換_(更好的`sed`)_ > `sd` 是一種簡單、快速且直觀的查找和替換工具，基於字串文字。它可以在文件、整個目錄或任何管道文本上執行  --- ### [`tre`](https://github.com/dduan/tre) - 目錄層次結構_(更好的`tree`)_ > `tre` 輸出當前目錄或指定目錄的樹形文件列表，並帶有顏色。使用“-e”選項執行時，它會為每個專案編號，並建立一個臨時別名，您可以使用該別名快速跳轉到該位置  --- ### [`xsel`](https://github.com/kfish/xsel) - 存取剪貼板 > `xsel` 讓您通過命令行讀取和寫入 X 選擇剪貼板。它對於將命令輸出通過管道傳輸到剪貼板或將復制的資料傳輸到命令中很有用 --- ## CLI 監控和性能應用程式 ### [`bandwhich`](https://github.com/imsnif/bandwhich) - 頻寬利用率監視器 > 即時顯示頻寬使用情況、連接訊息、傳出主機和 DNS 查詢  --- ### [`ctop`](https://github.com/bcicen/ctop) - 容器指標和監控 > 類似於 `top`，但用於監控正在執行的（Docker 和 runC）容器的資源使用情況。它顯示實時 CPU、內存和網絡帶寬以及每個容器的名稱、狀態和 ID。還有一個內置的日誌查看器和管理（停止、啟動、執行等）容器的選項  --- ### [`bpytop`](https://github.com/aristocratos/bpytop) - 資源監控_(更好的`htop`)_ > `bpytop` 是一種快速、交互式、可視化的資源監視器。它顯示了最熱門的執行進程、最近的 CPU、內存、磁盤和網絡歷史記錄。您可以從界面中導航、排序和搜尋——還支持自定義顏色主題  --- ### [`glances`](https://github.com/nicolargo/glances) - 資源監視器 + 網絡和 API > `glances` 是另一個資源監視器，但具有不同的功能集。它包括一個完全響應的 Web 視圖、一個 REST API 和歷史監控。它易於擴展，並且可以與其他服務集成  --- ### [`gping`](https://github.com/orf/gping) - 交互式 ping 工具 _（更好的 `ping`）_ > `gping` 可以在多個主機上執行 ping 測試，同時以實時圖形顯示結果。當與 --cmd 標誌一起使用時，它還可以用於監視執行時間  --- ### [`dua-cli`](https://github.com/Byron/dua-cli) - 磁盤使用分析器和監視器 _(更好的 `du`)_ > `dua-cli` 讓您以交互方式查看每個已安裝驅動器的已用和可用磁盤空間，並輕鬆釋放存儲空間  --- ### [`speedtest-cli`](https://github.com/sivel/speedtest-cli) - 命令行速度測試實用程序 > `speedtest-cli` 只是執行網路速度測試，通過 speedtest.net - 但直接從終端 :)  --- ### [`dog`](https://github.com/ogham/dog) - DNS 查找客戶端_（更好的`dig`）_ > `dog` 是一個易於使用的 DNS 查找客戶端，支持 DoT 和 DoH，漂亮的彩色輸出和發出 JSON 的選項  --- ## CLI 生產力應用程式 > 上網衝浪、播放音樂、查看電子郵件、管理日曆、閱讀新聞等等，無需離開終端！ ### [`browsh`](https://github.com/browsh-org/browsh) - CLI 網路瀏覽器 > `browsh` 是一個完全交互的、實時的、現代的基於文本的瀏覽器，呈現給 TTY 和瀏覽器。它同時支持鼠標和鍵盤導航，並且對於純基於終端的應用程式來說功能豐富得令人吃驚。它還緩解了困擾現代瀏覽器的電池耗盡問題，並且通過對 MoSH 的支持，由於帶寬減少，您可以體驗更快的加載時間  --- ### [`books`](https://github.com/jarun/books) - 書籤管理器 > `buku` 是一個基於終端的書籤管理器，具有大量的配置、存儲和使用選項。還有一個可選的 [web UI](https://github.com/jarun/buku/tree/master/bukuserver#screenshots) 和 [瀏覽器插件](https://github.com/samhh/bukubrow-webext#installation ), 用於在終端外存取您的書籤  --- ### [`cmus`](https://github.com/cmus/cmus) - 音樂瀏覽器/播放器 > `cmus` 是終端音樂播放器，由鍵盤快捷鍵控制。它支持廣泛的音頻格式和編解碼器，並允許將曲目組織到播放列表中並應用播放設置  --- ### [`cointop`](https://github.com/cointop-sh/cointop) - 跟踪加密價格 > `cointop` 顯示當前的加密貨幣價格，並跟踪您的投資組合的價格歷史。支持價格提醒、歷史圖表、貨幣換算、模糊搜尋等。您可以通過網絡 [cointop.sh](https://cointop.sh/) 或執行 `ssh cointop.sh` 來嘗試演示  --- ### [`ddgr`](https://github.com/jarun/ddgr) - 從終端搜尋網頁 > `ddgr` 類似於 [googler](https://github.com/jarun/googler)，但適用於 DuckDuckGo。它快速、乾淨、簡單，支持即時回答、搜尋完成、搜尋 bangs 和高級搜尋。它默認尊重您的隱私，也有 HTTPS 代理支持，並與 Tor 一起工作  --- ### [`micro`](https://github.com/zyedidia/micro) - 程式碼編輯器_(更好的`nano`)_ > `micro` 是一款易於使用、快速且可擴展的程式碼編輯器，支持鼠標。由於它被打包成一個二進製文件，安裝就像`curl https://getmic.ro | 安裝一樣簡單。慶典` --- ### [`khal`](https://github.com/pimutils/khal) - 日曆客戶端 > `khal` 是一個終端日曆應用程式，它顯示即將發生的事件、月份和議程視圖。您可以將它與任何 CalDAV 日曆同步，並直接加入、編輯和刪除事件  --- ### [`mutt`](https://gitlab.com/muttmua/mutt) - 電子郵件客戶端 > `mut` 是一個經典的、基於終端的郵件客戶端，用於發送、閱讀和管理電子郵件。它支持所有主流電子郵件協議和郵箱格式，允許附件、密件抄送/抄送、線程、郵件列表和傳遞狀態通知  --- ### [`newsboat`](https://github.com/newsboat/newsboat) - RSS / ATOM 新聞閱讀器 > `newsboat` 是一個 RSS 提要閱讀器和聚合器，用於直接從終端閱讀新聞、博客和後續更新  --- ### [`rclone`](https://github.com/rclone/rclone) - 管理雲存儲 > `rclone` 是一個方便的實用程序，用於將文件和文件夾同步到各種雲存儲提供商。它可以直接從命令行呼叫，也可以輕鬆集成到腳本中以替代繁重的桌面同步應用程式 --- ### [`taskwarrior`](https://github.com/GothenburgBitFactory/taskwarrior) - Todo + 任務管理 > `task` 是一個 CLI 任務管理/待辦事項應用程式。它既簡單又不引人注目，但也非常強大和可擴展，內置高級組織和查詢功能。還有很多（700+！）額外的[插件](https://taskwarrior.org/tools/) 用於擴展它的功能和與第三方服務的集成  --- ### [`tuir`](https://gitlab.com/ajak/tuir) - Reddit 的終端用戶界面 > `tuir` 是一個很好的選擇，如果你想看起來像在工作，同時實際瀏覽 Reddit！它具有直觀的鍵綁定、自定義主題，還可以呈現圖像和多媒體內容。還有 [haxor](https://github.com/donnemartin/haxor-news) 用於黑客新聞  --- ## CLI 開發套件 ### [`httpie`](https://github.com/httpie/httpie) - HTTP/API測試測試客戶端 > `httpie` 是一個 HTTP 客戶端，用於測試、除錯和使用 API。它支持您所期望的一切——HTTPS、代理、身份驗證、自定義標頭、持久會話、JSON 解析。具有表達語法和彩色輸出的用法很簡單。與其他 HTTP 客戶端（Postman、Hopscotch、Insomnia 等）一樣，HTTPie 也包含一個 Web UI  --- ### [`lazydocker`](https://github.com/jesseduffield/lazydocker) - 完整的 Docker 管理應用程式 > `lazydocker` 是一個 Docker 管理應用程式，可讓您查看所有容器和圖像、管理它們的狀態、讀取日誌、檢查資源使用情況、重新啟動/重建、分析層、修剪未使用的容器、圖像和卷等等。它使您無需記住、鍵入和連結多個 Docker 命令。  --- ### [`lazygit`](https://github.com/jesseduffield/lazygit) - 完整的 Git 管理應用程式 > `lazygit` 是一個可視化的 git 客戶端，在命令行上。輕鬆加入、提交和推送文件、解決衝突、比較差異、管理日誌以及執行壓縮和倒帶等複雜操作。一切都有鍵綁定，顏色，而且很容易配置和擴展  --- ### [`kdash`](https://github.com/kdash-rs/kdash/) - Kubernetes 儀表板應用程式 > `kdash` 是一個一體化的 Kubernetes 管理工具。查看節點指標、觀察資源、流容器日誌、分析上下文和管理節點、pod 和命名空間 --- ### [`gdp-dashboard`](https://github.com/cyrus-and/gdb-dashboard) - 可視化 GDP 除錯器 > `gdp-dashboard` 向 GNU 除錯器加入了一個可視元素，用於除錯 C 和 C++ 程序。輕鬆分析內存、單步執行斷點和查看寄存器  --- ## CLI 外部服務 ### [`ngrok`](https://ngrok.com/) - 共享本地主機的反向代理 > `ngrok` 安全* 將您的本地主機暴露在唯一 URL 後面的網路上。這使您可以與遠程同事實時共享您的工作。使用[非常簡單](https://notes.aliciasykes.com/p/RUi22QSyWe)，但它也有很多高級功能，例如身份驗證、webhooks、防火牆、流量檢查、自定義/通配符域等等  --- ### [`tmate`](https://tmate.io/) - 通過網路共享終端會話 > `tmate` 讓您立即與世界其他地方的人分享實時終端會話。跨系統工作，支持存取控制/授權，可自託管，具備Tmux的所有特性 --- ### [`asciinema`](https://asciinema.org/) - 錄製+分享終端會話 > `asciinema` 對於輕鬆記錄、共享和嵌入終端會話非常有用。非常適合展示您建置的內容，或展示教程的命令行步驟。與屏幕錄製視頻不同，用戶可以復制粘貼內容、動態更改主題和控製播放 --- ### [`navi`](https://github.com/denisidoro/navi) - 交互式備忘單 > `navi` 允許您瀏覽備忘單並執行命令。參數的建議值動態顯示在列表中。減少輸入，減少錯誤，讓自己不必記住數千條命令。它集成了 [tldr](https://github.com/tldr-pages/tldr) 和 [cheat.sh](https://github.com/chubin/cheat.sh) 以獲取內容，但您也可以導入其他備忘單，甚至編寫自己的備忘單 --- ### [`transfer.sh`](https://github.com/dutchcoders/transfer.sh/) - 快速文件共享 > `transfer` 使上傳和共享文件變得非常簡單，直接從命令行即可。它是免費的，支持加密，為您提供唯一的 URL，也可以自行託管。 > 我寫了一個 Bash 輔助函數來讓使用更容易一些，你可以[在這裡找到它](https://github.com/Lissy93/dotfiles/blob/master/utils/transfer.sh) 或嘗試一下通過執行`bash <(curl -L -s https://alicia.url.lol/transfer)`  --- ### [`surge`](https://surge.sh/) - 在幾秒鐘內部署一個站點 > `surge` 是一個免費的靜態託管服務提供商，您可以通過一個命令直接從終端部署到它，只需在您的 `dist` 目錄中執行 `surge`！它支持自定義域、自動 SSL 憑證、pushState 支持、跨域資源支持——而且是免費的！  --- ### [`wttr.in`](https://github.com/chubin/wttr.in) - 查看天氣 > `wttr.in` 是一項以命令行中易於理解的格式顯示天氣的服務。只需執行“curl wttr.in”或“curl wttr.in/London”來嘗試一下。有 URL 參數來自定義返回的資料以及格式  --- ## CLI 樂趣 ### [`cowsay`](https://en.wikipedia.org/wiki/Cowsay) - 讓 ASCII 牛說出你的訊息 > `cowsay` 是一個可配置的會說話的奶牛。它基於 Tony Monroe 的[原創](https://github.com/tnalpgge/rank-amateur-cowsay)  --- ### [`figlet`](http://www.figlet.org/) - 將文本輸出為大型 ASCII 藝術文本 > `figlet` 將文本輸出為 ASCII 藝術  --- ### [`lolcat`](https://github.com/busyloop/lolcat) - 使控制台輸出彩虹色 > `lolcat` 使任何傳遞給它的文本變成彩虹色  --- ### [`neofetch`](https://github.com/dylanaraps/neofetch) - 顯示系統資料和 ditstro 訊息 > `neofetch` 打印發行版和系統訊息（這樣你就可以靈活地在 r/unixporn 上使用 Arch btw）  例如，我使用 `cowsay`、`figlet`、`lolcat` 和 `neofetch` 來建立一個自定義的基於時間的 MOTD，在用戶首次登錄時顯示給他們。它以他們的名字問候他們，顯示伺服器訊息和時間、日期、天氣和 IP。 [這裡是源程式碼](https://github.com/Lissy93/dotfiles/blob/master/utils/welcome-banner.sh)。  --- ## 安裝和管理 我們大多數人都有一套核心的 CLI 應用程式和我們所依賴的實用程序。設置一台新機器並單獨安裝每個程序很快就會讓人厭煩。因此，安裝和更新終端應用程式的任務非常適合自動化。 [此處](https://github.com/Lissy93/dotfiles/tree/master/scripts/installs) 是我編寫的一些示例腳本，可以輕鬆將其放入您的點文件或獨立執行以確保您永遠不會錯過一個應用程式。 對於 MacOS 用戶，最簡單的方法是使用 [Homebrew](https://brew.sh/)。只需建立一個 Brewfile（使用 `touch ~/.Brewfile`），然後列出您的每個應用程式，然後執行 `brew bundle`。您可以通過將其放入 Git 存儲庫來備份您的包列表。這是一個示例，讓您入門：https://github.com/Lissy93/Brewfile 在 Linux 上，您通常希望使用本機包管理器（例如 `pacman`、`apt`）。例如，[這裡有一個腳本](https://github.com/Lissy93/dotfiles/blob/master/scripts/installs/arch-pacman.sh) 用於在 Arch Linux 系統上安裝上述應用程式 Linux 上的桌面應用程式可以通過 Flatpak 以類似的方式進行管理。同樣，[這是一個示例腳本](https://github.com/Lissy93/dotfiles/blob/master/scripts/installs/flatpak.sh) :) --- ## 結論 ...就是這樣 - 一個方便的 CLI 應用程式列表，以及一種在您的系統中安裝和保持它們最新的方法。 希望其中一些對你們中的一些人有用:)
Hooks 是 React 最強大的功能之一。 它們使我們能夠輕鬆地在應用程式的元件中重用功能。掛鉤的最大優點在於它們的可重用性——您可以跨元件和專案重用掛鉤。 以下是我在每個 React 專案中重複使用的七個最重要的鉤子。今天就試一試，看看它們在建置您自己的 React 應用程式時是否有幫助吧。 原文出處：https://dev.to/webdevhero-com/7-react-hooks-for-every-project-1jdo --- 在我們開始之前，要先澄清一下：並非每個自定義 React 鉤子都需要由您編寫。事實上，我將提到的所有鉤子都來自一個庫“@mantine/hooks”。 Mantine 是一個很棒的第三方庫，其中包含這些鉤子等等。他們將為您的 React 應用程式加入您能想到的幾乎所有重要功能。 您可以在 [mantine.dev](https://mantine.dev) 查看“@mantine/hooks”的文件。 ## `useIntersection` 鉤子 當用戶在您的應用程式中向下滾動頁面時，您可能想知道某個元素何時對他們可見。 例如，您可能希望僅在用戶看到特定元素時才啟動動畫。或者，您可能希望在他們向下滾動頁面一定程度後，顯示或隱藏元素。  要獲取有關元素是否可見的訊息，我們可以使用 **Intersection Observer API。**這是瀏覽器中內建的 JavaScript API。 我們可以使用純 JavaScript 單獨使用 API，但要知道有關特定元素是否在其滾動容器內，有個好方法是使用 useIntersection 掛鉤。 ``` import { useRef } from 'react'; import { useIntersection } from '@mantine/hooks'; function Demo() { const containerRef = useRef(); const { ref, entry } = useIntersection({ root: containerRef.current, threshold: 1, }); return ( <main ref={containerRef} style={{ overflowY: 'scroll', height: 300 }}> <div ref={ref}> <span> {entry?.isIntersecting ? 'Fully visible' : 'Obscured'} </span> </div> </main> ); } ``` 要使用它，我們需要做的就是在我們的元件中呼叫鉤子，並提供一個根元素。 Root 是滾動容器，可以使用 useRef 掛鉤將其作為 ref 提供。 `useIntersection` 回傳一個我們傳遞給目標元素的 ref，我們想要觀察其在滾動容器中的交集。 一旦我們有了對元素的引用，我們就可以追蹤元素是否相交。在上面的範例中，我們可以根據 entry.isIntersecting 的值查看元素何時被遮擋或何時完全可見。 您可以傳遞其他參數，這些參數允許您配置與目標可見百分比相關的**閾值**。 ## `useScrollLock` 鉤子 另一個與滾動相關的鉤子是 useScrollLock 鉤子。這個鉤子非常簡單：它使您能夠鎖定 body 元素上的任何滾動。 我發現當您想在當前頁面上顯示疊加層或跳出視窗，並且不想讓用戶在後台頁面上上下滾動時，它會很有幫助。這使您可以將注意力集中在視窗上，或允許在其自己的滾動容器內滾動。 ``` import { useScrollLock } from '@mantine/hooks'; import { Button, Group } from '@mantine/core'; import { IconLock, IconLockOpen } from '@tabler/icons'; function Demo() { const [scrollLocked, setScrollLocked] = useScrollLock(); return ( <Group position="center"> <Button onClick={() => setScrollLocked((c) => !c)} variant="outline" leftIcon={scrollLocked ? <IconLock size={16} /> : <IconLockOpen size={16} />} > {scrollLocked ? 'Unlock scroll' : 'Lock scroll'} </Button> </Group> ); } ``` `useScrollLock` 將用戶的滾動鎖定在頁面上的當前位置。該函數回傳一個陣列，它可以被解構，如上面的程式碼所示。 第二個值是一個允許我們鎖定滾動的函數。另一方面，第一個解構值是一個布林值，它告訴我們滾動條是否已被鎖定。 這個值很有用，例如，如果你想在滾動鎖定時顯示某些內容或告訴用戶它已被鎖定。您可以在下面的示例中看到，當滾動條被鎖定或解鎖時，我們會在我們的按鈕中進行指示。  ## `useClipboard` 鉤子 在許多情況下，您希望提供一個按鈕，允許用戶將內容複製到他們的剪貼板，這是存儲複製文本的地方。 一個很好的例子是，如果您的網站上有一個程式碼片段，並且您希望用戶輕鬆複製它。為此，我們可以使用另一個 Web API——**剪貼板 API**。 `@mantine/hooks` 為我們提供了一個方便的 `useClipboard` 鉤子，它回傳幾個屬性：`copied`，它是一個布林值，告訴我們是否已使用鉤子將值複製到剪貼板，以及` copy` 函數，我們可以將我們喜歡的任何字串值傳遞給它以進行複制。 在我們的範例中，我們想複製一個程式碼片段，供我們的用戶粘貼到他們喜歡的地方，如下面的影片所示：  ## useClipboard demo 當他們點擊我們指定的複制按鈕時，我們呼叫我們的 `copy` 函數，將程式碼片段傳遞給它，然後顯示一個小複選標記或向他們表明文本已被複製的東西。 巧妙的是 `useClipboard` 掛鉤帶有 **超時值**。在給定的超時時間（以毫秒為單位）之後，複製的狀態將被重置，向用戶顯示他們可以再次復製文本。 ## `useDebouncedValue` 鉤子 如果您的應用程式中有搜尋輸入，下一個鉤子“useDebouncedValue”是必不可少的。 每當用戶使用輸入執行搜尋時，搜尋操作通常涉及對 API 的 HTTP 請求。 您將遇到的一個典型問題是每次擊鍵都會執行查詢（請求），尤其是如果您希望用戶在鍵入時接收搜尋結果。即使對於一個簡單的搜尋查詢，也不需要在用戶完成輸入他們想要的內容之前執行這麼多請求。 這是 useDebounceValue 掛鉤的一個很好的用例，它對傳遞給它的文本應用「防抖」功能。 ``` import { useState } from 'react'; import { useDebouncedValue } from '@mantine/hooks'; import { getResults } from 'api'; function Demo() { const [value, setValue] = useState(''); const [results, setResults] = useState([]) const [debounced] = useDebouncedValue(value, 200); // wait time of 200 ms useEffect(() => { if (debounced) { handleGetResults() } async function handleGetResults() { const results = await getResults(debounced) setResults(results) } }, [debounced]) return ( <> <input label="Enter search query" value={value} style={{ flex: 1 }} onChange={(event) => setValue(event.currentTarget.value)} /> <ul>{results.map(result => <li>{result}</li>}</ul> </> ); } ``` 您使用 useState 將輸入的文本儲存在一個狀態中，並將狀態變數傳遞給 useDebouncedValue 。 作為該掛鉤的第二個參數，您可以提供一個等待時間，即值被「反抖」的時間段。反抖使我們能夠執行更少的查詢。 您可以在下面的影片中看到結果，用戶在其中鍵入內容，並且僅在 200 毫秒後，我們才能看到去抖值。  ## `useMediaQuery` 鉤子 我一直使用的另一個非常有用的鉤子是 useMediaQuery 鉤子。 Media Queries 在純 CSS 中使用，`useMediaQuery` 鉤子允許我們訂閱我們傳遞給鉤子的任何媒體查詢。 例如，在我們的元件中，假設我們想要顯示一些文本或根據特定螢幕寬度（例如 900 像素）更改元件的樣式。我們像在 CSS 中一樣提供媒體查詢，並且 useMediaQuery 回傳給我們一個 true 或 false 的 matches 值。 ``` import { useMediaQuery } from '@mantine/hooks'; function Demo() { const matches = useMediaQuery('(min-width: 900px)'); return ( <div style={{ color: matches ? 'teal' : 'red' }}> {matches ? 'I am teal' : 'I am red'} </div> ); } ``` 它用 JavaScript 告訴我們媒體查詢的結果，這在我們想要使用 `style` 屬性在 JSX 中直接更改樣式時特別有用，例如。  簡而言之，對於少數無法使用 CSS 處理媒體查詢的情況，這是一個必不可少的鉤子。 ## `useClickOutside` 鉤子 下一個掛鉤 - `useClickOutside` - 可能看起來很奇怪，但當您真正需要它時，您會發現它的重要性。 當你開發一個下拉菜單，或者在頁面內容前面彈出，並且之後需要關閉的東西時，這個鉤子是必不可少的。通過單擊按鈕打開這些類型的元件之一非常容易。關閉這些元件有點困難。 為了遵循良好的 UX 實踐，我們希望任何阻礙用戶視圖的東西都可以通過單擊元素外部輕鬆關閉。這正是 useClickOutside 掛鉤讓我們做的。 當我們呼叫 useClickOutside 時，它會返回一個 ref，我們必須將其傳遞給我們想要檢測點擊的外部元素。通常該元素將由一個布林狀態片段控制，例如我們在下面的示例中的狀態（即值“opened”）。 ``` import { useState } from 'react'; import { useClickOutside } from '@mantine/hooks'; function Demo() { const [opened, setOpened] = useState(false); const ref = useClickOutside(() => setOpened(false)); return ( <> <button onClick={() => setOpened(true)}>Open dropdown</button> {opened && ( <div ref={ref} shadow="sm"> <span>Click outside to close</span> </div> )} </> ); } ``` `useClickOutside` 接受一個回調函數，該函數控制當您實際單擊該元素外部時發生的情況。 在大多數情況下，我們想做一些非常簡單的事情，就是關閉它。為此，您可能需要一個狀態設置器（如 `setOpened`）並向其傳遞一個 false 值，然後隱藏您覆蓋的內容。  ## `useForm` 鉤子 在這個列表中，我最喜歡和最有用的鉤子是 `useForm` 鉤子。 這個鉤子專門來自 Mantine，涉及從庫中安裝一個特定的包：`@mantine/form`。它會為您提供在 React 中建立表單所需的一切，包括驗證輸入、顯示錯誤訊息以及在提交表單之前確保輸入值正確的能力。 `useForm` 接受一些初始值，這些初始值對應於您在表單中的任何輸入。 ``` import { TextInput, Button } from '@mantine/core'; import { useForm } from '@mantine/form'; function Demo() { const form = useForm({ initialValues: { email: '' }, validate: { email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'), }, }); return ( <div> <form onSubmit={form.onSubmit((values) => console.log(values))}> <TextInput withAsterisk label="Email" placeholder="[email protected]" {...form.getInputProps('email')} /> <Button type="submit">Submit</Button> </form> </div> ); } ``` `useForm` 的最大好處是它的助手，例如 `validate` 函數，它接收輸入到每個輸入的值，然後允許您建立驗證規則。 例如，如果您有一個電子郵件輸入，您可能有一個正則表達式來確定它實際上是否是一個有效的電子郵件（如您在上面的程式碼中所見）。如果沒有，那麼您可以顯示一條錯誤訊息並阻止提交表單。  您如何獲取已輸入到表單中的值？ Mantine 提供了一個非常方便的助手，叫做“getInputProps”，你只需提供你正在使用的輸入的名稱（比如電子郵件），它就會自動設置一個 onChange 來追蹤你在表單中輸入的值. 此外，為了處理表單提交，並在其值未通過驗證規則時阻止送出，它有一個特殊的 `onSubmit` 函數，您可以將其包裹在常規的 onSubmit 函數中。除了應用驗證規則之外，它還會負責在表單事件上呼叫 `preventDefault()`，這樣您就不必手動執行此操作。 我只用了這個鉤子的基本功能，但我強烈建議您在下一個專案中使用它。傳統上，表單很難正常工作，尤其是需要驗證和可見錯誤訊息的表單。 `useForm` 讓它變得異常簡單！ --- 以上，簡單分享，希望對您有幫助。
如果您曾經瀏覽過 [git 手冊](https://git-scm.com/docs)（或執行 `man git`），那麼您會發現 git 指令比我們每天在用的多很多。很多指令非常強大，可以讓你的生活更輕鬆（有些比較小眾，但知道一下還是不錯）。 > 這篇文章整理了我最喜歡的 20 個冷門 git 功能，您可以使用來改善您的開發流程、給您的同事留下深刻印象、幫助您回答 git 面試問題，最重要的是 - 可以玩得很開心！ 原文出處：https://dev.to/lissy93/20-git-commands-you-probably-didnt-know-about-4j4o --- ## Git Web > 執行 [`git instaweb`](https://git-scm.com/docs/git-instaweb) 可以立即瀏覽 gitweb 中的工作存儲庫 Git 有一個內建的[基於網路可視化工具](https://git-scm.com/docs/gitweb) 可以瀏覽本地存儲庫，它允許您通過瀏覽器中的 GUI 查看和管理您的存儲庫。它包含許多有用的功能，包括： - 瀏覽和單步執行修訂並檢查差異、文件內容和元資料 - 可視化查看提交日誌、分支、目錄、文件歷史和附加資料 - 生成提交和存儲庫活動日誌的 RSS 或 Atom 提要 - 搜尋提交、文件、更改和差異 要打開它，只需從您的存儲庫中執行 `git instaweb`。您的瀏覽器應該會彈出並讀取 http://localhost:1234 。如果您沒有安裝 Lighttpd，您可以使用“-d”標誌指定一個備用 Web 伺服器。其他選項可以通過標誌配置（例如 `-p` 用於端口，`-b` 用於打開瀏覽器等），或在 git 配置中的 `[instaweb]` 塊下配置。 還有 `git gui` 命令，它可以打開一個基於 GUI 的 git 應用程式  --- ## Git Notes > 使用 [`git notes`](https://git-scm.com/docs/git-notes) 向提交加入額外訊息 有時您需要將其他資料附加到 git 提交（除了更改、訊息、日期時間和作者訊息之外）。 註釋存儲在 .git/refs/notes 中，由於它與提交對像資料是分開的，因此您可以隨時修改與提交關聯的註釋，而無需更改 SHA-1 哈希。 您可以使用 `git log`、使用大多數 git GUI 應用程式或使用 `git notes show` 命令查看筆記。一些 git 主機還在提交視圖中顯示註釋（儘管 [GH 不再顯示註釋](https://github.blog/2010-08-25-git-notes-display/)）。 --- ## Git Bisect > 使用 [`git bisect`](https://git-scm.com/docs/git-bisect) 你可以使用二進制搜尋找到引入錯誤的提交 這是最強大又好用的 git 命令之一 - bisect 在除錯時絕對是救命稻草。開始對分後，它會為您檢查提交，然後您告訴它提交是“好”（沒有錯誤）還是“壞”（引入錯誤），這可以讓您縮小最早提交的錯誤。 請執行 `git bisect start`，然後使用 `git bisect good <commit-hash>` 向其傳遞一個已知的良好提交，並使用 `git bisect bad <optional-hash>` 傳遞一個已知的錯誤提交（預設為當前）。然後它會檢查好提交和壞提交之間的提交，然後你用 `git bisect good` 或 `git bisect bad` 指定錯誤存在與否。然後它會重複這個過程，在好與壞的中心檢查一個提交，一直到你找到引入錯誤的確切提交。隨時使用 `git bisect reset` 取消。 bisect 命令還有更多功能，包括回放、查看提交、跳過，因此下次除錯時值得查看文檔。 --- ## Git Grep > 使用 [`git grep`](https://git-scm.com/docs/git-grep) 在您的存儲庫中搜尋程式碼、文件、提交或任何其他內容 有沒有發現自己需要在 git 專案中的任何地方搜尋字串？使用 git grep，您可以輕鬆地在整個專案中和跨分支搜尋任何字串或 RegEx（例如更強大的 <kbd>Ctrl</kbd> + <kbd>F</kbd>！）。 `git grep <regexp> <ref>` 它包括大量 [選項](https://git-scm.com/docs/git-grep#_options) 來縮小搜尋範圍，或指定結果格式。例如，使用 `-l` 僅返回文件名，`-c` 指定每個文件返回的匹配數，`-e` 排除匹配條件的結果，`--and` 指定多個條件，` -n` 以行號搜尋。 由於 git grep 與正則表達式兼容，因此您可以使用搜尋的字串獲得更多進階訊息。 您還可以使用它來指定文件擴展名，例如 `git grep 'console.log' *.js`，它將顯示 JavaScript 文件中的所有 console.logs 第二個參數是一個 ref，可以是分支名稱、提交、提交範圍或其他任何內容。例如。 `git grep "foo" HEAD~1` 將搜尋之前的提交。 --- ## Git Archive > 使用 [`git archive`](https://git-scm.com/docs/git-archive) 將整個 repo 合併到一個文件中 共享或備份存儲庫時，通常首選將其存儲為單個文件。使用 git archive 將包括所有 repo 歷史記錄，因此可以輕鬆將其提取回其原始形式。該命令還包括許多附加選項，因此您可以準確自定義存檔中包含和不包含的文件。 ``` git archive --format=tar --output=./my-archive HEAD ``` --- ## Git Submodules > 使用 [`git submodule`](https://git-scm.com/docs/git-submodule) 將任何其他存儲庫拉入您的存儲庫 在 git 中，[submodules](https://git-scm.com/docs/gitsubmodules) 讓您可以將一個存儲庫掛載到另一個存儲庫中，通常用於核心依賴項或將組件拆分到單獨的存儲庫中。有關詳細訊息，請參閱[這篇文章](https://notes.aliciasykes.com/17996/quick-tip-git-submodules)。 執行以下命令會將模塊拉到指定位置，並建立一個 .gitmodules 文件，以便在複製 repo 時始終下載它。複製 repo 時使用 `--recursive` 標誌來包含子模塊。 ``` git submodule add https://github.com/<user>/<repo> <path/to/save/at> ``` 還有 [`git subtree`](https://www.atlassian.com/git/tutorials/git-subtree)，它做類似的事情，但不需要元資料文件。 --- ## Git Bug Report > 使用 [`git bugreport`](https://git-scm.com/docs/git-bugreport) 編寫錯誤票，包括 git 和系統訊息 此命令將捕獲系統訊息，然後打開一個標準錯誤模板（重現步驟、實際 + 預期輸出等）。完成的文件應該是一個非常完整的錯誤報告，包含所有必要的訊息。 如果您是開源包的維護者並要求用戶（開發人員）提出錯誤報告，這將非常方便，因為它確保包含所有必要的資料。 如果您向核心 git 系統提交錯誤報告，您還可以執行 [`git diagnostic`](https://git-scm.com/docs/git-diagnose) 命令，然後提出您的問題 [這裡](https://github.com/git/git)。 --- ## Git Fsck > 使用 [`git fsck`](https://git-scm.com/docs/git-fsck) 檢查所有物件，或恢復無法存取的物件 雖然不常需要，但有時您可能必須驗證 git 存儲的物件。這就是 fsck（或文件系統檢查）發揮作用的地方，它測試對像資料庫並驗證所有物件的 SHA-1 ID 及其建立的連接。 它還可以與 `--unreachable` 標誌一起使用，以查找不再可以從任何命名引用存取的物件（因為與其他命令不同，它包括 `.git/objects` 中的所有內容）。 --- ## Git Stripspace > 使用 [`git stripspace`](https://git-scm.com/docs/git-stripspace) 格式化給定文件中的空格 最佳做法是避免在行尾尾隨空格，避免有多個連續的空行，避免輸入的開頭和結尾出現空行，並以新行結束每個文件。有很多特定於語言的工具可以自動為您執行此操作（例如 prettier），但 Git 也內置了此功能。 它用於元資料（提交訊息、標籤、分支描述等），但如果您將文件通過管道傳輸給它，然後將響應通過管道傳輸回文件，它也可以工作。例如。 `cat ./path-to-file.txt | git stripspace` 或 `git stripspace < dirty-file.txt > clean-file.txt` 您還可以使用它來刪除註釋（使用 `--strip-comments`），甚至註釋掉行（使用 `--comment-lines`）。 --- ## Git Diff > 使用 [`git diff`](https://git-scm.com/docs/git-diff) 你可以比較 2 組程式碼之間的差異 您可能知道您可以執行 `git diff` 來顯示自上次提交以來的所有更改，或者使用 `git diff <commit-sha>` 來比較 2 次提交或 1 次提交到 HEAD。但是您可以使用 diff 命令做更多的事情。 您還可以使用它來比較任意兩個任意文件，使用 `diff file-1.txt file-2.txt`（不再存取 [diffchecker.com](https://www.diffchecker.com/compare/)！ ) 或者使用 `git diff branch1..branch2` 相互比較 2 個分支或引用 請注意，雙點 (`..`) 與空格相同，表示 diff 輸入應該是分支的尖端，但您也可以使用三點 (`...`) 來轉換第一個參數進入兩個差異輸入之間共享的共同祖先提交的引用 - 非常有用！如果只想跨分支比較單個文件，只需將文件名作為第三個參數傳遞。 您可能希望查看在給定日期範圍內所做的所有更改，為此使用 `git diff HEAD@{7.day.ago} HEAD@{0}`（上週），同樣可以將其與文件名、分支名稱、特定提交或任何其他參考。 還有 [`git range-diff`](https://www.git-scm.com/docs/git-range-diff) 命令，它提供了一個用於比較提交範圍的簡單界面。 git diff 工具還有更多功能（以及使用您自己的差異檢查器的選項），因此我建議查看 [文檔](https://git-scm.com/docs/git-diff#_description) . --- ## Git Hooks > 使用 [`hooks`](https://git-scm.com/docs/githooks) 在給定的 get 操作發生時執行命令或執行腳本 Hooks 可以讓你自動化幾乎所有的事情。例如：確保滿足標準（提交訊息、分支名稱、補丁大小）、程式碼質量（測試、lint）、將附加訊息附加到提交（用戶、設備、票證 ID）、呼叫 webhook 來記錄事件或執行管道等 對於大多數 git 事件，如 commit, rebase, merge, push, update, applypatch 等，都有前後 [hooks available](https://git-scm.com/docs/githooks)。 鉤子存儲在 `.git/hooks` 中（除非您使用 `git config core.hooksPath` 在其他地方配置它們），並且可以使用 [`git hook`](https://git-scm.com/docs) 進行測試/git-hook) 命令。由於它們只是 shell 文件，因此可用於執行任何命令。 掛鉤不會推送到遠程存儲庫，因此要在您的團隊中共享和管理它們，您需要使用 [掛鉤管理器](https://github.com/aitemr/awesome-git-hooks#tools) ，例如 [lefthook](https://github.com/evilmartians/lefthook) 或 [husky](https://github.com/typicode/husky)。還有幾個[3rd-party tools](https://githooks.com/#projects)，這使得管理鉤子更容易，我推薦[overcommit](https://github.com/sds/overcommit)。 請記住，掛鉤總是可以跳過（使用 `--no-verify` 標誌），所以永遠不要純粹依賴掛鉤，尤其是對於任何與安全相關的事情。 --- ## Git Blame > 使用 [`git blame`](https://git-scm.com/docs/git-blame) 顯示特定修訂版和行的作者訊息 一個經典的，快速找出誰寫了特定程式碼行（也就是你的哪個同事應該為這個錯誤負責！）。但它也有助於確定在哪個時間點發生了某些更改並檢查該提交和關聯的元資料。 例如，要查看 index.rs 第 400 到 420 行的作者和提交訊息，您可以執行： ``` git blame -L 400,420 index.rs ``` --- ## Git LFS > 使用 [`git lfs`](https://git-lfs.github.com/) 存儲大文件，以免拖慢您的存儲庫 您的專案通常會包含較大的文件（例如資料庫、二進制資產、檔案或媒體文件），這會減慢 git 工作流程並使使用限制達到最大。這就是 [大型文件存儲](https://git-lfs.github.com/) 的用武之地 - 它使您能夠將這些大型資產存儲在其他地方，同時使它們可以通過 git 進行跟踪並保持相同的存取控制/權限。 LFS 的工作原理是將這些較大的文件替換為在 git 中跟踪的文本指針。 要使用它，只需執行 `git lfs track <file glob>`，這將更新您的 `.gitattributes` 文件。您可以通過擴展名（例如“*.psd”）、目錄或單獨指定文件。執行 git lfs ls-files 以查看跟踪的 LFS 文件列表。 --- ## Git GC > 使用 [`git gc`](https://git-scm.com/docs/git-gc) 優化您的存儲庫 隨著時間的推移，git repos 會積累各種類型的垃圾，這些垃圾會佔用磁盤空間並減慢操作速度。這就是內置垃圾收集器的用武之地。執行 `git gc` 將刪除孤立的和不可存取的提交（使用 [`git prune`](https://git-scm.com/docs/git-prune)），壓縮文件修訂和存儲的 git 物件，以及一些其他一般的內務管理任務，如打包引用、修剪引用日誌、尊重元資料或陳舊的工作樹和更新索引。 加入 `--aggressive` 標誌將 [積極優化](https://git-scm.com/docs/git-gc#_aggressive) 存儲庫，丟棄任何現有的增量並重新計算它們，這需要更長的時間執行但如果你有一個大型存儲庫可能需要。 --- ## Git Show > 使用 [`git show`](https://git-scm.com/docs/git-show) 輕鬆檢查任何 git 物件 以易於閱讀的形式輸出物件（blob、樹、標籤或提交）。要使用，只需執行 `git show <object>`。您可能還想附加 `--pretty` 標誌，以獲得更清晰的輸出，但還有許多其他選項可用於自定義輸出（使用 `--format`），因此此命令對於準確顯示非常強大你需要什麼。 這非常有用的一個實例是在另一個分支中預覽文件，而無需切換分支。只需執行 `git show branch:file` --- ## Git Describe > 使用 [`git describe`](https://git-scm.com/docs/git-describe) 查找可從提交中存取的最新標記，並為其指定一個人類可讀的名稱 執行 `git describe`，您將看到一個人類可讀的字串，該字串由最後一個標籤名稱與當前提交組合而成，以生成一個字串。您還可以將特定標籤傳遞給它， 請注意，您必須已建立標籤才能使其正常工作，除非您附加了 `--all` 標誌。默認情況下，Git describe 也只會使用帶註釋的標籤，因此您必須指定 `--tags` 標誌以使其也使用輕量級標籤。 --- ## Git Tag > 使用 [`git tag`](https://git-scm.com/docs/git-tag) 在你的 repo 歷史中標記一個特定點 能夠[標記](https://git-scm.com/book/en/v2/Git-Basics-Tagging) 存儲庫歷史記錄中最常用於表示發布版本的特定重要點通常很有用。建立標籤就像 `git tag <tagname>` 一樣簡單，或者您可以使用 `git tag -a v4.2.0 <commit sha>` 標記歷史提交。與提交一樣，您可以使用“-m”在標籤旁邊包含一條訊息。 不要忘記使用 `git push origin <tagname>` 將您的標籤推送到遠程。 要列出所有標籤，只需執行 `git tag`，並可選擇使用 `-l` 進行通配符搜尋。 然後，您將能夠使用 `git checkout <tagname>` 檢出特定標籤 --- ## Git Reflog > 使用 [`git reflog`](https://git-scm.com/docs/git-reflog) 列出對您的存儲庫所做的所有更新 Git 使用稱為參考日誌或“reflogs”的機制跟踪分支尖端的更新。跟踪各種事件，包括：克隆、拉取、推送、提交、檢出和合併。能夠找到事件引用通常很有用，因為許多命令都接受引用作為參數。只需執行 `git reflog` 即可查看 `HEAD` 上的最近事件。 reflog 真正有用的一件事是恢復丟失的提交。 Git 永遠不會真正丟失任何東西，即使是在重寫歷史時（比如變基或提交修改）。 Reflog 允許您返回提交，即使它們沒有被任何分支或標記引用。 默認情況下，reflog 使用 `HEAD`（您當前的分支），但您可以在任何 ref 上執行 reflog。例如 `git reflog show <branch name>`，或者使用 `git reflog stash` 查看隱藏的更改。或者使用 `git reflog show --all` 顯示所有引用 --- ## Git Log > 使用 [`git log`](https://git-scm.com/docs/git-log) 查看提交列表 您可能已經熟悉執行 `git log` 來查看當前分支上最近提交的列表。但是您可以使用 git log 做更多的事情。 使用 `git log --graph --decorate --oneline` 將顯示一個漂亮整潔的提交圖以及 ref 指針。  您還經常需要能夠根據各種參數過濾日誌，其中最有用的是： - `git log --search="<anything>"` - 搜尋特定程式碼更改的日誌 - `git log --author="<pattern>"` - 只顯示特定作者的日誌 - `git log --grep="<pattern>"` - 使用搜尋詞或正則表達式過濾日誌 - `git log <since>..<until>` - 顯示兩個引用之間的所有提交 - `git log -- <file>` - 顯示僅對特定文件進行的所有提交 或者，只需執行 `git shortlog` 以獲得匯總的提交列表。 --- ## Git Cherry Pick > 使用 [`git cherry-pick`](https://git-scm.com/docs/git-cherry-pick) 通過引用選擇指定的提交並將它們附加到工作 HEAD 有時你需要從其他地方拉一個特定的提交到你當前的分支。這對於應用熱修復、撤消更改、恢復丟失的提交以及在某些團隊協作設置中非常有用。請注意，通常傳統的合併是更好的做法，因為挑選提交會導致日誌中出現重複提交。 用法很簡單，只需執行 `git cherry-pick <commit-hash>`。這會將指定的提交拉入當前分支。 --- ## Git Switch > 使用 [`git switch`](https://git-scm.com/docs/git-switch) 在分支之間移動是我們經常做的事情，`switch` 命令就像是`git checkout` 的簡化版本，它可以用來建立和在分支之間導航，但不像 checkout 在分支之間移動時不會復制修改的文件. 類似於 `checkout -b`，使用 switch 命令你可以附加 `-c` 標誌來建立一個新分支，然後直接跳入其中，例如`git switch -c <新分支>`。執行 `git switch -` 將放棄您所做的任何實驗性更改，並返回到您之前的分支。 --- ## Git Standup > 使用 [`git standup`](https://github.com/kamranahmedse/git-standup) 回憶你在最後一個工作日做了什麼，基於 git 提交 我把它放在最後，因為它不包含在大多數 git 客戶端中，但是您可以使用系統包管理器[輕鬆安裝](https://github.com/kamranahmedse/git-standup#install) ，使用 1 行 curl 腳本，或從源程式碼建置。 如果您的老闆要求您每天站立一次，以更新昨天的工作，但您永遠記不起自己到底做了什麼——這個適合您！它將顯示一個格式良好的列表，列出在給定時間範圍內完成的所有事情。用法很簡單，只需執行 `git standup`，或使用 [這些選項](https://github.com/kamranahmedse/git-standup#options) 指定應顯示哪些資料（作者、時間範圍、分支機構等）。 --- ## 結論 希望對您有幫助！
在 Web 開發世界中，有時感覺就像每天都有新的前端框架問世！大多數來去匆匆，但有一件事是肯定的：Svelte 將繼續存在。 不過，這並不意味著您應該放下一切並在今天學習！追逐最新潮流會讓您分心和不知所措。 這篇文章將一勞永逸地回答：**我應該學習 React 還是 Svelte？**。 您將看到一些程式碼範例，這些範例解釋了為什麼 React 開發人員會為 Svelte 瘋狂，但我們也必須實際一點。 React 已經存在了很長時間。有更多的套件、支援、職缺。 Svelte 還能取代 React 嗎？讓我們找出答案！ - 原文出處：https://dev.to/mikehtmlallthethings/svelte-vs-react-which-framework-to-learn-in-2023-50gf --- * 📍 什麼是 React？ * 📍 什麼是 Svelte？ * 📍 React 和 Svelte 的 5 個區別 * Svelte 的捆綁包尺寸更小 * Svelte 更容易學習 * Svelte 使用純 HTML、CSS 和 JavaScript 進行編譯 * React 有更多的套件 * React 有 React Native * 📍 React 是庫還是框架？ * 📍逐行比較 React 和 Svelte 專案 * 📍 Svelte 比 React 快嗎？ * 📍 何時從 React 切換到 Svelte * 📍 結論 ### **What is React?** 讓我們從 React 開始。 React 是一個漸進式 JavaScript 前端框架（或函式庫，具體取決於您詢問的對象），可幫助您構建複雜的 Web UI。 它由 Facebook（現為 Meta）於 2013 年創建，能夠很快在前端 Web 開發領域站穩腳跟。 React 的核心是狀態和渲染狀態，這意味著要使用它，您必須添加其他庫來處理客戶端功能和路由。 ### **What is Svelte?** Svelte 也是一個前端 JavaScript 框架，但採用了更加一體化的方法。 Svelte 具有內建的狀態管理、路由和客戶端 (DOM) 功能。  React 需要第三方庫和工具，如 Redux、React Router、JSX，而 Svelte 內建了很多這樣的功能。它不太靈活，但更方便和一致。 它採用更幕後（魔術）風格的方法，它直譯非常基本的 JavaScript 程式碼並為您處理 UI 和狀態管理： ``` <script> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> ``` Svelte 由紐約時報的開發人員 Rich Harris 於 2016 年創建，用於以高效的方式處理複雜的圖表和圖形。它從那裡成長為 React 和 Vue 之類的備受喜愛的競爭對手。 ### **React 和 Svelte 之間的 5 個區別** ### **1。 Svelte 的構建包大小要小得多** 我們在下面構建的相同（功能）應用程序。部署包大小在 React 是 41.2 kB，在 Svelte 是 2.1 kB。這幾乎減少了 **20x** 🤯 為了獲得這些數字，我構建了一個在 Svelte 和 React 中具有相同功能的應用程序。我們將在 React 與 Svelte 代碼分解部分深入研究這些應用程序。  我用 React 和 Svelte 構建了一個相同的應用程序。看看 Svelte 包小了多少！ ### **2。 Svelte 更容易學習，因為它的語法簡單** Svelte 採用更幕後的魔術方法，允許您編寫非常少量的樣板或語法糖來完成複雜的綁定。模板語法只是帶有一些額外內容的 HTML，這與 JSX（React 等價物）有很大不同並且更容易學習。 React 變數宣告：  Svelte 變數宣告：  Svelte 看起來像純 JavaScript，但它具有與 React 完全相同的功能。更新 Svelte 變數將自動更新它所在的 UI 元素。 ### **3。 Svelte 符合純 HTML、CSS 和 JavaScript** Svelte 將您編寫的程式碼編譯成基本的 HTML、CSS 和 JavaScript。它不需要像 React 那樣與你的代碼捆綁在一起！ React.js 需要存在於一個 bundle 中以完成所有正確的虛擬 DOM 比較和創建，Svelte 不使用虛擬 DOM 來處理 UI。相反，它選擇了基本的 JavaScript 元素創建函數，例如 document.createElement。 ### **4。 React 擁有更多為它構建的庫和包** React 已經存在了 3 年多，也是目前 JavaScript 框架事實上的王者👑。正因為如此，它擁有大量用戶和公司創建的軟件包。 用戶創建的包通常只是為了使路由和狀態管理更容易，或者添加滑塊、燈箱等。這些並不重要，因為 Svelte 具有可靠的選項，並且兼容/適應大多數 JavaScript 套件。 有點困難的是，要跟任何其他框架之前創建的 React 套件整合時不容易。我在 Solana 和以太坊上從事 Web3 專案時經常遇到這個問題。 ### **5。 React 有 React Native** React Native 是使用率最高和受支持最多的跨平台框架之一。它提供了使用 React 創建 iOS 和 Android 應用程式的能力。全部來自同一個代碼庫。由於其成熟度，它擁有大量的庫、支援和學習資源。 儘管有 Svelte 的替代方案，例如稱為 Svelte-native 的 NativeScript 改編版，但它們不具有與 React-native 相同的可靠性和功能。 ### **React 是函示庫還是框架？** 儘管 React 通常被稱為框架，但可以說，由於其範圍，它更像是一個函式庫。它專門負責管理 UI 的狀態並使其與應用程式中的資料狀態保持同步。 因此，它需要第 3 方函式庫來處理應用程式路由 (React Router)、UI 創建 (JSX) 和元件之間的狀態管理 (Redux)。 另一方面，Svelte 內建了上述所有功能，因此更像是一個完整的 UI 管理解決方案。 你可以看到大多數人都同意這是一個函式庫，但仍有一些爭論👇 https://twitter.com/htmleverything/status/1597574223148765185 ### **逐行比較 React 和 Svelte 專案** 比較兩種 Web 技術的最佳方法是深入研究並使用它們進行構建。構建完全相同的應用程序有助於了解每個庫/框架如何處理不同的功能。 讓我們看看： * 條件渲染 * 模板循環 * 更新狀態 * 事件掛鉤 ### **我們在建造什麼？** 編碼是一項口渴的工作，因此我們將構建一個簡單的網絡應用程序，允許用戶跟踪他們全天喝了多少杯水（或🍺）。 額外的好處是顯示每杯喝醉的歷史和時間。 我們將保持 UI 簡單，以更多地關注底層框架。 （見下面的用戶界面） https://codesandbox.io/embed/react-water-example-scrimba-ny5q0m?fontsize=14&hidenavigation=1&theme=dark ### **React** 為了分解代碼，首先讓我們深入了解一些 React 概念和術語👇 React 有幾種類型的語法你需要學習。鉤子、狀態和模板 (JSX) 是主要的。 鉤子 - 允許您進入應用程序的生命週期 State - 允許您根據數據的變化更新 UI 元素。它將“狀態”（或更簡單的變量）更改與 UI 更新聯繫起來 模板 - 允許您直接在 HTML 中使用變量和 JavaScript React 組件的樣式通常由單獨的 .css（或 .scss）文件處理。 ### **React 代碼分解** https://codesandbox.io/embed/react-water-example-scrimba-ny5q0m?fontsize=14&hidenavigation=1&theme=dark&view=editor 變數是使用 useState 掛鉤設置的，它允許更新變量並讓 UI 動態呈現這些更新。 `useEffect` 用於在加載應用程序時設置今天的日期。 JSX 模板使用基本的“{}”符號以及 HTML 中的標準 JavaScript 函數，允許顯示變量和循環數組（使用“.map”）。 ### **Svelte** Svelte 採用不同的方法，採用更“幕後魔術”的風格。邏輯看起來很像純 JavaScript。在後台，代碼做的事情幾乎與 React 代碼做的一樣。 Svelte 仍然有像 `onMount` 和 `onDestroy` 這樣的鉤子，但是簡單地分配一個變量並讓它完全響應並在模板 (HTML) 中可訪問不需要任何特殊的語法糖。 另一個很大的區別是您可以直接在 Svelte 組件中編寫 CSS/SCSS。這只是一個選項，因為您仍然可以像在 React 中一樣導入樣式，但我注意到大多數 Svelte 項目都使用樣式內組件。 ### **Svelte 代碼分解** https://codesandbox.io/embed/svelte-water-example-scrimba-2vsoid?fontsize=14&hidenavigation=1&module=%2FApp.svelte&theme=dark&view=editor 上面的代碼實例化了一個 cupsOfWater 數組，將新的日期變量設置為當前日期。 聲明一個函數來創建一個新日期並將其存儲在一個名為 cup 的變量中，然後將其添加到 cupsOfWater 數組中。 模板部分更接近 HTML 並增加了一些功能。再次使用“{}”表示法，您可以從“<script>”部分引用任何聲明的變量。您還可以使用事件偵聽器（如 `on:click`）、條件（如 `{#if}`）和使用 `{#each}` 循環。 ### **Svelte 比 React 快嗎？** 是的，從快速的 HTML 生成到更快的構建和開發環境，Svelte 的性能都大大優於 React。 * 生成 HTML * 根據狀態更新 UI * 第一次內容豐富的渲染 * 互動時間 * 速度指數 所有這些都看到了可衡量的差異，而 Svelte 具有優勢。您的應用程序越大越複雜，差異就越明顯。 在 Zeitspace 的一篇文章中可以看到性能比較 https://www.zeitspace.com/blog/we-built-an-app-with-svelte.-heres-what-we-learned ### **Svelte 比 React 好嗎？** 當開始一個新專案時，Svelte 有足夠的優勢，它應該始終是一個考慮因素。 話雖如此，React 在使用率方面仍然絕對勝過 Svelte。這可能會導致專案的第 3 方插件支持、僱用和壽命問題。 不過，為了應對這一點，Svelte 語法的易用性使其非常容易上手，尤其是對於 React 開發人員而言。這是公司在招聘 Svelte 項目時可以藉鑑的東西（不要將自己局限於 Svelte 開發人員）。 ### **何時從 React 切換到 Svelte** Svelte 是構建複雜網站或 Web 應用程序的絕佳選擇。許多老牌公司已經開始將 Svelte 用於內部和外部應用程序： * 1Password * Avast * Chess.com * Alaska Airlines * Fusion Charts * Rakuten * GoDaddy * IBM * Square * 紐約時報 * 飛利浦 但這並不意味著您必須將當前的 React 應用程序放入垃圾桶！ 那麼什麼時候是接觸 Svelte 的合適時機？ 如果您的應用/網站： * 由於頻寬限制，需要較小的包大小 * 需要盡可能快 * 需要快速建造 When is not the right time to reach for Svelte? 什麼時候不適合使用 Svelte？ 如果您的應用/網站： * 嚴重依賴第 3 方集成/工具 * 需要轉換為移動應用程序 這些很快就不會成為問題，但在投入之前確實需要進行一些研究和盡職調查。 ### **結論** 建議投入其中並嘗試在 Svelte 中構建一些東西。如果你來自 React，我幾乎可以向你保證你會喜歡它的簡單性和速度。
在 React 前端開發時，常常會需要在不同的元件、hook、utils 中寫一些邏輯。 有些時候，使用策略模式會很有幫助，這篇文章給您參考。 - 原文出處：https://dev.to/itshugo/applying-design-patterns-in-react-strategy-pattern-enn ## 出問題了：霰彈槍手術（Shotgun Surgery） Shotgun Surgery 是一種程式寫很爛的信號。想對程式規格做一點小修改，需要改一大堆地方。  在專案中通常如何發生？假設我們需要為產品寫一個報價卡片，我們根據客戶所在國家，調整價格、貨幣、折扣方式和文字說明：  大多數工程師可能會這樣寫： - 元件：`PricingCard`、`PricingHeader`、`PricingBody`。 - Utility functions：`getDiscountMessage`（在 **utils/discount.ts** 中），`formatPriceByCurrency`（在 **utils/price.ts** 中）。 - `PricingBody` 元件會計算最終價格。 完整程式碼範例：https://codesandbox.io/s/react-strategy-pattern-problem-h59r02?from-embed 現在假設我們需要更改一個國家/地區的定價計劃，或為另一個國家/地區添加新的定價計劃。您將如何處理這段修改？您必須至少修改 3 個地方，並向已經滿亂的 `if-else` 區塊添加更多條件： - 修改 `PricingBody` 組件。 - 修改 `getDiscountMessage` 函數。 - 修改 `formatPriceByCurrency` 函數。 如果您聽說過 S.O.L.I.D 原則，我們已經違反了前 2 條原則：單一職責原則和開閉原則。 ## 解決方法：策略模式 策略模式非常簡單。我們可以簡單的理解為，每個國家的定價方案都是一個策略。在那個策略類別中，會實現該策略的所有相關邏輯。 假設您熟悉 OOP，我們可以有一個實現共享/公共邏輯的抽像類別（`PriceStrategy`），然後具有不同邏輯的策略將繼承該抽像類別。 `PriceStrategy` 抽像類別如下所示： ``` import { Country, Currency } from '../../types'; abstract class PriceStrategy { protected country: Country = Country.AMERICA; protected currency: Currency = Currency.USD; protected discountRatio = 0; getCountry(): Country { return this.country; } formatPrice(price: number): string { return [this.currency, price.toLocaleString()].join(''); } getDiscountAmount(price: number): number { return price * this.discountRatio; } getFinalPrice(price: number): number { return price - this.getDiscountAmount(price); } shouldDiscount(): boolean { return this.discountRatio > 0; } getDiscountMessage(price: number): string { const formattedDiscountAmount = this.formatPrice( this.getDiscountAmount(price) ); return `It's lucky that you come from ${this.country}, because we're running a program that discounts the price by ${formattedDiscountAmount}.`; } } export default PriceStrategy; ``` 我們只需將實例化的策略作為 prop 傳遞給 PricingCard 元件： ``` <PricingCard price={7669} strategy={new JapanPriceStrategy()} /> ``` `PricingCard` 的 props 定義為： ``` interface PricingCardProps { price: number; strategy: PriceStrategy; } ``` 同樣，如果您了解 OOP，那麼我們不僅在使用繼承，而且還在此處使用多態性（Polymorphism）。 完整程式碼範例：https://codesandbox.io/s/react-strategy-pattern-solution-mm0cvm?from-embed 使用這個解決方案，我們只需要添加一個新的策略類別，而不需要修改任何現有程式碼。這樣，我們也滿足了 S.O.L.I.D 原則。 ## 結論 因為我們在 React 程式碼中檢測到程式碼發臭：Shotgun Surgery，所以我們使用了策略模式來解決它。 ### Before  ### After  現在邏輯都存在一個地方，不再分佈在許多地方。 --- 以上是 Strategy Pattern 的簡單說明，希望對您有幫助。
一行程式碼可以做到很多事。這邊有20個小任務都用一行就可以完成，給您參考！ - 原文出處：https://dev.to/saviomartin/20-killer-javascript-one-liners-94f # 獲取瀏覽器 Cookie 的值 讀取 `document.cookie` 來查 cookie 的值 ``` const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift(); cookie('_ga'); // Result: "GA1.2.1929736587.1601974046" ``` # 將 RGB 轉換為十六進制 ``` const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); rgbToHex(0, 51, 255); // Result: #0033ff ``` # 複製到剪貼板 使用 `navigator.clipboard.writeText` 輕鬆將任何文字複製到剪貼板。 ``` const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard("Hello World"); ``` # 檢查日期是否有效 使用以下程式碼檢查給定日期是否有效。 ``` const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf()); isDateValid("December 17, 1995 03:24:00"); // Result: true ``` # 查找一年中的第幾天 根據給定日期，找出是第幾天。 ``` const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); dayOfYear(new Date()); // Result: 272 ``` # 將字串開頭大寫 Javascript 沒有內建的 capitalize 函數。我們可以使用以下程式碼來完成。 ``` const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1) capitalize("follow for more") // Result: Follow for more ``` # 求兩天之間的天數 使用以下程式碼查找 2 個給定日期之間的天數。 ``` const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000) dayDif(new Date("2020-10-21"), new Date("2021-10-22")) // Result: 366 ``` # 清除所有 Cookie 透過 document.cookie 存取 cookie 並清除它，就可輕鬆清除網頁中的所有 cookie。 ``` const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`)); ``` # 生成隨機十六進制顏色碼 使用“Math.random”和“padEnd”屬性，生成隨機的十六進制顏色碼。 ``` const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; console.log(randomHex()); // Result: #92b008 ``` # 從陣列中刪除重複項 使用 JavaScript 中的 `Set` 輕鬆刪除重複項。 ``` const removeDuplicates = (arr) => [...new Set(arr)]; console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6])); // Result: [ 1, 2, 3, 4, 5, 6 ] ``` # 從 URL 獲取查詢參數 您可以從 `window.location` 或原始 URL `goole.com?search=easy&page=3` 中輕鬆找出查詢參數 ``` const getParameters = (URL) => { URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}'); return JSON.stringify(URL); }; getParameters(window.location) // Result: { search : "easy", page : 3 } ``` # 把日期物件轉成時間 把日期物件以“hour::minutes::seconds”格式轉成時間。 ``` const timeFromDate = date => date.toTimeString().slice(0, 8); console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); // Result: "17:30:00" ``` # 檢查數字是偶數還是奇數 ``` const isEven = num => num % 2 === 0; console.log(isEven(2)); // Result: True ``` # 求數的平均值 使用 `reduce` 方法計算多個數字之間的平均值。 ``` const average = (...args) => args.reduce((a, b) => a + b) / args.length; average(1, 2, 3, 4); // Result: 2.5 ``` # 滾動到頂部 您可以使用 `window.scrollTo(0, 0)` 方法自動滾動到頂部。將 `x` 和 `y` 都設為 0。 ``` const goToTop = () => window.scrollTo(0, 0); goToTop(); ``` # 反轉字串 您可以使用 `split`、`reverse` 和 `join` 方法輕鬆反轉字串。 ``` const reverse = str => str.split('').reverse().join(''); reverse('hello world'); // Result: 'dlrow olleh' ``` # 檢查陣列是否為空 ``` const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0; isNotEmpty([1, 2, 3]); // Result: true ``` # 取得選中的文字 使用內建的 getSelection 屬性取得用戶選取中的文字。 ``` const getSelectedText = () => window.getSelection().toString(); getSelectedText(); ``` # 打亂陣列 使用 `sort` 和 `random` 方法打亂陣列。 ``` const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random()); console.log(shuffleArray([1, 2, 3, 4])); // Result: [ 1, 4, 3, 2 ] ``` # 檢測深色模式 使用以下程式碼，檢查用戶的設備是否處於深色模式。 ``` const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches console.log(isDarkMode) // Result: True or False ``` --- 希望這些程式碼，有給您一些靈感！
JavaScipt 是非常流行的程式語言，其中有些少見技巧，但還不錯用，這篇文章會分享八個，給您參考看看！ - 原文出處：https://dev.to/worldindev/8-javascript-tips-tricks-that-no-one-teaches-24g1 # 函數繼承 函數繼承就是先寫一個基礎函數，再寫一個擴充函數，來擴充屬性與方法，會像這樣： ``` // Base function function Drinks(data) { var that = {}; // Create an empty object that.name = data.name; // Add it a "name" property return that; // Return the object }; // Fuction which inherits from the base function function Coffee(data) { // Create the Drinks object var that = Drinks(data); // Extend base object that.giveName = function() { return 'This is ' + that.name; }; return that; }; // Usage var firstCoffee = Coffee({ name: 'Cappuccino' }); console.log(firstCoffee.giveName()); // Output: "This is Cappuccino" ``` # .map() 的替代方案 `.map()` 有一個替代方案，就是 `.from()`: ``` let dogs = [ { name: ‘Rio’, age: 2 }, { name: ‘Mac’, age: 3 }, { name: ‘Bruno’, age: 5 }, { name: ‘Jucas’, age: 10 }, { name: ‘Furr’, age: 8 }, { name: ‘Blu’, age: 7 }, ] let dogsNames = Array.from(dogs, ({name}) => name); console.log(dogsNames); // returns [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”] ``` # 數字轉字串/字串轉數字 通常，要讓數字轉為字串，會這樣寫 ``` let num = 4 let newNum = num.toString(); ``` 然後字串轉數字，會這樣寫 ``` let num = "4" let stringNumber = Number(num); ``` 但有個更快的寫法是： ``` let num = 15; let numString = num + ""; // number to string let stringNum = + numString; // string to number ``` # 使用長度來調整和清空陣列 在 javascript 中，我們可以改寫 length 內建方法，直接設定一個新值。 舉個例： ``` let array_values = [1, 2, 3, 4, 5, 6, 7, 8]; console.log(array_values.length); // 8 array_values.length = 5; console.log(array_values.length); // 5 console.log(array_values); // [1, 2, 3, 4, 5] ``` 還能用來清空陣列： ``` let array_values = [1, 2, 3, 4, 5, 6, 7,8]; console.log(array_values.length); // 8 array_values.length = 0; console.log(array_values.length); // 0 console.log(array_values); // [] ``` # 使用陣列解構來交換值 陣列解構讓陣列或物件的屬性，可以拆出來到變數中。還可以用它來交換兩個元素，舉例如下： ``` let a = 1, b = 2 [a, b] = [b, a] console.log(a) // result -> 2 console.log(b) // result -> 1 ``` # 刪除陣列中的重複元素 這個技巧很簡單。比方說，我創建了一個包含重複元素的陣列，然後我想刪除重複項： ``` const array = [1, 3, 2, 3, 2, 1, true, false, true, 'Kio', 2, 3]; const filteredArray = [...new Set(array)]; console.log(filteredArray) // [1, 3, 2, true, false, "Kio"] ``` # for 迴圈的簡寫版 可以這樣寫： ``` const names = ["Kio", "Rio", "Mac"]; // Long Version for (let i = 0; i < names.length; i++) { const name = names[i]; console.log(name); } // Short Version for (let name of names) console.log(name); ``` # 效能監測 下面這張圖是 google 用秒數提示效能： https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7ed89oyhcyyjhqirvc6.png 在 JavaScript 中也能做到，就像這樣： ``` const firstTime = performance.now(); something(); const secondTime = performance.now(); console.log(`The something function took ${secondTime - firstTime} milliseconds.`); ``` --- 以上八個技巧，希望對您有幫助！
在開發 React App 時，遵循一些 best practices 會使您的程式碼品質提高，這篇文章列出一些給您參考。 - 原文出處：https://dev.to/iambilalriaz/react-best-practices-ege # 強烈推薦 VS Code 作為 IDE Visual Studio Code 有幾個超好用的 React 功能。強大的外掛生態系，對開發者大有幫助： - Prettier - ES Lint - JavaScript (ES6) code snippets - Reactjs code snippets - Auto import # 使用 ES6 語法 程式碼越漂亮越好。在 JavaScript 中，採用 ES6 語法可以讓程式碼更簡潔。 ## Arrow Functions ``` // ES5 function getSum(a, b) { return a + b; } // ES6 const getSum = (a, b) => a + b; ``` ## Template Literal ``` // ES5 var name = "Bilal"; console.log("My name is " + name); // ES6 const name = "Bilal"; console.log(`My name is ${name}`); ``` ## const $ let const $ let 有各自的變數作用域。const 宣告的變數不能修改，let 宣告的變數可以修改。 ``` // ES5 var fruits = ["apple", "banana"]; // ES6 let fruits = ["apple", "banana"]; fruits.push("mango"); const workingHours = 8; ``` ## Object Destructuring ``` var person = { name: "John", age: 40, }; // ES5 var name = person.name; var age = person.age; // ES6 const { name, age } = person; ``` ## Defining Objects ``` var name = "John"; var age = 40; var designations = "Full Stack Developer"; var workingHours = 8; // ES5 var person = { name: name, age: age, designation: designation, workingHours: workingHours, }; // ES6 const person = { name, age, designation, workingHours }; ``` ES6 的語法特性、彈性，很多值得您一試。 # JSX 使用 map 時記得加上 key array map 時，永遠記得替每個元素加上獨立的 key 值。 ``` const students = [{id: 1, name: 'Bilal'}, {id: 2, name: 'Haris'}]; // in return function of component <ul> {students.map(({id, name}) => ( <li key={id}>{name}</li> ))} </ul>; ``` # 元件名稱使用 PascalCase ``` const helloText = () => <div>Hello</div>; // wrong const HelloText = () => <div>Hello</div>; // correct ``` # 變數和函數名稱使用 camelCase ``` const working_hours = 10; // bad approach const workingHours = 10; // good approach const get_sum = (a, b) => a + b; // bad approach const getSum = (a, b) => a + b; // good approach ``` # ID 和 css class 名稱使用 kebab-case ``` <!--bad approach--> <div className="hello_word" id="hello_world">Hello World</div> <!--good approach --> <div className="hello-word" id="hello-world">Hello World</div> ``` # 永遠要檢查物件＆陣列的 null & undefined 忘記檢查的話，常常會導致一堆錯誤。 所以要保持檢查的習慣。 ``` const person = { name: "Haris", city: "Lahore", }; console.log("Age", person.age); // error console.log("Age", person.age ? person.age : 20); // correct console.log("Age", person.age ?? 20); //correct const oddNumbers = undefined; console.log(oddNumbers.length); // error console.log(oddNumbers.length ? oddNumbers.length : "Array is undefined"); // correct console.log(oddNumbers.length ?? "Array is undefined"); // correct ``` # 避免 Inline Styling Inline styling 會讓 jsx 程式碼變得很亂。用單獨的 css 文件拆分出來比較好。 ``` const text = <div style={{ fontWeight: "bold" }}>Happy Learing!</div>; // bad approach const text = <div className="learning-text">Happy Learing!</div>; // good approach ``` 在 .css 文件中： ``` .learning-text { font-weight: bold; } ``` # 避免 DOM 操作 用 React state 為主，別用 DOM 操作 糟糕做法： ``` <div id="error-msg">Please enter a valid value</div> ``` ``` document.getElementById("error-msg").visibility = visible; ``` 推薦做法： ``` const [isValid, setIsValid] = useState(false); <div hidden={isValid}>Please enter a valid value</div>; ``` 使用 isValid 來管理 UI 顯示邏輯。 # 在 useEffect 記得清乾淨每個事件監聽器 加過的事件監聽器，都要記得清乾淨： ``` const printHello = () => console.log("HELLO"); useEffect(() => { document.addEventListener("click", printHello); return () => document.removeEventListener("click", printHello); }); ``` # 避免重複開發，多寫通用元件 讓程式碼越乾淨越好。相似的東西可以寫通用元件。再根據 props 內容傳遞來處理相異處即可： ``` const Input=(props)=>{ const [inputValue, setInputValue]=useState(''); return( <label>{props.thing}</label> <input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)} /> ) } ``` 在其他元件中，就能這樣用： ``` <div> <Input thing="First Name" /> <Input thing="Second Name" /> </div> ``` # 檔案要分類一下 相關檔案可以分類成一個資料夾。 例如在 React 寫一個導覽列，那就可以開一個資料夾，相關的 .js 與 .css 檔案放裡面。 # 寫 functional components 為主 簡單顯示一些東西、沒用到 state 的話，那寫 functional components 比寫 class components 好。 如果你會寫 react hooks 的話，那就連 state 都完全不成問題。 # 養成編寫輔助函數的習慣 有時你在 React App 中會需要一些通用功能。 這種情況，可以開一個 `helper-functions.js` 檔案，在裡面寫輔助函數，就可以到處使用了。 ## 使用三元運算子代替 if/else if 使用 `if/else if` 語句會使程式碼變得龐大。使用三元運算子，就簡潔、清楚多了： ``` // Bad approach if (name === "Ali") { return 1; } else if (name === "Bilal") { return 2; } else { return 3; } // Good approach name === "Ali" ? 1 : name === "Bilal" ? 2 : 3; ``` # 新增 index.js 檔案，讓匯入元件更簡單 如果你在 actions 資料夾中有一個 index.js 檔案，當你想在元件中導入時，會像這樣： ``` import { actionName } from "src/redux/actions"; ``` actions 後面的 index.js 可以省略不寫，就不用這樣囉唆了： ``` import { actionName } from "src/redux/actions/index"; ``` # Destructuring of Props 物件屬性名稱可以拆出來，後面用起來比較方便。 假設你的元件有 `name`、`age` 和 `designation` 這些 props： ``` // Bad approach const Details = (props) => { return ( <div> <p>{props.name}</p> <p>{props.age}</p> <p>{props.designation}</p> </div> ); }; // Good approach const Details = ({ name, age, designation }) => { return ( <div> <p>{name}</p> <p>{age}</p> <p>{designation}</p> </div> ); }; ``` # 不要嘗試在同一函數中，去碰修改過的 state 變數 在一個函數中，如果你正在為一個狀態變數賦值，在同一個函數中，是拿不到新值的 ``` const Message = () => { const [message, setMessage] = useState("Hello World"); const changeMessage = (messageText) => { setMessage("Happy Learning"); console.log(message); // It will print Hello World on console }; return <div>{message}</div>; }; ``` # 使用 === 運算子代替 == 在比較兩個值時，嚴格檢查變數型別比較好： ``` "2" == 2 ? true : false; // true "2" === 2 ? true : false; // false ``` --- 以上 Best Practices 供您參考，祝福您不斷變強！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
