@Javascript

Stories List
@steven_code

窗口間通信方案——postMessage

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

steven_code Avatar

@steven_code

Nickname Steven

@gfeteam

一文讀懂對JavaScript函數式編程的初認識

背景      函數式編程可以説是非常古老的編程方式,但是近幾年變成了一個非常熱門的話題。不管是Google力推的Go、學術派的Scala與Haskell,還是Lisp的新語言Clojure,這些新的函數式編程語言越來越受到人們的關注。函數式編程思想對前端的影響很大,Angular、React、Vue等熱門框架一直在不斷通過該思想來解決問題。      函數式編程作為一種高階編程範式,更接近於數

gfeteam Avatar

@gfeteam

Nickname GFE團隊

@qinglong_62898aa51988d

聊聊原型鏈與繼承

前言 原型鏈與繼承、作用域與閉包、單線程與異步並稱為前端的三座大山,均屬於 JavaScript 中基礎卻又十分複雜的部分,而且面試中也經常問到。 今天,我們就來詳細介紹一下原型鏈與繼承,聊聊它的概念、作用與用法。 如果掘友對此部分已經學過只是略微遺忘,可直接跳轉至原型鏈圖片看圖複習。 下面,讓我們循序漸進的介紹下原型鏈與繼承。 認識原型 在我們創建函數的同時,都會自動為其創建一個 prototy

@cloudyttt

JavaScript 之原型、原型鏈

前言 其他編程語言如 Java 等使用 new 命令時,都會調用“類”的構造函數。但是,JavaScript沒有“類”,本身並不提供一個 class 實現(雖然在ES6中提供了class 關鍵字,但其只是語法糖,JavaScript仍然是基於原型的)。於是,JavaScript作了一個簡化的思想,new 命令後面跟的不是類,而是構造函數,用構造函數生成實例對象,但其缺點是無法共享屬性和方法。於是

cloudyttt Avatar

@cloudyttt

Nickname 雲魚

@cloudyttt

JSONP 跨域原理及實現

前言 在日常項目開發過程中,跨域以及如何解決跨域問題是前後端開發同學繞不開的話題。JSONP 跨域就是一種經典的解決跨域問題的方案。 💡温馨提示:本文全文 1921 個字,推薦閲讀時間 10min ,加油老鐵! 一、同源策略和跨域 1.1 同源策略 1.1.1 什麼是同源 如果兩個頁面的協議,域名和端口都相同,則兩個頁面具有相同的源 例如,下表給出了相對於 http://www.test

cloudyttt Avatar

@cloudyttt

Nickname 雲魚

@gssggssg

JavaScript 閉包

概述 閉包就是指有權訪問另一個函數作用域中的變量的函數 概念 機制 當前函數執行,會形成一個私有的上下文,函數執行完後,當前執行上下文中的某些內容,被當前上下文以外的內容所佔用,那麼當前上下文就不能被釋放。 思路 函數執行 - 形成私有上下文環境。 函數執行完成 - 當前執行上下文環境中的某些內容,被當前執行上下文外的內容所引用。 當前執行上下文不能被釋放 - 當前執行上下文中的變量就不會

gssggssg Avatar

@gssggssg

Nickname 四冥

@aresn

View UI Plus 發佈 1.3.0 版本,新增 Space、$ImagePreview 組件

View UI Plus 1.3.0 版本已於 2022-06-21 發佈。 更新日誌 請到官網 www.iviewui.com 查看最新版。 新增間距組件 Space。 ImagePreview 新增下載圖片功能。 ImagePreview 新增屬性 toolbar,可選擇開啓的快捷功能並排序。 圖片預覽支持 $ImagePreview 實例化調用。 ImagePreview 新增拖

aresn Avatar

@aresn

Nickname Aresn

@lewyon

JavaScript中async和await的使用以及隊列問題

宏任務和微任務的隊列入門知識,可以參考之前的文章: JavaScript的事件循環機制 宏任務和微任務在前端面試中,被經常提及到,包括口頭和筆試題 async await概念 async 使用async關鍵字聲明的函數,是AsyncFunction構造函數的實例,在async函數體內,可以使用await接收promise實例 async和await關鍵字,在開發過程中,可以簡潔地去做

lewyon Avatar

@lewyon

Nickname 程序猿布歐

@huaihuaidedianti

JavaScript飛鳥中的新聖箭頭搭建函數:盤口如何使用二開Fat & Concise微投語法(下)

