josavion的博客

原创 Javascript 鼠标不在输入框内，禁用掉空格键的默认事件

最近开发一个大屏项目，需要按住左键对画布进行拖拽，但是由于在画布需要框选元素已经占用了左键的功能，所以产品提出在按住空格键 + 左键的情况下对画布进行拖拽的需求。我们知道空格键是有它的默认事件的。如果鼠标光标在输入框（这里指input、textarea等）内，敲击空格键的作用是在输入框内增加一个空格；如果鼠标光标不在输入框内，那么敲击空格键则会滚动滚动条（如果有滚动条的话）。那么我的需求就是：如果鼠标在输入框内，敲击空格键就有默认事件；如果鼠标光标不在输入框内，则阻止掉空格键的默认事件；以下是详细代码：

原创 前端性能优化

原则 让加载更快； 让渲染更快； 加载资源优化 减少资源体积：静态资源压缩； 减少请求次数： 合并代码：http 请求由于网络等不确定性因素，可能会导致耗费大量时间；多个小体积资源会发起多个请求，如果合并之后只需要发起单个请求； 合并静态资源：雪碧图； 使用服务端渲染：服务端将静态资源直接放到 html 中，不用客户端再请求静态资源，就可以减少请求次数； 静态资源合理使用缓存； 使用更快地网络：CDN； 渲染优化 css 放在 head 中，js 放

原创 Http 常见的 Headers

HTTP消息头是指在超文本传输协议的请求和响应中，用来准确描述正在获取的资源、服务器或者客户端的行为，定义了 HTTP 事务中的具体操作参数。常用的请求头 Request Headers Accept：定义客户端可接受的响应内容类型； Accept-charset：定义客户端可接受的字符集； Accept-Encoding：定义客户端可接受的编码方式，比如打包方式--gzip 等； cookie：由服务器通过 set-cookie 设置的 cookie； Content-Length：

原创 Http 常见 Content-Type 有哪些？

Content-type 定义了 http 请求的数据类型。如果设置在请求头中，则定义的是请求体的数据类型；如果设置在响应头中，则定义的是响应体的数据类型；请求头--Request-Headers：一般我们在 post 请求中会向服务器发送一些参数，那我们就可以通过这个参数设置 post 的参数格式 application/json：JSON 数据格式； application/x-www-form-urlencoded：表单默认的提数据格式； multipart/form-data：

原创 Http 常见的状态码

状态码分类 1XX：服务器已经收到请求； 2XX：请求成功； 3XX：重定向； 4XX：客户端错误； 5XX：服务端错误； 常见的状态码 200：请求成功； 301：永久重定向，配合 Request Headers 中的 location 使用；比如一些老的静态资源需要换一个服务器；下次再请求这个地址时，直接被重定向到 location 指定的地址去 302：临时重定向，配合 Request Headers 中的 location 使用；比如搜索引擎的一些链接，都是通过30

原创 Http 浏览器的缓存策略

浏览器第一次向一个 web 服务器发起 http 请求后，服务器会返回请求的资源，并且在响应头中添加一些有关缓存的字段如：Cache-Control、Expires、Last-Modified、ETag、Date 等等。之后浏览器再向该服务器请求该资源就可以视情况使用 强制缓存 和 协商缓存。强制缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。 协商缓存：浏览器发送请求到服务器，服务器判定是否可使用本地缓存。 联系与区别：两种缓存方式最终使用的都是本地缓存；前者无需与服务器交互，后者需要。

原创 Javascript === 还是 ==？

我们经常会在 “===” 和 “==” 的使用上犯迷糊，今天就来说说清楚。“===”：表示的意思是等号两边不仅值需要相等，而且数据类型也要一样；0 === ’0‘ // false0 === 0 // true“==”：等号的两边会尽可能的做一些隐式的数据转换，让两个值相等；100 == "100" // true0 == "" // true0 == false // truefalse == "" // truenull == undefined // true那么我.

原创 Javascript 手写深拷贝

1.数据类型基本数据类型：名和值都存储在栈内存中；在复制时，栈内存会新开辟一个内存，用来存储新的变量，这个时候修改原变量的值，不会对新生成的变量产生影响。 引用数据类型：名存在于栈内存中，值存在于堆内存中，栈内存的会提供一个引用地址指向堆内存中的值。当对引用类型a进行拷贝时（b = a），其实复制的是a的引用地址，而非堆里面的值。当对a里面的数据进行修改时，由于a和b指向的是同一个地址，b自然就受到了影响。这就是所谓的浅拷贝。如果，要是在堆内存中也开辟一个新的内存专门为b存值，就像基本类型那样，就可以

