@Javascript

動態 列表
@jdcdevloper

帶你揭開神秘的Javascript AST面紗之Babel AST 四件套的使用方法

作者:京東零售 周明亮 寫在前面 這裏我們初步提到了一些基礎概念和應用: 分析器 抽象語法樹 AST AST 在 JS 中的用途 AST 的應用實踐 有了初步的認識,還有常規的代碼改造應用實踐,現在我們來詳細説説使用 AST, 如何進行代碼改造? Babel AST 四件套的使用方法 其實在解析 AST 這個工具上,有很多可以使用,上文我們已經提到過了。對於 JS 的 AST 大家已經

jdcdevloper 頭像

@jdcdevloper

昵稱 京東雲開發者

@ning_643b67be37ac3

3分鐘搞定:獲取 URL 查詢參數值

3分鐘搞定:獲取 URL 查詢參數值 在前端開發工作中,利用 URL 進行參數傳遞是一項十分常見的方法。在頁面跳轉時,通過 URL 攜帶某些信息,如狀態、id、區分頁面來源的字段值等。因此,學習瞭解如何獲取 URL 查詢參數值是很重要的。 js 代碼手擼 利用 JavaScript 代碼手擼一個函數,對 URL 查詢參數進行解析。這是方式靈活度高,可以進行更多個性化的操作。 const getSe

ning_643b67be37ac3 頭像

@ning_643b67be37ac3

昵稱 麒寧

@ning_643b67be37ac3

3分鐘搞定:瀏覽器本地存儲 Web Storage

寫在前面 瀏覽器本地存儲包括兩個對象:sessionStorage 和 localStorage,它們都是 Storage 的實例對象。 window.localStorage instanceof Storage; // true Web Storage 的基本使用 查-訪問數據:getItem() 方法。 增改-添加、修改數據:setItem() 方法。 刪-刪除數據:removeItem()

ning_643b67be37ac3 頭像

@ning_643b67be37ac3

昵稱 麒寧

@nanchengfe

一個神奇的小工具,讓URL地址都變成了"ooooooooo"

發現一個很有創意的小工具網站,如封面圖所示功能很簡單,就是將一個URL地址轉換為都是 ooooooooo 的樣子,通過轉換後的地址訪問可以轉換回到原始地址,簡單流程如下圖所示。轉換的邏輯有點像短鏈平台一樣,只不過這個是將你的URL地址變的很長長長長,但是看着都是 ooooooooo,很好奇是如何實現的,所以查閲了源碼,本文解讀其核心實現邏輯,很有趣且巧妙的實現了這個功能。 前置知識點 在正式開

nanchengfe 頭像

@nanchengfe

昵稱 南城FE

@ning_643b67be37ac3

3分鐘搞定:Flex 佈局

flex 佈局原理 全稱 flexible box,彈性佈局。 如何開啓:為元素添加 display: flex。 開啓 flex 佈局的元素,稱為 flex 容器(flex container),其子元素成為容器成員,稱為 flex 項目。 flex 佈局原理:通過給父盒子添加 display: flex,來控制盒子的位置和排列方式。 flex 佈局父盒子常見屬性 flex-direction

ning_643b67be37ac3 頭像

@ning_643b67be37ac3

昵稱 麒寧

@jinl9s27

JSONP的實現

1. 是什麼 JSONP全稱(Json with Padding);由Bob Ippolito於2005年提出。JSONP支持繞過同源策略共享數據。 由於同源策略,瀏覽器在發送Ajax請求時,只接收同域服務器響應的數據資源;JSONP是利用了 script 標籤的 src 屬性來實現跨域數據交互的,因為瀏覽器解析HTML代碼時,原生具有src屬性的標籤,瀏覽器都賦予其HTTP請求的能力,而且

jinl9s27 頭像

@jinl9s27

昵稱 JINL9s27

@jdcdevloper

“前端”工匠系列(一):合格的工匠,究竟該搞什麼 | 京東雲技術團隊

