@Javascript

Stories List
@beverly0

SegmentFault 思否技術週刊 Vol.73 — 如何有效地學習 JavaScript ?

本期技術週刊一起了解 Javascript,歡迎大家閲讀 ~ 文章推薦 手寫一個同步服務端時間的小工具 // jump__jump 在前端開發的過程中,開發者經常會用到 new Date() 來獲取當前時間,但是 new Date() 是獲取的當前操作系統的時間,由於用户可以修改當前電腦時間,所以它是不準確的。 大部分情況下,用户修改當前電腦時間都沒有什麼問題,但是當我們需要根據服務端傳遞的

beverly0 Avatar

@beverly0

Nickname 鹹口鍋包肉

@zzd41

使用 Socket.io 和 React 開發一個聊天應用

這篇文章是關於什麼的 相信大家對於 web 版的線上聊天室都不陌生,這篇文章主要講的就是如何使用 Socket.io 和 React 開發一下簡單的線上聊天應用。 所謂線上聊天應用,就是你給一個人或者一個羣發送一條消息,他們可以看到這條消息並且可以回覆。既簡單又複雜。 開發一個聊天室應用,你需要在新信息來到的時候及時的感知到。 通常來説,為了獲得服務端的信息,我們需要發送一個 HTTP 請求。但是

zzd41 Avatar

@zzd41

Nickname superZidan

@magnesium_5a22722d4b625

淺談 Javascript 閉包

微信公眾號搜索並關注:進二開物, 更多技術週刊,React 技術棧、JavaScript/TypeScript/Rust 等等編程語言慢慢等你發現... 什麼是閉包? 閉包的概念是有很多版本,不同的地方對閉包的説法不一 維基百科:在計算機科學中,閉包(英語:Closure),又稱詞法閉包(Lexical Closure)或函數閉包(function closures),是在支持頭等函數的

magnesium_5a22722d4b625 Avatar

@magnesium_5a22722d4b625

Nickname 進二開物

@beverly0

SegmentFault 思否技術週刊 Vol.76 — 破解 Javascript 玩法

本期技術週刊一起了解 Javascript,歡迎大家閲讀 ~ 文章推薦 淺談 Javascript 閉包 // magnesium 閉包的概念是有很多版本,不同的地方對閉包的説法不一 維基百科:在計算機科學中,閉包(英語:Closure),又稱詞法閉包(Lexical Closure)或函數閉包(function closures),是在支持頭等函數的編程語言中實現詞法綁定的一種技術。 MD

beverly0 Avatar

@beverly0

Nickname 鹹口鍋包肉

@lxlu

javascript 正則 高級用法

先簡單看幾個常用基礎標識符 ^ 匹配一個輸入或一行的開頭, /^a/ // 匹配"an A",而不匹配"An a" $ 匹配一個輸入或一行的結尾 /a$/ // 匹配"An a",而不匹配"an A" *匹配前面元字符0次或多次 /ba*/ // 匹配b,ba,baa,baaa,... +匹配前面元字符1次或多次 /ba+/ // 匹配ba,baa,baaa,... ? 匹配前面元字符0次

lxlu Avatar

@lxlu

Nickname 肥皂泡

@zxl20070701

postMessage

此方法可以用於實現跨源通信等,我們來演示如何實現在兩個窗口之間進行通信。 假設我們現在有兩個頁面:page1.html和page2.html, 他們的關係是通過iframe關聯起來的,就像這樣(下面是page1.html的內容): iframe id="receiver" src="./page2.html" width="300" height="100"/iframe 為了實現通信,首先你需要

zxl20070701 Avatar

@zxl20070701

Nickname zxl20070701

@jsliang

CSS 實例系列 - 02 - 2023 兔年祝福

Hello 小夥伴們早上、中午、下午、晚上和深夜好,這裏是 jsliang~ 新年新氣象,讓我們耍一個兔飛猛進的祝福吧: 這個是一個完整的線上小實例,小夥伴們可以填寫數據,服務器會用 Node.js 定期讀取數據: 填寫數據:https://kdocs.cn/l/cbmawranzvNL 效果查看:https://liangjunrong.github.io/ 例如你填的用户名稱是:

jsliang Avatar

@jsliang

Nickname jsliang

@zengh

