无穷期更新前端的一些坑，一些纪录，一些冷学问
https://github.com/ssshooter/…

也许从 17 年的六月份最先纪录吧，也已一年了，个中也包括了一些很简朴的学问，之前还以为挺难的，如今看起来有点谜之慨叹…

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 事宜，然则该事宜仅在多少可见字符的输入之前，而这些可见字符的输入能够须要一连串的键盘操纵、语音辨认或许点击输入法的备选词）。
• void 0（void背面加任何东西）用于天生一个相对的 undefined（不会被重定义），但跟函数会有副作用
• 注重 localStorage 保留的只能是字符串，所以是没有 null 的。

• 坑一个

  typeof [] === 'object' // true
  typeof null === 'object' // true

• import 同步，require异步（待补充）

• new() 做了些什么？

  var obj = new Base();
  var obj  = {};
  obj.__proto__ = Base.prototype;
  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()。
• || 的运用场景：左侧为假继承实行右侧，如 let i = value || defalutValue。

Vue.js

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

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

  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force" 
      }
    }

• 组件 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 fixes fixed resolve resolves resolved
• git reset --soft HEAD^ 回退一次 commit

CSS

• div 的默许宽度是父元素宽的 100%

• 逐帧动画 animation: animate-name 3s steps(每次轮回的帧数) infinite;

  @keyframes animate-name{
      from{
      <!--原位-->
          background-position: 0 0; 
      }
      to{
      <!--末了一帧-->
          background-position: -1540px 0 ;
      }
  }

• “Break out” of a parent’s containing width to take the full screen of a page w/this nice utility class:

  .full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

• 行内元素与下一个元素中心有空格（一般排版）,会引起一些诡异的漏洞，罕见的比方元素之间有距离，或看起来空了一行（像加了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 属性：

  user-select: none; // 制止笔墨被选中
  outline:none; // 去除点击外边框,点击无表面
  -webkit-touch-callout: none; // 长按链接不弹出菜单
  -webkit-tap-highlight-color: rgba(0,0,0,0); // 去除点击高亮

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

• img 元素图象自适应居中，与 background-size 结果一样

  object-fit: cover; 

• <img /> 标签万万记得写宽高，不然会花式陷落
• flex-grow 地点元素假如不决宽度的话，宽度会被子元素撑开
• 一个英文单词默许不换行，不管多长，所以要设置 word break

• 多行笔墨居中

  .mulit_line{ 
      border:1px dashed #cccccc; 
      padding-left:5px;
  }
  .mulit_line span{ 
      display:inline-block; 
      line-height:14px; 
      vertical-align:middle;
  }

• safari 中掌握惯性转动 -webkit-overflow-scroll
• 转动条款式能够使转动条强迫显现（未确定）
• flex 规划不换行加 flex-shrink: 0; 完成 div 不紧缩无穷并排，能够用于 swiper 等场景。
• 巧用猫头鹰挑选器 +
• float 自带 display: inline-block
• 鼠标禁用 .disabled { pointer-events: none; }
• 注重 :last-child 与 :last-of-type 的辨别
• ::after 示意法是在 CSS3 中引入的，:: 标记是用来辨别伪类和伪元素的。支撑CSS3的浏览器同时也都支撑 CSS2 中引入的示意法 :after。
• 父元素假如存在 transform 属性，子元素的 position: fixed 属性无效
• less 中的 calc 题目：height: calc(~"100% - 50px");
• vh 在部份浏览器中包括地址栏部份，警惕运用。

VSCode

• alt + shift + 鼠标点击 纵向挑选
• vetur 分号题目: 装置 prettier，然后设置 "prettier.singleQuote":true,"prettier.semi": false
• 能够运用插件 document this 轻易写解释
• html tag 属性分行 wrap_attributes:force
• 选定变量后按 F12 找到定义位置

其他

• 魔法隧道用 webpack 代理会 502
• 在组件化编程中，吊唁被同名组件浪费了几个钟的 debug 时候[烛炬]
• 局域网连不通的话，先尝尝，开同享，封闭防火墙
• 局域网连不通的话，还能够尝尝，在 webpack.config.js 文件的 devServer 里加上host:'0.0.0.0'。
• iOS 的回弹结果，动的是 body 部份，html 是不动的
• 进修一个言语之前先看范例
• safari 的 formdata 只支撑 append，其他要领须要 polyfill
• rc 的意义是 run commands
• 导航栏高度 88px，标签栏高度 98px（iphone5和6经常使用）
• 关于 HTTP 304 Not Modified，简朴来讲，要求内容没有发作变化的时刻，依据设置，服务器能够直接取缓存返回