atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://wangxiansen15.github.io</id>
    <title>王先森想要更充实一点</title>
    <updated>2022-04-05T12:31:17.203Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://wangxiansen15.github.io"/>
    <link rel="self" href="https://wangxiansen15.github.io/atom.xml"/>
    <subtitle>岁月悠悠，衰微只及肌肤；
热忱抛弃，颓废必至灵魂。</subtitle>
    <logo>https://wangxiansen15.github.io/images/avatar.png</logo>
    <icon>https://wangxiansen15.github.io/favicon.ico</icon>
    <rights>All rights reserved 2022, 王先森想要更充实一点</rights>
    <entry>
        <title type="html"><![CDATA[React类组件中事件绑定导致this丢失]]></title>
        <id>https://wangxiansen15.github.io/post/react-lei-zu-jian-zhong-shi-jian-bang-ding-dao-zhi-this-diu-shi/</id>
        <link href="https://wangxiansen15.github.io/post/react-lei-zu-jian-zhong-shi-jian-bang-ding-dao-zhi-this-diu-shi/">
        </link>
        <updated>2022-04-05T12:03:09.000Z</updated>
        <content type="html"><![CDATA[<h3 id="问题">问题</h3>
<pre><code class="language-react">import React, { Component } from 'react'

export default class Demo extends Component {

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

	handleClick() {
		console.log(this) // Demo组件的实例对象
	}
	
	render() {
		return (
			&lt;button onClick={this.handleClick}&gt;Click me!&lt;/button&gt;
		)
	}
}

</code></pre>
<pre><code class="language-react">import React, { Component } from 'react'

export default class Demo extends Component {

	constructor(props) {
		super(props)
	}

	handleClick() {
		console.log(this) // undefined
	}
	
	render() {
		return (
			&lt;button onClick={this.handleClick}&gt;Click me!&lt;/button&gt;
		)
	}
}

</code></pre>
<blockquote>
<p>问题描述：在使用React类组件时，如果进行事件绑定，我们一般会用bind或者箭头函数对函数的this值进行绑定。那么为什么会出现this丢失的问题呢？</p>
</blockquote>
<p>其实出现this丢失这种问题<strong>不是React的问题，而是JavaScript的问题</strong>。让我们简单回顾一下JavaScript中this的机制。</p>
<h3 id="javascript中this的指向问题">JavaScript中this的指向问题</h3>
<ul>
<li>默认绑定（函数调用形式）</li>
</ul>
<pre><code class="language-js">function fun1() {
	console.log(this) // 严格模式：undefined  非严格模式：window
}
fun1()
</code></pre>
<p>这是一个普通的函数调用。this在非严格模式下指向window或者global对象。在严格模式下，this指向undefined。</p>
<ul>
<li>隐式绑定（方法调用模式）</li>
</ul>
<pre><code class="language-js">let person = {
    name: 'Yuuki Asuna',
    printName: function() {
        console.log(this)
    }
}

person.printName() // {name: 'Yuuki Asuna', printName: ƒ}
</code></pre>
<p>当我们用person对象来调用printName函数时，this指向person对象。</p>
<p><strong>隐式绑定this丢失的情况</strong></p>
<pre><code class="language-js">let person = {
    name: 'Yuuki Asuna',
    printName: function() {
        console.log(this)
    }
}
let print = person.printName
print() // window对象
</code></pre>
<p>当我们将函数的引用赋值给一个其他变量，当我们用这个新的变量去调用函数时，这是this又是window。</p>
<p>原因：<strong>当我们调用print时，没有去指定一个具体的上下文对象。这是个没有所有者对象的纯函数调用。在这种情况下，printName内部的this值会退回到默认绑定。</strong></p>
<p>同理，如果我们将函数作为一个参数传到另一个函数内部调用，如下：</p>
<pre><code class="language-js">let person = {
    name: 'Yuuki Asuna',
    printName: function() {
        console.log(this)
    }
}

function fun(callback) {
    callback()
}

fun(person.printName) // window对象
</code></pre>
<p>在传参的过程中，<code>callback = person.printName</code>会被执行，这样也导致printName失去宿主对象（即从方法调用变成了函数调用），即如果调用callback其中的this是指向window对象的（在严格模式指向undefined）。</p>
<ul>
<li>明确绑定</li>
</ul>
<p>那么如何解决隐式绑定（方法调用）变成默认绑定（函数调用）？</p>
<p>为了避免这种情况，我们可以使用<strong>明确绑定方法</strong>，将this的值通过bind方法绑定到函数上，这时候this的指向就不会发生改变</p>
<pre><code class="language-js">let person = {
    name: 'Yuuki Asuna',
    printName: function() {
        console.log(this)
    }
}

let print = person.printName.bind(person)

print() // {name: 'Yuuki Asuna', printName: ƒ}
</code></pre>
<h3 id="react中this指向丢失的原因">React中this指向丢失的原因</h3>
<p>说了这么多JavaScript中this指向问题，那和React中this指向丢失到底有什么关系呢？</p>
<pre><code class="language-react">render() {
    return (
    	&lt;button onClick={this.handleClick}&gt;Click me!&lt;/button&gt;
    )
}
</code></pre>
<p>其实是<strong>jsx</strong>导致this指向丢失的，实际上，JSX仅仅是<code>React.createElement(component, props, ...children)</code>函数的语法糖，所以上面的代码和下面的代码可以看成相同的。</p>
<pre><code class="language-react">React.createElement(&quot;button&quot;, {
  onClick: this.handleClick
}, &quot;Click me!&quot;);
</code></pre>
<p>我们可以很清楚的看到<code>React.createElement(component, props, ...children)</code>在传入第二个参数时进行了赋值操作，导致了this变成默认绑定，在严格模式下，this就指向了undefined。这就是React类组件中绑定事件函数会导致this指向丢失的原因。</p>
<h3 id="解决方法">解决方法</h3>
<ul>
<li>利用<code>this.handleClick = this.handleClick.bind(this)</code>将该函数与当前实例对象绑定，改变this指向</li>
<li>箭头函数：箭头函数不会绑定this，它会捕获其所在（即定义的位置）上下文的this，作为自己的this值
<ul>
<li>在声明时，将事件函数声明为箭头函数</li>
<li>在传递事件函数的时候，传递一个箭头函数<code>&lt;button onClick={() =&gt; { this.handleClick() }&gt;Click me!&lt;/button&gt;</code></li>
</ul>
</li>
</ul>
<h3 id="参考">参考</h3>
<blockquote>
<ol>
<li><a href="https://juejin.cn/post/6844903605984559118">[译] 为什么需要在 React 类组件中为事件处理程序绑定 this</a></li>
<li><a href="https://blog.csdn.net/CSDNzhaojiale/article/details/109690670">[React] 绑定事件为什么会this丢失</a></li>
</ol>
</blockquote>
]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[HTTP 状态码]]></title>
        <id>https://wangxiansen15.github.io/post/http-zhuang-tai-ma/</id>
        <link href="https://wangxiansen15.github.io/post/http-zhuang-tai-ma/">
        </link>
        <updated>2021-03-03T03:18:03.000Z</updated>
        <content type="html"><![CDATA[<h2 id="五类状态码">五类状态码</h2>
<ul>
<li>1**：提示信息，表示目前是协议处理的中间状态，还需要后续的操作</li>
<li>2**：成功，报文已经收到并被正确处理</li>
<li>3**：重定向，资源位置发生变动，需要客户端重新发送请求</li>
<li>4**：客户端错误，请求报文有误，服务器无法处理</li>
<li>5**：服务器错误，服务器在处理请求时内部发生了错误</li>
</ul>
<h2 id="常用状态码">常用状态码</h2>
<h3 id="1">1**</h3>
<h4 id="101-switching-protocols">101 Switching Protocols</h4>
<p>客户端使用了Upgrade头字段，要求在HTTP协议的基础上改成其他的协议继续通信。如果服务器也同意变更协议，就会发送状态码101，之后的数据传输就不会再使用HTTP了。</p>
<h3 id="2">2**</h3>
<h4 id="200-ok">200 OK</h4>
<p>最常见的成功状态码，表示一切正常，服务器如客户端所期望的那样返回了处理结果，如果是非HEAD请求，通常在响应头后都会有body数据。</p>
<h4 id="204-no-content">204 No Content</h4>
<p>很常见的成功状态码，它的含义与“200 OK”基本相同，但响应头后没有body数据</p>
<h4 id="206-partial-content">206 Partial Content</h4>
<p>是HTTP分块下载或断点续传的基础，在客户端发送“范围请求”、要求获取资源的部分数据时出现，它与200一样，也是服务器成功处理了请求，但body里的数据不是资源的全部，而是其中的一部分</p>
<p>状态码206通常还会伴随着头字段“Content-Range”，表示响应报文里的body数据的具体范围，供客户端确认，例如“Content-Range: bytes 0-99/2000”</p>
<h3 id="3">3**</h3>
<h4 id="301-moved-permanently">301 Moved Permanently</h4>
<p>永久重定向，含义是此次请求的资源已经不存在了，需要改用新的URL再次访问</p>
<h4 id="302-found">302 Found</h4>
<p>临时重定向，含义是请求的资源还在，但是需要暂时用另一个URL来访问</p>
<h4 id="location">Location</h4>
<p>301和302都会在响应头里使用字段Location指明后续要跳转的URL。</p>
<h4 id="304-not-modified">304 Not Modified</h4>
<p>缓存重定向，用于If-Modified-Since等条件请求，表示资源未修改，用于缓存控制。它不具有通常的跳转含义，但可以理解成“重定向到已缓存的文件”</p>
<h3 id="4">4**</h3>
<h4 id="400-bad-request">400 Bad Request</h4>
<p>是一个通用的错误码，表示请求报文有错误，但是错误信息没有明确说，是一个笼统的错误</p>
<h4 id="403-forbidden">403 Forbidden</h4>
<p>实际上不是客户端的请求出错，而是表示服务器禁止访问资源。</p>
<h4 id="404-not-found">404 Not Found</h4>
<p>原意是资源在本服务器上未找到，所以无法提供给客户端。现在已经被用烂了，只要服务器不高兴就可以给出一个404</p>
<h3 id="5">5**</h3>
<h4 id="500-internal-server-error">500 Internal Server Error</h4>
<p>通用错误码。服务器具体发生了什么错误我们不知道</p>
<h4 id="501-not-implemented">501 Not Implemented</h4>
<p>表示客户端请求的功能还不支持</p>
<h4 id="502-bad-gateway">502 Bad Gateway</h4>
<p>通常是服务器作为网关或者代理时返回的错误码，表示服务器自身工作正常，访问后端服务器时发生了错误</p>
<h4 id="503-service-unavailable">503 Service Unavailable</h4>
<p>表示服务器当前很忙，暂时无法响应服务</p>
]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[ 判断一个变量是不是数组]]></title>
        <id>https://wangxiansen15.github.io/post/pan-duan-yi-ge-bian-liang-shi-bu-shi-shu-zu/</id>
        <link href="https://wangxiansen15.github.io/post/pan-duan-yi-ge-bian-liang-shi-bu-shi-shu-zu/">
        </link>
        <updated>2021-03-01T14:38:01.000Z</updated>
        <content type="html"><![CDATA[<h2 id="方法一">方法一</h2>
<pre><code class="language-js">Array.isArray(value);

//实现原理
Array.prototype.isArray = function(value){
	return Object.prototype.toString.call(value) === &quot;[object Array]&quot;;
}
</code></pre>
<h2 id="方法二">方法二</h2>
<pre><code class="language-js">let a = new Array();
a instanceof Array;//true
</code></pre>
<h2 id="方法三">方法三</h2>
<pre><code class="language-js">let a = new Array();
a.constructor === Array;//true
</code></pre>
<h2 id="方法四">方法四</h2>
<pre><code class="language-js">Object.prototype.toString.call([]) === '[object Array]';
</code></pre>
]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[React组件之间的通信方式]]></title>
        <id>https://wangxiansen15.github.io/post/react-zu-jian-zhi-jian-de-tong-xin-fang-shi/</id>
        <link href="https://wangxiansen15.github.io/post/react-zu-jian-zhi-jian-de-tong-xin-fang-shi/">
        </link>
        <updated>2021-03-01T06:50:05.000Z</updated>
        <content type="html"><![CDATA[<h2 id="1props">1.props</h2>
<pre><code class="language-jsx">//App组件
class App extends Component {
    render() {
        return (
            &lt;div&gt;
                &lt;Footer content={123}/&gt;
            &lt;/div&gt;
        );
    }
}


//Footer组件
class Footer extends Component {
    render() {
        return (
            &lt;div&gt;
                &lt;h2&gt;父组件传来的的内容为: {this.props.content}&lt;/h2&gt;
            &lt;/div&gt;
        );
    }
}
</code></pre>
<h2 id="2消息订阅与发布">2.消息订阅与发布</h2>
<p>下载：<code>yarn add pubsub-js</code></p>
<pre><code class="language-jsx">//App组件
class App extends Component {
    render() {
        return (
            &lt;div&gt;
                &lt;Header/&gt;
                &lt;hr/&gt;
                &lt;Footer/&gt;
            &lt;/div&gt;
        );
    }
}

//Header组件
import React, {Component} from 'react';
import PubSub from 'pubsub-js';

class Header extends Component {
    render() {
        return (
            &lt;div&gt;
                &lt;h1&gt;组件一&lt;/h1&gt;
                &lt;input onChange={this.changeInput}/&gt;
            &lt;/div&gt;
        );
    }
    changeInput = (event) =&gt; {
        //发布
        PubSub.publish(&quot;input&quot;, event.target.value);
    }
}

export default Header;


//Footer组件
import React, {Component} from 'react';
import PubSub from 'pubsub-js';

class Footer extends Component {

    state = {
        content: ''
    };

    render() {
        return (
            &lt;div&gt;
                &lt;h2&gt;父组件传来的的内容为: {this.state.content}&lt;/h2&gt;
            &lt;/div&gt;
        );
    }

    componentDidMount() {
        //订阅
        PubSub.subscribe('input',  (_, data) =&gt; {
            this.setState({content: data});
        })
    }
}

export default Footer;

</code></pre>
<h2 id="3集中式管理redux">3.集中式管理Redux</h2>
<h2 id="4生产者消费者模式context">4.生产者消费者模式conText</h2>
<h3 id="理解">理解</h3>
<blockquote>
<p>一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信</p>
</blockquote>
<h3 id="使用">使用</h3>
<pre><code class="language-js">1) 创建Context容器对象：
	const XxxContext = React.createContext()  
	
2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
	&lt;xxxContext.Provider value={数据}&gt;
		子组件
    &lt;/xxxContext.Provider&gt;
    
3) 后代组件读取数据：

	//第一种方式:仅适用于类组件 
	  static contextType = xxxContext  // 声明接收context
	  this.context // 读取context中的value数据
	  
	//第二种方式: 函数组件与类组件都可以
	  &lt;xxxContext.Consumer&gt;
	    {
	      value =&gt; ( // value就是context中的value数据
	        要显示的内容
	      )
	    }
	  &lt;/xxxContext.Consumer&gt;
</code></pre>
]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[Position]]></title>
        <id>https://wangxiansen15.github.io/post/position/</id>
        <link href="https://wangxiansen15.github.io/post/position/">
        </link>
        <updated>2021-03-01T02:41:46.000Z</updated>
        <content type="html"><![CDATA[<h2 id="普通文档流">普通文档流</h2>
<p>普通文档流即按照HTML定义顺序完成排布，块级元素从上到下，行内元素从左到右依次排序。</p>
<h2 id="定位position">定位position</h2>
<ul>
<li>static</li>
<li>relative</li>
<li>absolute</li>
<li>fixed</li>
<li>sticky</li>
</ul>
<h3 id="static">static</h3>
<p>static是position的默认值，表示元素使用普通的文档流进行排列</p>
<h3 id="relative">relative</h3>
<p>relative表示相对定位，相对于该元素在普通文档流中的位置(即position：static)进行偏移，即基点是元素的默认位置。</p>
<p>relative并未脱离文档流，即其他普通元素在排布的时候会当它是普通元素，且会认为它还在原来的位置，即会预留出一块地址。</p>
<h3 id="absolute">absolute</h3>
<p>absolute表示绝对定位，相对于最近的非static的祖先元素进行定位，即其基点是最近的非static的祖先元素。</p>
<p>absolute完全脱离文档流（定义absolute属性的元素会在文档流中完全删除），即其他元素在排布的时候会忽略absolute元素。</p>
<h3 id="fixed">fixed</h3>
<p>fixed表示固定定位，相对于viewport视窗进行定位，且该元素也会脱离普通文档流。</p>
<p>fixed属性设置的元素不会随着页面滚动条的滚动而变化，像是被固定在窗口。</p>
<h3 id="sticky">sticky</h3>
<p>sticky表示粘性定位，该元素的基点会发生改变，粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特点阈值前为相对定位，之后为固定定位，直到 viewport 视口回滚到阈值以下。sticty生效的规则是必须配置位置，不然等同reactive。</p>
<p>在祖先的滚动元素未滚动到阈值之前，sticky属性元素根据正常文档流进行定位，并且left、right、top、bottom四个属性实际是未生效的，此时基点就是当前元素在文档流中的位置，与relative基点一样。<br>
当滚动的祖先元素滚动到sticky元素设置的阈值之后，sticky变成类似固定定位，且基点变成了滚动祖先元素的位置，就出现了该元素会固定在祖先元素上的现象。并且无论基点是什么都不会影响其它元素的位置，即sticky元素并未脱离文档流。</p>
<p>一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上。</p>
]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[水平居中和垂直居中]]></title>
        <id>https://wangxiansen15.github.io/post/shui-ping-ju-zhong-he-chui-zhi-ju-zhong/</id>
        <link href="https://wangxiansen15.github.io/post/shui-ping-ju-zhong-he-chui-zhi-ju-zhong/">
        </link>
        <updated>2021-03-01T00:59:57.000Z</updated>
        <content type="html"><![CDATA[<h1 id="水平居中">水平居中</h1>
<h2 id="行内元素">行内元素</h2>
<h3 id="1利用text-align属性">1.利用text-align属性</h3>
<p><strong>如果父元素不是块级元素，先使用display将父元素变为块级元素。</strong></p>
<pre><code class="language-html">&lt;style&gt;
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
    }
    #son {
    	background: antiquewhite;
    }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
    &lt;span id=&quot;son&quot;&gt;我是单行的行内元素&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<h2 id="块级元素">块级元素</h2>