【TG_duoteJG】多特工作室傑哥duotee.com版權所有,禁止轉載 微信飛鳥箭頭搭建函數如何處理this關鍵字 關於微信飛鳥箭頭搭建函數要記住的盤口最重要的事情是它們處理this新聖飛鳥二開關鍵字的方式。特別是,this箭頭搭建函數內的盤口關鍵字不會反彈。 為了説明這意味着什麼,請查看下面的演示: [codepen_embed height=”300″ default_tab=”html

huaihuaidedianti Avatar

@huaihuaidedianti

Nickname 壞壞的電梯

@lewyon

javaScript原型和原型鏈

前言 在瞭解原型和原型鏈之前,我們先了解一部分概念,constructor,prototype,__proto__。 constructor 在之前判斷數據類型的文章: javaScript常見數據類型檢查校驗 有提到過關於構造函數的屬性constructor constructor 的是返回創建實例對象的 構造函數的引用,這個屬性的值是對函數本身的引用,而不是一個包含函數名稱的字符串 具體

lewyon Avatar

@lewyon

Nickname 程序猿布歐

@lewyon

JavaScript擴展原型鏈淺析

前言 上文對原型和原型鏈做了一些簡單的概念介紹和解析,本文將淺析一些原型鏈的擴展。 javaScript原型和原型鏈 http://lewyon.xyz/prototype.html 擴展原型鏈 使用new操作符 利用原型是對象的特性,實例化對象的時候,繼承多個構造函數的屬性和方法 兼容性:支持目前以及所有可想象到的瀏覽器 (IE5.5 都可以使用) function parent1(

lewyon Avatar

@lewyon

Nickname 程序猿布歐

@zhbhun

現代前端原生路由:Navigation API

原文:https://github.com/zhbhun/blo... Navigation API 是 Chrome 提出的一套導航 API,提供了操作和攔截導航的能力,以及對應用程序的歷史導航記錄進行訪問。這為 window.history 和 window.location 提供了一個更有用的替代品,特別是 SPA 這種模式。目前該 API 只有 Chromium 內核的瀏覽器才支持。 W

zhbhun Avatar

@zhbhun

Nickname zhbhun

@invalidnull

關於 Angular 應用 Components 和 Directives 的實例化問題

同 Angular Module 不同,Angular Components 和 Directives 要實例化多次,每個出現在 HTML template 中的 markup 都會對應一次實例化。 此外,這些項的作用域也限定在它們被導入的 NgModule中,以防止兩個組件使用相同的選擇器時發生命名衝突。由於依賴注入(DI)行為的這種差異,需要區分一個包含組件和指令的 NgModule 和一個包

invalidnull Avatar

@invalidnull

Nickname 註銷

@y0i1w

ECMAScript 2022(ES13)初體驗

2022 年 6 月 22 日,第 123 屆 ECMA 大會批准了 ECMAScript 2022 語言規範,這意味着它現在正式成為標準。下面就來看看 ECMAScript 2022 有哪些新特性! 新特性總覽 Top-level Await Object.hasOwn() at() error.cause 正則表達式匹配索引 類 ES14: Array.prototype

y0i1w Avatar

@y0i1w

Nickname 🦄Y0i1w

@hero123

理解JavaScript中的this

前言 相信很多人在初學JavaScript的時候都對this的指向問題感覺到比較迷惑。它不像PHP,Java語言中的this有很明確的指向,也不會讓人容易搞混。 在JavaScript中this就是函數調用的上下文,在JavaScript中有四種函數調用: 函數調用,例如alert('hello world') 方法調用,例如console.log('hello world') 構造

hero123 Avatar

@hero123

Nickname hero

@dexteryao

Chrome 103支持使用本地字體,純前端導出PDF優化

在前端導出PDF,解決中文亂碼一直是一個頭疼的問題。要解決這個問題,需要將ttf等字體文件內容註冊到頁面PDF生成器中。但是之前網頁是沒有權限直接獲取客户機器字體文件,這時就需要從服務器下載字體文件或者提示用户選擇字體文件上傳到頁面。對於動輒數十兆(M)的中文字體文件,網絡不好時並不是一個好的解決方案。 Chrome 103 Chrome 103版本中新的字體API可以讓web應用獲取到用户在本

dexteryao Avatar

@dexteryao

Nickname DexterYao

@yangrd

web-compiler:mvvm 的實現思路

最近一段時間留意到一個叫Svelte的前端框架,它與Vue 等前端框架的最大不同是採用了編譯的方案進行的實現,這是官網的介紹 Svelte 是一種全新的構建用户界面的方法。傳統框架如 React 和 Vue 在瀏覽器中需要做大量的工作,而 Svelte 將這些工作放到構建應用程序的編譯階段來處理。 與使用虛擬(virtual)DOM 差異對比不同。Svelte 編寫的代碼在應用程序的狀態更改時就

yangrd Avatar

@yangrd

Nickname yangrd

@qinglong_62898aa51988d

為什麼 shift 比 pop 慢?JS 中隊列的實現

我們知道在 JS 中,刪除數組元素有兩個方法:pop 與 shift,分別可以刪除末尾與開頭的元素。 然而同樣是刪除元素,它們的執行時間確實不同的。 當數組項目較多時,shift 的執行時間明顯長於 pop。 const test = (arrLength) = { let arr1 = [] console.time(`${arrLength}-arr1`) for (let i =

@shuirong1997

PWA 圖標顯示問題,兼顧 macOS、Windows、iPad

首先看macOS任務欄的圖標規律: 會發現第三個:YouTube Music(PWA版本)的圖標很不對勁,不是因為它是圓形,其他都是方形。而是它很大,寬高明顯大過其他圖標。在我對比了VSC和YouTube Music的圖標圖片之後發現了區別所在: 上面看不明顯的話,這麼對比看就明顯了: 解釋下,圖3是圖2在控制枱(F12)資源那裏顯示的圖片,之所以看這個是因為可

shuirong1997 Avatar

@shuirong1997

Nickname 林水溶

@icecreamlj

gulp使用指南

gulp 是一個使用“流”來實現自動化的工具,正如 官方文檔 首頁展示的這副動圖一樣,以“流動”的狀態去處理 TypeScript、PNG、Markdown 資源。 與webpack比較 類別 webpack gulp 核心理念 module bundler task runner 執行任務 模塊化

icecreamlj Avatar

@icecreamlj

Nickname 一顆冰淇淋