如何使用 Mocha 和 Chai 開始測試前端應用程式 警告：本篇文章已經過時，可能無法反映目前的最新技術狀態 Mocha 是一個強大且多功能的測試工具。市面上有很多測試框架，而我選擇 Mocha 是因為它的流行程度和易用性。 讓我們首先看看如何在瀏覽器中運行測試。下載以下文件： https://github.com/visionmedia/mocha https://github.com/chaijs/chai https://github.com/chaijs/chai-jquery 將相應的 mocha.js、chai.js、chai-jquery.js 文件放在您網站的 test/ 子文件夾中。 選擇您的 index.html 文件並載入它們，然後我們將設置 Mocha 使用 BDD 測試風格，並載入一個名為 test.web.js 的文件，該文件將承載我們的測試規則。 <script src="test/vendor/mocha.js" data-build-exclude="true"></script> <script src="test/vendor/chai.js" data-build-exclude="true"></script> <script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script> <script data-build-exclude="true"> mocha.setup('bdd'); expect = chai.expect; </script> <script src="test/test.web.js" data-build-exclude="true"></script> 在您的 body 中，放置一個 div#mocha： <div id="mocha"></div> test/test.web.js 文件是整個遊戲的核心，它將承載測試規則。 describe('Array', function(){ describe('#indexOf()', function(){ it('should return -1 when the value is not present', function(){ [1,2,3].indexOf(5).should.equal(-1); [1,2,3]....

可以在通勤或無法使用鍵盤時聆聽的幾個不錯的播客節目 我是一個快樂的播客聽眾。我喜歡在遛狗一小時、獨自徒步旅行或開車時聽播客節目。 這不僅是學習新事物的好途徑，也是聆聽故事和開拓視野的方式。 我有一個我聽的播客節目清單，但我不想煩擾你。相反，我想列出我認為最適合前端開發人員的播客節目。 如果你想擴展播客節目收藏夾，這是一個好地方！ 前端開發人員播客 Developer Tea egghead.io開發者聊天 前端 Happy Hour The freeCodeCamp Podcast The Frontside Podcast Full Stack Radio JavaScript Jabber JS Party Ladybug Podcast Modern Web Syntax Toolsday Web of Tomorrow 不僅適合前端開發人員，也適合一般用戶 Away from Keyboard Coding blocks 編寫疲勞 Laracasts片段 NodeUp ShopTalk Under the Radar 每集都有開發人員或新主持人的故事 The 6 Figure Developer CodeNewbie 軟體定義存活 The Big Web Show Developer on Fire 祝你享受！（如果我錯過了其他好節目，請在Twitter上告訴我！）

如何查找您的應用程式中特定套件的版本 要查看已安裝的所有 npm 套件的最新版本，包括它們的相依套件： npm list 範例： ❯ npm list /Users/flavio/dev/node/cowsay └─┬ [[email protected]](/cdn-cgi/l/email-protection) ├── [[email protected]](/cdn-cgi/l/email-protection) ├─┬ [[email protected]](/cdn-cgi/l/email-protection) │ ├── [[email protected]](/cdn-cgi/l/email-protection) │ └── [[email protected]](/cdn-cgi/l/email-protection) ├─┬ [[email protected]](/cdn-cgi/l/email-protection) │ ├── [[email protected]](/cdn-cgi/l/email-protection) │ └─┬ [[email protected]](/cdn-cgi/l/email-protection) │ └── [[email protected]](/cdn-cgi/l/email-protection) └── [[email protected]](/cdn-cgi/l/email-protection) 您也可以直接打開 package-lock.json 檔案，但這涉及一些目視掃描。 npm list -g 的效果相同，但作用於全域安裝的套件。 要僅獲取頂級套件（基本上就是您告訴 npm 要安裝的套件，並在 package.json 中列出的那些套件），執行 npm list --depth=0： ❯ npm list --depth=0 /Users/flavio/dev/node/cowsay └── [[email protected]](/cdn-cgi/l/email-protection) 您可以通過指定名稱來獲取特定套件的版本：...

