摘要：當(dāng)頁(yè)面中元素樣式的改變并不影響它在文檔流中的位置時(shí)例如等，瀏覽器會(huì)將新樣式賦予給元素并重新繪制它，這個(gè)過(guò)程稱為重繪。

無(wú)限期更新前端的一些坑，一些記錄，一些冷知識(shí)
https://github.com/ssshooter/...

大概從 17 年的六月份開(kāi)始記錄吧，也已經(jīng)一年了，其中也包含了一些很簡(jiǎn)單的知識(shí)，以前還覺(jué)得挺難的，現(xiàn)在看起來(lái)有點(diǎn)謎之感慨...

所有對(duì)象都有 __proto__ 屬性，都指向創(chuàng)造對(duì)象的函數(shù)對(duì)象的 prototype。

上傳文件要使用 formdata 包裝。

Promise.prototype.catch 方法是 .then(null, rejection) 的別名。

同一個(gè) EventTarget 注冊(cè)了多個(gè)相同的 EventListener，那么重復(fù)的實(shí)例會(huì)被拋棄。所以這么做不會(huì)使得 EventListener 被調(diào)用兩次，也不需要用 removeEventListener 手動(dòng)清除多余的EventListener，因?yàn)橹貜?fù)的都被自動(dòng)拋棄了。

當(dāng)使用 addEventListener() 為一個(gè)元素注冊(cè)事件的時(shí)候，句柄里的 this 值是該元素的引用。其與傳遞給句柄的 event 參數(shù)的 currentTarget 屬性的值一樣,而 target 是直接接受事件的子元素。

scrollIntoView() 使 div 底部滾動(dòng)到視窗。

使用 const 的對(duì)象和數(shù)組的內(nèi)容是可以被修改的，但數(shù)據(jù)結(jié)構(gòu)不可變。

在 webpack 里，所有的文件都是模塊。loader 的作用就是把文件轉(zhuǎn)換成 webpack 可以識(shí)別的模塊。

關(guān)于事件循環(huán)，執(zhí)行下一個(gè) task 之前總會(huì)清空 microtask。

npm 新舊版本覆蓋可能會(huì)造成迷之問(wèn)題，這個(gè)時(shí)候可以試試 node_module 整個(gè)刪掉重裝。

*、/ 和 - 操作符都是數(shù)字運(yùn)算專用的。當(dāng)這些運(yùn)算符與字符串一起使用時(shí)，會(huì)強(qiáng)制轉(zhuǎn)換字符串為數(shù)字類型的值。

document.title 可以直接修改當(dāng)前 html 的標(biāo)題。

利用對(duì)象淺拷貝修改對(duì)象，指向同一對(duì)象的兩個(gè)變量修改對(duì)象的效果一樣。

腦洞題：1 和 2 只用一次的情況下怎么得到 4 答案：1<<2。

連等賦值從右到左。

compositionstart 事件觸發(fā)于一段文字的輸入之前（類似于 keydown 事件，但是該事件僅在若干可見(jiàn)字符的輸入之前，而這些可見(jiàn)字符的輸入可能需要一連串的鍵盤(pán)操作、語(yǔ)音識(shí)別或者點(diǎn)擊輸入法的備選詞）。

void 0（void后面加任何東西）用于生成一個(gè)絕對(duì)的 undefined（不會(huì)被重定義），但跟函數(shù)會(huì)有副作用

注意 localStorage 保存的只能是字符串，所以是沒(méi)有 null 的。

坑一個(gè)

typeof [] === "object" // true
typeof null === "object" // true

import 同步，require異步（待補(bǔ)充）

new() 做了些什么？

var obj = new Base();
var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

stage 0 到 4 的含義：

stage 0 is "i"ve got a crazy idea",    
stage 1 is "this idea might not be stupid",    
stage 2 is "let"s use polyfills and transpilers to play with it",    
stage 3 is "let"s let browsers implement it and see how it goes",    
stage 4 is "now it"s javascript".

Object.getOwnPropertyNames(obj).length === 0 判斷 obj 是不是空對(duì)象。

getBoundingClientRect() 用于獲取元素寬高以及距離頁(yè)面邊框距離，十分方便。

&& 的使用場(chǎng)景：左邊為真繼續(xù)執(zhí)行右邊，如 isDog && bark()。

|| 的使用場(chǎng)景：左邊為假繼續(xù)執(zhí)行右邊，如 let i = value || defalutValue。

v-model 會(huì)自動(dòng) bind 一個(gè)值，其變量名為 value。

多個(gè)特性的元素應(yīng)該分多行撰寫(xiě)，每個(gè)特性一行。以下為 vscode 里 vetur 的設(shè)置：

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force" 
    }
  }

組件 destroy 時(shí)觸發(fā)自定義指令的 unbind，destory 的時(shí)機(jī)：diff 之后的 patch,如 v-if，v-for（key不同時(shí)，先銷(xiāo)毀原來(lái)的，再掛載新的（推測(cè)））

自定義組件 v-model watch 自動(dòng)匹配（存疑

組件的 data 屬性要用函數(shù)返回的原因：創(chuàng)建實(shí)例時(shí)如果 data 是一個(gè)對(duì)象的話，所有實(shí)例都會(huì)引用同一個(gè)對(duì)象，而對(duì)象返回不會(huì)有此問(wèn)題。在瀏覽器中可以這么做是因?yàn)楦鶎?shí)例只有一個(gè)。

.vue 文件中使用 /deep/ 覆蓋子組件 css

從 commit 關(guān)閉 issues 的方法：commit 信息寫(xiě) Fixes #33，其他關(guān)鍵字還有 close closes closed fix fixes fixed resolve resolves resolved

git reset --soft HEAD^ 回退一次 commit