原创 React Redux 的单向数据流

原创 React JSX 的本质是什么？

JSX 的本质就是一个 React.createElement 函数，他接收多个参数来返回 Vnode；第一个参数是标签名 可能是原生的 HTML 标签名，是一个小写字母开头的字符串； 可能是一个自定义的组件，React 规定自定义组件以大写字母开头； 第二个参数是属性信息，如果没有属性则为 null； 第三个参数是子元素； 如果拥有多个子元素，可以依次放在第三个、第四个... 也可以用在数组中存放多个子元素 ...

原创 React setState 同步 or 异步，合并 or 不合并

在面试中我们经常会做一些关于 setState 的面试题，主要是考察同步异步，合并还是不合并的问题，这篇文章就主要来聊聊这个问题

原创 React HOC & RenderProps

React 在组件复用方面是怎么做的？本文来说说高阶组件（HOC）和 RenderProps

原创 React ShouldComponentUpdate 与不可变值

ShouldComponentUpdate 的用法以及会忽略的一些细节

原创 React 异步加载组件

React 如何加载异步组件

原创 React context 的使用方法

通常在 React 组件中，我们会使用 props 来自上而下（父传子）的传递属性。但是当组件层级太深时，或者某些属性是应用中很多组件都需要使用的，比如UI主题等，使用传统的 props 来处理就会显得非常麻烦。而 Context 就提供了一种组件间信息共享的解决方式，从而避免了通过 props 的逐层传递。1. 生产者React.createContext：创建一个 Context 对象；const MyContext = React.createContext(defaultVal

原创 React refs

创建 Refsclass MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; }}// 访问 Refsconst node = this.myRef.current;访问 Refs当 ref

原创 React 受控组件与非受控组件

受控组件在 HTML 中，表单元素（如<input>、<textarea>和<select>）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用setState来更新。我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值...

原创 React 生命周期

挂载阶段，当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constrcutor render componentDidMount 更新阶段，当组件的props或者state发生变化或更新时，组件更新的生命周期调用顺序如下： shouldComponentUpdate render componentDidUpdate 卸载阶段，当组件要被销毁时会调用如下方法： componentWillUnMount 和Vue的组件间的生命周期一样，React的父子

原创 Vue 异步组件

异步组件是 vue 的一种新能优化的方法，比如可以运用在首屏加载等等场景。异步组件就是组件通过 import() 函数引入，什么时候需要什么时候才加载<!-- 父组件 --><template> <div> <Button @click="show = true">显示Form</Button> <FormCom v-if="show"/> </div></

原创 Vue 自定义v-model

v-modal是一个语法糖，我们直接看示例<!-- 父组件 --><template> <div> <div>{{ inputVal }}</div> <InputCom v-model="inputVal"/> </div></template><script>import InputCom from './InputCom';e

原创 Vue 插槽slot

在 vue 中，组件化是极其重要的特征，我们使用不同的组件来实现页面。但是也会经常需要将父组件的内容分发到子组件，这就需要用到slot（插槽）；// 父组件<father>this is slot content</father>// 子组件<a> <slot></slot></a>这样父组件中的内容就会默认插入到slot标签中。1.slot的默认值我们可以设置slot 的默认值。当父级组

原创 Vue 组件间的样式处理 -- scoped

关于 vue 组件间的样式问题，一直困扰我。父与子，子与父，兄弟组件间相互的样式污染，再加上 scoped 作用域的作用，导致我们很难搞清楚之间的相互关系，今天我们就来一探究竟；1.父子组件之间的样式// 父组件<div id="app"> <h2>父组件的h2</h2> <h3>父组件的h3</h3> <ChildCom/></div><style>h2 { b

原创 Vue 生命周期

1.单个组件的生命周期beforeCreat：在实例初始化之前，数据观测（data observer）和 event 等配置之前被调用。这时候 initState 还没有执行，所以不能访问到props、data、methods 等属性。 created：在实例创建之后立即被调用，这时候 initState 方法已经被调用，可以访问到相关属性，但是 DOM 还没有被渲染，所以不能访问到 $el 属性。编译模板，把数据和模板生成为 html ； beforeMount：在挂载之前被调用，render 方

原创 Javascript 事件模型

