資訊專欄INFORMATION COLUMN
摘要：同時(shí)，由于本身的實(shí)現(xiàn)大部分是純函數(shù)，因此在版本中，一些不含副作用的均在中暴露了以為前綴的函數(shù)方法，也可以直接導(dǎo)入使用。在瀏覽器中神秘丟失嘗試檢查被請(qǐng)求的是否存在尾部斜線，具體原因暫時(shí)沒有找到相關(guān)資料。
寫在前面
最近沒怎么寫新的東西，一是因?yàn)橐恢痹跍?zhǔn)備換新的工作，所以一直在準(zhǔn)備面試，二是因?yàn)檫^年，心靜不下來，所以也無法輸出或者翻譯一些文章，三是由于手頭還有一些遺留工作需要完成和交接，比較忙。
但是忙里偷閑還是整理了一些零碎的筆記，大體都是關(guān)于工作中遇到的實(shí)際問題或者衍生問題，比較亂，但還是具有一定的參考意義，所以整理出來分享給大家，有的知識(shí)點(diǎn)包含一個(gè)或多個(gè)參考鏈接以及一段描述，有的只包含一段描述，但我覺的都足以描述解決問題的思路了。
其實(shí)我感覺這種記錄性的學(xué)習(xí)方式還挺好的，以后會(huì)繼續(xù)堅(jiān)持，然后每攢夠 10 個(gè)就整理成一篇文章，一來可以幫助自己溫故知新，二來可以幫助更多的人。
如何獲取一個(gè)元素盒的 baseline 的位置？https://stackoverflow.com/que...
原理為在元素盒末尾添加兩個(gè)內(nèi)容為 X 的且 vertical-align 位置默認(rèn)值的子元素，之后將第二個(gè)子元素的 font-size 設(shè)置為 0，這樣由于默認(rèn)情況下元素的垂直對(duì)齊方式是與父元素盒的 baseline 對(duì)齊的，由于 font-size: 0 的緣故，該元素的 top 也與 baseline 對(duì)齊，因此就可以通過 getBoundingClientRect 分別獲取兩個(gè)子元素的 top 值并求差取得。
但要注意的是，這樣求得的 baseline 的位置并不一定是最原始的位置，因?yàn)?baseline 的位置會(huì)根據(jù)行內(nèi)子元素的樣式動(dòng)態(tài)地發(fā)生改變，關(guān)于改變的規(guī)則，可參考這篇文章。
Object.keys(new Set([1, 2, 3]) 的值是什么？https://github.com/30-seconds...
應(yīng)該是 []，有興趣的可以閱讀 es 標(biāo)準(zhǔn)中有關(guān)這部分的章節(jié)。
那么如何判定一個(gè) set 是否為空呢？可以直接通過其實(shí)例屬性 `size 來判定，比如
new Set([1, 2, 3]).size // 3當(dāng) table 的 border-collapse 樣式屬性為 collapse 時(shí)，懸浮 td 邊框顯示不完整
https://stackoverflow.com/que...
可以將 td 的 border-style 樣式屬性設(shè)置為 double，如下：
td: hover {
border-style: double;
}
獲取 es6 中 class 的 name ?
可以通過 this.constructor.name 來獲取。原理是 constructor 本身其實(shí)是一個(gè)函數(shù)，而 js 中的每個(gè)函數(shù)均有 name 屬性指向其函數(shù)名，而 class 的 name 恰恰就是 constructor 的函數(shù)名，因此可以通過這種方式獲得。
Angular 中的 animation 模塊如何在運(yùn)行時(shí)動(dòng)態(tài)傳入 styles ？之所以遇到這個(gè)問題，是因?yàn)樵谑褂?@angular/animation 的過程中，當(dāng)動(dòng)畫的目標(biāo)狀態(tài)無法提前定義時(shí)，如何聲明 AnimationMetadata，比如窗口縮放動(dòng)畫，你無法預(yù)知運(yùn)行時(shí)的窗口縮放大小。
這部分內(nèi)容在官方文檔中沒有示例，僅在 api 文檔 中提了一下，其本質(zhì)上就是利用 animation params 來動(dòng)態(tài)地在運(yùn)行時(shí)傳入某個(gè)動(dòng)畫狀態(tài)下的某個(gè) style 屬性，比如縮放動(dòng)畫中涉及的 width 或者 height 屬性。
另外還有一個(gè)問題就是，當(dāng)在使用 animate() 時(shí)，其第一個(gè)參數(shù)暫時(shí)不支持 animation-fill-mode，這就會(huì)造成當(dāng)完成一個(gè)動(dòng)畫時(shí)，無法指定其動(dòng)畫的終止?fàn)顟B(tài)，比如在聲明縮放動(dòng)畫時(shí)，縮放動(dòng)畫會(huì)按預(yù)期進(jìn)行，但當(dāng)動(dòng)畫交互完畢后，其元素樣式又恢復(fù)到了動(dòng)畫發(fā)生之前的樣式了。
暫時(shí)的解決方法是通過 ngStyle 來暫存動(dòng)畫的終止?fàn)顟B(tài)并綁定到相應(yīng)的 dom 元素上，這樣當(dāng)動(dòng)畫完成時(shí)，其元素樣式就會(huì)是動(dòng)畫終止時(shí)的狀態(tài)了。
Angular 中的 NgZone.run() 和 ChangeDetectorRef.detectChanges() 的區(qū)別？https://stackoverflow.com/que...
NgZone.run() 會(huì)在應(yīng)用整體，自上而下全部進(jìn)行臟檢查校驗(yàn)，而 cdr.detectChanges() 僅僅會(huì)對(duì)某個(gè)具體的組件進(jìn)行臟檢查。
從適用角度來講，大部分情況適用 cdr.detectChanges() 和 cdr.markForCheck() 已經(jīng)足夠滿足日程工作需求了，但有些時(shí)候，當(dāng)頁面有多個(gè)組件的 UI 層狀態(tài)與數(shù)據(jù)層狀態(tài)不一致時(shí)，使用 NgZone.run() 則更好。
另外，一些工具庫的源碼實(shí)現(xiàn)中，為了盡可能的提高性能，都會(huì)使用 NgZone.runOutsideAngular() 將與 UI 層無關(guān)的邏輯移出臟檢查校驗(yàn)流程，比如 cdk 中的 ScrollDispatcher，在使用時(shí)如果最終需要與一些組件的 UI 層狀態(tài)發(fā)生關(guān)系，應(yīng)當(dāng)手動(dòng)管理臟檢查機(jī)制來觸發(fā)這些變動(dòng)。
Angular 中如何在 service 和 component 中使用 pipe ?https://stackoverflow.com/que...
pipe 本身即是 provider ，因此可以通過依賴注入的方式獲取相應(yīng)實(shí)例并使用，但是別忘了在 NgModule 的 providers 屬性中聲明。
同時(shí)，由于 pipe 本身的實(shí)現(xiàn)大部分是純函數(shù)，因此在 v6 版本中，一些不含副作用的 pipe 均在 @angular/common 中暴露了以 format 為前綴的函數(shù)方法，也可以直接導(dǎo)入使用。
Canvas 在 retina 屏中繪制圖片或字體發(fā)虛怎么辦？https://stackoverflow.com/que...
https://www.html5rocks.com/en...
我們繪制圖片或者字體時(shí)，一般指的是邏輯像素，而 canvas 會(huì)將邏輯像素自動(dòng)按照渲染設(shè)備的 devicePixelRatio 的值來渲染，因此，在 retina 這種高清顯示屏幕中，由于其 devicePixelRatio?為 2，因此 1px 的邏輯像素相當(dāng)于 2px 的物理像素，渲染結(jié)果會(huì)發(fā)虛，其實(shí)是被放大了。
解決方法就是，利用 canvas 的 setTransform 或者 scale 方法來對(duì) canvas 的進(jìn)行放大，之后再利用 css 屬性 width 和 height 進(jìn)行縮小（這個(gè)過程是透明的，瀏覽器會(huì)幫我們完成），這樣，在 canvas 繪制時(shí)，我們就無需關(guān)系邏輯像素與物理像素之間的區(qū)別了。
值得一提的是，對(duì)于物理像素，可以通過 devicePixelRatio 來獲取。
Authorization Header 在 Safari 瀏覽器中神秘丟失？嘗試檢查被請(qǐng)求的 api url 是否存在尾部斜線（trailing slash），具體原因暫時(shí)沒有找到相關(guān)資料。
如何移除 git 提交歷史中關(guān)于某個(gè)文件的修改歷史？場(chǎng)景是這樣的，在一次提交 PR 的 review 過程中，我提交的一個(gè)文件，在若干 commits 的修改下，最終和最初狀態(tài)完全相同，但是 PR 中卻保留了對(duì)該文件的提交歷史，因此 reviewer 希望我可以將這個(gè)文件移除提交歷史。
這個(gè)主要需要用到 git rebase ，步驟如下：
git log filename: 首先通過 git log 來查詢要回滾到的 commit id
git reset commit-id filename: 對(duì)該文件進(jìn)行 reset 操作（撤銷提交歷史相關(guān)的修改）
git checkout filename: 對(duì)其進(jìn)行 checkout 操作（撤銷對(duì)文件本身的修改）
git commit --amend: 修改提交歷史信息
git rebase --continue/git push: 同步
關(guān)注公眾號(hào) 全棧101，只談技術(shù)，不談人生
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102302.html
摘要：，看了這樣的解釋，或許讓你更摸不著頭腦了。彈出彈出在這個(gè)例子中，只要會(huì)使用瀏覽器的朋友，都能看得出來完全繼承了的屬性和方法，否則是無法解釋的，因?yàn)樵谥胁]有定義屬性和，那么按常理推斷在的實(shí)例對(duì)象中，并不會(huì)出現(xiàn)這兩個(gè)屬性。 快速刪除尾部數(shù)組 var arr=[1,2,3,4,5]; arr.length=3; console.log(arr)//[1,2,3] 直接改變數(shù)組的length...
摘要：目錄零碎的知識(shí)一新的媒體查詢屬性這個(gè)媒體查詢屬性的作用是，當(dāng)用戶在操作系統(tǒng)中設(shè)置了的選項(xiàng)時(shí)，能夠根據(jù)其值聲明不同的樣式，因?yàn)橛械娜丝赡芟矚g炫酷的特效，有的人可能更傾向于內(nèi)容比如我，而有的人甚至因?yàn)樯韱栴}無法接受這些特效。 目錄 零碎的知識(shí)（一） 新的媒體查詢屬性 prefers-reduced-motion https://developers.google.com...https...
摘要：原文前面可以說是弄了一系列的和多進(jìn)程的一大坨內(nèi)容，知識(shí)淺顯代碼粗暴風(fēng)格簡(jiǎn)陋，總的說來，還是差了一些細(xì)節(jié)。今天，就一些漏掉的細(xì)節(jié)補(bǔ)充一下。最后，我補(bǔ)充一句是同步的，而不是異步。 原文：https://t.ti-node.com/thread/... 前面可以說是弄了一系列的php socket和多進(jìn)程的一大坨內(nèi)容，知識(shí)淺顯、代碼粗暴、風(fēng)格簡(jiǎn)陋，總的說來，還是差了一些細(xì)節(jié)。今天，就一些漏...
摘要：輸出下標(biāo)和對(duì)應(yīng)的元素集合集合是無序的，集合中的元素是唯一的，集合一般用于元組或者列表中的元素去重。 python內(nèi)置的數(shù)據(jù)類型 showImg(https://segmentfault.com/img/bVbrz1j); Python3.7內(nèi)置的關(guān)鍵字 [False, None, True, and, as, assert, async, await, break, class, co...
摘要：移動(dòng)端的開發(fā)基本很少直接使用作為單位了，目前最常用的是。一般移動(dòng)端頁面的開發(fā)流程是設(shè)計(jì)人員以某個(gè)機(jī)型作為標(biāo)準(zhǔn)，設(shè)計(jì)好。前端開發(fā)針對(duì)這個(gè)機(jī)型的做開發(fā)，然后其它機(jī)型相對(duì)的去等比例縮放。 移動(dòng)端的開發(fā)基本很少直接使用px作為單位了，目前最常用的是rem。不過在這之前其實(shí)還有個(gè)em單位，和rem長(zhǎng)得非常的像，那么它們有什么區(qū)別呢？又有什么不一樣的適用場(chǎng)景呢？ 注意：無論使用em，還是rem，客...
閱讀 454·2024-11-07 18:25
閱讀 130762·2024-02-01 10:43
閱讀 943·2024-01-31 14:58
閱讀 904·2024-01-31 14:54
閱讀 83001·2024-01-29 17:11
閱讀 3263·2024-01-25 14:55
閱讀 2056·2023-06-02 13:36
閱讀 3166·2023-05-23 10:26
