零碎的知识（一）

写在前面

最近没怎么写新的东西，一是由于一直在准备换新的工做，因此一直在准备面试，二是由于过年，心静不下来，因此也没法输出或者翻译一些文章，三是因为手头还有一些遗留工做须要完成和交接，比较忙。

可是忙里偷闲仍是整理了一些零碎的笔记，大致都是关于工做中遇到的实际问题或者衍生问题，比较乱，但仍是具备必定的参考意义，因此整理出来分享给你们，有的知识点包含一个或多个参考连接以及一段描述，有的只包含一段描述，但我觉的都足以描述解决问题的思路了。

其实我感受这种记录性的学习方式还挺好的，之后会继续坚持，而后每攒够 10 个就整理成一篇文章，一来能够帮助本身温故知新，二来能够帮助更多的人。

如何获取一个元素盒的 baseline 的位置？

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

原理为在元素盒末尾添加两个内容为 X 的且 vertical-align 位置默认值的子元素，以后将第二个子元素的 font-size 设置为 0，这样因为默认状况下元素的垂直对齐方式是与父元素盒的 baseline 对齐的，因为 font-size: 0 的缘故，该元素的 top 也与 baseline 对齐，所以就能够经过 getBoundingClientRect 分别获取两个子元素的 top 值并求差取得。

但要注意的是，这样求得的 baseline 的位置并不必定是最原始的位置，由于 baseline 的位置会根据行内子元素的样式动态地发生改变，关于改变的规则，可参考这篇文章。

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

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

应该是 []，有兴趣的能够阅读 es 标准中有关这部分的章节。

那么如何断定一个 set 是否为空呢？能够直接经过其实例属性 `size 来断定，好比

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

当 table 的 border-collapse 样式属性为 collapse 时，悬浮 td 边框显示不完整

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

能够将 td 的 border-style 样式属性设置为 double，以下：

td: hover {
    border-style: double;
}

获取 es6 中 class 的 name ?

能够经过 this.constructor.name 来获取。原理是 constructor 自己实际上是一个函数，而 js 中的每一个函数均有 name 属性指向其函数名，而 class 的 name 偏偏就是 constructor 的函数名，所以能够经过这种方式得到。

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 ，所以能够经过依赖注入的方式获取相应实例并使用，可是别忘了在 NgModule 的 providers 属性中声明。

同时，因为 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，只谈技术，不谈人生