原创 Koa源碼筆記

Koa是基於Node.js的web框架,利用它可以很快搭建起一個http服務。本來是要利用它驗證下http協議中某些細節問題,但是發現源碼不多,就順帶看了下。 Koa作爲一個第三方模塊,對外僅暴露了 Application和H

原创 2019 JS內功修煉之讀jQuery源碼

引言:2019年,react hooks成功上位,vue3.0發佈alpha版,TS使用率的飛速增長,以及大量前端開發工具使用體驗的大幅優化和提高等等讓越來越多的開發者吐槽前端學不動了的時候,最好的應對方式便是對基礎概念的掌握。

原创 探究JavaScript中的valueOf和toString

JS 中的類型 JS中的類型分爲兩大類: primitive和object。 primitive: null, undefined, Number, String, Boolean, Symbol。 object:不是primit

原创 JavaScript 之 原型和原型鏈

幾個概念 構造函數: 構造函數實際上是一個普通函數,通過new操作符,可以利用構造函數快速創建對象; prototype:每個構造函數自身上都會有一個prototype屬性,該屬性值爲一個對象,這個對象具有一個construct

原创 面試題 純CSS實現一個自適應的正方形

要求: 正方形; 寬度或高度有一個是100%; 自適應; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="

原创 CSS揭祕之多重邊框

多重邊框的兩種實現方案: border-shadow outline <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

原创 元素總是居中且高度爲寬度一半

有一個元素element, 實現如下需求: 元素e水平垂直居中 元素e水平方向與父元素保持10px間距 元素e的高度是寬度的一半 <!DOCTYPE html> <html lang="en"> <head> <meta

原创 初窺AST

AST是什麼 AST(Abstract Syntax Tree),抽象語法樹, 是程序的抽象意義表示。意味着跟語言的具體文法無關,利用抽象語法樹可以進行程序的處理和轉換。例如更改函數名稱,語法轉換甚至不同語言間的轉換。 AST的一個示

原创 利用clear清除浮動的一些問題

下面這段代碼是用來清除浮動帶來的高度塌陷問題 .clearfix:before { content: "."; display: block; height: 0; clear: both;

原创 CSS2中盒模型與佈局的一些概念關係

CSS的一些名詞和概念 用來幫你更明確地去描述HTML/CSS世界的事物。 box 在CSS中,一個元素就可以看作一個box。具體信息可以參考盒模型的解釋,這裏暫且不作展開。 containing blocks Box的位置和大小時根

原创 CSS三角形&&containing block

CSS瀏覽 用CSS畫一個三角形 一個紅色的三角形 <style> .bottom-triangle { width: 0; height: 0; border-top: 40px soli

原创 CSS中的層疊上下文

CSS中的層疊上下文 在頁面上z軸方向(垂直於頁面的方向),如果存在多個元素,那麼這些元素間的覆蓋關係是啥?遵循的規則是啥?這就是這篇文章要講述的內容。 前提聲明: 不特別說明的話,文中在提到多個元素的位置關係時,均默認這些元素在Z軸

原创 一道用hasOwnProperty給數組去重的面試題

hasOwnProperty hasOwnProperty是javascript中用於檢測對象是否包含某個屬性的方法,返回一個布爾值。 var o = { a: 1}; console.log(o.hasOwnProperty('a'

原创 面試題:清除浮動的三種方式及其原理

清除浮動的三種方式及其原理 浮動元素的特性 浮動元素脫離文檔流,不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。 浮動元素帶來的問題 因爲浮動元素脫離文檔流,所以對於其處於正常文檔流中父元素,無法獲知其高度,導致父元素自身

原创 前端面試題:CSS中的選擇器權重

CSS中選擇器優先級的權重計算 先看一段代碼,如下: <style> a{ color: red; } #box a{ color: green; } [class=