日常工作碰到的小问题记录
写在前面
今年刚毕业工作第一个年头，也是刚开始学着做前端的一些东西，学校里所学的东西实在有限，日常难免会碰到一些对于自己这个小菜鸟来说是很奇怪的问题(可能对大佬来说是小儿科)，刚入门虚心学习，对于碰到的一些问题以此做一些记录、整理，解决方案基本来源于查找的资料如有错误还望指导。
Html
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的四种方式)-
子绝父相
- relative相对定位会在标准流当中占位置；
- absolute绝对定位不会在标准流当中占位置；
- 绝对定位一定要有参照物才能相对参照物进行定位；
- 绝对定位是 相对于距离它最近的已经定位的祖先元素 进行定位
- 不一定非要“子绝父相”，子绝父绝也是可以的，把脱离文档流的元素放在不脱离文档流（需要占位置）的元素上就要用"子绝父相"
-
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样式
-
element.style:只能获取写在元素标签中的style属性里的样式值，
无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性 -
window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。
window.getComputedStyle(“元素”, “伪类”); 伪类可以为null; -
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
-
事件捕获/冒泡
- 事件捕获
捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，
不过必须由开发人员特别指定) - 事件冒泡
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(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
{
width: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的四种方式
- 构造函数内部使用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>
)
}
}
```
