@Javascript

動態 列表
@jdcdevloper

前端技術探秘-Nodejs的CommonJS規範實現原理 | 京東物流技術團隊

瞭解Node.js Node.js是一個基於ChromeV8引擎的JavaScript運行環境,使用了一個事件驅動、非阻塞式I/O模型,讓JavaScript 運行在服務端的開發平台,它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。Node中增添了很多內置的模塊,提供各種各樣的功能,同時也提供許多第三方模塊。 模塊的問題 為什麼要有模塊 複雜的

jdcdevloper 頭像

@jdcdevloper

昵稱 京東雲開發者

@icecreamlj

前端模塊化進化史:從全局 function 到 ES Modules

目前,前端開發已經離不開由 CommonJS、ES Modules 和 Webpack 構建的模塊化開發環境。無論是 JavaScript、CSS、圖片還是其他資源,都可以作為一個模塊來處理。那麼,模塊化究竟是如何發展到今天的呢? 全局函數模式 最初的前端模塊化嘗試是通過 全局函數來實現的。例如,在一個 util.js 文件中定義了一個變量 count 和一個工具函數 formatNumberWi

icecreamlj 頭像

@icecreamlj

昵稱 一顆冰淇淋

@fenanjiu

V8是如何執行JavaScript代碼的?

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

fenanjiu 頭像

@fenanjiu

昵稱 南玖

@fenanjiu

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

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

fenanjiu 頭像

@fenanjiu

昵稱 南玖

@skychx

⚡️ The Cost Of JavaScript (2017 - 2023) | JavaScript 性能優化之旅

如果你喜歡我的文章,希望點贊👍 收藏 📁 評論 💬 三連支持一下,謝謝你,這對我真的很重要! 吐槽時間 不知道從什麼時候開始,前端開始卷一些 “高端知識”,動不動就瀏覽器底層原理,V8 是如何運行的,倒不是説這些沒啥用,只是來勢洶洶好像不懂這些就不能糊頁面一樣。 我工作中和內核團隊與虛擬機團隊也合作過並諮詢過他們這些相關問題,大家的態度也很明確,面對這種千萬行代碼的大型工程項目,他們作為專業

skychx 頭像

@skychx

昵稱 鹵代烴

@jiavan

LayoutUnit & Subpixel Layout

LayoutUnit Subpixel Layout 引言 為了更好的支持移動端和 PC 端的縮放,WebKit 增加了subpixel layout(次像素/亞像素佈局)為此他們還改變了 rendering tree。一個次像素單元在 WebKit 內被稱為 LayoutUnit 用於取代之前使用整數來佈局一個元素在頁面中位置和大小。從 2013 年開始 WebKit 就已經開啓了這個 fla

jiavan 頭像

@jiavan

昵稱 Jiavan

@imouou_5a60be738882f

【快速開發App實戰】BUI高仿網易新聞App系列一、搭建App開發環境和工作空間

一. 搭建App開發環境和工作空間 前言 我們的目標是要做一個真實的案例, 着重通過BUI框架及其相關工具的使用, 結合原生打包平台, 幫助大家理解一個App的開發過程. 以最新網易新聞的App為例, 儘量只描述過程, 細節可以自行完善, 高仿得太過以假亂真, 會有侵權問題 ^_^. 文章會分為多個小章節, 知識點逐個講解的方式, 每天掌握一點點, 進步一點點. 文章首發都會在bui神速訂閲號,

@imouou_5a60be738882f

[分享]高仿網易新聞WebApp模板源碼下載

BUI-163網易新聞 大小: 6.27M 該App基於BUI Webapp框架+Dcloud構建. 僅供學習交流使用. 整個app開發過程記錄在這裏bui神速訂閲號. 快速開發App系列篇 預覽 交互1: 下拉刷新, 加載分頁 交互2: Tab嵌套交互 交互3: 欄目刪減自動更新 交互4: 底部tab的交互, 每個Tab裏面還有各自的交互 下載 源碼下載: https

@pingan8787

5個Chrome調試混合應用的技巧

對前端開發人員來説,Chrome 真是一個必備的開發工具,大到頁面展示,小到 BUG 調試/HTTP 抓包等,本文我將和大家分享自己做混合應用開發過程中經常用到的幾個調試技巧。 一、調試安卓應用 在進行混合應用開發過程中,經常需要在安卓應用中調試 H5 項目的代碼,這裏我們就需要了解安卓應用如何在 Chrome 上進行調試。 接下來簡單介紹一下,希望大家還是能實際進行調試看看: 1. 準備工

pingan8787 頭像

@pingan8787

昵稱 pingan8787

@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 頭像

@lxlu

昵稱 肥皂泡

@an_5cd4f637c2671

js一個正則匹配數字千位分隔符的位置(支持小數)

前言 在日常業務中,常會碰到產品要求數字展示千位分隔符的需求,本着學習鑽研,不做業務碼農的想法,嘗試着寫了一個單正則並且支持小數點的添加千位分隔符的方法。 直接上結果 就一行代碼 thousandBitSeparator = (num) = { return num?.toString().replace(/(?!\..)\B(?=(\d{3})+(\.|$))/g, ',') } 看看效果

an_5cd4f637c2671 頭像

@an_5cd4f637c2671

昵稱 安昊

@chenchaoyang666

RegExp基礎語法

