资讯专栏INFORMATION COLUMN

零碎的知识(一)

ernest.wang / 812人阅读

摘要:同时,由于本身的实现大部分是纯函数,因此在版本中,一些不含副作用的均在中暴露了以为前缀的函数方法,也可以直接导入使用。在浏览器中神秘丢失尝试检查被请求的是否存在尾部斜线,具体原因暂时没有找到相关资料。

写在前面

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

但是忙里偷闲还是整理了一些零碎的笔记,大体都是关于工作中遇到的实际问题或者衍生问题,比较乱,但还是具有一定的参考意义,所以整理出来分享给大家,有的知识点包含一个或多个参考链接以及一段描述,有的只包含一段描述,但我觉的都足以描述解决问题的思路了。

其实我感觉这种记录性的学习方式还挺好的,以后会继续坚持,然后每攒够 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 ,因此可以通过依赖注入的方式获取相应实例并使用,但是别忘了在 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,只谈技术,不谈人生

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102302.html

相关文章

  • js 零碎知识整理

    摘要:,看了这样的解释,或许让你更摸不着头脑了。弹出弹出在这个例子中,只要会使用浏览器的朋友,都能看得出来完全继承了的属性和方法,否则是无法解释的,因为在中并没有定义属性和,那么按常理推断在的实例对象中,并不会出现这两个属性。 快速删除尾部数组 var arr=[1,2,3,4,5]; arr.length=3; console.log(arr)//[1,2,3] 直接改变数组的length...

    liaorio 评论0 收藏0
  • 零碎知识(二)

    摘要:目录零碎的知识一新的媒体查询属性这个媒体查询属性的作用是,当用户在操作系统中设置了的选项时,能够根据其值声明不同的样式,因为有的人可能喜欢炫酷的特效,有的人可能更倾向于内容比如我,而有的人甚至因为生理问题无法接受这些特效。 目录 零碎的知识(一) 新的媒体查询属性 prefers-reduced-motion https://developers.google.com...https...

    wqj97 评论0 收藏0
  • PHP socket初探 --- 零碎细节拾漏补缺

    摘要:原文前面可以说是弄了一系列的和多进程的一大坨内容,知识浅显代码粗暴风格简陋,总的说来,还是差了一些细节。今天,就一些漏掉的细节补充一下。最后,我补充一句是同步的,而不是异步。 原文:https://t.ti-node.com/thread/... 前面可以说是弄了一系列的php socket和多进程的一大坨内容,知识浅显、代码粗暴、风格简陋,总的说来,还是差了一些细节。今天,就一些漏...

    chengjianhua 评论0 收藏0
  • 用了这么长时间python开发,你还记得多少零碎基础知识

    摘要:输出下标和对应的元素集合集合是无序的,集合中的元素是唯一的,集合一般用于元组或者列表中的元素去重。 python内置的数据类型 showImg(https://segmentfault.com/img/bVbrz1j); Python3.7内置的关键字 [False, None, True, and, as, assert, async, await, break, class, co...

    zollero 评论0 收藏0
  • CSS零碎之em、rem

    摘要:移动端的开发基本很少直接使用作为单位了,目前最常用的是。一般移动端页面的开发流程是设计人员以某个机型作为标准,设计好。前端开发针对这个机型的做开发,然后其它机型相对的去等比例缩放。 移动端的开发基本很少直接使用px作为单位了,目前最常用的是rem。不过在这之前其实还有个em单位,和rem长得非常的像,那么它们有什么区别呢?又有什么不一样的适用场景呢? 注意:无论使用em,还是rem,客...

    Faremax 评论0 收藏0

发表评论

0条评论

ernest.wang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<