【源碼&庫】在調用 createApp 時,Vue 為我們做了那些工作?

在使用Vue3時,我們需要使用createApp來創建一個應用實例,然後使用mount方法將應用掛載到某個DOM節點上。 那麼在調用createApp時,Vue再背後做了些什麼事情呢?今天就來扒一扒Vue3的源碼,看看調用createApp發生了些什麼。 大家好,這裏是田八的【源碼庫】系列,Vue3的源碼閲讀計劃,Vue3的源碼閲讀計劃不出意外每週一更,歡迎大家關注。 首發在掘金,如果想一起

zengh Avatar

@zengh

Nickname 田八

@dreamapplehappy

try/catch/finally:“前端的好厚米,我覺得你們不夠了解我呀~”

這篇文章想跟大家一起重新温習一下關於使用 try...catch 進行異常捕獲的一些知識點。為了提升大家的閲讀興趣,我們先來做三個小練習題,如果你都做對的話,那麼表明你這一部分的知識掌握的很熟練,可以不用讀這篇文章啦~ 如果做錯了某道題的話,説明我們還有一些知識點需要再次鞏固一下,話不多説,我們先來看看這三道題: function doTask () { try { con

dreamapplehappy Avatar

@dreamapplehappy

Nickname dreamapplehappy

@webinfoq

面試小冊:面試官經常問的十個棘手的 JavaScript 問題

1. 可變性 在 JavaScript 中有七種基本數據類型(string、number、boolean、undefined、symbol、bigint 和 null),這些都是不可變的。這意味着一旦分配了一個值,我們就無法修改它們,我們可以做的是將它重新分配給一個不同的值(不同的內存指針)。另一方面,其他數據類型(如 Object 和 Function)是可變的,這意味着我們可以修改同一內存指

webinfoq Avatar

@webinfoq

Nickname 破曉L

@meathill

使用 `postMessage` 跨域名遷移 `localStorage`

朋友的網站有個需求:要從 A 域名遷移到 B 域名。所有內容不變,只是更改域名。這個需求不復雜,理論上改下配置然後 301 即可。但這個網站是純靜態網站,用户數據都存在 localStorage 裏,所以他希望能夠自動幫用户把數據也遷移到新域名。 我們知道,localStorage 是按照域名存儲的,B 網站無法訪問 A 網站的 localStorage。所以我們就需要一些特殊的手段來實現需求。經

meathill Avatar

@meathill

Nickname Meathill

@dushigemi

GoGoCode 20行代碼實現 給所有的async函數添加try/catch

最近網上突然多了好多 給所有的async函數添加try/catch 的面試題,實現思路基本就是用 babel 正好最近也在學習 GoGoCode,就想到用 GoGoCode 實現一下 GoGoCode 是一個基於 AST 的 JavaScript/Typescript/HTML 代碼轉換工具,但相較於同類,它提供了更符合直覺的 API:一套類 JQuery 的 API 用來查找和處理 AST

dushigemi Avatar

@dushigemi

Nickname 灬都是個謎

@jamesfancy

Loading ... done

引子 在前面界面開發的過程中,為了增強在與後端交互過程中的用户體驗,通常會顯示 Loading 動畫。Loading 動畫會在與後端交互結束的時候關閉。這是一個很常規的需求,技術實現也不復雜。 showLoading(); axios.request(...) .then(...) .finally(() = hideLoading()); Node.js 和大部分瀏覽器都在 20

jamesfancy Avatar

@jamesfancy

Nickname 邊城

@immerse

熱點面試題:聊聊對 this 的理解?

前言 歡迎關注 『前端進階圈』 公眾號 ,一起探索學習前端技術...... 前端小菜雞一枚,分享的文章純屬個人見解,若有不正確或可待討論點可隨意評論,與各位同學一起學習~ 聊聊對 this 對象的理解? 定義 在執行上下文中的一個屬性,它指向最後一次調用這個屬性或方法的對象。通常有四種情況來判斷。 四種情況如下 1. 函數調用模式:當一個函數不是一個對象的屬性時,直接作為函數來調用時

immerse Avatar

@immerse

Nickname 沉浸式趣談

@sovitjs

好用的Web前端開發工具推薦

前端Web開發工具實際上是讓前端開發人員更高效輕鬆地構建前端佈局的軟件。在這些工具的幫助下,前端重複的工作變得簡單,從而加快了Web開發過程。 有許多前端Web開發工具可以滿足各種特定需求,例如HTML,CSS和JavaScript工具,代碼編輯工具,部署工具,原型和線框圖工具,安全工具等等。但是選擇適合自己項目的工具,必須對工具有所瞭解。 下面我們就介紹一些主流的Web前端開發工具: Vue.j

sovitjs Avatar

@sovitjs

Nickname 可視化PaaS開發

@banana_god

JavaScript的原型鏈詳解

最近在項目中經常遇到,且與同事經常探討關於js原型鏈的知識。發現其實很多工作經驗好多年的同事也記不太清楚原型鏈的整個環節,今天在這裏專門的把鏈圖畫出來,並且加以講解,希望能夠幫到更多前端的朋友。 原型鏈其實就是一個三角關係,如下圖所示,我們編寫了一個構造函數Student,通過構造函數創建了對象s1(const s1 = new Student()),也就是我們經常説的s1是構造函數Student

banana_god Avatar

@banana_god

Nickname _香蕉大神

@tanking

原生JavaScript實現的SPA單頁應用(hash路由)

什麼叫做SPA單頁應用 單頁Web應用 (single page web application,SPA) ,就是隻有一張Web頁面的應用,是加載單個HTML 頁面並在用户與應用程序交互時動態更新該頁面的Web應用程序。 單頁應用的説法是在JavaScript和AJAX技術比較成熟以後才出現的,指的是通過瀏覽器訪問一個網站時,只需要加載一個入口頁面,此後顯示的內容和數據都不會再刷新瀏覽器頁面。有了

tanking Avatar

@tanking

Nickname TANKING

@jdcdevloper

微前端框架single-spa子應用加載解析

作者:京東物流 寧衝 1 前言 什麼是微前端? 微前端是指存在於瀏覽器中的微服務。 本文主要通過對微前端框架single-spa的基座應用加載子應用的single-spa-vue函數庫進行分析,通過代碼維度分析讓大家瞭解在single-spa加載子應用的時候都做了哪些事情。如何通過優化single-spa-vue函數庫保持子應用的狀態。 由於是在代碼維度進行分析,要求讀者對single-sp

jdcdevloper Avatar

@jdcdevloper

Nickname 京東雲開發者

@bradenhan

如何獲取 fetch 返回數據

獲取 fetch 返回數據 Fetch API 提供了一個 JavaScript 接口,用於訪問和操縱 HTTP 管道的一些具體部分,例如請求和響應。 它還提供了一個全局 fetch() 方法,該方法提供了一種簡單,合理的方式來跨網絡異步獲取資源。 這種功能以前是使用 XMLHttpRequest 實現的。 由於以下原因,我們在判斷後端返回數據時候,如果 HTTP 狀態碼錯誤,可能判斷比較麻煩。

bradenhan Avatar

@bradenhan

Nickname 前端老兵

@wuwhs

「過程詳解」async await綜合題

前言 如果你之前跟我一樣一直對async await熟悉又陌生的話(熟悉是可能每天都在用,陌生是針對一些組合題又丈二和尚摸不着頭腦),不妨可以邊看邊練,總結規律,相信會逐漸清晰並有所得。本文對每個案例都詳細描述了代碼的執行流程,如有不妥歡迎指正。 async 函數return值 async函數默認會返回一個Promise對象,不管最後函數有沒有return值。但是針對具體的返回值情況,實際上表現會

wuwhs Avatar

@wuwhs

Nickname wuwhs

@jdcdevloper

帶你揭開神秘的javascript AST面紗之AST 基礎與功能

作者:京東科技 周明亮 AST 基礎與功能 在前端裏面有一個很重要的概念,也是最原子化的內容,就是 AST ,幾乎所有的框架,都是基於 AST 進行改造運行,比如:React / Vue /Taro 等等。 多端的運行使用,都離不開 AST 這個概念。 在大家理解相關原理和背景後,我們可以通過手寫簡單的編譯器,簡單實現一個 Javascript 的代碼編譯器,編譯後在瀏覽器端正常運行。 創建數字小

jdcdevloper Avatar

@jdcdevloper

Nickname 京東雲開發者