AST，真香
豆皮粉兒們，又見面了，今天這一期，由字節跳動數據平台的太郎醬，帶大家走進AST的世界。 作者：太郎醬 什麼是AST 抽象語法樹（Abstract Syntax Tree, AST），是源代碼的抽象語法結構的樹狀表示，與之對應的是具體語法樹；之所以是抽象的，是因為抽象語法樹並不會表示出真實語法中出現的每一個細節，而且是文法無關、不依賴於語言的細節；可以把AST想象成一套標準化的編程語言接口定義，只不
Nickname 豆皮範兒
@Javascript
Contributes369
Followers0
Contributes
@Javascript
Stories List
手把手帶你走進Babel的編譯世界
作者：BoBoooooo 前言 談及 Babel,必然離不開 AST。有關 AST 這個知識點其實是很重要的，但由於涉及到代碼編譯階段，大多情況都是由各個框架內置相關處理，所以作為開發(使用)者本身，往往會忽視這個過程。希望通過這篇文章，帶各位同學走進 AST，藉助 AST 發揮更多的想象力。 AST 概述 想必大家總是聽到 AST 這個概念，那麼到底什麼是 AST？ AST 全稱是是 Abs
Nickname 雲音樂技術團隊
編寫babel的插件
前言 Babel 是一個通用的多功能的 JavaScript 編譯器，讓一些新版本的語法或者語法糖可以在低版本的瀏覽器上跑起來。 它有三個主要處理步驟 Parse - Transform - Generate。 在 Transform 轉換過程中通過將插件（或預設）應用到配置文件來啓用代碼轉換。 AST 編寫 Babel 插件非常複雜，需要有相當的基礎知識，在講插件之前必須得提起 AS
Nickname 小皇帝James
GoGoCode 20行代碼實現 給所有的async函數添加try/catch
最近網上突然多了好多 給所有的async函數添加try/catch 的面試題，實現思路基本就是用 babel 正好最近也在學習 GoGoCode，就想到用 GoGoCode 實現一下 GoGoCode 是一個基於 AST 的 JavaScript/Typescript/HTML 代碼轉換工具，但相較於同類，它提供了更符合直覺的 API：一套類 JQuery 的 API 用來查找和處理 AST
Nickname 灬都是個謎
抽象語法樹AST必知必會 | 京東物流技術團隊
1 介紹 AST 打開前端項目中的 package.json，會發現眾多工具已經佔據了我們開發日常的各個角落，例如 JavaScript 轉譯、CSS 預處理、代碼壓縮、ESLint、Prettier 等。這些工具模塊大都不會交付到生產環境中，但它們的存在於我們的開發而言是不可或缺的。 Babel，Webpack，Vue-cli 和 EsLint 等很多的工具和庫的核心都是通過 Abstract
Nickname 京東雲開發者
一次基於AST的大規模代碼遷移實踐
作者：來自 vivo 互聯網大前端團隊- Wei Xing 在研發項目過程中，我們經常會遇到技術架構迭代更新的需求，通過技術的迭代更新，讓項目從新的技術特性中受益，但由於很多新的技術迭代版本並不能完全向下兼容，包含了很多非兼容性的改變（Breaking Changes），因此我們需要設計一款工具，幫助我們完成大規模代碼自動遷移問題。本文簡單闡述了基於 AST 的代碼遷移概念和大致流程，並通過代碼案
Nickname vivo互聯網技術
前端工程師復健筆記-JavaScript 核心深度複習-Promise及有關函數
Promise 詳解及常用方法對比 1. Promise 原理詳解 1.1 Promise 基本概念 Promise 是 JavaScript 中用於處理異步操作的對象，它代表一個異步操作的最終完成（或失敗）及其結果值。 // Promise 的三種狀態 const promise = new Promise((resolve, reject) = { // Pending 狀態（進行中）
Nickname Feng_Fanfan
關於 Angular 應用 Components 和 Directives 的實例化問題
同 Angular Module 不同，Angular Components 和 Directives 要實例化多次，每個出現在 HTML template 中的 markup 都會對應一次實例化。 此外，這些項的作用域也限定在它們被導入的 NgModule中，以防止兩個組件使用相同的選擇器時發生命名衝突。由於依賴注入(DI)行為的這種差異，需要區分一個包含組件和指令的 NgModule 和一個包
Nickname 註銷
vue動態組件綁定動態屬性和方法的小tips
當使用多 tab 內容頁時，動態組件是一件非常好用的利器。但是循環動態組件會有個問題，那就是不同組件綁定不同的屬性值和方法，全部寫在組件內固然是一種方法，就是不方便管理和查看，所以以下是單獨聲明的技巧小 tips。 切換的tabs常量 const TABS = [ { label: 'tab1', compo: 'RankingList', props: [
Nickname phoenixhg
使用瀏覽器的 Local Storage 真的安全嗎？
LocalStorage 是一個 HTML5 網絡存儲對象，用於將數據存儲在客户端——即本地，在用户的計算機上。 本地存儲的數據沒有到期日期，並且會一直存在，直到被刪除。 （相比之下，會話存儲是另一個 HTML5 網絡存儲 API，它會在瀏覽器關閉時刪除存儲的數據。） 本地存儲是純 JavaScript。 同樣，雖然它仍然在用户的設備上生成純文本文檔，但本地存儲也允許存儲多達 5MB 的數據（與
Nickname 註銷
ExpiredStorage-給localstroage增加超時功能 源碼解讀
https://www.npmjs.com/package... 這個庫拓展了localStroage。在設置item的時候，會另外再設置一個key用來存儲過期時間。當在取數據的時候判斷是否過期並且remove元素。 用法 expiredStorage = new ExpiredStorage(); // 60秒後過期 expiredStorage.setItem("test", "fo
Nickname 阿古達木
三種瀏覽器存儲方案，你還擔心數據無處放嗎
webStorage 基本概念 webStorage提供了兩種存儲方式，localStorage和sessionStorage。 localStorage是持久化存儲，不主動刪除存儲的內容會永久存在 sessionStorage為會話級存儲，關閉瀏覽器則銷燬 具體的區別在於 關閉網頁後重新打開，localStorage會保留，sessionStorage不會被保留 在頁面內實現跳轉，
Nickname 一顆冰淇淋
Vue 高德地圖 API Loca 如何使用 連接線圖層、脈衝連線圖層
Vue 高德地圖 API Loca 如何使用 連接線圖層、脈衝連線圖層 閲讀此文你需要已經瞭解並掌握的： 已經會使用常規地圖的生成方式 已經瞭解如何載入 Loca 插件 如果不瞭解，可以查看我之前的文章： 高德地圖 Vue 中 加載 數據可視化 Loca 的方式 如何使用高德地圖 API 做一個路線規劃應用，展示自定義路線 高德地圖 API Loca 3D動畫的説
Nickname KyleBing
瀏覽器存儲及JavaScript重寫LocalStorage方法實現瀏覽器本地存儲設置時間問題
最近遇到了用户登錄信息本地存儲的問題，所以需要對瀏覽器的localStorage的存儲時間進行設置，因此重寫localStorage方法並在此記錄。 瀏覽器幾個存儲總結： localStorage保存的數據（大小5M左右），以“鍵值對”的形式長期存在。也就是説，每一項數據都有一個鍵名和對應的值，所有的數據都是以文本格式保存。保存的數據沒有過期時間，直到手動去除。 sessionStorage
Nickname 很白的小白
cookie、session、web storage
cookie與session的區別 首先，使用cookie和session的目的都是為了跟蹤記錄用户狀態，因為http協議是無狀態的協議，而某些場景服務端需要記錄用户的狀態，如購物車，需要來識別具體的用户，服務端就為特定的用户創建特定的session，用於標識並跟蹤用户； 其次，cookie和session都是會話技術，session保存在服務端，cookie保存在客户端，服務端無法知道請求對應哪
Nickname beckyyyy
3分鐘搞定：瀏覽器本地存儲 Web Storage
寫在前面 瀏覽器本地存儲包括兩個對象：sessionStorage 和 localStorage，它們都是 Storage 的實例對象。 window.localStorage instanceof Storage; // true Web Storage 的基本使用 查-訪問數據：getItem() 方法。 增改-添加、修改數據：setItem() 方法。 刪-刪除數據：removeItem()
Nickname 麒寧
本地存儲封裝
前言 在項目中使用本地存儲(LocalStorage/SessionStorage)的場景有很多，如果有較多頻次的使用，則可以考慮簡單封裝一下。 封裝便利： 統一管理：如果視頻頻次將多，考慮將本地存儲全放到某一個文件夾中，避免後期混亂幾不好維護等問題； 序列化：存儲的時候轉字符串，使用的時候轉回來，通過公共方法處理即可，不用當使用的時候再逐個處理； 類型推斷：在實例化時傳入類型，在傳入和獲
Nickname 軒軒
當從localStorage中獲取數據時，如何做異常處理？
提出問題 下面的代碼在有初始值的情況下，能夠工作的很好，但是當localStorage中存在非法的數據時就會拋出異常，如果你的程序沒有做好異常處理，就會崩潰。 const todosStr = localStorage.getItem('todos') const todos = JSON.parse(todosStr) 分析問題 能夠拋出異常的位置在JSON.parse，當JSON.parse解
Nickname 熱飯班長
JS對象拷貝：深拷貝和淺拷貝
摘要：對象拷貝，簡而言之就是將對象再複製一份，但是，複製的方法不同將會得到不同的結果。 本文分享自華為雲社區《js對象深淺拷貝，來，試試看！》，作者： 北極光之夜。。 一.速識概念： 對象拷貝，簡而言之就是將對象再複製一份，但是，複製的方法不同將會得到不同的結果。比如直接給新變量賦值為一個對象： // 1.建一個對象 var obj = { name: "北極光之夜。",
Nickname 華為雲開發者聯盟
JavaScript原型鏈：從構造函數、原型、對象實例的關係説起
一開始看MDN的JavaScript指南，沒看明白。主要原因是關於構造函數（constructor）、原型（prototype）、對象實例（object, instance）之間關係的描述太少；直接就給我整個原型鏈讓我挺懵逼的。 於是靠百度來搞懂。我覺得先從這三者關係入手，然後回頭理解原型鏈更容易。 相關資料： （側重關係）構造函數、對象實例、原型對象三者之間的關係 （側重原型鏈
Nickname BENCJL
js面向對象編程，你需要知道這些
javascript中對象由key和value組成，key是標識符，value可以為任意類型 創建對象的方式 1、通過構造函數 var obj = new Object() obj.name = 'alice' obj.age = 18 2、通過字面量 var obj = { name: 'alice', age: 18 } 屬性描述符 對屬性進行精準的操作，比如定義屬性是否可被刪除、遍歷或修
Nickname 一顆冰淇淋
JavaScript 之原型、原型鏈
前言 其他編程語言如 Java 等使用 new 命令時，都會調用“類”的構造函數。但是，JavaScript沒有“類”，本身並不提供一個 class 實現（雖然在ES6中提供了class 關鍵字，但其只是語法糖，JavaScript仍然是基於原型的）。於是，JavaScript作了一個簡化的思想，new 命令後面跟的不是類，而是構造函數，用構造函數生成實例對象，但其缺點是無法共享屬性和方法。於是
Nickname 雲魚
js判斷兩個對象是否相等
1.首先要先有兩個對象，如下舉例： var obj1 = { name:"xx", sex:"man", age:18 } var obj2 = { name:"xxs", sex:"man", age:18 } 2.判斷兩個對象是否相等： function isObjectValueEqual (a, b) { //取對象a和b的屬性名 var aPro
Nickname 墨城
2024-2025, 四大翻譯工具與AI翻譯的深度評測
前言 在過去兩年中，人工智能技術的迅猛發展對翻譯工具產生了深遠的影響。 本期特意挑選了四款翻譯工具以及一個AI翻譯工具， 對其性能進行評測，看看在AI技術的加持下，它們的質量提升如何。 以下是參賽選手的簡介： 谷歌翻譯 谷歌翻譯自2006年推出以來，一直是全球最受歡迎的翻譯工具，穩居翻譯工具的領導地位。 必應翻譯 必應翻譯憑藉其穩定可靠的翻譯質量，以及與
Nickname AMIN