作者:京東零售劉偉東 此文為系列文章第一篇,為淺嘗輒止的引入,目的是為了讓前端從業人員及非從業但是對此領域感興趣的人對於”前端“是幹什麼的這個話題有個無門檻的瞭解。 “前端職能是什麼” 説起"前端",維基百科對這個技術角色的定位是“前端(英語:front-end)和後端(英語:back-end)是描述進程開始和結束的通用詞彙。 前端作用於採集輸入信息,後端進行處理。 計算機程序的界面樣式,視

jdcdevloper 頭像

@jdcdevloper

昵稱 京東雲開發者

@risejl

JavaScript 面向對象編程

面向對象編程 Object Oriented Programming 面向對象編程用對象把數據和方法聚合起來。 面向對象編程的優點 能寫出模塊化的代碼 能使得代碼更靈活 能提高代碼的可重用性 面向對象編程的原則 繼承(inheritance):子類/派生類從父類/基類/超類中派生,形成繼承結構 封裝(encapsulation):代碼的實現對用户不可見,例如調用 toUpperCa

risejl 頭像

@risejl

昵稱 Mitchell_C

@baozouai

偏愛console.log的你,肯定會覺得這個插件泰褲辣!

前言 毋庸置疑,要説前端調試代碼用的最多的,肯定是console.log,雖然我現在 debugger 用的比較多,但對於生產環境、小程序真機調試,還是需要用到 log 來查看變量值,比如我下午遇到個場景:選擇完客户後返回頁面,根據條件判斷是否彈窗: if (global.isXXX || !this.customerId || !this.skuList.length) return // 到

baozouai 頭像

@baozouai

昵稱 暴走

@wubomu

再見了 Redux、Recoil、MobX、Zustand、Jotai 還有 Valtio,狀態管理還可以這樣做?

堅持在一線寫前端代碼大概有七八年了,寫過一些項目,有過一些反思,越來越確信平日裏一直用得心安理得某些的東西也許存在着問題,比如:在 狀態管理 上一直比較流行的實踐 🙏,所以試着分享出來探討一下。 為什麼要告別 Redux、Recoil、MobX、Zustand、Jotai 還有 Valtio 今天流行的狀態管理庫有很多,尤其在 React 中。為了把問題説得清晰一些,我想以 React 中的幾個

wubomu 頭像

@wubomu

昵稱 烏柏木

@fenanjiu

從Babel開始認識AST抽象語法樹

前言 AST抽象語法樹想必大家都有聽過這個概念,但是不是隻停留在聽過這個層面呢。其實它對於編程來講是一個非常重要的概念,當然也包括前端,在很多地方都能看見AST抽象語法樹的影子,其中不乏有vue、react、babel、webpack、typeScript、eslint等。簡單來説但凡需要編譯的地方你基本都能發現AST的存在。 babel是用來將javascript高級語法編譯成瀏覽器能夠執行的語

fenanjiu 頭像

@fenanjiu

昵稱 南玖

@fenanjiu

V8是如何執行JavaScript代碼的?

前言 一般來講,電腦是不能直接運行我們的javascript代碼的,它需要一個翻譯程序將人類能夠理解的編程語言 JavaScript,翻譯成機器能夠理解的機器語言。目前市面上有很多種 JavaScript 引擎,諸如 SpiderMonkey、V8、JavaScriptCore 等。而由谷歌開發的開源項目 V8 是當下使用最廣泛的 JavaScript 虛擬機,全球有超過 25 億枱安卓設備,而這

fenanjiu 頭像

@fenanjiu

昵稱 南玖

@fenanjiu

一文搞懂V8引擎的垃圾回收機制

前言 我們平時在寫代碼的過程中,好像很少需要自己手動進行垃圾回收,那麼V8是如何來減少內存佔用,從而避免內存溢出而導致程序崩潰的情況的。為了更高效地回收垃圾,V8引入了兩個垃圾回收器,它們分別針對不同場景進行工作。 如果這篇文章有幫助到你,❤️關注+點贊❤️鼓勵一下作者,文章公眾號首發,關注 前端南玖 第一時間獲取最新文章~ 垃圾從何而來 我們先來搞清楚這些‘垃圾’是怎麼產生的 不管使用哪一

