JavaScript

使用還是不使用？學習還是不學習？讓我們看看如何完全避免使用jQuery，以及保留使用它的原因。 無論你在JavaScript框架和庫方面有什麼偏好，jQuery在JavaScript生態系統中發揮了重要作用。 幾年前它更受歡迎，現在一些jQuery的需求已經被現代瀏覽器替代（幸運的是！），但這個JavaScript庫仍然被許多人使用。 為什麼jQuery一開始會變得如此受歡迎？首先，jQuery誕生於JavaScript應用程序還不是主流的年代。在2000年代初至中期，JavaScript主要用於賦予網頁中出現的幻燈片和其他小工具（如圖片庫、日期選擇器等）功能。如果過於複雜，JavaScript很難進行許多操作（當然，電腦當時也更慢）。 值得一提的是，jQuery並不是唯一的或第一個庫。那個時候其他庫也非常受歡迎，比如Mootools、YUI、Dojo Toolkit、Scriptaculous和Prototype。jQuery後來可能成為了那些庫中最著名的。 當時的瀏覽器存在許多互操作性問題。我們遇到了很多跨瀏覽器的怪異行為和標準化問題，而jQuery通過創建一個抽象層並處理所有解決方案來幫助我們。 jQuery允許你使用CSS選擇器語法來選擇DOM元素，它非常用戶友好且易於擴展。它使JavaScript動畫變得簡單。 同時，它還簡化了使用AJAX（及其跨瀏覽器差異）的操作，這在時下非常流行的術語中也為jQuery帶來了一定的知名度。 如今，我們已經沒有太多的瀏覽器兼容性問題了，Selectors API和Fetch使瀏覽器標準化了jQuery的兩個最佳功能。 jQuery肯定是一個充滿爭議的主題。有些人說jQuery是過時的遺物，有些人仍然每天使用它。有些人花時間撰寫「為什麼我們不需要jQuery」的文章。 在過去幾年中，它的使用率確實有所下降： 如今，JavaScript的面貌已經截然不同。但是，了解jQuery的用途仍然是有用的。 曾經使用jQuery的功能現在已經有了標準化的瀏覽器API 選擇DOM元素 jQuery的用法： $('.button') 現在我們可以使用Selectors API： document.querySelector('.button') 如果需要多個元素： document.querySelectorAll('.button') 等待DOM加載完成 jQuery的用法： $(document).ready(() => { //... }) DOM的做法： document.addEventListener("DOMContentLoaded", () => { //... }) 為DOM元素添加或移除類 jQuery的用法： el.addClass('big') el.removeClass('big') el.toggleClass('big') DOM的做法： el.classList.add('big') el.classList.remove('big') el.classList.toggle('big') 從DOM中移除元素 jQuery的用法： el.remove() DOM的做法： el.remove() （是的，沒有變化） 更改DOM元素的內容 jQuery的用法： el.text('Hello') el.html('Hello') el.text() el.html() DOM的做法： el.innerHTML = 'Hello' el.textContent = 'Hello' el.innerHTML el.textContent 選擇DOM元素的父元素 jQuery的用法： el.parent() DOM的做法：...

網頁開發一直在不斷演進，每年一月，我都喜歡停下腳步重新評估並觀察這個生態系統。 問題是：2022年初學者應該從哪裡開始學習，才能學到能找到工作的技能呢？ 地圖有變嗎？與去年有不同嗎？ 變革似乎需要很長的時間，但它們可以很微妙，有時候從一年到另一年事情會徹底變化，你甚至都意識不到。 因此，我開始撰寫這篇文章，指導您如何在網頁開發領域中導航。 對於想要跟上生態系統並保持相關性的開發人員來說，這也是很有用的。有什麼新東西你一定要學嗎？ 讓我們開始吧。 先說一下，這是一個高度主觀的路線圖。這不是一個列出了1000種不同技術的路線圖，然後就讓你淚流滿面地愁眉苦臉。 讓我為您挑選最好的技術，相信我，這樣您就可以停止無休止的分析，並繼續前進。 在網頁開發中，我們有3條路線： 前端開發人員 後端開發人員 全棧開發人員 這些角色之間的界線有點模糊。在這篇文章中，我將聚焦於全棧開發人員，這是我最喜歡的專業化領域——在這個領域中，您不需要專攻前端或後端，而是能夠創建出所有展示出來的內容。 積極忽略 首先，讓我們從我們將忽略的內容開始。 在這個路線圖中，我將忽略像UI/UX工程師、可訪問性和其他重要主題這樣更專業的範疇。這些完全是不同的職業，有自己獨特的學習路徑。 您不可能從一開始就假設您需要學習所有東西。 積極排除。 我們將忽略使用Web技術進行移動開發。那是一個完全不同的領域。我們還將忽略一切不屬於網頁開發的趨勢，而是不同類型的開發專業化，比如AI、數據科學、web3等等。 深入研究5個核心技術 我建議深入研究一組核心的5個技術： HTML CSS JavaScript React Next.js 這些5個技術按順序是您需要掌握的5個東西。 您可以用一只手數清楚。 其中3個是基礎。HTML、CSS、JavaScript。您無法避免它們。這些是我們的工具。 HTML定義了內容 CSS定義了我們希望內容呈現的樣子 JavaScript定義了行為 React是我在這裡的首個選擇。 React是一種簡化創建用戶界面的技術。 它以許多不同的方式讓我們的生活更輕鬆。 HTML、CSS和JavaScript沒有其他替代品，但您可以選擇使用其他東西，比如Svelte、Vue、Angular，但我選擇了React。 但是React非常流行，它有一個悠久的歷史和遺產，使它成為事實上的標準。它被使用得如此廣泛，以至於您可以找到一切，每個庫，大量的教程和課程，需要幫助時也不用擔心。 您可以賭一個替代品，但您還可以看看工作市場和React帶來的機會，並選擇它。 現在我們需要最後一個組件。一個網絡應用程序框架。 我們選擇了React，所以我們需要選擇一個與React配合的網絡應用程序框架。 在React和HTML/CSS/JavaScript三者之上，我選擇了Next.js，它可以讓React-based網站和應用程序的服務和前端無縫集成。 所以，我們共同使用的3個核心技術是HTML/CSS/JavaScript，最上面的是非常流行的UI庫React，再加上一個非常流行的框架Next.js。 現在還有更多的東西可以添加到這5個選擇中，但您需要從某個地方開始。 通過這5個選擇，您已經排除了很多其他可能分散注意力、讓您在成為網頁開發者的道路上分心的東西。 讓我再強調一下這個排除。至少在開始時忽略TypeScript。我知道你會一直聽到它，但它對你的旅程並不重要，你可以在未來的任何時候添加它。 JavaScript讓事情變得簡單得多，這對於保持動力至關重要。 從HTML和CSS開始 此時，開始學習並進行實驗。學習HTML，創建網頁。閱讀我的[HTML手冊](https://flaviocopes.com/page/html-handbook/）。多做練習。Codepen是一個很好的工具。 只是不要被“我使用CSS完成了這個”吸引住，有些人用CSS做了一些不可能的事情。我不知道他們是怎麼做到的，這是藝術（如果您喜歡，那很好，但在我們的旅程中不是很有用）。 至於CSS，學習基礎知識。閱讀我的[CSS手冊](https://flaviocopes.com/page/css-handbook/）。並立即開始學習Tailwind，這是一種非常實用且流行的將CSS應用於您的網頁的方法。 CSS可能很復雜，但Tailwind使它變得更簡單。相信我，我從事CSS已有 20 年，使用Tailwind讓我終於能夠在每個項目上都處理好事情。這也是其他很多人的感受。 您應該使用HTML和CSS/Tailwind創建哪些項目呢？嗯，從您的愛好和興趣開始。創建一些隨機的網頁，看看它們在瀏覽器中如何顯示。 創建一個有關狗的網頁，有關足球、橄欖球、棒球的網頁，有關您最喜歡的Netflix系列、最喜歡的音樂家的網頁，等等。重要的是進行實驗。 在HTML和CSS/Tailwind上別太花哨。它們是兔子洞。關於這兩者有很多東西要學。熟悉它們，使用它們來完成任務。 熟悉像VS Code這樣的編輯器，以及終端和Bash shell的基礎知識。學習Git來管理版本。它將為您節省很多時間和麻煩。 添加JavaScript 現在是學習JavaScript的時候了。下載並閱讀我的JavaScript初學者手冊。 HTML和CSS定義了內容和呈現方式，而JavaScript是一門程式語言。 使用JavaScript，我們可以開始玩樂。 基礎知識有點……無聊並且可能會令人困惑，因為有很多理論和新概念。但這是您在網頁開發中最常使用的東西。因此，掌握它是至關重要的。 逐步將JavaScript添加到您的網頁中。 使用JavaScript，您將能夠為您的網頁添加一些互動性。您將探索DOM，這是瀏覽器讓我們與頁面上的元素進行交互的方式。 您將創建您的第一個表單。 在創建第一個表單之後，您將需要將表單數據發送到某個地方。 想像一下，您建立了一個電子報註冊表單。您想要將電子郵件發送到某個地方以便存儲它。...

你可能對於像 React、Vue 或 Svelte 這樣的現代 JavaScript 框架中的屬性概念很熟悉。 注意：我之前寫過相關文章，你可以在 React Props、Vue Props 和 Svelte Props 找到這些文章。 屬性是我們將信息傳遞給組件的方式。這包括變數和函數。 Astro 組件 也支持屬性。 以下是如何使用它們。 假設你在 src/components/Hello.astro 中定義了一個 Hello 組件： <p>Hello！</p> 在使用組件時，你可以為它傳遞一個名為 name 的屬性，像這樣：<Hello name="Flavio" />，你可以使用以下語法在組件輸出中顯示名稱： <p>Hello {Astro.props.name}！</p> 通常，在組件的 frontmatter 部分使用對象解構將屬性提取到單獨的變量中，這在擁有複雜組件時很方便： --- const { name } = Astro.props --- <p>Hello {name}！</p> 下面是如何處理多個屬性，以支持這樣的使用方式：<Hello name="Flavio" message="歡迎" /> --- const { name, message } = Astro.props --- <p>{message} {name}！</p> 以這種方式，你可以為未設置的屬性提供默認值： --- const { name = '', message = 'Hello' } = Astro....

最近我在各種地方聽到很多關於Astro的討論，於是我決定去瞭解一下。 我有一個困擾：我討厭伺服器。我討厭管理伺服器，我討厭建立伺服器，我討厭必須擔心伺服器。安全性、維護、升級，這些都不是我喜歡的事情，除非是必需的。 這就是為什麼我喜歡使用像Netlify和Vercel這樣的平臺。我使用了很多靜態網站生成器，如Hugo、Next.js、SvelteKit和傳統的簡單HTML網站。 Astro看起來很有趣，因為它朝著這個方向前進，但有著不同的觀點。 以下是Astro對我來說主要的賣點： 它生成靜態網站，對我來說這是一大優點，因為我不想管理伺服器，而且我愛靜態網站。 它不依賴於特定的框架，這讓我在使用不同框架的不同網站時更靈活。 它似乎非常簡單，我喜歡簡單的東西。 它致力於盡可能少地將JavaScript發送到客戶端。 你知道，我看到自十多年來不斷有新的JavaScript框架出現，必須有一些顯著的不同才能出現。 我所看到的第一件事是，Astro是一個不依賴於框架的工具。在這個領域，它在JavaScript相關的領域是獨一無二的。Next.js和Gatsby是建立在React上的，SvelteKit是建立在Svelte上的，Nuxt是建立在Vue上的。 我可以使用Astro來創建一個使用React的網站，然後在另一個網站中使用Svelte或Vue，但可以重用我的Astro專業知識。如果需要，你還可以將不同框架混合使用在網站的不同部分。這並不是我在我的網站中想要做的事情，但對於各種場景來說可能很有用。 最終生成的是一個靜態的HTML網站。在瀏覽器中運行時不需要任何JavaScript庫，除非明確需要。 這是一種稱為以HTML為先，僅在需要時使用JavaScript的方法。 這很酷。我們使用JavaScript構建網站，但大部分工作在構建時完成。 它似乎使用了很多組合的概念，重用我們用其他庫（React/Vue/Svelte/*）構建的東西。 它還借用了其他項目中出現的一些好的想法，比如frontmatter、內置的MDX支持、作用域CSS和基於文件系統的路由。 Astro在2021年6月正式推出，自那時以來引起了很大的熱議。 讓我們來看看它到底是什麼。 我要使用Astro安裝幾個不同的Astro網站，這樣我們就可以看到不同的網站是如何構建的，從非常簡單的網站開始，然後逐步變得更複雜。 創建一個空文件夾，然後運行： npm init astro 這將提示您選擇一個起始模板： 選擇Minimal。等它完成後，運行： npm install 然後運行： npm run dev 在http://localhost:3000/上啟動本地開發伺服器。 選擇Minimal模板將生成一個非常簡單的網站。 現在讓我們創建另一個網站，選擇Blog模板。 以下是Finder中的項目結構： 所有模板默認使用Preact，它是類似React的庫，只是更快、更小。您可以使用Starter Kit選項來選擇其他框架。作為第二步，您可以選擇React、Solid、Svelte或Vue： 讓我們按下空格選擇Svelte（注意，您可以選擇多個框架）。這將生成一個簡單的單頁網站： 注意底部的小部件，帶有+和-按鈕的數字。這是一個Svelte組件。 現在讓我們來看看生成這三個網站的代碼。在查看代碼之前，請在VS Code中安裝Astro擴展： 這將對您的.astro文件應用正確的語法突出顯示。 我有說過.astro文件嗎？是的，因為這是任何Astro項目的構建塊。 我們有兩種不同類型的.astro文件：頁面和組件。 頁面是任何與路由相關的內容，例如/或/blog或/blog/hello-world。 組件是頁面使用的任何代碼，用於抽象或提取公共代碼。 我們將頁面放在src/pages中，將組件放在src/components中。與往常一樣，我們有一個public文件夾，用於存放需要直接訪問的任何文件，例如圖像或其他資源。 在.astro文件中，組織方式有點新穎，但我不想洩露太多，我們將在下一篇博文中看到，因為這是Astro簡短系列的開端。 以下是Astro系列中的文章： Astro組件 在Astro中構建可組合的佈局 Astro Props 將一個簡單的網站轉移到Astro 從網絡中提取數據在Astro

Babel 是 Web 開發者工具箱中令人驚艷的一員。它是一個很棒的工具，已經存在很長一段時間，但現在幾乎每個 JavaScript 開發者都依賴它，這種情況還會持續，因為 Babel 現在不可或缺，並為所有人解決了一個大問題。 Babel 簡介 安裝 Babel 一個示例 Babel 配置 Babel 預設 env 預設 react 預設 更多關於預設的資訊 使用 Babel 與 webpack 本文介紹的是 Babel 7，目前的穩定版本。 Babel 簡介 Babel 是一個很棒的工具，已經存在很長一段時間，但現在幾乎每個 JavaScript 開發者都依賴它，這種情況還會持續，因為 Babel 現在不可或缺，並為所有人解決了一個大問題。 哪個問題？ 這是每個 Web 開發者肯定都遇到過的問題：JavaScript 的某個特性在最新版本的瀏覽器中可用，但在舊版本中卻不行。或者 Chrome 或 Firefox 實現了它，但 Safari iOS 和 Edge 卻沒有。 例如，ES6 引入了箭頭函數： [1, 2, 3].map((n) => n + 1) 這在現代瀏覽器中都有支持。但 IE11 不支持它，也不支持 Opera Mini（怎么知道的？通過檢查 ES6 兼容性表）。 那麼你應該如何解決這個問題呢？你是應該放棄那些舊的/不兼容的瀏覽器，還是應該編寫舊的 JavaScript 代碼，讓所有用戶都開心？...

CommonJS 模組規範是 Node.js 中用於處理模組的標準。模組非常方便，因為它們允許你封裝各種功能並將這些功能作為庫暴露給其他 JavaScript 文件。 CommonJS 模組規範是 Node.js 中用於處理模組的標準。 在瀏覽器中運行的客戶端 JavaScript 使用另一種標準，稱為 ES Modules。 模組非常方便，因為它們允許你封裝各種功能並將這些功能作為庫暴露給其他 JavaScript 文件。它們讓你可以創建明確分離且可重用的功能片段，每個片段都可以單獨進行測試。 巨大的 npm 生態系統是基於這種 CommonJS 格式構建的。 導入模組的語法如下： const package = require('module-name') 在 CommonJS 中，模組是同步加載的，並且按照 JavaScript 運行時找到它們的順序進行處理。這個系統是為了服務器端 JavaScript 而設計的，並不適用於客戶端（這就是為什麼引入了 ES Modules 的原因）。 當一個 JavaScript 文件導出其定義的一個或多個符號（變量、函數、對象）時，它就是一個模組： uppercase.js exports.uppercase = (str) => str.toUpperCase() 任何 JavaScript 文件都可以導入並使用該模組： const uppercaseModule = require('uppercase.js') uppercaseModule.uppercase('test') 你可以導出多個值： exports.a = 1 exports.b = 2 exports.c = 3 並使用 解構賦值 個別導入它們： const { a, b, c } = require('....

了解DataView物件及其使用方法 DataView是一個對ArrayBuffer的視圖，類似於Typed Arrays，但是在這種情況下，數組中的項目可以具有不同的大小和類型。 以下是一個例子： const buffer = new ArrayBuffer(64) const view = new DataView(buffer) 因為這是對緩衝區的視圖，我們可以指定從哪個字節開始，以及長度： const view = new DataView(buffer, 10) //從第10個字節開始 const view = new DataView(buffer, 10, 30) //從第10個字節開始，添加30個項目 如果不添加這些附加參數，則該視圖從位置0開始，並加載緩衝區中的所有字節。 我們可以使用一組方法將數據添加到緩衝區中： setInt8() setInt16() setInt32() setUint8() setUint16() setUint32() setFloat32() setFloat64() 這是如何調用其中一個方法的示例： const buffer = new ArrayBuffer(64) const view = new DataView(buffer) view.setInt16(0, 2019) 默認情況下，數據使用big endian表示。您可以通過添加第三個帶有true值的參數來覆蓋此設置並使用little endian： const buffer = new ArrayBuffer(64) const view = new DataView(buffer) view.setInt16(0, 2019, true) 以下是如何從視圖中獲取數據：...

ECMAScript 是 JavaScript 的基礎標準，通常簡稱為 ES。探索有關 ECMAScript 及其最新功能的所有內容。 TC39 是什麼？ ES 版本 ES Next 無論你在哪裡讀到關於 JavaScript 的內容，你總會看到這些術語之一： ES3 ES5 ES6 ES7 ES8 ES2015 ES2016 ES2017 ECMAScript 2015 ECMAScript 2016 ECMAScript 2017 ECMAScript 2018 ECMAScript 2019 這些代表什麼意思呢？ 它們都指的是 ECMAScript 這個標準。 ECMAScript 是JavaScript 的基礎標準，通常簡稱為 ES。 除了 JavaScript，其他的語言也實現了 ECMAScript，包括： ActionScript（Flash 腳本語言），由於 Flash 將於 2020 年正式停用，因此其受歡迎程度不斷下降。 JScript（微軟腳本方言），由於當時只有 Netscape 支援 JavaScript，網路瀏覽器戰爭正如火如荼進行中，微軟不得不為 Internet Explorer 建立自己的版本。 但當然最受歡迎和廣泛使用的 ECMAScript 實現是 JavaScript。 為什麼會有這個奇怪的名字？Ecma 国际是一家位於瑞士的標準協會，負責制定國際標準。 當 JavaScript 誕生時，由 Netscape 和 Sun Microsystems 提交給 Ecma，並被命名為 ECMA-262，別名為 ECMAScript。...

ECMAScript是JavaScript的標準，通常縮寫為ES。了解有關ECMAScript的一切，以及ES2016（又稱ES7）中新增的功能。 Array.prototype.includes() 指數運算子 ES2016，官方稱為ECMAScript 2016，於2016年6月定案。 相較於ES2015，ES2016只是JavaScript的一個小型更新，僅包含兩個功能： Array.prototype.includes 指數運算子 Array.prototype.includes() 此功能引入了一種更易讀的語法，用於檢查數組是否包含元素。 在ES6及更低版本中，要檢查數組是否包含元素，需要使用indexOf函數，它會檢查元素的索引，如果元素不存在，則返回-1。 因為-1被評估為真值，所以無法做以下操作： if (![1,2].indexOf(3)) { console.log('未找到') } 有了ES2016中引入的這個功能，我們可以這樣做： if (![1,2].includes(3)) { console.log('未找到') } 指數運算子 指數運算子**相當於Math.pow()，但將其作為語言的一部分引入，而不是作為庫函數。 Math.pow(4, 2) == 4 \*\* 2 對於需要進行數學運算的JS應用程序來說，這個功能是一個不錯的補充。 **運算子在許多語言中都被標準化，包括Python、Ruby、MATLAB、Lua、Perl等等。

ECMAScript是JavaScript的基礎標準，通常縮寫為ES。了解有關ECMAScript的所有內容，以及ES2017（也稱為ES8）中加入的功能。 字串填充 Object.values() Object.entries() getOwnPropertyDescriptors() 這有什麼用處？ 尾部逗號 Async函式 它們的好處 快速示例 連續使用多個Async函式 共享內存和原子操作 ECMAScript 2017是ECMA-262標準的第8版（也常簡稱為ES2017或ES8），於2017年6月定案。 與ES6相比，ES8針對JavaScript來說是一個很小的更新，但它仍然引入了非常有用的功能： 字串填充 Object.values() Object.entries() Object.getOwnPropertyDescriptors() 函式參數列表和呼叫中的尾部逗號 Async函式 共享內存和原子操作 字串填充 字串填充的目的是將字符添加到字串中，使其達到特定長度。 ES2017引入了兩個String方法：padStart()和padEnd()。 padStart(targetLength [, padString]) padEnd(targetLength [, padString]) 範例用法： padStart() ‘test’.padStart(4) ‘test’ ‘test’.padStart(5) ’ test’ ‘test’.padStart(8) ’ test’ ‘test’.padStart(8, ‘abcd’) ‘abcdtest’ padEnd() ‘test’.padEnd(4) ‘test’ ‘test’.padEnd(5) ‘test ’ ‘test’.padEnd(8) ‘test ’ ‘test’.padEnd(8, ‘abcd’) ‘testabcd’ Object.values() 此方法返回包含所有對象自有屬性值的陣列。 用法： const person = { name: 'Fred', age: 87 } Object.values(person) // ['Fred', 87] Object....