@Javascript

Stories List
@rk405264704

記錄動態修改element中el-calendar日曆組件日期的高度

首先看下需求頁面的整體佈局。 頁面分為上下佈局,上邊模塊包含左側日曆和右側導入部分,下邊模塊是數據狀態部分。日曆和導入組件固定高度420px;日曆寬度500px;數據狀態寬度100%,高度自適應。 項目是由vue2+elementui開發,這裏主要説的是日曆的高度如何動態設置? 由於業務需求,日曆只展示當前月份數據,使用css將上個月份和下個月份數據進行隱藏,所以日曆有時是5行數據展示,有

rk405264704 Avatar

@rk405264704

Nickname 留白

@lewyon

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

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

lewyon Avatar

@lewyon

Nickname 程序猿布歐

@qinglong_62898aa51988d

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

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

@tinyang

js遞歸遍歷數組並判斷數組中的每一項如果都不為空則返回true,只要有一項為空則返回false

js遞歸遍歷數組並判斷數組中的每一項如果都不為空則返回true,只要有一項為空則返回false。一開始看到這樣的場景我就覺得很簡單沒難度,可真正上手才發現並不那麼簡單,而且想要讓代碼健壯就又複雜了些。於是經過一個小時的努力加不斷修改、增補,總算實現了自己想要的一個方法。 代碼如下: const isArrayEmpty = arr = { if (!Array.isArray(arr) ||

tinyang Avatar

@tinyang

Nickname 豫見世家公子

@yangge_5c6804373b5a0

js-while循環內使用定時函數的回調函數的問題

今天開發中碰到一個問題,卡了挺久的記錄一下。 標題其實正確表達為: js-while循環中不要使用定時函數中的回調函數中對循環條件的自變量進行自增或者自減,否則會導致進程假死。 首先 let i = 0; while(i 10){ i++; console.log(i) } 首先這個沒問題,正常打印1,2....10; let i = 0; let timer; while(i

yangge_5c6804373b5a0 Avatar

@yangge_5c6804373b5a0

Nickname 陽哥

@kevinzhw

GraphQL在現代Web應用中的應用與優勢

GraphQL是一種現代的API查詢語言,它在現代Web應用中得到了廣泛的應用,因為它提供了一種高效、靈活且強大的方式來獲取數據 GraphQL基礎快速應用示例: 1. 後端設置(使用graphql-yoga) 首先,我們需要創建一個GraphQL服務器。安裝graphql-yoga並創建一個簡單的GraphQL schema: npm init -y npm install graphql yo

kevinzhw Avatar

@kevinzhw

Nickname 天涯學館

@willemwei

模擬實現js中的new操作符

new 運算符創建一個用户定義的對象類型的實例或具有構造函數的內置對象的實例。 這是MDN上對new操作符的定義,從這句話中可以看出new返回的其實就是一個實例,那麼問題來了實例又是個啥東西? 先看個例子: function Cat(name, gender) { this.name = name; this.gender = gender; } Cat.prototype.sa

willemwei Avatar

@willemwei

Nickname WillemWei

@willemwei

模擬實現Javascript中的bind函數

bind() 方法創建一個新的函數,在 bind() 被調用時,這個新函數的 this 被指定為 bind() 的第一個參數,而其餘參數將作為新函數的參數,供調用時使用。 從MDN對於bind的描述來看: 返回值是一個函數,而不是執行結果 this值會指向第一個參數 其餘參數會作為新函數的參數 看個例子: function test(name, age) { console.lo

willemwei Avatar

@willemwei

Nickname WillemWei

@tianzhich

【譯】繼承與原型鏈(Inheritance and the prototype chain)

前言 原文來自MDN JavaScript主題的高階教程部分,一共5篇。分別涉及繼承與原型、嚴格模式、類型數組、內存管理、併發模型和事件循環。本篇是第一部分,關於繼承和原型。 原文鏈接請點我 下面是正文部分: 對於熟悉基於類的編程語言(例如 Java 和 C++)的開發者來説,JavaScript 會讓他們感到困惑,因為 JS 的動態性以及其本身並不提供class的實現(ES2015 中提出的c

tianzhich Avatar

@tianzhich

Nickname 小志Chris

@hai2007

理解prototype和__proto__(繼承與原型鏈)

從關係圖中可以看出來,ECMAScript中創建一個對象是通過new構造函數實現的,而本質上來説這個對象其實是以構造函數的屬性prototype指向的對象為基本模板的,因此新對象的__proto__屬性表明了自己來源於誰。 prototype 該屬性用來指向創建一個對象的基本模板,默認指向new構造函數,也可以修改,或者通過改屬性為新對象添加屬性。 需要注意的是,該屬性只有函數才有。 //構造函

hai2007 Avatar

@hai2007

Nickname 你好2007

@tsteam

理解原型/原型鏈

對於搞前端的小夥伴來説,不管是新手還是老鳥,我想對於原型應該都被折騰過,總是雲裏霧裏的感覺,要是原型都沒搞明白,你還好意思説你是前端攻城獅? 關於對象 當一説到面向對象(Object-Oriented OO)時,你第一反應肯定想到類、對象、接口實現等概念,那我們這裏為啥已上來就説對象呢?因為ECMAScript裏沒有類,另外因為ECMAScript中的函數沒有簽名,所以也沒有接口。 ECMAScr

tsteam Avatar

@tsteam

Nickname tsteam

@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 程序猿布歐

@congjunhua

JavaScript的對象、原型、類和繼承

前言 HTML萬物皆標籤。 CSS萬物皆盒。 JavaScript萬物皆對象。 對象 JavaScript對象的本質是數據和功能的集合,語法上表現為鍵值對的集合。 鍵 對象的鍵可以理解為變量名。 值 對象的值的類型可以是任意數據類型。 鍵值對 鍵和值之間用:相連。 多組鍵值對之間用,分割。 let profile = { name: '吳彥祖', age: 48, char

congjunhua Avatar

@congjunhua

Nickname 從君華

@mi2nagemao

js原型鏈圖解

參考《你不知道的JavaScript(上卷)》,按照自己理解做的對象關聯關係圖解,不保真。 細節重申 對象通過原型鏈(__proto__)查找屬性,一直到找到為止; new 的主要作用是創建新對象,其__proto__指向函數的 prototype,以及關聯this到新對象; Object.create 創建新對象,並將其__proto__指向舊對象。 依圖校驗 function Foo

mi2nagemao Avatar

@mi2nagemao

Nickname 夜遊神

@budebinglin

JavaScript 原型鏈詳解

繼續補檔,發現這塊內容其實蠻多的。後面估計還會有兩篇(怎麼還有兩篇啊喂!),分別是 JavaScript執行原理·補 和 JavaScript部分特性,這周不知道能不能搞定。 先看 JS 原型鏈吧。 JS 繼承機制設計 1994年,網景公司(Netscape)發佈了 Navigator v0.9,轟動一時。但當時的網頁不具備交互功能,數據的交互全部依賴服務器端,這浪費了時間與服務器資源。 網景公司

budebinglin Avatar

@budebinglin

Nickname 阿菇kinoko