1.事件的监听JS有三种方法可以为事件绑定监听函数HTML的 on-属性：只会在冒泡阶段触发；<!-- 正确 --><body onload="doSomething()"> <!-- 错误 --><body onload="doSomething">元素节点的事件属性：只会在冒泡阶段触发；window.onload = doSomething;div.onclick = function (event) { consol

原创 Git 常用命令

git的常见命令

原创 Javascript typeof 返回哪些值你清楚吗？

js中的数据类型主要有一下几种：基本类型：（变量名和值都存储在栈内存中） String； Number； Boolean； Undefined； Symbol； 引用类型；（变量名存储在栈内存中，但是值存储在堆内存中，将值在堆内存中的地址和变量名一起存放在占内存中） Null； Object； 对数据使用 typeof 方法（注意：所有返回值类型都是string）：原始类型：数值、字符串、布尔值、Symbol分别返回number、string、boolea.

原创 Vscode 如何在命令行打开vscode

打开 vscode，同时按下 command + shift + p，打开命令面板（或者直接在菜单中点击查看 => 命令面板）； 在弹出的输入框中输入 shell ，选择 "Shell 命令：在 PATH 中安装 code 命令"； 接下来你就可以在命令行中通过 code 命令打开 vscode 了； 直接 code 回车是打开一个新的 vscode 窗口; "code ." 命令是在 vscode 新窗口中打开当前目录；...

原创 CSS line-height 是如何继承的？

写具体数值，如30px，则直接继承； 写比例，如2 / 1.5，按继承比例； 写百分比，如150%，则继承计算出来的值，这里需要格外注意；

原创 CSS 实现居中对齐的一些方法

水平居中inline元素：text-align: center; block元素：margin: auto; absolute元素：left: 50% + margin-left 负值；垂直居中inline元素：line-height的值等于height的值； flex布局； // 父元素.father { display: flex; align-items:Center;}// 或者.father { display: flex; flex-di

原创 CSS 对于盒模型的理解

box-sizing 可以设置元素的盒子模型；默认为 content-box ；{ width: 100px; height: 100px; padding: 20px; margin: 20px; border: 1px solid #ccc;}content-box：这里设置盒子宽度 width 就专指盒子内容的宽度width ；border-box：这里设置盒子宽度 width 则等于 border + padding + content ..

原创 HTML 如何理解HTML的语义化

让人更容易读懂（增加代码可读性）;直观的认识标签，用正确的标签做正确的事情； 便于阅读源代码，便于维护和理解。让机器更容易读懂；搜索引擎的爬虫依赖于标签来确认上下文和各个关键字的权重，利于SEO优化； 让页面的内容结构化，便于浏览器解析，在没有css样式的情况下也能够正确显示文档结构；H5新增的语义化标签：article，header，footer，nav，section等；...

原创 如果要你向别人推荐电影，你最先想到的是那些呢？

废话不多说，直接正题。1.三傻大闹宝莱坞。2.肖申克的救赎。3.辛德勒的名单。4.星际穿越。5.让子弹飞。6.少年派的奇幻漂流。7.我的野蛮女友。8.情书。9.波西米亚狂想曲。10.闻香识女人。11.霸王别姬。...

原创 Javascript 原型链，这个链究竟是什么？

1.构造函数特点：函数名首字母大写 函数内部使用了this关键字，代表了所要生成的实例对象 生成对象的时候必须使用new命令2.new 命令new命令的作用就是执行构造函数生成实例对象new命令的原理：使用new命令时，后面的构造函数依次执行了下面的步骤：创建一个空对象，作为要返回的实例对象 将这个空对象的原型，指向构造函数的prototype属性 将这个空对象赋值给...

原创 Javascript 数据的类型转换

详细聊聊String()、Number()、Boolean()以及数据类型的转换

原创 Javascript toString 方法原理

一篇博文，让你吃透toString()

原创 Javascript valueOf 方法原理

本文将介绍valueOf()方法。如果存在任意原始值，它就默认将对象转换为表示它的原始值；对象是复合值，而大多数对象无法真正表示为一个原始值，因此默认的valueOf()方法简单地返回对象本身，而不是返回一个原始值【1】undefined和null没有valueOf()方法undefined.valueOf();//错误null.valueOf();//错误【2】布尔型数据tru

原创 JavaScript parseInt()的用法

1.基本用法：parseInt的返回值只有两种可能，不是一个十进制整数，就是NaN。a.将字符串转为整数。parseInt('123') // 123b.如果字符串头部有空格，空格会被自动去除。parseInt(' 81') // 81c.如果parseInt的参数不是字符串，则会先转为字符串再转换。这个很重要d.字符串转为整数的时候，是一个个字符依次转换，如果遇到不能转为数字

原创 Javascript 你一般怎么判断数据类型？

1.typeofa.原始类型：数值、字符串、布尔值分别返回number、string、boolean。b.函数返回function。c.undefined返回undefined。d.其他情况都返回object（window，null，{}，[]）因此，使用typeof可以判断原始类型数据的类型，但对于对象（进一步区别数组，对象等）就有局限性了2.instanceofin