<h3 id="1方案一">1.方案一</h3>
<h3 id="定宽">定宽</h3>
<h4 id="1利用margin0-auto">1.利用margin：0 auto</h4>
<pre><code class="language-html">&lt;style&gt;
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
    #son {
        width: 200px;
        background: antiquewhite;
        margin: 0 auto;
    }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
    &lt;span id=&quot;son&quot;&gt;我是有宽度的块级元素&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<h3 id="不定宽">不定宽</h3>
<h4 id="1利用inline-block或者inline转化为行内元素text-align">1.利用inline-block或者inline转化为行内元素，text-align</h4>
<p>这时默认子元素的宽度和父元素一样，这时候需要设置子元素为<code>block:inline-block||inline</code>将其转化为行内块级||行内元素，给父元素设置<code>text-align:center</code></p>
<pre><code class="language-html">&lt;style&gt;    
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
    }
    #son {
        background-color: green;
        display: inline||inline-block;
    }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
    &lt;div id=&quot;son&quot;&gt;我是块级元素&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h3 id="2方案二position">2.方案二position</h3>
<p>首先设置父元素为相对定位，然后设置子元素为绝对定位，设置子元素为<code>left:50%</code>,即让块级元素的左边框水平居中</p>
<ul>
<li>定宽度：<code>margin-left:-width/2</code>；或者设置<code>transform:translateX(-50%);</code></li>
<li>不定宽度：设置<code>transform:translateX(-50%)</code></li>
</ul>
<pre><code class="language-html">&lt;style&gt;
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
    }

    #son {
        width:100px;
        background-color: green;
        position: absolute;
        left: 50%;
        margin-left: -50px;||transform:translateX(-50%);
    }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
    &lt;div id=&quot;son&quot;&gt;我是块级元素&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<pre><code class="language-html">&lt;style&gt;
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
    }

    .son {
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
    &lt;div id=&quot;son&quot;&gt;我是块级元素&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h3 id="3方案三flex">3.方案三flex</h3>
<p>使用<code>display:flex;justify-content:center</code></p>
<pre><code class="language-html"> &lt;style&gt;
     #father {
         width: 500px;
         height: 300px;
         background-color: skyblue;
         display: flex;
         justify-content: center;
     }

    .son {
        background-color: green;
        height: 100px;
    }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
    &lt;div id=&quot;son&quot;&gt;我是块元素&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h1 id="垂直居中">垂直居中</h1>
