文介紹前端方面的冷知識(shí)或者一些易踩坑點(diǎn)，防止大家踩坑。下面和千鋒廣州小編一起來(lái)看看吧！

JavaScript

所有對(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)字符的輸入可能需要一連串的鍵盤操作、語(yǔ)音識(shí)別或者點(diǎn)擊輸入法的備選詞）。

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

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

坑一個(gè)：

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

new() 做了些什么？

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í)行右邊，如 leti=value||defalutValue。

Vue.js

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

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

組件 destroy 時(shí)觸發(fā)自定義指令的 unbind，destory 的時(shí)機(jī)：diff 之后的 patch,如 v-if，v-for（key不同時(shí)，先銷毀原來(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。

GitHub

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

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

CSS

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

逐幀動(dòng)畫 animation:animate-name3ssteps(每次循環(huán)的幀數(shù))infinite;：

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

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

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

隱藏一個(gè)元素，同時(shí)讓這個(gè)元素的寬度可獲取：設(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 屬性：

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

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

<img/> 標(biāo)簽千萬(wàn)記得寫寬高，不然會(huì)花式塌陷。

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

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

多行文字居中：

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: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 在部分瀏覽器中包含地址欄部分，小心使用。

VSCode

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

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

可以使用插件 document this 方便寫注釋。

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ù)器可能直接取緩存返回。

Web前端開(kāi)發(fā)-CSS入門干貨01 、Web前端開(kāi)發(fā)-CSS入門干貨02 、Web前端開(kāi)發(fā)-CSS布局-盒子模型入門干貨 介紹了CSS重要基礎(chǔ)概念選擇器和字體系列、文本系列、背景系列樣式以及CSS布局中元素的盒子模型，下面介紹CSS布局中另外兩個(gè)重要應(yīng)用浮動(dòng)和定位。

根據(jù)元素浮動(dòng)、定位的特性可以將CSS布局分為三種：標(biāo)準(zhǔn)流、浮動(dòng)流、定位流；

其中標(biāo)準(zhǔn)流是利用塊級(jí)元素獨(dú)占一行、自上而下，行內(nèi)元素一行顯示、遇到阻礙自動(dòng)換行、自左向右的布局方式。

1.浮動(dòng)

（1）什么是浮動(dòng)

元素脫離原先位置，不再占據(jù)空間，相對(duì)于未浮動(dòng)元素類似漂浮在其上面；

浮動(dòng)元素具有了行內(nèi)塊元素特性，并實(shí)現(xiàn)貼邊布局。這里的邊可以是父級(jí)元素的邊也可以是同樣浮動(dòng)的兄弟級(jí)元素的邊。

（2）浮動(dòng)解決的問(wèn)題

改變塊級(jí)元素默認(rèn)的垂直布局方式，改為橫向布局。

行內(nèi)塊樣式（display: inline-block;）也可以改變塊級(jí)元素的布局方式，但是不能靈活解決兩個(gè)塊級(jí)元素之間縫隙、不能靈活解決多個(gè)塊級(jí)元素分別實(shí)現(xiàn)左對(duì)齊、右對(duì)齊等問(wèn)題。當(dāng)然如果想要塊級(jí)元素隨意放置，那就要用到定位了。

（3）浮動(dòng)的語(yǔ)法

選擇器 {float:none/left/right}，對(duì)選擇器選擇的元素實(shí)現(xiàn)不浮動(dòng)、左浮動(dòng)、右浮動(dòng)。

（4）浮動(dòng)的典型應(yīng)用

通過(guò)不浮動(dòng)的塊級(jí)元素+嵌套在其內(nèi)內(nèi)的浮動(dòng)元素，實(shí)現(xiàn)頁(yè)面各種布局。

塊級(jí)元素實(shí)現(xiàn)縱向布局，浮動(dòng)的元素實(shí)現(xiàn)橫向布局。

（5）因?yàn)楦?dòng)引出的問(wèn)題

浮動(dòng)元素通常嵌套在一個(gè)不浮動(dòng)的元素內(nèi)，進(jìn)行配合使用；所有浮動(dòng)元素的高以及外邊距之和不能超過(guò)那個(gè)不浮動(dòng)元素，否則出現(xiàn)重疊。

