- 博客(99)
- 收藏
- 关注
RSS订阅原创 js中的this指向问题
1. 对this对象的理解this 的指向在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象，三遍：this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象。this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this 的指向可以通过四种调用模式来判断。第一种是函数调用模式，当一个函数不是一个对象的属性时，直接作为函数来调用时，this 指向全局对象。 var name = "wind
2022-04-02 23:29:00
311
原创 Webpack中的loader,plugin
1 .loader运行在打包文件之前（loader为在模块加载时的预处理文件） 2. plugins在整个编译周期都起作用。1.loader从本质上来说其实就是一个node模块。相当于一台榨汁机(loader)将相关类型的文件代码(code)给它。根据我们设置的规则，经过它的一系列加工后还给我们加工好的果汁(code)。loader编写原则单一原则: 每个 Loader 只做一件事； 链式调用: Webpack 会按顺序链式调用每个 Loader； 统一原则: 遵循 Webpac...
2022-03-31 23:55:35
1241
转载 深拷贝与浅拷贝的实现
面试常问，基本数据类型有哪些，number，string，boolean，null，undefined，symbol以及未来ES10新增的BigInt(任意精度整数)七类。引用数据类型(Object类)有常规名值对的无序对象{a:1}，数组[1,2,3]，以及函数等。而这两类数据存储分别是这样的：a.基本类型--名值存储在栈内存中，例如let a=1;当你b=a复制时，栈内存会新开辟一个内存，例如这样：所以当你此时修改a=2，对b并不会造成影响，因为此时的b已自食其力，翅膀.
2022-03-26 23:06:47
534
转载 Window,document属性方法
window.location 对象可不带 window 前缀书写。一些例子：window.location.href 返回当前页面的 href (URL) window.location.hostname 返回 web 主机的域名 window.location.pathname 返回当前页面的路径或文件名 window.location.protocol 返回使用的 web 协议（http: 或 https:） window.location.assign 加载新文档documen
2022-03-26 15:01:10
1364
原创 token认证,说一下token 能放在cookie中吗？
token认证流程1.客户端使用用户名跟密码请求登录2.服务端收到请求，去验证用户名与密码3.验证成功后，服务端签发一个 token ，并把它发送给客户端4.客户端接收 token 以后会把它存储起来，比如放在 cookie 里或者 localStorage 里5.客户端每次发送请求时都需要带着服务端签发的 token（把 token 放到 HTTP 的 Header 里）6.服务端收到请求后，需要验证请求里带有的 token ，如验证成功则返回对...
2022-03-25 10:22:25
3682
转载 【无标题】
标签定义及使用说明<iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。提示和注释提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。提示：使用 CSS 为 <iframe> （包括滚动条）定义样式。iframe 有那些优点和缺点？iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
2022-03-24 15:37:15
62
原创 浏览器白屏原因思路分析
首先，我们打开我们的浏览器，查看在访问网站时，我们的电脑网络连接是否正常，若无网络连接或网络连接异常，则无法正常上网，打开网页也很有可能显示白屏。2.F12进入开发者模式，进行检查，是否是程序出现了错误，或者浏览器器哪一个接口出现了错误。查看设置中的哪个协议出现问题3.如果都没有问题在检查服务端的出错情况。...
2022-03-24 13:43:28
3611
原创 instanceof运算符的理解
首先需要了解几个概念，有助于理解。1. 在JavaScript语言中，一切的一切都是对象，它们全部继承自Object. 或者说所有对象的原型链的根节点都是Object.prototype。2.JavaScript中的原型(prototype)是和函数(function)紧密相连的，因为每个函数默认都会有一个属性叫prototype, 每一个通过函数和new操作符生成的对象都具有一个属性__proto__, 这个属性保存了创建它的构造函数的prototype属性的引用。这个__proto__对象就是实
2022-03-21 16:42:26
168
原创 cookie和session的区别： session和sessionStorage 区别
cookie和session的区别：会话跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份，(好比自己每次谈生意找工作拿着简历 片给别人看。特点方便但是存储的数据少4k)Session通过在服务器端记录信息确定用户身份。（好比对方有一个存储信息的池子，你的信息已经存在里面了，就不需要有每次都拿着你的名片）Session与cookie功能效果相同。Session与Cookie的区别在于Session是..
2022-03-21 00:42:35
1778
转载 TCP和UDP的区别 常用协议
TCP和UDP的区别 UDP TCP 是否连接 无连接 面向连接 是否可靠 不可靠传输，不使用流量控制和拥塞控制 可靠传输（数据顺序和正确性），使用流量控制和拥塞控制 连接对象个数 支持一对一，一对多，多对一和多对多交互通信 只能是一对一通信 传输方式 面向报文 面向字节流 首部开销 首部开销小，仅8字节 首部最小20字节，最大60字节 适用场景 适用于实时应用，例如视频会议、直播 适用于要求可靠
2022-03-19 23:25:28
131
原创 css 兄弟选择器 后代选择器 并级选择器
这些选择器的优先级都为0，优先级最低。~ 普通兄弟选择器 匹配所有的兄弟选择器 <第一个选择器> ~ <第二个选择器> 匹配 目标元素位于匹配第一个选择器的元素之后，且匹配第二个选择器 + 相邻兄弟选择器 匹配相邻的下一个兄弟选择器 <第一个选择器> + <第二个选择器> 匹配 目标元素紧跟匹配第一个选择器的元素，且匹配第二个选择器 *通配符选择器 * 0 , 并集选择器 创建由逗..
2022-03-19 20:38:04
704
原创 React 高阶组件、Render props、hooks 有什么区别
这三者是目前react解决代码复用的主要方式：高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。 render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术，更具体的说，render prop 是一个用于告知组件需要渲染什么内容的函数 prop。 通常，render props 和高
2022-03-19 20:22:32
2090
原创 yarn和npm区别
我在面试的时候突然被问道，懵了一下，现在整理一些资料、yarn的出现yarn 是一个由Facebook、Google、Exponent和Tilde构建的新的JavaScript包管理器。它的出现是为了解决历史上npm的某些不足(比如npm对于依赖的完整性和一致性的保证,以及npm安装过程中速度很慢的问题)当npm还处于v3时期的时候,一个叫yarn的包管理工具横空出世.在2016年, npm还没有package-lock.json文件,安装的时候速度很慢,稳定性很差,yarn的出现很好的解决了一
2022-03-18 21:24:28
1900
原创 Visual Studio Code快捷指令
1. 一次搜索所有文件的文本Windows: Ctrl + Shift + F Mac: Command + Shift +2. 集成终端Windows: Ctrl + Mac: control +通过 **Ctrl + `**可以打开或关闭终端3.删除上一个单词要删除前一个单词，可以按Ctrl + Backspace (Mac: option + delete)。这在你打错字的时候非常有用。你可以在 VsCode 之外的任何地方使用它。4.逐个选择文本可..
2022-03-17 22:40:26
920
原创 js中对闭包的理解
闭包的解释一：就是上级作用域内变量的生命周期，因为被下级作用域内引用，而没有被释放。就导致上级作用域内的变量，等到下级作用域执行完以后才正常得到释放。闭包的解释二：它是这样工作的，无论何时声明新函数并将其赋值给变量，都要存储函数定义和闭包。闭包包含在函数创建时作用域中的所有变量，它类似于背包。函数定义附带一个小背包，它的包中存储了函数定义创建时作用域中的所有变量。需要记忆的知识：记住闭包的方法是通过背包的类比。当一个函数被创建并传递或从另一个函数返回时，它会携带一个背包。背包中是函数声明时作用域
2022-03-17 15:02:39
2284
原创 js的解构赋值
解构的作用：简单来说就是简化信息提取，在编码过程中，我们经常定义许多对象和数组，然后有组织地从中提取相关的信息片段。ES6 中添加了可以简化这种任务的新特性：解构。解构是一种打破数据结构，将其拆分为更小部分的过程。解构遵循匹配模式（匹配模式：只要等号两边的模式相同，左边的变量就会被赋予对应的值） 解构赋值规则：只要等号右边的值不是对象或数组，就先将其转为对象 解构默认值生效条件：属性值严格等于undefined 解构不成功时变量的值等于undefined undefined和null无法转为
2022-03-17 12:23:46
3717
1
转载 js 中的call apply bind方法
call()通过 call 方法，你可以在一个对象上借用另一个对象上的方法，比如Object.prototype.toString.call([])，就是一个Array对象借用了Object对象上的方法。语法 fun.call(thisArg[, arg1[, arg2[, ...]]])thisArg在fun函数运行时指定的this值。需要注意的是下面几种情况（1）不传，或者传null，undefined， 函数中的this指向window对象（2）传递另一个函数的函数名，函数中
2022-03-16 00:33:38
109
原创 前端笔试错题集
vertical-align: baseline;background-sizeopacityflex-wrapdisplaybox-sizing:cursorflex-wrap: wrap;align-content: flex-start;
2022-03-16 00:11:45
956
原创 box-sizing有两个属性
box-sizing有两个属性：content-box,是默认值，width和height只包括内容的宽和高。border-box，边框和内边距的值包含在width中，但不包括外边距。不换行也不省略 ：word-break : keep-all;white-space : nowrap;不换行，超出用省略号代替 :word-break : keep-all;white-space : nowrap;overflow : hidden;text-overfl...
2022-03-15 09:32:03
151
原创 事件是什么？事件模型？
事件是什么？事件模型？事件是用户操作网页时发生的交互动作，比如 click/move， 事件除了用户触发的动作外，还可以是文档加载，窗口滚动和大小调整。事件被封装成一个 event 对象，包含了该事件发生时的所有相关信息（ event 的属性）以及可以对事件进行的操作（ event 的方法）。事件是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型：DOM0 级事件模型，这种模型不会传播，所以没有事件流的概念，所有浏览器都兼容这种方式。直接在dom对象上注册事件名称
2022-03-14 23:28:05
904
原创 为什么会有跨域?怎么跨域?
什么是跨域？跨域，即浏览器试图执行其他网站的脚本。但是由于同源策略的限制，导致我们无法实现跨域。如果两个url的协议、域名、端口号完全一致，那么这两个url就是同源的。同源策略即：不同源之间的页面，不准互相访问数据。关于跨域的几个问题为什么可以跨域使用CSS、JS和图片等？同源策略限制的是数据访问，我们引用CSS、JS和图片的时候，其实并不知道其内容，我们只是在引用。怎么跨域?CORS跨域什么是CORS？CORS的全称是"跨域资源共享"（Cross-origin r.
2022-03-14 22:32:14
243
原创 grid和flex布局区别是什么？
grid和flex区别是什么？Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。 Grid 是二维布局系统，通常用于整个页面的规划。 二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局，但是没有 Grid 强大和灵活。二者结合使用更加轻松。 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了
2022-03-14 21:17:04
6076
转载 正则表达式入门
内容包括：两种模糊匹配 字符组 量词 分支结构 案例分析1 两种模糊匹配如果正则只有精确匹配是没多大意义的，比如/hello/，也只能匹配字符串中的"hello"这个子串。var regex = /hello/;console.log( regex.test("hello") ); // => true复制代码正则表达式之所以强大，是因为其能实现模糊匹配。而模糊匹配，有两个方向上的“模糊”：横向模糊和纵向模糊。1.1 横向模糊匹配比如/ab{2,5}c/.
2022-03-13 22:10:18
723
原创 H5版本中新提出的表单控件以及标签总览
1、块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。2、块级元素不能放在p里面。3、有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt4、li内可以包含div5. a标签可以包括任何元素，除了自身H5版本中新提出的表单控件 电子邮件 <input type="email"> 表单提交时，会验证数据是否符号email的规范（有@，并且@后面有内容） 搜索类型
2022-03-13 10:51:46
333
原创 HTML5中的data-
data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。data-* 属性包括两部分：属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符 属性值可以是任意字符串注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。...
2022-03-13 10:38:45
2465
原创 Axios fetch的基本用法
fetch API通过promise接口来实现的。fetch( ' / abc' ) .then (data=>{return data.text (); //return返回的是primose对象}).then (ret=>{//注意这里得到的才是最终的数据console.log (ret) ;});1.fetch常用配置选项method(String):HTIP请求方法，默认为GET(GET、POST、PUT、DELETE)body(String):H..
2022-03-12 16:18:30
1728
原创 vue组件通讯的形式
1父组件向子组件传值1.组件内部通过props接收传递过来的值vue.component ( 'menu-item', {props: ['title'],template: '<div>{{ title }}</div>'})2父组件通过属性将值传递给子组件<menu-item title="来自父组件的数据"></menu-item><menu-item :title="title"></menu-item>3. p
2022-03-11 22:33:58
1381
原创 组件的注册
2.3组件注册注意事项1.data必须是一个函数2.组件模板内容必须是单个跟元素3.组件模板内容可以是模板字符串模板字符串需要浏览器提供支持(ES6语法)4.如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件但在普通的标签模板中,必须使用短横线的方式使用组件注：局部组件只能在注册他的父组件中使用...
2022-03-11 16:20:47
392
原创 .计算属性与方法的区别.侦听器的应用场景
.计算属性与方法的区别计算属性是基于它们的依赖进行缓存的 方法不存在缓存.侦听器的应用场景数据变化时执行异步或开销较大的操作用法：var vm = new Vue({el: '#app',data: {firstName: 'Jim',lastName: 'Green',fullName: 'Jim Green'}，watch: {firstName: function(val) {this.fullName = val +''+ this.lastName;}，last
2022-03-11 15:51:52
85
原创 React.createClass和extends Component的区别有哪些？
React.createClass和extends Component的bai区别主要在于：propType 和 getDefaultPropsReact.createClass：通过proTypes对象和getDefaultProps()方法来设置和获取props. React.Component：通过设置两个属性propTypes和defaultProps状态的区别React.createClass：通过getInitialState()方法返回一个包含初始值的对象 React.C
2022-03-11 10:39:46
173
原创 四种情况会造成内存的泄漏：
以下四种情况会造成内存的泄漏：意外的全局变量： 由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。 被遗忘的计时器或回调函数： 设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。 脱离 DOM 的引用： 获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。 闭包： 不合理的使用闭包，从而导致某些变量一直被留在内存当中。..
2022-03-09 23:39:25
1722
原创 Promise简介原理和常见方法
Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。promise是用来解决两个问题的： 回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象 promise可以支持多个并发的请求.
2022-03-08 23:12:39
5929
原创 服务器状态码整理
1**：请求收到，继续处理2**：操作成功收到，分析、接受3**：完成此请求必须进一步处理4**：请求包含一个错误语法或不能完成5**：服务器执行一个完全的请求失败100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本200——交易成功201——提示知道新文件的URL202——接受和处理、但处理未完成203——返回信息不确定或不完整204——请求收到，但返回信息为空205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件206——服务器已经完成了部分
2022-03-08 22:05:08
943
转载 前端常见的线程与进程
常见的进程和线程有; 进程：1）browser进程，是浏览器的主进程，该进程只有一个，负责浏览器界面的显示，与用户交互，比如前进后退等2）第三方插件进程，每种类型的插件都对应一个进程，当使用该插件时，才创建进程3）GPU进程，这个进程也只有一个，用于3D绘制等4）渲染进程，每一个tab页面都有一个渲染进程，而且互相之间是不影响的，主要用来渲染页面，进行脚本执行等。在这个进程中，还有界面渲染线程，js引擎线程，http请求线程。浏览器事件触发线程等线程：1）界面渲染线程：负责渲染浏
2022-03-08 21:18:39
767
原创 重绘和重排（回流）以及如何减少
回流：也叫做重排，当我们对 DOM 的修改引发了 DOM 尺寸的变化时，浏览器需要重新计算元素的几何属性，其他元素的几何属性和位置也会因此受到影响，然后再将计算的结果绘制出来。这个过程就是回流重绘：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。这个过程就叫重绘重绘不一定导致回流，回流一定会导致重绘。减少重绘和回流的方法css：避免使用table布局。尽可能在DOM树的最末端改变class。避免设置多层内联样式
2022-03-08 20:45:07
751
转载 css中是元素不可见的方法
1)visibility: hidden是许多人在隐藏某个HTML元素时的首选。如页面中图片不见了，但是也没中原来图片的位置留下了一片空白区域。这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。 设置visibility: visible可以使隐藏的元素变为可见。 2)设置opacity: 0可以使一个元素变得完全透明，从而制作出和visibility: hidden一样的效果。opacity和visibility相比，其优势在于它可以被transition和animate。...
2022-03-08 18:06:24
1278
转载 http请求由请求行，请求头，请求体组成
请求行由请求方法、请求url、http协议及版本组成。 请求方法：get、post、head、put、delete、trace、connect、options get用来请求指定页面的内容，并返回实体主体，post向服务器提交资源数据进行请求处理，post请求可能会导致新的资源的建立或者已有资源的修改，post比get更安全，因为get方法数据存放在请求行里的url末尾，而post方法数据存放在请求体里，get有url的长度限制，post能发送的数据更大，post...
2022-03-08 17:26:25
666
转载 https加密的方式公钥加密私钥加密原理
对称加密：加密和解密用同一个密钥，客户端对数据加密，服务端解密拿到数据。非对称加密：使用公钥和私钥，公钥加密的内容只能私钥解开，私钥加密的内容所有公钥都能解开；私钥只保存在服务器端，公钥可以发送给所有客户端，可以保证客户端通过公钥加密的内容中间人无法破解。非对称加密虽然很巧妙的，但是效率较低，所以一般的用法是使用非对称加密来传送简短的对称加密密钥，然后再使用对称加密的方式传送数据HTTPS协议在通信时就是这个原理。HTTPS协议在通信时，首先会采用公钥加密的方式，把密钥进行公钥加密，然后传输给服务器
2022-03-08 14:24:19
1222
原创 将react项目部署到 阿里云服务器上 Ubuntu系统
1.编译你的React项目我的项目是通过create-react-app脚手架创建的，当项目编写完成之后可以执行package.json下面的build脚本就可以了：npm run buildbuild完成之后会发现在项目根目录下多了一个build文件夹，这个是我们后面部署到服务器中需要的文件。2.服务器配置2.1 购买阿里云服务器（略）2.2安装Nginx服务器软件1、进入任意目录，我选用的是通常选用的/usr/local/src目录cd /usr/local/src 2
2022-03-08 00:06:06
1550
原创 作用域链执行上下文栈
作用域链：在当前作用域中查找所需变量，但是该作用域没有这个变量，那这个变量就是自由变量。如果在自己作用域找不到该变量就去父级作用域查找，依次向上级作用域查找，直到访问到window对象就被终止，这一层层的关系就是作用域链。作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，可以访问到外层环境的变量和函数。执行上下文栈JavaScript引擎使用执行上下文栈来管理执行上下文 当JavaScript执行代码时，首先遇到全局代码，会创建一个全局执行上下文并且压入执行栈中.
2022-03-04 13:36:38
215
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人