日常工作碰到的小问题记录

写在前面

​ 今年刚毕业工作第一个年头，也是刚开始学着做前端的一些东西，学校里所学的东西实在有限，日常难免会碰到一些对于自己这个小菜鸟来说是很奇怪的问题(可能对大佬来说是小儿科)，刚入门虚心学习，对于碰到的一些问题以此做一些记录、整理，解决方案基本来源于查找的资料如有错误还望指导。

Html

1. 子绝父相

2. canvas

3. ClientX

4. flex布局

5. 边距塌陷

6. 不换行空格

7. overflow设置滚动条

Js

1. [continue](#continue) 2. [判断窗口刷新还是关闭](#判断窗口刷新还是关闭) 3. [new一个对象的四个过程](#new一个对象的四个过程) 4. [事件冒泡](#事件冒泡) 5. [js获取css样式](#js获取css样式) 6. [jQuery的attr设置多个属性](#jQuery的attr设置多个属性) 7. [fetch获取数据](#fetch获取数据) 8. [类型转换](#类型转换) 9. [事件捕获/冒泡](#事件捕获/冒泡) 10. [精度问题(0.1 + 0.2不等于0.3)](#精度问题(0.1 + 0.2不等于0.3))

Css

1. [css3实现动画](#css3实现动画) 2. [伪元素](#伪元素) 3. [visibility,opacity,filter,box-shadow](#visibility,opacity,filter,box-shadow) 4. [css3 hover变宽度](#css3 hover变宽度) 5. [css权重](#css权重)

React

1. [组件通信](#组件通信) 2. [react-app-rewired扩展配置](#react-app-rewired扩展配置) 3. [绑定this的四种方式](#绑定this的四种方式)

• 子绝父相

1. relative相对定位会在标准流当中占位置；
2. absolute绝对定位不会在标准流当中占位置；
3. 绝对定位一定要有参照物才能相对参照物进行定位；
4. 绝对定位是 相对于距离它最近的已经定位的祖先元素 进行定位
5. 不一定非要“子绝父相”，子绝父绝也是可以的，把脱离文档流的元素放在不脱离文档流（需要占位置）的元素上就要用"子绝父相"

• canvas

  ctx = canvas.getContext("2d");
  ctx.arc(x, y, r, startAngle, endAngle, anticlockwise);

以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针(默认是顺时针)。

  ctx.rect(x, y, width, height)
  //x,y矩形左上角坐标。
  fillStyle = color //设置图形的填充颜色
  strokeStyle = color //设置图形轮廓的颜色

canvas可实现渐变的颜色条，用input:range可以实现获取当前位置的x值，可以通过x值来获取canvas画布上的颜色值。
从而可以实现拖动条来读取出颜色。

canvas实现渐变的颜色条：

  var oCanvas = document.querySelector("#canvas");
  var oGc = oCanvas.getContext('2d');
  var linear = oGc.createLinearGradient(0, oCanvas.clientHeight, oCanvas.clientWidth, oCanvas.clientHeight);
  linear.addColorStop(0, 'rgb(255,0,0)');
  linear.addColorStop(.15, 'rgb(255,0,255)');
  linear.addColorStop(.4, 'rgb(0,0,255)');
  linear.addColorStop(.55, 'rgb(0,255,255)');
  linear.addColorStop(.7, 'rgb(0,255,0)');
  linear.addColorStop(.85, 'rgb(255,255,0)');
  linear.addColorStop(1, 'rgb(255,0,0)');
  oGc.fillStyle = linear;
  oGc.fillRect(0, 0, oCanvas.width, oCanvas.height);

• ClientX

推荐使用：

• screenX/Y：鼠标位置相对于屏幕的坐标

• pageX/Y：相对于文档边缘（包含滚动条距离）

• clientX/Y：相对于当前页面且不包含滚动条距离

• offsetX/Y：相对于当前元素（块或行内块），除safari外不包含边框。

• 其他：

  X/Y：与clientX/Y相同，firefox不支持
  layerX/Y：除IE外与pageX/Y相同，IE11下与clientX/Y相同。非官方属性。

• flex布局

  .inputText-btn{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

能使子元素居中。

• 边距塌陷

两个垂直相邻的边距 没有任何真实东西填充以分隔二者，于是外边距合并了，此之谓边距塌陷
需要将两个盒子之间填充内容， 解决方法： (可选以下其中一种)

  border:1px solid transparent;
  padding:1px;
  float:left/right
  position:absolute
  display:inline-block
  overflow:hidden/auto

• 不换行空格

     //not breaking space;

• overflow设置滚动条

• continue

循环中 continue = 到循环尾()

• 判断窗口刷新还是关闭

页面加载时只执行onload
页面关闭时先执行onbeforeunload，然后onunload
页面刷新时先执行onbeforeunload，然后onunload，最后onload。
页面关闭基本立即执行
页面刷新，浏览器需要做出一定的延迟准备。

  var beginTime = 0；//执行onbeforeunload的开始时间
  var differTime = 0;//时间差
  window.onunload = function (){
          differTime = new Date().getTime() - beginTime;
          if(differTime <= 5) {
              console.log("浏览器关闭")
          }else{
              console.log("浏览器刷新")
          }
      }
  window.onbeforeunload = function (){
     beginTime = new Date().getTime();
  };

• new一个对象的四个过程

  function Person(name, age) {  
  	this.name = name;  
  	this.age = age;   
  }  
  var person = new Person("Alice", 23); 
  
  // 1、创建一个空对象
  var obj = new Object(); 
  
  // 2、让Person中的this指向obj，并执行Person的函数体
  var result = Person.call(obj);  
  
  // 3、设置原型链，将obj的__proto__成员指向了Person函数对象的prototype成员对象
  obj.__proto__ = Person.prototype; 
  
  
  // 4、判断Person的返回值类型，如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。
  if (typeof(result) == "object") 
  	person = result;  
  else
  	person = obj;

• 事件冒泡

事件会上父级元素传递。

  event.stopPropagation();

可阻止。

• js获取css样式

1. element.style:只能获取写在元素标签中的style属性里的样式值，
   无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性

2. window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。
   window.getComputedStyle(“元素”, “伪类”); 伪类可以为null;

3. getPropertyValue()：获取CSS样式的直接属性名称
   var ele = document.getElementById('ele');
   window.getComputedStyle(ele,null).getPropertyValue('color');

• jQuery的attr设置多个属性

  $("#w3s").attr({
      "href" : "http://www.w3school.com.cn/jquery",
      "title" : "W3School jQuery Tutorial"
    });

• fetch获取数据

  let url = "https://easy-mock.com/mock/5d5b3fe69456f51c8e005adf/list/list"
  fetch(url).then((response)=>response.json()
  ).then((data)=>console.log(data.array))

• 类型转换

字符串转换为数字 一般用到parseInt(string)和Number(string),而两者的区别在于
parseInt(string)是从string第一个字符开始转换,到不是数字的字符为止,如果第一个字符就不是数字则返回NaN;
Number(string)是强制类型转换,若string中任意位置有非数字字符则返回NaN;
eg: parseInt("123a") // 123
Number("123a") // NaN

• 事件捕获/冒泡

1. 事件捕获
   捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，
   不过必须由开发人员特别指定)
2. 事件冒泡
   冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

• 这里可以有一个我感觉十分恰当的比喻，当你把一个可以漂浮在水面上的物品，使劲向水里砸下去，它会首先有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程;之后由于浮力大于物体自身的重力，物体会在到达最低点（ 最具体元素）之后漂浮到水面上，这个过程相对于事件捕获是一个回溯的过程，即事件冒泡。

• 精度问题(0.1 + 0.2不等于0.3)

js精度的问题
解决办法：

• Number.EPSILON，而这个值正等于2^-52。这个值非常非常小，在底层计算机已经帮我们运算好，并且无限接近0，但不等于0。
  这个时候我们只要判断(0.1+0.2)-0.3小于Number.EPSILON

• css3实现动画

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

  @keyframes rotate {
      100% {
          transform: rotate(-360deg);
      }
  	
  animation: rotate 5s infinite linear;

rotate动画名，linear：动画匀速运动，infinite：表示动画无限循环，5s是动画完成时间

• 伪元素

::after ::before
用来定义伪元素 图标。

• visibility,opacity,filter,box-shadow

设置属性visibility:hidden;,该元素被隐藏，同样隐藏的元素对页面的布局仍起作用，但它不会影响任何用户交互，
而且它的子孙元素也会在设置为visibility：visible。

opacity:设置属性opacity:0；，只是从视觉的角度隐藏了该元素，而该元素本身还是占据页面中的布局，
而且，这种隐藏会响应用户的交互。

filter: 整个盒子的阴影 filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
box-shadow: box-shadow: 5px 5px 1px rgba(0,0,0,0.7);(非整个)

• css3 hover变宽度

  transition:width 2s;
  div:hover
  {
  	300px;
  }

• css权重

从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

第零等：!important， 大过了其它任何设置。
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
第五等：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
第六等：继承的样式没有权值。

• 组件通信

react组件通信
子组件向父组件获取数据
子组件调用父组件函数
父组件通过ref可调用子组件函数(参考:https://www.cnblogs.com/houjl/p/11165777.html)

• react-app-rewired扩展配置

package中react-app-rewired代替react-scripts 详细可百度~

• 绑定this的四种方式

1. 构造函数内部使用bind绑定this

  constructor (props) {
  super(props)
  this.handleClick = this.handleClick.bind(this)
  }
  ```

2. render函数内bind绑定，但是这样的话，每次渲染都需要重新绑定

 ```react
   <button onClick={ this.handleClick.bind(this, '赵四') }>Say Hello</button>
   ```

3. 在render函数中，调用方法的位置包裹一层箭头函数，因为箭头函数的this指向箭头函数定义的时候其所处作用域的this，而箭头函数在render函数中定义，render函数this始终指向组件实例，所以箭头函数的this也指向组件实例

 ```react
   <button onClick={ ()=>{ this.handleClick() } }>Say Hello</button>
   ```

4. 使用箭头函数来定义需要绑定的函数

 ```react
   class Test extends React.Component {
     constructor(props) {
       super(props)
       this.state = {
         message: 'Allo!'
       }
     }
   
     handleClick = (e) => {
       console.log(this.state.message)
     }
   
     render() {
       return (
         <div>
           <button onClick={this.handleClick}>Say Hello</button>
         </div>
       )
     }
   }
   ```