<h2 id="行内元素-2">行内元素</h2>
<p>设置行内元素的高等于盒子的高度</p>
<pre><code class="language-html">&lt;style&gt;
	#father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        line-height: 300px;
    }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
	wahahahahhahaha
&lt;/div&gt;
</code></pre>
<h2 id="块级元素-2">块级元素</h2>
<h3 id="1方案一使用定位">1.方案一（使用定位）</h3>
<p>首先设置父元素为相对定位，然后设置子元素为绝对定位，设置子元素为<code>top:50%</code>,即让块级元素的上边框垂直居中</p>
<ul>
<li>定宽度：<code>margin-top:-height/2</code>；或者设置<code>transform:translateY(-50%);</code></li>
<li>不定宽度：设置<code>transform:translateY(-50%)</code></li>
</ul>
<pre><code class="language-html">&lt;style&gt;
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
    }
    .son {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: green;
    }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
	&lt;div class=&quot;son&quot;&gt;我是块级元素&lt;/div&gt;	
&lt;/div&gt;
</code></pre>
<h3 id="2方案二flex">2.方案二（flex）</h3>
<p>利用<code>display:flex;align-items:center</code>进行垂直居中</p>
<pre><code class="language-html">&lt;style&gt;
     #father {
         width: 500px;
         height: 300px;
         background-color: skyblue;
         display: flex;
         align-items: center;
    }
    .son {
        background-color: green;
    }