那么當(dāng)嵌套的浮動(dòng)的子元素?cái)?shù)量不確定時(shí)，那么父級(jí)元素的高度就不能確定。為了解決這個(gè)問(wèn)題，提出來(lái)不設(shè)置父級(jí)元素的高度，讓子元素的高度之和成為父元素高度的方式；然而浮動(dòng)的子元素具有脫離原先位置、不占空間的特點(diǎn)，那么父元素的高度只會(huì)是0，在父元素之后的兄弟元素就會(huì)與上一個(gè)父元素內(nèi)浮動(dòng)元素發(fā)生重疊。為了解決這個(gè)問(wèn)題，提出來(lái)清除浮動(dòng)。

（6）清除浮動(dòng)

1）語(yǔ)法

選擇器 {clear:right/left/both};清除選擇器選中的元素的右浮動(dòng)、左浮動(dòng)、左右浮動(dòng)。

2）清除浮動(dòng)方式

a）額外標(biāo)簽法

添加一個(gè)與浮動(dòng)元素同級(jí)的空標(biāo)簽（塊級(jí)），并為其設(shè)置清除浮動(dòng)的樣式。

<style>
.one {float:left}
.kongbq {clear:both} 
</style>

<div class="box">
<div class="one"> </div>  
<div class="kongbq"> </div>
</div>

b）父級(jí)元素添加overflow樣式（常用）

語(yǔ)法：選擇器 {overflow:hidden}

c）父級(jí)元素添加after偽元素樣式（常用）

樣式如下：

.clearfixry:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfixry { /*IE6、7專有*/
*zoom:1;
}

d）父級(jí)元素添加雙偽元素（常用）

樣式如下：

.clearfixry:before,.clearfixry:after {
content:"";
display:table;
}
.clearfixry:after {
clear:both;
}
.clearfixry { /*IE6、7專有*/
*zoom:1;
}

2.定位

（1）什么是定位

將html元素放置在任意指定的位置，提高頁(yè)面布局的靈活性。

（2）定位解決的問(wèn)題

比如頁(yè)面?zhèn)冗吂潭ǖ墓ぞ邫凇⑤啿D

（3）定位的實(shí)現(xiàn)方式

利用定位模式+邊偏移，在樣式中設(shè)定定位模式，然后設(shè)定元素盒子模型邊偏移。

1）邊偏移

包括top、right、bottom、left四個(gè)分項(xiàng)。

2）定位模式分類

a）靜態(tài)定位（static）：元素?zé)o偏移，也即元素本身的默認(rèn)布局方式。

語(yǔ)法：選擇器 {position:static;}

b）相對(duì)定位（relative）：相對(duì)元素自身原先位置設(shè)置偏移。（常用）

語(yǔ)法：選擇器 {position:relative;}

需要注意的是設(shè)置了相對(duì)定位的元素仍舊實(shí)際占據(jù)位置

c）絕對(duì)定位（absolute）：相對(duì)于元素的擁有定位的父級(jí)（或者更高級(jí)）元素進(jìn)行定位。（常用）

語(yǔ)法：選擇器 {position:absolute;}

需要注意的（1）設(shè)置的絕對(duì)定位的元素的參考依據(jù)是有定位模式的父級(jí)或者更高級(jí)元素的。

（2）設(shè)置了絕對(duì)定位的元素會(huì)有浮動(dòng)效果，即不再占有位置。

d）固定定位（fixed）：相對(duì)于瀏覽器可視區(qū)域，在某個(gè)位置固定不動(dòng)。（常用）

語(yǔ)法：選擇器 {position:fixed;}

需要注意的（1）設(shè)置的固定定位的元素的參考依據(jù)瀏覽器當(dāng)前可視窗口。

（2）設(shè)置了固定定位的元素會(huì)有浮動(dòng)效果，即不再占有位置。

e）粘性定位（sticky）：被認(rèn)為是相對(duì)定位和固定定位的混合。元素在跨越特定偏移前為相對(duì)定位，之后為固定定位。

語(yǔ)法：選擇器 {position:sticky; top:10px;}

需要注意的是（1）粘性定位一定要設(shè)置邊偏移（任何邊都可行），否則其功能和相對(duì)定位相同。

（2）設(shè)置的粘性定位的元素的參考依據(jù)瀏覽器當(dāng)前可視窗口。

（3）設(shè)置的粘性定位的元素仍舊實(shí)際占據(jù)位置

#學(xué)問(wèn)分亨官##閃光時(shí)刻二期##閃光時(shí)刻第二期主題征文#