匹配模式 創建正則表達式對象時,可以設置’m’、’i’、’g’這三個標誌,分別對應多行模式、不區分大小模式和全局模式三種 全局模式 g: 默認地,第一次匹配成功後,正則對象就停止向下匹配了。g 修飾符表示全局匹配(global),設置’g’標誌後,正則對象將匹配全部符合條件的結果,主要用於搜索和替換 console.log('1a,2a,3a'.replace(/a/,'b'));//'1b

chenchaoyang666 頭像

@chenchaoyang666

昵稱 愚者

@yinzhixiaxue

AntV G6 基礎元素詳解(React版)

一、初識 AntV G6 AntV G6 是螞蟻集團推出的專業級圖可視化引擎,適合構建關係圖譜、拓撲圖、流程圖等場景。相比其他圖形庫,G6 提供完整的佈局算法 和交互體系 ,開發者在 10 分鐘內即可搭建可交互的圖應用。 技術特點速覽: 支持 Canvas / SVG 雙渲染模式 內置 10+ 圖佈局算法 提供豐富的節點/邊類型 完善的文檔和 React 示例 二、節點(Nodes)完

yinzhixiaxue 頭像

@yinzhixiaxue

昵稱 銀之夏雪

@ifat3

利用window.postMessage()實現跨域消息傳遞(JavaScript)

説明 window.postMessage()方法可以安全地實現Window對象之間的跨域通信。例如,在一個頁面和它生成的彈出窗口之間,或者是頁面和嵌入其中的iframe之間。 通常情況下,不同頁面上的腳本允許彼此訪問,當且僅當它們源自的頁面共享相同的協議,端口號和主機(也稱為“同源策略”)。window.postMessage()提供了一個受控的機制來安全地規避這個限制(如果使用得當的話)。 一

ifat3 頭像

@ifat3

昵稱 毛瑞

@toopoo

利用html5的postmessage解決iframe跨域問題的庫cross-domain.js,使用超簡單

簡介 一個利用html5的跨域api postMessage解決一個系統中,多個iframe跨域通信交互的js庫。 github地址 :cross-domain 背景 最初公司只有一個系統來做銷售,隨着公司業務越來越多,搭建很多類似的系統(這些系統本來是沒有任何關係的,每個系統目前都非常複雜)。 由於目前公司戰略有調整,原來的銷售是針對某種產品,現在銷售工作要針對客户進行多產品的銷售促成,這樣一個

toopoo 頭像

@toopoo

昵稱 zhoutao

@toopoo

JSONP原理及JQUERY JSONP的使用

JSONP原理 JSON和JSONP   JSON(JavaScript Object Notation)是一種輕量級的數據交換格式。對於JSON大家應該是很瞭解了吧,不是很清楚的朋友可以去json.org上了解下,簡單易懂。   JSONP是JSON with Padding的略稱。它是一個非官方的協議,它允許在服務器端集成Scripttags返回至客户端,通過javascriptcallbac

toopoo 頭像

@toopoo

昵稱 zhoutao

@pxzsl

微信小程序的坑之wx.miniProgram.postMessage

工作中有個需求是小程序的網頁在關閉的時候,需要回傳給小程序一個參數 查閲小程序官方文檔,有這樣一個接口 wx.miniProgram.postMessage ,可以用來從網頁向小程序發送消息,然後通過 bindmessage 事件來監聽消息,如下是官方文檔描述 以下是代碼: // 網頁代碼 !DOCTYPE html html head meta charset="utf

pxzsl 頭像

@pxzsl

昵稱 pxzsl

@windseek

RN中webview的一些思考

遇到的坑:webview和h5通信時,會有一些延遲導致不能立即生效 具體描述:在使用react-native時,需要加載外部網頁,加載後,RN提供一個按鈕可以關閉網頁,但如果打開的是內部網頁就需要隱藏這個按鈕,h5代碼使用react寫的,在componentDidMount時,發送postmessage給客户端(RN),此時發現收不到,查閲react-native官方文檔後得已解決。

windseek 頭像

@windseek

昵稱 楊龍飛

@nut

如何回覆postMessage的消息

evt.origin為消息來源frame的location.origin evt.source為消息來源frame的window對象,通過evt.source.postMessage(message, evt.origin)即可回覆消息 需要特別注意的是frame unload時發送的消息,監聽方獲取到的evt.source為空,此時為不可回覆狀態,需要處理異常,否則會中斷代碼邏輯

nut 頭像

@nut

昵稱 堅殼

@angular4

postMessage 還能這樣玩

在日常工作中,消息通信是一個很常見的場景。比如大家熟悉 B/S 結構,在該結構下,瀏覽器與服務器之間是基於 HTTP 協議進行消息通信: 然而除了 HTTP 協議之外,在一些對數據實時性要求較高的場景下,我們會使用 WebSocket 協議來完成消息通信: 對於這兩種場景,相信大家都不會陌生。接下來,阿寶哥將介紹消息通信的另外一種場景,即父頁面與 iframe 加載的子頁面之間,如何進行消息通

angular4 頭像

@angular4

昵稱 阿寶哥

@steven_code

窗口間通信方案——postMessage

postMessage 是 html5 引入的 API,postMessage 方法允許來自不同源的腳本採用異步方式進行通信,其實同源不同頁面的腳本也可以採用 postMessage 方法進行通信。 介紹 發送數據 需要在接收數據窗口的全局對象下調用該方法。 targetWindow.postMessage(message, targetOrigin, [transfer]) targetWi

steven_code 頭像

@steven_code

昵稱 Steven