Web培训

热门话题:

Web前端培训 > Web职场 > 正文

Web前端工程师应该注意的冷知识

发布：Web前端培训
来源：Web职场
时间：2019-11-11 16:07

今天小编要跟大家分享的文章是关于Web前端工程师应该注意的冷知识。正在从事Web前端工作的小伙伴们来和小编一起看一看吧。希望能够对小伙伴们有所帮助。

Web前端工程师应该注意的冷知识

一、JavaScript

所有对象都有 __proto__ 属性，都指向创造对象的函数对象的 prototype。

上传文件要使用 formdata 包装。

Promise.prototype.catch 方法是 .then(null,rejection) 的别名。

同一个 EventTarget 注册了多个相同的 EventListener，那么重复的实例会被抛弃。所以这么做不会使得 EventListener 被调用两次，也不需要用 removeEventListener 手动清除多余的EventListener，因为重复的都被自动抛弃了。

当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样,而 target 是直接接受事件的子元素。

scrollIntoView() 使 div 底部滚动到视窗。

使用 const 的对象和数组的内容是可以被修改的，但数据结构不可变。

在 Webpack 里，所有的文件都是模块。loader 的作用就是把文件转换成 Webpack 可以识别的模块。

关于事件循环，执行下一个 task 之前总会清空 microtask。

npm 新旧版本覆盖可能会造成迷之问题，这个时候可以试试 node_module 整个删掉重装。

* 、 / 和 - 操作符都是数字运算专用的。当这些运算符与字符串一起使用时，会强制转换字符串为数字类型的值。

document.title 可以直接修改当前 html 的标题。

利用对象浅拷贝修改对象，指向同一对象的两个变量修改对象的效果一样。

脑洞题：1 和 2 只用一次的情况下怎么得到 4 答案：1<<2。

连等赋值从右到左。

compositionstart 事件触发于一段文字的输入之前(类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。

void0(void后面加任何东西)用于生成一个绝对的 undefined(不会被重定义)，但跟函数会有副作用

注意 localStorage 保存的只能是字符串，所以是没有 null 的。

坑一个：

1. typeof [] === 'object' // true

2. typeof null === 'object' // true

import 同步，require异步(待补充)。

new() 做了些什么?

1. var obj = new Base();

2. var obj = {};

3. obj.__proto__ = Base.prototype;

4. Base.call(obj);

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 是不是空对象。

getBoundingClientRect() 用于获取元素宽高以及距离页面边框距离，十分方便。

&& 的使用场景：左边为真继续执行右边，如 isDog&&bark()。

|| 的使用场景：左边为假继续执行右边，如 leti=value||defalutValue。

二、Vue.js

v-model 会自动 bind 一个值，其变量名为 value。

多个特性的元素应该分多行撰写，每个特性一行。以下为 vscode 里 vetur 的设置：

1. "vetur.format.defaultFormatterOptions": {

2. "js-beautify-html": {

3. "wrap_attributes": "force"

4. }

5. }

组件 destroy 时触发自定义指令的 unbind，destory 的时机：diff 之后的 patch,如 v-if，v-for(key不同时，先销毁原来的，再挂载新的(推测))

自定义组件 v-model watch 自动匹配(存疑

组件的 data 属性要用函数返回的原因：创建实例时如果 data 是一个对象的话，所有实例都会引用同一个对象，而对象返回不会有此问题。在浏览器中可以这么做是因为根实例只有一个。

.vue 文件中使用 /deep/ 覆盖子组件 css。

三、GitHub

从 commit 关闭 issues 的方法：commit 信息写 Fixes#33，其他关键字还有 close closes closed fix fixesfixedresolve resolves resolved。

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

四、CSS

div 的默认宽度是父元素宽的 100%。

逐帧动画 animation:animate-name3ssteps(每次循环的帧数)infinite;：

1. @keyframes animate-name{

2. from{

3.

4. background-position: 0 0;

5. }

6. to{

7.

8. background-position: -1540px 0 ;

9. }

10. }

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

1. .full-width {

2. width: 100vw;

3. position: relative;

4. left: 50%;

5. right: 50%;

6. margin-left: -50vw;

7. margin-right: -50vw;

8. }

行内元素与下一个元素中间有空格(正常排版),会引起一些诡异的缝隙，常见的例如元素之间有间隔，或看起来空了一行(像加了padding)。

pre 标签设置自动换行：white-space:pre-wrap;。

隐藏一个元素，同时让这个元素的宽度可获取：设置 overflow:hidden，可以根据元素高度裁剪视区，设置 height:0;overflow:hidden。虽然文档流中占用了位置，由于高度为 0，最终表现特征达到了我们期望的 display:none。此时该元素 clientHeight、 offsetHeight为 0，但是 scrollHeight 是有值的。

scrollHeight 是一个元素没有滚动条时的所有内容高度,当一个元素没有滚动条时 scrollHeight===offsetHeight。

当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

当页面中元素样式的改变并不影响它在文档流中的位置时(例如：color、background-color、visibility等)，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

回流必将引起重绘，重绘不一定会引起回流。

移动端优化常用 CSS 属性：

1. user-select: none; // 禁止文字被选中

2. outline:none; // 去除点击外边框,点击无轮廓

3. -Webkit-touch-callout: none; // 长按链接不弹出菜单

4. -Webkit-tap-highlight-color: rgba(0,0,0,0); // 去除点击高亮

@keyframes 的属性要前后对应，否则不形成动画。

img 元素图像自适应居中，与 background-size 效果一样：

1. object-fit: cover;