如何檢查你的 Next.js 應用程序的服務器端渲染是否正常工作 你已經設置好你的新的 Next.js 應用程序了嗎？太棒了！ 現在讓我們檢查應用程序是否按照我們的期望工作。因為這是一個 Next.js 應用程序，所以應該是服務器端渲染的。 這是 Next.js 的主要賣點之一：如果我們使用 Next.js 創建一個網站，該網站頁面將在服務器上渲染，並傳遞 HTML 給瀏覽器。 這有三個主要的優點： 客戶端不需要實例化 React 進行渲染，這使得網站對用戶更加快速。 搜索引擎可以在不運行客戶端 JavaScript 的情況下索引頁面。 Google 已經開始這樣做，但公開承認這是一個較慢的過程（如果你想排名靠前，應該盡量幫助 Google）。 你可以使用社交媒體元標籤，用於添加預覽圖片，自定義 Facebook、Twitter 等平台上分享的頁面的標題和描述。 讓我們查看應用程序的源代碼。 在 Chrome 中，你可以在頁面中的任何位置右鍵點擊，然後點擊查看頁面源代碼。 如果你查看頁面的源代碼，你會在 HTML 的body中看到<div><h1>Airbnb clone</h1></div>的片段，以及一堆 JavaScript 文件 - 應用程序 bundles。 我們不需要進行任何設置，服務器端渲染（SSR）已經為我們工作了。 React應用程序將在客戶端上啟動，並且將驅動像點擊鏈接之類的交互的部分進行客戶端渲染。但是重新加載頁面將重新從服務器加載它。使用 Next.js，在瀏覽器內部不應該有任何不同的結果 - 服務器端渲染的頁面應該看起來完全像客戶端渲染的頁面一樣。

VS Code 是目前使用最廣泛的程式碼編輯器之一。當你成為這麼受歡迎的編輯器時，人們會開發出很多好用的插件。其中一個很棒的插件是可以幫助 Vue.js 開發者的工具。 Vetur 安裝 Vetur 語法高亮 程式碼片段 智能提示 腳手架 Emmet 程式碼檢查 程式碼格式化 VS Code 是目前使用最廣泛的程式碼編輯器之一。編輯器（editor）如同許多軟體產品一樣，都有不同的周期。曾經有一段時間開發人員最愛的是 TextMate，然後是 Sublime Text，現在則是 VS Code。 能夠成為受歡迎的編輯器最棒的地方之一就是人們會花許多時間開發各種插件。 其中一個很棒的插件是可以幫助 Vue.js 開發者的工具。 Vetur 這個插件叫做 Vetur，非常受歡迎，下載量超過 300 萬，你可以在 Visual Studio Marketplace 上找到它。 安裝 Vetur 點擊安裝按鈕會觸發 VS Code 的安裝面板： 你也可以在 VS Code 的擴展面板中搜索 “vetur”： 這個擴展提供了什麼功能？ 語法高亮 Vetur 為所有的 Vue 源代碼文件提供了語法高亮功能。 沒有安裝 Vetur 時，VS Code 會以以下方式顯示 .vue 文件： 安裝了 Vetur 後： VS Code 能夠根據文件的擴展名識別出文件中包含的程式碼類型。 在使用單文件元件（Single File Component）時，你可以將不同類型的程式碼混在同一個文件中，包括 CSS、JavaScript 和 HTML。...

有許多在線工具可以幫助您 lint 或格式化程式碼。本文列出了一些對 HTML、CSS 和 JavaScript 最有用的工具。 改進您的JavaScript程式碼的流行專案的官方在線版本 Prettier（格式化程式碼） https://prettier.io/playground/ ESLint（程式碼檢查工具） https://eslint.org/demo JSHint （程式碼檢查工具） http://jshint.com/ 其他語言的工具 CSS http://www.codebeautifier.com/ HTML http://htmlformatter.com/ JSON https://jsonformatter.curiousconcept.com/ https://jsonformatter.org/ GraphQL http://toolbox.sangria-graphql.org/format 通用工具（能處理不止一種語法） https://ctrlq.org/beautifier/