&lt;style/&gt;
&lt;div id=&quot;father&quot;&gt;
    &lt;div class=&quot;son&quot;&gt;我是块级元素&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h1 id="水平垂直居中">水平垂直居中</h1>
<h2 id="已知高度和宽度">已知高度和宽度</h2>
<h3 id="1使用定位属性">1.使用定位属性</h3>
<h3 id="方案一">方案一</h3>
<p>设置父元素为相对定位，设置子元素为绝对定位，<code>top:0;right:0;bottom:0;left:0;margin:auto;</code></p>
<pre><code class="language-html">&lt;style&gt;
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
    &lt;div class=&quot;son&quot;&gt;我是块级元素&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h3 id="方案二">方案二</h3>
<p>设置父元素为相对定位，子元素为绝对定位，<code>left:50%;top:50%;margin-left:-width/2;margin-top:-height/2</code></p>
<pre><code class="language-html">&lt;style&gt;
     #father {
         width: 500px;
         height: 300px;
         background-color: skyblue;
         position: relative;
     }
     .son {
         width: 100px;
         height: 100px;
         background-color: green;
         position: absolute;
         top: 50%;
         left: 50%;
         margin-left: -50px;
         margin-top: -50px;
     }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
	&lt;div class=&quot;son&quot;&gt;我是块级元素&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h3 id="2使用flex">2.使用flex</h3>
