HTML5：現(xiàn)代網(wǎng)絡(luò)的基石。如今，在創(chuàng)建交互式圖像時，SVG 和 Canvas 通常是首選技術(shù)——Flash 已被遺忘，Silverlight 則成為網(wǎng)絡(luò)邊緣罕見的獨角獸，很少有人記得第三方插件。
每種技術(shù)的優(yōu)缺點都有詳細(xì)記錄，但簡而言之，SVG 更適合創(chuàng)建和處理交互式元素。這是因為 SVG 是一種基於 XML 的矢量格式，當(dāng)使用 <svg></svg> 標(biāo)籤將圖像加載到頁面中時，其中的每個元素都可以在 SVG DOM 中使用。
在本文中，我想向您介紹 GraphicsJS，這是一個基於 SVG 的全新強大的開源 JavaScript 繪圖庫（對於舊版 IE 版本，它具有 VML 備用方案）。我將首先快速介紹其基礎(chǔ)知識，然後藉助兩個簡短而精彩的示例來展示該庫的功能：第一個示例完全關(guān)於藝術(shù)，第二個示例說明如何在不到50 行代碼中編寫一個簡單的益智藝術(shù)遊戲。
關(guān)鍵要點
- GraphicsJS 是一個新的、強大的、開源的 JavaScript 繪圖庫，基於 SVG，並為舊版 IE 版本提供 VML 備用方案。它輕量級且靈活，具有豐富的 JavaScript API。
- 該庫由 AnyChart 發(fā)布，至少已在 AnyChart 的專有產(chǎn)品中使用三年來渲染圖表，確保其穩(wěn)健性。與 AnyChart 的 JavaScript 繪圖庫不同，GraphicsJS 可免費用於商業(yè)和非營利項目。
- GraphicsJS 具有跨瀏覽器兼容性，支持 Internet Explorer 6.0 、Safari 3.0 、Firefox 3.0 和 Opera 9.5 。它在舊版 IE 版本中以 VML 渲染，在所有其他瀏覽器中以 SVG 渲染。
- 該庫允許將圖形和動畫結(jié)合起來，示例包括動畫篝火、旋轉(zhuǎn)星系、降雨以及可玩的 15 拼圖遊戲。它還包含詳盡的文檔和全面的 API 參考。
- GraphicsJS 庫可用於創(chuàng)建交互式 Web 應(yīng)用程序，其功能包括圖層、漸變、圖案、事件處理和性能優(yōu)化。它還支持複雜的動畫和轉(zhuǎn)換，使其成為開發(fā)人員的多功能選擇。
為什麼選擇 GraphicsJS
有很多庫可以幫助開發(fā)人員使用 SVG：Rapha?l、Snap.svg 和 BonsaiJS，僅舉幾例最佳庫。這些庫各有優(yōu)缺點，但對其進(jìn)行徹底比較將是另一篇文章的主題。本文是關(guān)於 GraphicsJS 的，因此讓我解釋一下它有什麼優(yōu)點和特殊之處。
首先，GraphicsJS 輕量級且具有非常靈活的 JavaScript API。它實現(xiàn)了許多豐富的文本功能，以及一個與瀏覽器特定 HTML DOM 實現(xiàn)分離的虛擬 DOM。
其次，它是一個新的開源 JavaScript 庫，於去年秋季由 AnyChart（全球領(lǐng)先的交互式數(shù)據(jù)可視化軟件開發(fā)商之一）發(fā)布。 AnyChart 至少已使用 GraphicsJS 三年（自 AnyChart 7.0 發(fā)布以來）在其專有產(chǎn)品中渲染圖表，因此 GraphicsJS 已完全經(jīng)過實戰(zhàn)測試。 （免責(zé)聲明：我是 AnyChart 的研發(fā)主管和 GraphicsJS 的首席開發(fā)人員）
第三，與 AnyChart 的 JavaScript 繪圖庫不同，GraphicsJS 可免費用於商業(yè)和非營利項目。它在 GitHub 上根據(jù) Apache 許可證提供。
第四，GraphicsJS 具有跨瀏覽器兼容性，支持 Internet Explorer 6.0 、Safari 3.0 、Firefox 3.0 和 Opera 9.5 。它在舊版 IE 版本中以 VML 渲染，在所有其他瀏覽器中以 SVG 渲染。
最後，GraphicsJS 允許您將圖形和動畫完美地結(jié)合起來。查看其主要圖庫，其中包含動畫篝火、旋轉(zhuǎn)星系、降雨、程序生成的葉子、可玩的 15 拼圖遊戲等等。 GraphicsJS 在其詳盡的文檔和全面的 API 參考中包含更多示例。
GraphicsJS 基礎(chǔ)知識
要開始使用 GraphicsJS，您需要引用該庫並為繪圖創(chuàng)建一個塊級 HTML 元素：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>GraphicsJS Basic Example</title> </head> <body> <div id="stage-container" style="width: 400px; height: 375px;"></div> <??> <??> </body> </html>
然後，您應(yīng)該創(chuàng)建一個舞臺並在其中繪製一些內(nèi)容，例如矩形、圓形或其他形狀：
// 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);
以下是 CodePen 上的示例，我們在其中更進(jìn)一步並繪製了死亡聖器符號。
我們的第一幅傑作
填充、描邊和圖案填充
可以使用填充設(shè)置和描邊設(shè)置對任何形狀或路徑進(jìn)行著色。所有內(nèi)容都有描邊（邊框），但只有形狀和閉合路徑才有填充。填充和描邊設(shè)置非常豐富，您可以將線性或圓形漸變用於填充和描邊。此外，線條可以是虛線的，並且支持具有多種平鋪模式的圖像填充。但這都是您幾乎可以在任何庫中都能找到的相當(dāng)標(biāo)準(zhǔn)的內(nèi)容。使 GraphicsJS 具有特殊性的是其網(wǎng)格和圖案填充功能，它不僅允許您直接使用 32 種(!) 可用的網(wǎng)格填充圖案，還允許您輕鬆創(chuàng)建由形狀或文本組成的自定義圖案。
現(xiàn)在，讓我們看看究竟可以實現(xiàn)什麼！我將繪製一幅男人站在房子附近的簡筆劃，然後用不同的圖案和顏色填充來增強它。為了簡單起見，讓我們把它做成一幅幼稚的藝術(shù)畫（並儘量不要涉及到藝術(shù)粗野）。就是這樣：
// 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制框架
var frame = stage.rect(25, 50, 350, 300);
// 繪制房子
var walls = stage.rect(50, 250, 200, 100);
var roof = stage.path()
.moveTo(50, 250)
.lineTo(150, 180)
.lineTo(250, 250)
.close();
// 繪制一個人
var head = stage.circle(330, 280, 10);
var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
var kilt = stage.triangleUp(330, 320, 20);
var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);
查看 CodePen 上的結(jié)果。
如您所見，我們現(xiàn)在正在使用變量——所有在舞臺上繪製內(nèi)容的方法都會返回對所創(chuàng)建對象的引用，並且此鏈接可用於更改或刪除對象。
還要注意鍊式調(diào)用（例如 stage.path().moveTo(320, 330).lineTo(320, 340);）如何在 GraphicsJS 中隨處可見，它有助於縮短代碼。鍊式調(diào)用應(yīng)謹(jǐn)慎使用，但如果應(yīng)用得當(dāng)，它確實使代碼更緊湊且更易於閱讀。
現(xiàn)在，讓我們把這個塗色頁交給一個孩子，讓他們來塗色。因為即使是孩子也能掌握以下技術(shù)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>GraphicsJS Basic Example</title> </head> <body> <div id="stage-container" style="width: 400px; height: 375px;"></div> <??> <??> </body> </html>
這就是我們示例現(xiàn)在的外觀。
現(xiàn)在，我們有一幅高地人在蘇格蘭短裙旁邊，他站在他的磚砌城堡附近，屋頂是稻草的圖片。我們甚至可以冒險說這確實是一件我們想要獲得版權(quán)的藝術(shù)品。讓我們使用基於自定義文本的圖案填充來做到這一點：
// 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);
如您所見，這很容易做到：您創(chuàng)建一個文本對象的實例，然後在舞臺上形成一個圖案，並將文本放入圖案中。
查看 CodePen 上的彩色版權(quán)房屋/graphicsjs。
在不到 50 行代碼中創(chuàng)建一個益智藝術(shù)遊戲
在本文的下一部分，我想向您展示如何在不到 50 行代碼中使用 GraphicsJS 創(chuàng)建一個類似 Cookie Clicker 的遊戲。
遊戲名稱為“風(fēng)中清掃街道”，玩家扮演一名清道夫的角色，在秋天的多風(fēng)下午清掃街道。該遊戲使用 GraphicsJS 圖庫中程序生成的葉子示例中的一些代碼。
您可以在 CodePen（或文章結(jié)尾）上查看完成的遊戲。
圖層、zIndex 和虛擬 DOM
我們首先創(chuàng)建一個舞臺（如前所述），然後聲明一些初始變量：
// 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制框架
var frame = stage.rect(25, 50, 350, 300);
// 繪制房子
var walls = stage.rect(50, 250, 200, 100);
var roof = stage.path()
.moveTo(50, 250)
.lineTo(150, 180)
.lineTo(250, 250)
.close();
// 繪制一個人
var head = stage.circle(330, 280, 10);
var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
var kilt = stage.triangleUp(330, 320, 20);
var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);
對於這個遊戲，我們將使用圖層——GraphicsJS 中用於對元素進(jìn)行分組的對象。如果您想對元素應(yīng)用類似的更改（例如轉(zhuǎn)換），則必須對元素進(jìn)行分組。您可以在暫停模式下更改圖層（稍後將詳細(xì)介紹），這可以提高性能和用戶體驗。
在此演示中，我們使用圖層功能來幫助我們將葉子組合在一起，並避免它們覆蓋標(biāo)籤（它告訴我們清掃了多少葉子）。為此，我們創(chuàng)建一個標(biāo)籤，然後調(diào)用 stage.layer 方法，該方法創(chuàng)建舞臺綁定圖層。我們將此圖層的 zIndex 屬性設(shè)置為低於標(biāo)籤的 zIndex 屬性。
// 給圖片著色
// 精美的框架
frame.stroke(["red", "green", "blue"], 2, "2 2 2");
// 磚墻
walls.fill(acgraph.hatchFill('horizontalbrick'));
// 草屋頂
roof.fill("#e4d96f");
// 格子呢裙
kilt.fill(acgraph.hatchFill('plaid'));
執(zhí)行此操作後，無論我們在圖層中創(chuàng)建多少葉子，我們都可以確保它們不會覆蓋文本。
轉(zhuǎn)換
接下來，讓我們添加一個函數(shù)來繪製我們的葉子。這將使用方便的 GraphicsJS 轉(zhuǎn)換 API，該 API 允許您移動、縮放、旋轉(zhuǎn)和剪切元素和元素組。當(dāng)與圖層和虛擬 DOM 結(jié)合使用時，這是一個非常強大的工具。
// 169 是版權(quán)符號的字符代碼 var text = acgraph.text().text(String.fromCharCode(169)).opacity(0.2); var pattern_font = stage.pattern(text.getBounds()); pattern_font.addChild(text); // 用圖案填充整個圖像 frame.fill(pattern_font);
您會看到每個路徑的創(chuàng)建方式相同，但隨後會進(jìn)行轉(zhuǎn)換。這將產(chǎn)生非常漂亮的隨機葉子圖案。
處理事件
GraphicsJS 中的任何對象、舞臺和圖層都可以處理事件。支持的事件的完整列表可在 EventType API 中找到。舞臺有四個特殊的事件來控制渲染。
在這個遊戲示例中，我們正在使用附加到葉子對象的事件偵聽器，以便用戶將鼠標(biāo)懸停在它們上時，它們會一個接一個地消失。為此，請將以下代碼添加到 drawLeaves 函數(shù)的底部，在 return 語句之前：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>GraphicsJS Basic Example</title> </head> <body> <div id="stage-container" style="width: 400px; height: 375px;"></div> <??> <??> </body> </html>
在這裡，我們還可以看到我們正在使用圖層來計算葉子。
// 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);
請注意，我們實際上並沒有在這裡存儲葉子的數(shù)量。由於我們將葉子添加到特定圖層並從中刪除葉子，因此這使我們能夠跟蹤我們有多少個子元素（以及因此還剩下多少葉子）。
GraphicsJS 提供了一個虛擬 DOM，它是 HTML DOM 的抽象，輕量級且與瀏覽器特定的 SVG/VML 實現(xiàn)分離。它對於執(zhí)行許多偉大的事情非常有用，例如跟蹤所有對象和圖層，對組應(yīng)用轉(zhuǎn)換以及在幫助下優(yōu)化渲染允許我們跟蹤和控制渲染過程的方法。
性能優(yōu)化
虛擬 DOM 以及事件處理程序允許 GraphicsJS 用戶控制渲染。性能文章可以幫助您了解這些內(nèi)容之間的關(guān)係。
在遊戲中生成葉子時，我們需要在添加新葉子時暫停渲染，並且只有在所有更改完成後才恢復(fù)渲染：
// 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制框架
var frame = stage.rect(25, 50, 350, 300);
// 繪制房子
var walls = stage.rect(50, 250, 200, 100);
var roof = stage.path()
.moveTo(50, 250)
.lineTo(150, 180)
.lineTo(250, 250)
.close();
// 繪制一個人
var head = stage.circle(330, 280, 10);
var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
var kilt = stage.triangleUp(330, 320, 20);
var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);
這種處理新元素的方法使新葉子幾乎可以立即出現(xiàn)。
最後，通過調(diào)用 shakeTree() 來啟動所有內(nèi)容。
// 給圖片著色
// 精美的框架
frame.stroke(["red", "green", "blue"], 2, "2 2 2");
// 磚墻
walls.fill(acgraph.hatchFill('horizontalbrick'));
// 草屋頂
roof.fill("#e4d96f");
// 格子呢裙
kilt.fill(acgraph.hatchFill('plaid'));
最終結(jié)果
查看 CodePen 上的街道清掃工/graphicsjs。
結(jié)論
向 HTML5 的轉(zhuǎn)變改變了網(wǎng)絡(luò)。當(dāng)涉及到現(xiàn)代 Web 應(yīng)用程序甚至簡單的網(wǎng)站時，我們經(jīng)常會遇到需要圖像處理的任務(wù)。雖然不可能找到在每種情況下都能很好工作的解決方案，但您應(yīng)該考慮 GraphicsJS 庫。它是開源的、健壯的，具有出色的瀏覽器支持和許多使其有趣、方便且當(dāng)然有用的功能。
我很樂意在下面的評論中聽到您對 GrphicsJS 的反饋。您是否已經(jīng)在使用它？您是否會考慮將其用於新項目？我很想知道原因，或者為什麼不使用它。我還正在編寫主要 JavaScript 繪圖庫列表以及將比較和對比所有這些庫的文章。也可以隨意指出您希望在那裡看到的功能。
進(jìn)一步閱讀的鏈接
- 常規(guī)信息
- SVG
- Canvas
- SVG 與 Canvas
- 庫
- GraphicsJS
- Rapha?l
- Snap.svg
- BonsaiJS
- GraphicsJS
- GitHub 上的 GraphicsJS
- GraphicsJS 文檔
- GraphicsJS API 參考
關(guān)於 GraphicsJS 的常見問題
GraphicsJS 與其他 JavaScript 圖形庫有何不同？
GraphicsJS 因其強大且輕量級的特性而脫穎而出。它是一個強大的庫，允許開發(fā)人員以高精度和高性能繪製和動畫化任何圖形。與其他庫不同，GraphicsJS 提供了一套全面的功能，包括圖層、漸變、圖案等等，而不會影響速度或效率。它還支持所有現(xiàn)代瀏覽器，使其成為開發(fā)人員的多功能選擇。
如何開始使用 GraphicsJS？
要開始使用 GraphicsJS，您需要在 HTML 文件中包含 GraphicsJS 庫。您可以從官方網(wǎng)站下載該庫，也可以使用 CDN。包含該庫後，您可以通過調(diào)用該庫提供的適當(dāng)函數(shù)和方法來開始創(chuàng)建圖形。
我可以使用 GraphicsJS 創(chuàng)建複雜的動畫嗎？
是的，GraphicsJS 旨在輕鬆處理複雜的動畫。它提供了一套豐富的動畫功能，包括緩動函數(shù)、延遲和持續(xù)時間設(shè)置。您可以動畫化圖形的任何屬性，例如其位置、大小、顏色等等。這使得 GraphicsJS 成為創(chuàng)建交互式和動態(tài)圖形的強大工具。
GraphicsJS 是否與所有瀏覽器兼容？
GraphicsJS 旨在與所有現(xiàn)代瀏覽器兼容，包括 Chrome、Firefox、Safari 和 Internet Explorer。它使用 SVG 和 VML 進(jìn)行渲染，所有這些瀏覽器都支持它們。這確保您的圖形在不同的平臺和設(shè)備上看起來一致且性能良好。
如何使用 GraphicsJS 創(chuàng)建漸變？
使用 GraphicsJS 創(chuàng)建漸變很簡單。您可以使用漸變方法定義線性或徑向漸變，指定顏色和位置，然後將漸變應(yīng)用於任何圖形。這使您可以輕鬆創(chuàng)建豐富多彩的圖形。
我可以使用 GraphicsJS 創(chuàng)建交互式圖形嗎？
是的，GraphicsJS 提供了一套事件處理功能，允許您創(chuàng)建交互式圖形。您可以將事件偵聽器附加到任何圖形，使您可以響應(yīng)用戶的操作，例如點擊、鼠標(biāo)移動等等。這使得 GraphicsJS 成為創(chuàng)建交互式 Web 應(yīng)用程序的絕佳選擇。
GraphicsJS 是否支持圖層？
是的，GraphicsJS 支持圖層，允許您將圖形組織到單獨的組中。每個圖層都可以獨立操作，從而更易於管理複雜的圖形。您還可以控制每個圖層的可見性和 z 順序，從而對圖形進(jìn)行細(xì)粒度控制。
如何使用 GraphicsJS 優(yōu)化我的圖形？
GraphicsJS 提供了幾項功能，可以幫助您優(yōu)化圖形。例如，您可以使用裁剪方法隱藏指定區(qū)域之外的圖形部分，從而減少所需的渲染量。您還可以使用緩存方法來存儲圖形的渲染輸出，從而提高經(jīng)常重新繪製圖形的性能。
我可以使用 GraphicsJS 創(chuàng)建圖表和圖形嗎？
雖然 GraphicsJS 不是專門為創(chuàng)建圖表和圖形而設(shè)計的，但其強大的繪圖和動畫功能使其可以創(chuàng)建任何類型的圖形，包括圖表和圖形。您可以使用庫的方法來繪製線條、曲線、矩形、圓形等等，從而創(chuàng)建各種圖表類型。
GraphicsJS 是否免費使用？
是的，GraphicsJS 是一個免費的開源庫。您可以在項目中免費使用它。該庫也得到了積極維護(hù)，確保它與最新的 Web 標(biāo)準(zhǔn)和技術(shù)保持同步。
以上是介紹Graphicsjs，一個功能強大的輕量級圖形庫的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
垃圾收集如何在JavaScript中起作用？
Jul 04, 2025 am 12:42 AM
JavaScript的垃圾回收機制通過標(biāo)記-清除算法自動管理內(nèi)存，以減少內(nèi)存洩漏風(fēng)險。引擎從根對像出發(fā)遍歷並標(biāo)記活躍對象，未被標(biāo)記的則被視為垃圾並被清除。例如，當(dāng)對像不再被引用（如將變量設(shè)為null），它將在下一輪迴收中被釋放。常見的內(nèi)存洩漏原因包括：①未清除的定時器或事件監(jiān)聽器；②閉包中對外部變量的引用；③全局變量持續(xù)持有大量數(shù)據(jù)。 V8引擎通過分代回收、增量標(biāo)記、並行/並發(fā)回收等策略優(yōu)化回收效率，降低主線程阻塞時間。開發(fā)時應(yīng)避免不必要的全局引用、及時解除對象關(guān)聯(lián)，以提升性能與穩(wěn)定性。
如何在node.js中提出HTTP請求？
Jul 13, 2025 am 02:18 AM
在Node.js中發(fā)起HTTP請求有三種常用方式：使用內(nèi)置模塊、axios和node-fetch。 1.使用內(nèi)置的http/https模塊無需依賴，適合基礎(chǔ)場景，但需手動處理數(shù)據(jù)拼接和錯誤監(jiān)聽，例如用https.get()獲取數(shù)據(jù)或通過.write()發(fā)送POST請求；2.axios是基於Promise的第三方庫，語法簡潔且功能強大，支持async/await、自動JSON轉(zhuǎn)換、攔截器等，推薦用於簡化異步請求操作；3.node-fetch提供類似瀏覽器fetch的風(fēng)格，基於Promise且語法簡單
JavaScript數(shù)據(jù)類型：原始與參考
Jul 13, 2025 am 02:43 AM
JavaScript的數(shù)據(jù)類型分為原始類型和引用類型。原始類型包括string、number、boolean、null、undefined和symbol，其值不可變且賦值時復(fù)制副本，因此互不影響；引用類型如對象、數(shù)組和函數(shù)存儲的是內(nèi)存地址，指向同一對象的變量會相互影響。判斷類型可用typeof和instanceof，但需注意typeofnull的歷史問題。理解這兩類差異有助於編寫更穩(wěn)定可靠的代碼。
React與Angular vs Vue：哪個JS框架最好？
Jul 05, 2025 am 02:24 AM
選哪個JavaScript框架最好？答案是根據(jù)需求選擇最適合的。 1.React靈活自由，適合需要高度定制、團(tuán)隊有架構(gòu)能力的中大型項目；2.Angular提供完整解決方案，適合企業(yè)級應(yīng)用和長期維護(hù)的大項目；3.Vue上手簡單，適合中小型項目或快速開發(fā)。此外，是否已有技術(shù)棧、團(tuán)隊規(guī)模、項目生命週期及是否需要SSR也都是選擇框架的重要因素?？傊?，沒有絕對最好的框架，適合自己需求的就是最佳選擇。
JavaScript時間對象，某人構(gòu)建了一個eactexe，在Google Chrome上更快的網(wǎng)站等等
Jul 08, 2025 pm 02:27 PM
JavaScript開發(fā)者們，大家好！歡迎閱讀本週的JavaScript新聞！本週我們將重點關(guān)注：Oracle與Deno的商標(biāo)糾紛、新的JavaScript時間對象獲得瀏覽器支持、GoogleChrome的更新以及一些強大的開發(fā)者工具。讓我們開始吧！ Oracle與Deno的商標(biāo)之爭Oracle試圖註冊“JavaScript”商標(biāo)的舉動引發(fā)爭議。 Node.js和Deno的創(chuàng)建者RyanDahl已提交請願書，要求取消該商標(biāo)，他認(rèn)為JavaScript是一個開放標(biāo)準(zhǔn)，不應(yīng)由Oracle
立即在JavaScript中立即調(diào)用功能表達(dá)式（IIFE）
Jul 04, 2025 am 02:42 AM
IIFE（ImmediatelyInvokedFunctionExpression）是一種在定義後立即執(zhí)行的函數(shù)表達(dá)式，用於變量隔離和避免污染全局作用域。它通過將函數(shù)包裹在括號中使其成為表達(dá)式，並緊隨其後的一對括號來調(diào)用，如(function(){/code/})();。其核心用途包括：1.避免變量衝突，防止多個腳本間的命名重複；2.創(chuàng)建私有作用域，使函數(shù)內(nèi)部變量不可見；3.模塊化代碼，便於初始化工作而不暴露過多變量。常見寫法包括帶參數(shù)傳遞的版本和ES6箭頭函數(shù)版本，但需注意：必須使用表達(dá)式、結(jié)
處理諾言：鏈接，錯誤處理和承諾在JavaScript中
Jul 08, 2025 am 02:40 AM
Promise是JavaScript中處理異步操作的核心機制，理解鍊式調(diào)用、錯誤處理和組合器是掌握其應(yīng)用的關(guān)鍵。 1.鍊式調(diào)用通過.then()返回新Promise實現(xiàn)異步流程串聯(lián)，每個.then()接收上一步結(jié)果並可返回值或Promise；2.錯誤處理應(yīng)統(tǒng)一使用.catch()捕獲異常，避免靜默失敗，並可在catch中返回默認(rèn)值繼續(xù)流程；3.組合器如Promise.all()（全成功才成功）、Promise.race()（首個完成即返回）和Promise.allSettled()（等待所有完成）
什麼是緩存API？如何與服務(wù)人員使用？
Jul 08, 2025 am 02:43 AM
CacheAPI是瀏覽器提供的一種緩存網(wǎng)絡(luò)請求的工具，常與ServiceWorker配合使用，以提升網(wǎng)站性能和離線體驗。 1.它允許開發(fā)者手動存儲如腳本、樣式表、圖片等資源；2.可根據(jù)請求匹配緩存響應(yīng)；3.支持刪除特定緩存或清空整個緩存；4.通過ServiceWorker監(jiān)聽fetch事件實現(xiàn)緩存優(yōu)先或網(wǎng)絡(luò)優(yōu)先等策略；5.常用於離線支持、加快重複訪問速度、預(yù)加載關(guān)鍵資源及後臺更新內(nèi)容；6.使用時需注意緩存版本控制、存儲限制及與HTTP緩存機制的區(qū)別。