我已經使用 Safari 作為默認（也是唯一）的瀏覽器很長時間了。我不太記得有多少時間了，但我想應該超過 8 個月了。 現在，我可以寫一篇相當好的評論。 總結一下，Safari 是一個很棒的瀏覽器。 如果你使用 iPhone，也許還有 iPad 或 Apple Watch，換句話說，如果你投資於蘋果的設備生態系統，我會說 Safari 是目前最好的瀏覽器。 在這篇文章中，我想告訴你為什麼我認為它很棒。 我不想說服你這一點。 這只是我的個人觀點。 用 Apple 帳號登錄 真的很棒。這是我最喜歡的 Apple 設備功能之一。許多應用程式和網站要求你創建帳號。這是一個繁瑣的過程：輸入電子郵件、生成密碼、將密碼/電子郵件組合存儲在密碼管理器中、確認電子郵件、登錄。有了 Apple 登錄功能，這些問題都解決了。只需點擊一個按鈕，完成了。而且你還可以選擇使用一個一次性電子郵件地址，每次登錄到不同的應用程式時，都可以使用不同的電子郵件地址，這樣你以後可以刪除該電子郵件地址，讓網站/應用程式無法向你發送煩人的電子郵件。如果要使用另一個設備登錄，只需再次點擊 Apple 登錄即可訪問你的帳戶，而不需要尋找你的登錄詳細信息。 Apple Pay 也很棒。你不需要在每次購買時填寫結帳表單並添加信用卡詳細信息，只需點擊使用 Apple Pay，就可以完成。在任何設備上都可以使用。越來越多的服務都添加了這種支付方式。 閱讀清單。你是否曾在手機上開始閱讀某事物，然後需要一種方法將其存儲起來以便以後閱讀？你會添加書簽嗎？將其添加到筆記或 Notion 中嗎？只需點擊“添加到閱讀清單”，以後可以在所有設備上訪問。 共享歷史記錄 和打開在其他設備上打開的選項卡。很多時候，我在 Mac 上開始閱讀某些內容，然後當我在外出時，只需在 iPhone 上打開即可，而無需使用其他同步工具，如閱讀清單。 性能和節能效果。所有瀏覽器都越來越消耗能源。通常，它們是我們在設備上使用的主要應用。Chrome 佔用太多內存。瀏覽器和 Electron 應用程序之間的組合，實際上浪費了我們 Mac 上的大量資源。Firefox 對我來說不是一個選擇，每次我嘗試使用它，過一段時間後，它就會占用 100% 的 CPU。不知道為什麼，這種情況已經持續了多年，我已經放棄了。Safari 是節能的，有助於延長電池壽命。 隱私。Safari 是以用戶為本設計的。因為製造它的公司從出售計算機和雲服務中獲利，而不是從你使用瀏覽器中獲利。其他瀏覽器製造商不同。他們需要從瀏覽器中獲取利潤。Firefox 通過與 Google 的交易將 Google 設為默認搜索引擎。而谷歌則通過將 Google 設為默認搜索引擎，將你引導到 Google 品牌和所有服務中來獲取收益。（谷歌還向蘋果支付費用以成為默認搜索引擎，但這不是他們的主要收入來源）。Chrome 是由全球最大的廣告公司製作的，他們會盡最大努力確保他們的廣告收入保持盡可能高。在這裡閱讀更多。而 Safari 則保護你的隱私，他們對於從廣告收入中炒作你沒有興趣。最近的廣告危機就是證明。 閱讀模式。在沒有廣告和其他干擾的情況下閱讀網頁，或者在不支持暗黑模式的情況下使用暗黑模式。 乾淨和極簡主義的設計。正確的按鈕放在正確的位置，然後界面消失，重要的東西-網站出現在你面前。 瀏覽體驗很棒。在 99% 的網站上沒有差異。也許有時你會發現某個網站使用了 Safari 沒有實現的功能。這是瀏覽器單一化的結果。Firefox 的衰落意味著 Chrome 有時是唯一被人們測試的瀏覽器。...