div 的默認(rèn)寬度是父元素寬的 100%

逐幀動(dòng)畫(huà) animation: animate-name 3s steps(每次循環(huán)的幀數(shù)) infinite;

@keyframes animate-name{
    from{
    
        background-position: 0 0; 
    }
    to{
    
        background-position: -1540px 0 ;
    }
}

"Break out" of a parent"s containing width to take the full screen of a page w/this nice utility class:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

行內(nèi)元素與下一個(gè)元素中間有空格（正常排版）,會(huì)引起一些詭異的縫隙，常見(jiàn)的例如元素之間有間隔，或看起來(lái)空了一行（像加了padding）

pre 標(biāo)簽設(shè)置自動(dòng)換行 white-space: pre-wrap;

隱藏一個(gè)元素，同時(shí)讓這個(gè)元素的寬度可獲?。涸O(shè)置 overflow: hidden 可以根據(jù)元素高度裁剪視區(qū)，設(shè)置 height: 0; overflow: hidden 雖然文檔流中占用了位置，由于高度為 0，最終表現(xiàn)特征達(dá)到了我們期望的 display: none。此時(shí)該元素 clientHeight、offsetHeight 為 0，但是 scrollHeight 是有值的。scrollHeight 是一個(gè)元素沒(méi)有滾動(dòng)條時(shí)的所有內(nèi)容高度,當(dāng)一個(gè)元素沒(méi)有滾動(dòng)條時(shí) scrollHeight === offsetHeight。

當(dāng) Render Tree 中部分或全部元素的尺寸、結(jié)構(gòu)、或某些屬性發(fā)生改變時(shí)，瀏覽器重新渲染部分或全部文檔的過(guò)程稱為回流。

當(dāng)頁(yè)面中元素樣式的改變并不影響它在文檔流中的位置時(shí)（例如：color、background-color、visibility等），瀏覽器會(huì)將新樣式賦予給元素并重新繪制它，這個(gè)過(guò)程稱為重繪。

回流必將引起重繪，重繪不一定會(huì)引起回流。

移動(dòng)端優(yōu)化常用 CSS 屬性：

user-select: none; // 禁止文字被選中
outline:none; // 去除點(diǎn)擊外邊框,點(diǎn)擊無(wú)輪廓
-webkit-touch-callout: none; // 長(zhǎng)按鏈接不彈出菜單
-webkit-tap-highlight-color: rgba(0,0,0,0); // 去除點(diǎn)擊高亮

@keyframes 的屬性要前后對(duì)應(yīng)，否則不形成動(dòng)畫(huà)

img 元素圖像自適應(yīng)居中，與 background-size 效果一樣

object-fit: cover; 

標(biāo)簽千萬(wàn)記得寫(xiě)寬高，不然會(huì)花式塌陷

flex-grow 所在元素如果未定寬度的話，寬度會(huì)被子元素?fù)伍_(kāi)

一個(gè)英文單詞默認(rèn)不換行，無(wú)論多長(zhǎng)，所以要設(shè)置 word break

多行文字居中

.mulit_line{ 
    border:1px dashed #cccccc; 
    padding-left:5px;
}
.mulit_line span{ 
    display:inline-block; 
    line-height:14px; 
    vertical-align:middle;
}

safari 中控制慣性滾動(dòng) -webkit-overflow-scroll

滾動(dòng)條樣式可能使?jié)L動(dòng)條強(qiáng)制顯示（未確定）

flex 布局不換行加 flex-shrink: 0; 實(shí)現(xiàn) div 不壓縮無(wú)限并排，可以用于 swiper 等場(chǎng)景。

巧用貓頭鷹選擇器 +

float 自帶 display: inline-block

鼠標(biāo)禁用 .disabled { pointer-events: none; }

注意 :last-child 與 :last-of-type 的區(qū)別

::after 表示法是在 CSS3 中引入的，:: 符號(hào)是用來(lái)區(qū)分偽類和偽元素的。支持CSS3的瀏覽器同時(shí)也都支持 CSS2 中引入的表示法 :after。

父元素如果存在 transform 屬性，子元素的 position: fixed 屬性無(wú)效

less 中的 calc 問(wèn)題：height: calc(~"100% - 50px");

vh 在部分瀏覽器中包含地址欄部分，小心使用。

alt + shift + 鼠標(biāo)點(diǎn)擊 縱向選擇

vetur 分號(hào)問(wèn)題: 安裝 prettier，然后配置 "prettier.singleQuote":true,"prettier.semi": false

可以使用插件 document this 方便寫(xiě)注釋

html tag 屬性分行 wrap_attributes:force

選定變量后按 F12 找到定義位置

魔法隧道用 webpack 代理會(huì) 502

在組件化編程中，悼念被同名組件浪費(fèi)了幾個(gè)鐘的 debug 時(shí)間[蠟燭]

局域網(wǎng)連不通的話，先試試，開(kāi)共享，關(guān)閉防火墻

局域網(wǎng)連不通的話，還可以試試，在 webpack.config.js 文件的 devServer 里加上host:"0.0.0.0"。

iOS 的回彈效果，動(dòng)的是 body 部分，html 是不動(dòng)的

學(xué)習(xí)一個(gè)語(yǔ)言之前先看規(guī)范

safari 的 formdata 只支持 append，其他方法需要 polyfill

rc 的意思是 run commands

導(dǎo)航欄高度 88px，標(biāo)簽欄高度 98px（iphone5和6常用）

關(guān)于 HTTP 304 Not Modified，簡(jiǎn)單來(lái)說(shuō)，請(qǐng)求內(nèi)容沒(méi)有發(fā)生變化的時(shí)候，根據(jù)設(shè)置，服務(wù)器可能直接取緩存返回