<p>和下方未知高度和宽度的使用方法一样</p>
<h2 id="未知高度和宽度">未知高度和宽度</h2>
<h3 id="方案一使用定位属性">方案一.使用定位属性</h3>
<p>设置父元素为相对定位，子元素为绝对定位，<code>left:50%;top:50%;transform: translateX(-50%) translateY(-50%);</code></p>
<pre><code class="language-html">&lt;style&gt;
     #father {
         width: 500px;
         height: 300px;
         background-color: skyblue;
         position: relative;
     }
     .son {
         width: 100px;
         height: 100px;
         background-color: green;
         position: absolute;
         top: 50%;
         left: 50%;
         transform:translateX(-50%) translateY(-50%);
     }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
	&lt;div class=&quot;son&quot;&gt;我是块级元素&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h3 id="方案二使用flex">方案二.使用flex</h3>
<pre><code class="language-html">&lt;style&gt;
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .son {
   		background-color: green;
    }
&lt;/style&gt;
&lt;div id=&quot;father&quot;&gt;
	&lt;div class=&quot;son&quot;&gt;我是块级元素&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>参考博客：https://blog.csdn.net/weixin_37580235/article/details/82317240</p>
]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[Set]]></title>
        <id>https://wangxiansen15.github.io/post/set/</id>
        <link href="https://wangxiansen15.github.io/post/set/">
        </link>
        <updated>2020-12-02T12:05:04.000Z</updated>
        <content type="html"><![CDATA[<h1 id="set">Set</h1>
<p>Set类似于数组，但是成员都是唯一的，没有重复的值。</p>
<p>Set判断元素是否唯一类似于全等运算符(<code>===</code>)，主要的区别是向Set加入值时认为<code>NaN</code>等于自身，而全等运算法认为<code>NaN</code>不等于<code>NaN</code>。</p>
<p>两个对象总是不相等的</p>
<h2 id="set实例的属性和方法">Set实例的属性和方法</h2>
<h3 id="实例属性">实例属性</h3>
<ul>
<li>Set.prototype.constructor：构造函数，默认就是<code>Set</code>函数。</li>
<li>Set.prototype.size：返回Set实例的成员总数。</li>
</ul>
<h3 id="实例方法">实例方法</h3>
<h4 id="操作方法">操作方法</h4>
<ul>
<li>Set.prototype.add(value)：添加某个值，返回Set结构本身。</li>
<li>Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。</li>
<li>Set.prototype.has(value)：返回一个布尔值，表示该值是否为<code>Set</code>的成员。</li>
<li>Set.prototype.clear()：清除所有成员，没有返回值。</li>
</ul>
<h4 id="遍历方法">遍历方法</h4>
<ul>
<li>Set.prototype.keys()：返回键名的遍历器</li>
<li>Set.prototype.values()：返回键值的遍历器</li>
<li>Set.prototype.entries()：返回键值对的遍历器</li>
<li>Set.prototype.forEach()：使用回调函数遍历每个成员</li>
</ul>
<h2 id="参考">参考</h2>
<p><a href="https://es6.ruanyifeng.com/#docs/set-map#Set">https://es6.ruanyifeng.com/#docs/set-map#Set</a></p>
]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[Cookie、LocalStorage、SessionStorage]]></title>
        <id>https://wangxiansen15.github.io/post/cookielocalstoragesessionstorage/</id>
        <link href="https://wangxiansen15.github.io/post/cookielocalstoragesessionstorage/">
        </link>
        <updated>2020-12-01T08:02:23.000Z</updated>
        <content type="html"><![CDATA[<h2 id="基本概念">基本概念</h2>
<h3 id="cookie">Cookie</h3>
<p>cookie是小甜饼的意思。顾名思义，cookie确实十分小，大小限制在4KB左右。它的主要用途有保存登录信息。</p>
<h3 id="localstorage">localStorage</h3>
<p>localStorage是HTML5标准中新加入的技术。并不是什么跨时代的新东西。在IE 6时代，就有一个叫userData的东西用于本地存储。</p>
<h3 id="sessionstorage">sessionStorage</h3>
<p>sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同。它可以将一部分数据在当前会话中保存下来，刷新页面数据依然存在。但当页面关闭后，sessionStorage中的数据就会被清空。</p>
<h2 id="三者的异同">三者的异同</h2>
<figure data-type="image" tabindex="1"><img src="https://wangxiansen15.github.io/post-images/1606809784919.jpg" alt="" loading="lazy"></figure>
<h2 id="应用场景">应用场景</h2>
<p>因为每个HTTP请求都会带着Cookie的信息，所以Cookie要尽可能精简，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往Cookie中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录了。</p>
<p>localStroage大多数存储比较大点的数据。</p>
<h2 id="安全性考虑">安全性考虑</h2>
<p>需要注意，不是什么数据都适合放在Cookie、localStorage和sessionStorage中的。需要时刻注意是否有代码存在XSS注入的风险。所以不要用它们存储系统中的敏感数据。</p>
]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[this的指向]]></title>
        <id>https://wangxiansen15.github.io/post/this-de-zhi-xiang/</id>
        <link href="https://wangxiansen15.github.io/post/this-de-zhi-xiang/">
        </link>
        <updated>2020-11-29T08:42:22.000Z</updated>
        <content type="html"><![CDATA[<h2 id="默认绑定">默认绑定</h2>
<pre><code class="language-js">function a(){
  console.log(this);
}
a();//window
</code></pre>
<p>这是个普通的函数调用。在这种情况下，this在非严格模式下指向window或global对象。在严格模式下，this指向undefined。</p>
<h2 id="隐式绑定">隐式绑定</h2>
<pre><code class="language-js">var obj = {
  name: 'wwj',
  sayName: function () {
    console.log(this);
  }
};

obj.sayName();//{ name: 'wwj', sayName: [Function: sayName] }
</code></pre>
<p>当我们以一个obj对象来调用这个函数时，<code>sayName()</code>方法内部的this指向obj。</p>
<pre><code class="language-js">let fun = obj.sayName;
fun();//window
</code></pre>
<p>当我们将一个函数引用赋值给某个其他变量并使用这个新的函数去调用该函数时，我们this又是window。</p>
<p>当我们调用fun()时，我们没有指定一个具体的上下文对象。这是一个没有所有者对象的纯函数调用。在这种情况下，sayName()内部的this值退回到<strong>默认绑定</strong>。</p>
<pre><code class="language-js">//setTimeout 的虚拟实现
function setTimeout(callback, delay){
   //等待 'delay' 数个毫秒
   callback();
}
 
setTimeout( obj.display, 1000 );
</code></pre>
<p>在调用setTimeout时，JavaScript在内部将obj.display赋给参数callback。</p>
<p>这种赋值操作会导致display()函数丢失其上下文。当此函数最终在setTimeout函数里面被调用时，display()内部的this值会退回至<strong>默认绑定</strong>.</p>
<h2 id="明确绑定">明确绑定</h2>
<p>为了避免这种情况，我们可以使用<strong>明确绑定方法</strong>，将this的值通过bind()方法绑定到函数上。</p>
<pre><code class="language-js">var obj = {
  name: 'wwj',
  sayName: function () {
    console.log(this);
  }
};
obj.sayName = obj.sayName.bind(obj);
let fun = obj.sayName;
fun();//{ name: 'wwj', sayName: [Function: sayName] }
</code></pre>
<p>即使我们将obj.sayName直接作为callback参数传递给函数，sayName()内部的this也会正确的指向obj。</p>
<h2 id="箭头函数">箭头函数</h2>
<p><strong>由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值。</strong></p>
]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[var、let、const的区别]]></title>
        <id>https://wangxiansen15.github.io/post/varletconst-de-qu-bie/</id>
        <link href="https://wangxiansen15.github.io/post/varletconst-de-qu-bie/">
        </link>
        <updated>2020-11-28T10:54:31.000Z</updated>
        <content type="html"><![CDATA[<ul>
<li>按版本分，var属于ES5，let、const属于ES6</li>
<li>var是函数作用域，let、const是块级作用域</li>
<li>var声明的变量存在变量提升，let和const不存在变量提升</li>
<li>var可以重复声明，但是let和const不可以</li>
<li>let、const会产生暂时性死区。如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错</li>
<li>const声明的变量不得改变值(不过对象的内容可以改变，因为const保存的是对象在堆中的引用地址)</li>
</ul>
]]></content>
    </entry>
</feed>