如何解決 useEffect 運行兩次的問題 React 18 於 2022 年 3 月發佈，改變了 useEffect() 的默認行為。 起初，我甚至沒有意識到這一點，這個改變被埋在了大量的新功能之中。 如果您的應用程式在升級到 React 18 後運作怪異，那是因為 useEffect 的默認行為變成運行兩次。 這只在開發模式下發生，但這是每個人構建應用程式的模式。 而且只在嚴格模式下發生，但這是使用 Vite、create-react-app 或 Next.js 構建的應用程式的默認模式。 造成這種情況有其原因。 這並不是您的程式碼有問題，而是 React 現在的運作方式。 唯一的解決辦法是禁用嚴格模式。 嚴格模式很重要，因此這只是一個臨時解決辦法，直到您修正了這個改變引入的任何問題。 在 Vite 中，請前往 src/main.jsx，從以下程式碼中刪除 <React.StrictMode> 包裝元件： import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode>, ) 改為： import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import '....

理由一，JavaScript是建構網站的主要語言。 網站是在網路上進行任何事情的頭號工具。每家公司都需要一個網站或電子商務網站，每個新業務也都會需要一個。 理由二，JavaScript是有史以來最受歡迎的語言之一。有很多部落格、課程和書籍可以幫助你解決任何問題。 理由三，相較於其他程式語言，JavaScript實際上非常容易學習和撰寫。 理由四，由於JavaScript的普及，你可以找到很多JavaScript開發人員的工作。 遠程工作越來越普遍，公司很難找到有能力的JavaScript開發人員，因此如果你正在尋找工作，這是一個完美的選擇！

了解為什麼不應該修改 JavaScript 物件的原型，以及應該做什麼 作為程式設計師，我們必須首先學會的技能之一就是如何尋找解決方案。 Google 是你的朋友。而大多時候，一個來自 2009 年的 StackOverflow 解答能夠完美解決你在 2019+ 的問題。 在該網站或個人部落格上，有時候我會看到一些修改內建物件原型的程式碼。 就像這個例子，它擴充了 Array 物件的原型，增加了一個 insert 方法： Array.prototype.insert = function(index, item) { this.splice(index, 0, item) } 這樣一來，你可以對任何陣列調用 insert() 方法： ['red', 'blue'].insert(0, 'yellow') 這樣很方便。你不需要定義這樣的函式，也不需要擔心作用域的問題，只需將它附加到 Array 物件上，這樣每個陣列都可以使用它。 但僅僅因為你能這麼做，並不意味著你應該這樣做。 這種方法有什麼問題呢？ 可能的衝突 假設你使用的一個函式庫實現了這樣的功能。而你引入的另一個函式庫也做了同樣的事情。可能這些方法稍有不同，看起來好像一切都順利，直到事情不好時。 你會有一個大問題，因為你無法修改這些函式庫，但你仍然希望使用它們。 未來護航你的程式碼 假設下一個 JavaScript 版本實作了 Array.insert 方法，但參數簽名不同。現在會發生什麼？你需要回頭重寫所有的程式碼。也許是為了一個你不再工作的客戶。 或者你可能在一個被其他人在他們自己的專案中使用的函式庫中這樣做，那就更糟糕了。 這種做法只會造成技術債務，並且很容易引發問題。 你應該做什麼？ 在程式庫檔案中創建一個函式，需要時導入它。不要修改你無法控制的對象。