零碎的知識(一)

寫在前面

最近沒怎麼寫新的東西,一是由於一直在準備換新的工做,因此一直在準備面試,二是由於過年,心靜不下來,因此也沒法輸出或者翻譯一些文章,三是因爲手頭還有一些遺留工做須要完成和交接,比較忙。css

可是忙裏偷閒仍是整理了一些零碎的筆記,大致都是關於工做中遇到的實際問題或者衍生問題,比較亂,但仍是具備必定的參考意義,因此整理出來分享給你們,有的知識點包含一個或多個參考連接以及一段描述,有的只包含一段描述,但我覺的都足以描述解決問題的思路了。html

其實我感受這種記錄性的學習方式還挺好的,之後會繼續堅持,而後每攢夠 10 個就整理成一篇文章,一來能夠幫助本身溫故知新,二來能夠幫助更多的人。html5

如何獲取一個元素盒的 baseline 的位置?

https://stackoverflow.com/que...

原理爲在元素盒末尾添加兩個內容爲 X 的且 vertical-align 位置默認值的子元素,以後將第二個子元素的 font-size 設置爲 0,這樣因爲默認狀況下元素的垂直對齊方式是與父元素盒的 baseline 對齊的,因爲 font-size: 0 的緣故,該元素的 top 也與 baseline 對齊,所以就能夠經過 getBoundingClientRect 分別獲取兩個子元素的 top 值並求差取得。git

但要注意的是,這樣求得的 baseline 的位置並不必定是最原始的位置,由於 baseline 的位置會根據行內子元素的樣式動態地發生改變,關於改變的規則,可參考這篇文章es6

Object.keys(new Set([1, 2, 3]) 的值是什麼?

https://github.com/30-seconds...

應該是 [],有興趣的能夠閱讀 es 標準中有關這部分的章節。github

那麼如何斷定一個 set 是否爲空呢?能夠直接經過其實例屬性 `size 來斷定,好比面試

new Set([1, 2, 3]).size // 3

當 table 的 border-collapse 樣式屬性爲 collapse 時,懸浮 td 邊框顯示不完整

https://stackoverflow.com/que...

能夠將 td 的 border-style 樣式屬性設置爲 double,以下:canvas

td: hover {
    border-style: double;
}

獲取 es6 中 class 的 name ?

能夠經過 this.constructor.name 來獲取。原理是 constructor 自己實際上是一個函數,而 js 中的每一個函數均有 name 屬性指向其函數名,而 class 的 name 偏偏就是 constructor 的函數名,所以能夠經過這種方式得到。api

Angular 中的 animation 模塊如何在運行時動態傳入 styles

之因此遇到這個問題,是由於在使用 @angular/animation 的過程當中,當動畫的目標狀態沒法提早定義時,如何聲明 AnimationMetadata,好比窗口縮放動畫,你沒法預知運行時的窗口縮放大小。瀏覽器

這部份內容在官方文檔中沒有示例,僅在 api 文檔 中提了一下,其本質上就是利用 animation params 來動態地在運行時傳入某個動畫狀態下的某個 style 屬性,好比縮放動畫中涉及的 width 或者 height 屬性。

另外還有一個問題就是,當在使用 animate() 時,其第一個參數暫時不支持 animation-fill-mode,這就會形成當完成一個動畫時,沒法指定其動畫的終止狀態,好比在聲明縮放動畫時,縮放動畫會按預期進行,但當動畫交互完畢後,其元素樣式又恢復到了動畫發生以前的樣式了。

暫時的解決方法是經過 ngStyle 來暫存動畫的終止狀態並綁定到相應的 dom 元素上,這樣當動畫完成時,其元素樣式就會是動畫終止時的狀態了。

Angular 中的 NgZone.run() 和 ChangeDetectorRef.detectChanges() 的區別?

https://stackoverflow.com/que...

NgZone.run() 會在應用總體,自上而下所有進行髒檢查校驗,而 cdr.detectChanges() 僅僅會對某個具體的組件進行髒檢查。

從適用角度來說,大部分狀況適用 cdr.detectChanges()cdr.markForCheck() 已經足夠知足日程工做需求了,但有些時候,當頁面有多個組件的 UI 層狀態與數據層狀態不一致時,使用 NgZone.run() 則更好。

另外,一些工具庫的源碼實現中,爲了儘量的提升性能,都會使用 NgZone.runOutsideAngular() 將與 UI 層無關的邏輯移出髒檢查校驗流程,好比 cdk 中的 ScrollDispatcher,在使用時若是最終須要與一些組件的 UI 層狀態發生關係,應當手動管理髒檢查機制來觸發這些變更。

Angular 中如何在 service 和 component 中使用 pipe ?

https://stackoverflow.com/que...

pipe 自己便是 provider ,所以能夠經過依賴注入的方式獲取相應實例並使用,可是別忘了在 NgModuleproviders 屬性中聲明。

同時,因爲 pipe 自己的實現大部分是純函數,所以在 v6 版本中,一些不含反作用的 pipe 均在 @angular/common 中暴露了以 format 爲前綴的函數方法,也能夠直接導入使用。

Canvas 在 retina 屏中繪製圖片或字體發虛怎麼辦?

https://stackoverflow.com/que...
https://www.html5rocks.com/en...

咱們繪製圖片或者字體時,通常指的是邏輯像素,而 canvas 會將邏輯像素自動按照渲染設備的 devicePixelRatio 的值來渲染,所以,在 retina 這種高清顯示屏幕中,因爲其 devicePixelRatio 爲 2,所以 1px 的邏輯像素至關於 2px 的物理像素,渲染結果會發虛,實際上是被放大了。

解決方法就是,利用 canvas 的 setTransform 或者 scale 方法來對 canvas 的進行放大,以後再利用 css 屬性 width 和 height 進行縮小(這個過程是透明的,瀏覽器會幫咱們完成),這樣,在 canvas 繪製時,咱們就無需關係邏輯像素與物理像素之間的區別了。

值得一提的是,對於物理像素,能夠經過 devicePixelRatio 來獲取。

Authorization Header 在 Safari 瀏覽器中神祕丟失?

嘗試檢查被請求的 api url 是否存在尾部斜線(trailing slash),具體緣由暫時沒有找到相關資料。

如何移除 git 提交歷史中關於某個文件的修改歷史?

場景是這樣的,在一次提交 PR 的 review 過程當中,我提交的一個文件,在若干 commits 的修改下,最終和最初狀態徹底相同,可是 PR 中卻保留了對該文件的提交歷史,所以 reviewer 但願我能夠將這個文件移除提交歷史。

這個主要須要用到 git rebase ,步驟以下:

  • git log filename: 首先經過 git log 來查詢要回滾到的 commit id
  • git reset commit-id filename: 對該文件進行 reset 操做(撤銷提交歷史相關的修改)
  • git checkout filename: 對其進行 checkout 操做(撤銷對文件自己的修改)
  • git commit --amend: 修改提交歷史信息
  • git rebase --continue/git push: 同步
關注公衆號 全棧101,只談技術,不談人生

clipboard.png

相關文章
相關標籤/搜索