記錄動態修改element中el-calendar日曆組件日期的高度
首先看下需求頁面的整體佈局。 頁面分為上下佈局,上邊模塊包含左側日曆和右側導入部分,下邊模塊是數據狀態部分。日曆和導入組件固定高度420px;日曆寬度500px;數據狀態寬度100%,高度自適應。 項目是由vue2+elementui開發,這裏主要説的是日曆的高度如何動態設置? 由於業務需求,日曆只展示當前月份數據,使用css將上個月份和下個月份數據進行隱藏,所以日曆有時是5行數據展示,有
Nickname 留白
Contributes369
Followers0
首先看下需求頁面的整體佈局。 頁面分為上下佈局,上邊模塊包含左側日曆和右側導入部分,下邊模塊是數據狀態部分。日曆和導入組件固定高度420px;日曆寬度500px;數據狀態寬度100%,高度自適應。 項目是由vue2+elementui開發,這裏主要説的是日曆的高度如何動態設置? 由於業務需求,日曆只展示當前月份數據,使用css將上個月份和下個月份數據進行隱藏,所以日曆有時是5行數據展示,有
Nickname 留白
宏任務和微任務的隊列入門知識,可以參考之前的文章: JavaScript的事件循環機制 宏任務和微任務在前端面試中,被經常提及到,包括口頭和筆試題 async await概念 async 使用async關鍵字聲明的函數,是AsyncFunction構造函數的實例,在async函數體內,可以使用await接收promise實例 async和await關鍵字,在開發過程中,可以簡潔地去做
Nickname 程序猿布歐
我們知道在 JS 中,刪除數組元素有兩個方法:pop 與 shift,分別可以刪除末尾與開頭的元素。 然而同樣是刪除元素,它們的執行時間確實不同的。 當數組項目較多時,shift 的執行時間明顯長於 pop。 const test = (arrLength) = { let arr1 = [] console.time(`${arrLength}-arr1`) for (let i =
Nickname 清隆
class Queue { constructor() { this.count = 0; this.lowestCount = 0; this.items = {}; } isEmpty() { return this.count === this.lowestCount; } enqueue(element) { this.ite
Nickname 張儀ranck
js遞歸遍歷數組並判斷數組中的每一項如果都不為空則返回true,只要有一項為空則返回false。一開始看到這樣的場景我就覺得很簡單沒難度,可真正上手才發現並不那麼簡單,而且想要讓代碼健壯就又複雜了些。於是經過一個小時的努力加不斷修改、增補,總算實現了自己想要的一個方法。 代碼如下: const isArrayEmpty = arr = { if (!Array.isArray(arr) ||
Nickname 豫見世家公子
場景1:從樹中查找查找符合條件的節點(一個) const findNodeById = (nodes, id) = { // 遍歷當前層的所有數組元素 for (const node of nodes) { // 找到目標節點,直接返回,遞歸結束 if (node.id === id) { // 這裏會有兩種情況: // 1. 如果這裏不是在遞歸中,
Nickname 熱飯班長
今天開發中碰到一個問題,卡了挺久的記錄一下。 標題其實正確表達為: js-while循環中不要使用定時函數中的回調函數中對循環條件的自變量進行自增或者自減,否則會導致進程假死。 首先 let i = 0; while(i 10){ i++; console.log(i) } 首先這個沒問題,正常打印1,2....10; let i = 0; let timer; while(i
Nickname 陽哥
Cookies are strings of data that are stored directly in the browser. They are a part of HTTP protocol, defined by RFC 6265 specification. Cookies are often set by server using the response Set-Cookie
Nickname 肥仔John
1,js方法封裝 //util.js //一些發起請求的依賴 import gql from 'graphql-tag' import initapolloclient from '@/assets/js/apolloclient.js' import $store from '@/store/index' // 根據openid獲取人員姓名 // openid的取值matchke
Nickname charlotteeeeeee
GraphQL是一種現代的API查詢語言,它在現代Web應用中得到了廣泛的應用,因為它提供了一種高效、靈活且強大的方式來獲取數據 GraphQL基礎快速應用示例: 1. 後端設置(使用graphql-yoga) 首先,我們需要創建一個GraphQL服務器。安裝graphql-yoga並創建一個簡單的GraphQL schema: npm init -y npm install graphql yo
Nickname 天涯學館
new 運算符創建一個用户定義的對象類型的實例或具有構造函數的內置對象的實例。 這是MDN上對new操作符的定義,從這句話中可以看出new返回的其實就是一個實例,那麼問題來了實例又是個啥東西? 先看個例子: function Cat(name, gender) { this.name = name; this.gender = gender; } Cat.prototype.sa
Nickname WillemWei
bind() 方法創建一個新的函數,在 bind() 被調用時,這個新函數的 this 被指定為 bind() 的第一個參數,而其餘參數將作為新函數的參數,供調用時使用。 從MDN對於bind的描述來看: 返回值是一個函數,而不是執行結果 this值會指向第一個參數 其餘參數會作為新函數的參數 看個例子: function test(name, age) { console.lo
Nickname WillemWei
最近重新梳理了一下原型的知識,想分享一下,希望對那些被原型,原型鏈,構造函數,實例對象等關係滿頭包的童鞋有些幫助~~~ 廢話不説了 上代碼 //原型 prototype function Man(name,age){ this.name=name, this.age=age } let Pers
Nickname 大白白
前言 原文來自MDN JavaScript主題的高階教程部分,一共5篇。分別涉及繼承與原型、嚴格模式、類型數組、內存管理、併發模型和事件循環。本篇是第一部分,關於繼承和原型。 原文鏈接請點我 下面是正文部分: 對於熟悉基於類的編程語言(例如 Java 和 C++)的開發者來説,JavaScript 會讓他們感到困惑,因為 JS 的動態性以及其本身並不提供class的實現(ES2015 中提出的c
Nickname 小志Chris
從關係圖中可以看出來,ECMAScript中創建一個對象是通過new構造函數實現的,而本質上來説這個對象其實是以構造函數的屬性prototype指向的對象為基本模板的,因此新對象的__proto__屬性表明了自己來源於誰。 prototype 該屬性用來指向創建一個對象的基本模板,默認指向new構造函數,也可以修改,或者通過改屬性為新對象添加屬性。 需要注意的是,該屬性只有函數才有。 //構造函
Nickname 你好2007
方法一 ----通過字面量創建 let obj = { name: 'zhang', age: 12, sayName: function () { console.log(this.name); } } console.log(obj);//{ name: 'zhang', age: 12, sayName: [Function: sayName
Nickname 雲綺棠兮
對於搞前端的小夥伴來説,不管是新手還是老鳥,我想對於原型應該都被折騰過,總是雲裏霧裏的感覺,要是原型都沒搞明白,你還好意思説你是前端攻城獅? 關於對象 當一説到面向對象(Object-Oriented OO)時,你第一反應肯定想到類、對象、接口實現等概念,那我們這裏為啥已上來就説對象呢?因為ECMAScript裏沒有類,另外因為ECMAScript中的函數沒有簽名,所以也沒有接口。 ECMAScr
Nickname tsteam
前言 在瞭解原型和原型鏈之前,我們先了解一部分概念,constructor,prototype,__proto__。 constructor 在之前判斷數據類型的文章: javaScript常見數據類型檢查校驗 有提到過關於構造函數的屬性constructor constructor 的是返回創建實例對象的 構造函數的引用,這個屬性的值是對函數本身的引用,而不是一個包含函數名稱的字符串 具體
Nickname 程序猿布歐
前言 上文對原型和原型鏈做了一些簡單的概念介紹和解析,本文將淺析一些原型鏈的擴展。 javaScript原型和原型鏈 http://lewyon.xyz/prototype.html 擴展原型鏈 使用new操作符 利用原型是對象的特性,實例化對象的時候,繼承多個構造函數的屬性和方法 兼容性:支持目前以及所有可想象到的瀏覽器 (IE5.5 都可以使用) function parent1(
Nickname 程序猿布歐
前言 HTML萬物皆標籤。 CSS萬物皆盒。 JavaScript萬物皆對象。 對象 JavaScript對象的本質是數據和功能的集合,語法上表現為鍵值對的集合。 鍵 對象的鍵可以理解為變量名。 值 對象的值的類型可以是任意數據類型。 鍵值對 鍵和值之間用:相連。 多組鍵值對之間用,分割。 let profile = { name: '吳彥祖', age: 48, char
Nickname 從君華
參考《你不知道的JavaScript(上卷)》,按照自己理解做的對象關聯關係圖解,不保真。 細節重申 對象通過原型鏈(__proto__)查找屬性,一直到找到為止; new 的主要作用是創建新對象,其__proto__指向函數的 prototype,以及關聯this到新對象; Object.create 創建新對象,並將其__proto__指向舊對象。 依圖校驗 function Foo
Nickname 夜遊神
繼續補檔,發現這塊內容其實蠻多的。後面估計還會有兩篇(怎麼還有兩篇啊喂!),分別是 JavaScript執行原理·補 和 JavaScript部分特性,這周不知道能不能搞定。 先看 JS 原型鏈吧。 JS 繼承機制設計 1994年,網景公司(Netscape)發佈了 Navigator v0.9,轟動一時。但當時的網頁不具備交互功能,數據的交互全部依賴服務器端,這浪費了時間與服務器資源。 網景公司
Nickname 阿菇kinoko
最近接到了一個需求,需要通過第三方提供的 d.ts 文件來定義對應的 JS SDK 文件,其形式如下: 第三方提供的 d.ts 文件: export class SDK { start(account: string); close(); init(id: string): Promise{ result: number; } } 定義出來的 JS SDK 文件: // 初始化 wr
Nickname jrainlau
AST (Abstract Syntax Tree) 標題 內容 AST AST定義,使用方式,原理 AST AST例子 AST AST應用 AST 定義 AST(Abstract Syntax Tree)抽象語法樹,簡稱AST,它是源代碼(也就是説它不僅僅是應用於JavaSc
Nickname jackdan9