fenanjiu 頭像

@fenanjiu

昵稱 南玖

@hard_heart_603dd717240e2

Vue與VueComponent的關係

結論:VueComponent.prototype.__proto__ === Vue.prototype Vue與VueComponent的關係如圖所示: (圖一) 前提知識: 每個函數function都有一個prototype屬性,即顯式原型(屬性),它默認指向Object空對象, 每個實例對象都有一個__proto__屬性,即稱隱式原型(屬性)。 關係圖分析:

hard_heart_603dd717240e2 頭像

@hard_heart_603dd717240e2

昵稱 Hard heart

@dirackeeko

[JS] javascript中的原型鏈01 prototype&__proto__

先給出名詞的定義: 1、實例對象-被new出來對象稱之為實例對象 例如: const p1 = new Person() p1就是實例對象 2、普通對象-未經new,直接聲明的對象是普通對象 例如:const p2 = { name: "John" } p2就是普通對象 3、prototype, 中文翻譯:原型對象 4、__proto__ ,中文翻譯:原型 (英文可以讀作dunder

dirackeeko 頭像

@dirackeeko

昵稱 DiracKeeko

@jump_and_jump

讓 React 擁有更快的虛擬 DOM

Million.js 是一個非常快速和輕量級的 ( 4kb) 虛擬 DOM。框架可以通過包裝 React 組件來提升性能(該框架目前版本只兼容 React 18 及以上版本)。 先説結論:Million.js 適應的場景極其有限,但在特定場景下也大放異彩。 如何使用 Million.js 集成 React 中使用非常簡單。先進行安裝和編譯器配置。 安裝與配置 npm install million

jump_and_jump 頭像

@jump_and_jump

昵稱 jump__jump

@tangzhiyuan

Hexo + Butterfly 自定義頁腳

原文鏈接 :Hexo + Butterfly 自定義頁腳 推薦閲讀 基於 Hexo 從零開始搭建個人博客(一): 環境準備 基於 Hexo 從零開始搭建個人博客(二): 項目初識 基於 Hexo 從零開始搭建個人博客(三): 主題安裝 基於 Hexo 從零開始搭建個人博客(四): 基礎配置 基於 Hexo 從零開始搭建個人博客(五): 詳細配置 基於 Hexo 從零開始搭建個人博客(

tangzhiyuan 頭像

@tangzhiyuan

昵稱 唐志遠

@zzd41

在 React Router 中使用 JWT

hello 大家好,我是 superZidan,這篇文章想跟大家聊聊 在React Router 中使用 JWT ,如果大家遇到任何問題,歡迎 聯繫我 或者直接微信添加 superZidan41 在這篇文章中,我們將探討 JWT 身份校驗與 React 和 React-router 的無縫集成。 我們還將學習如何處理公共路由、受校驗保護路由,以及如何利用 axios 庫通過身份驗證令牌(token

zzd41 頭像

@zzd41

昵稱 superZidan

@hole

css面試題

盒模型 常見的盒模型有w3c盒模型(又名標準盒模型)box-sizing:content-box和IE盒模型(又名怪異盒模型)box-sizing:border-box。 標準盒子模型:寬度=內容的寬度(content)+ border + padding + margin 低版本IE盒子模型:寬度=內容寬度(content+border+padding)+ margin css3 新

hole 頭像

@hole

昵稱 Hole

@fenanjiu

【webpack系列】從核心概念到上手配置

前言 作為前端開發者,相信大家或多或少都接觸過webpack,現如今webpack已經滲透在了前端的各個方面,所以我們有必要來了解並學習webpack,webpack 是一種用於構建 JavaScript 應用程序的靜態模塊打包器,它能夠以一種相對一致且開放的處理方式,加載應用中的所有資源文件(圖片、CSS、視頻、字體文件等),並將其合併打包成瀏覽器兼容的 Web 資源文件。webpack相比其它

fenanjiu 頭像

@fenanjiu

昵稱 南玖