- 博客(39)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 2021互联网大厂必问：axios基本原理以及使用步骤详细总结（一）
2021互联网大厂必问：axios基本原理使用步骤详细总结（一）步骤十分详细，希望能够帮助到各位前端人们！放弃不难，但坚持一定很酷！！！！本文内容导航： 1：初识axios，以及准备工作 2：搭建json-server服务器来为后续ajax发送请求做准备 3：axios的基本使用认识，以及页面配置 4：axios小案例完成对json-server服务器中数据的get/post/put/delete操作 5：axios各种方式发送请求简要介绍 6：附：本实例完整代码 前置
2021-02-21 16:43:09
638
原创 经典Promise面试题----手写Promise详细步骤（三）
手写Promise封装继续行进----实现then方法的结构功能！按照步骤进行，逻辑思路很简单易实现！前文链接导航：功能1：搭建Promise结构，实现关键resolve、reject功能功能2：实现throw抛出异常以及Promise对象状态单次更改功能本文在前两篇的实现基础上继续封装Promise其他功能 1：then()方法执行回调的实现首先：实例化对象中调用then方法<script src="./Promise.js"></script><b
2021-02-19 14:19:41
1982
12
原创 经典Promise面试题----手写Promise详细步骤（二）
手写一个Promise的封装承接上文继续进行：上文实现功能： 功能1：搭建Promise基本结构实现 功能2：resolve、reject结构功能实现 链接直达：https://blog.csdn.net/czj1049561601/article/details/113829149#comments_15053958本文实现封装功能： 功能1：throw抛出异常改变promise状态功能实现 功能2：确保Promise状态只能修改一次的功能实现throw抛出异常改变Promise对象
2021-02-19 00:39:31
1556
9
原创 经典Promise面试题----手写Promise详细步骤（一）
Promise的封装–手写一个Promise–实现基本结构以及resolve、reject结构功能实现！1. 初始结构的搭建步骤结构的简介： 1：在文件夹中新建两个文件，一个index.html作为入口，另外一个promise.js作为封装主体函数 2：引入自定义的Promise.js，来使用自定义手写的Promise，如果不引入的话，下面实例化的p就是由全局的Promise实例化出来的。 3：现在我们想要自定义，所以script标签引入来覆盖掉全局的Promise，于是新建Promise
2021-02-17 00:08:31
5744
12
原创 一个小案例搞定HTTP缓存机制原理（强制缓存+协商缓存）- 图文描述
提示：浏览器缓存是性能优化的一个重要手段，对于理解缓存机制而言也是很重要的！文章目录前言一、什么是缓存？二、简述缓存的原理？三、HTTP缓存设置的机制？四、缓存分类？五、强制缓存基本原理以及案例？五、协商缓存基本原理以及案例？二、使用步骤1.引入库2.读入数据总结前言背景：在任何一个前端项目中，访问服务器获取数据都是很常见的事情，但是如果相同的数据被重复请求了不止一次，那么多余的请求次数必然会增加浪费网络带宽，影响用户是使用体验。因此使用缓存技术对已经获取到的资源进行重用，是一种提升网站性能与用户
2021-08-05 15:05:43
540
原创 js系列之——call/apply/bind基础重写以及this的指向问题
写在前面距离上次更新已经过去了三个多月了，一方面是因为回到学校有一定的科研论文压力，另一方面可能短暂的认为总结整理博文发布，除了自己要十分清晰之外还要有很好的表述能力才能够做到对看到的一部分人有帮助，所以暂时停止了继续整理。目前学硕小论文已经发表（水过），想起自己的初衷还是为了能够记录自己的前端挖坑过程，加深自己对知识点的理解总结能力，同时部分大厂的秋招已经明目张胆的开始了，所以还是决定继续进行整理记录，希望会有一个好的结果！第一次就贡献给一道经典的面试题：js中关于this的指向以及call、
2021-07-14 17:53:00
369
原创 前端面试——HTTP1.0和HTTP1.1之间的区别？
http1.1 相对于 http1.0 有这样几个区别：（1）连接方面的区别，http1.1 默认使用持久连接，而 http1.0 默认使用非持久连接。http1.1 通过使用持久连接来使多个http 请求复用同一个 TCP 连接，以此来避免使用非持久连接时每次需要建立连接的时延。（2）资源请求方面的区别，在 http1.0 中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，http1.1 则在请求头引入了 range 头域，它允.
2021-04-08 15:17:48
654
原创 前端面试——状态码301/302的区别与应用场景
常见的对状态码的描述如下，虽然标准却难以理解：官方的说明就是比较简洁了：1： 301 redirect: 301 代表永久性转移(Permanently Moved)2： 302 redirect: 302 代表暂时性转移(Temporarily Moved )共同点：1：均表示重定向的含义2：就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址，这个地址可以从响应的Location首部中获取（用户看到的效果就是他输入的地址A瞬间变成了另一个地址B）不.
2021-04-06 10:13:37
1431
原创 JavaScript实现快速排序的两种方式——分治策略+数组合并
介绍快速排序：快速排序是C.R.A.Hoare于1962年提出的一种划分交换排序。它采用了一种分治的策略，通常称其为分治法(Divide-and-ConquerMethod)。"快速排序"的思想很简单，整个排序过程只需要三步：（1）在数据集之中，选择一个元素作为"基准"（pivot）。（2）所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。（3）对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。方法一核.
2021-04-01 17:27:51
191
原创 前端面试——TCP/IP 的三次握手/四次挥手—结尾总结建议自己梳理全文背诵！
想要能够清晰迅速的理解TCP/IP的三次握手，四次挥手，必须对TCP的报文格式有了解，从中找到突破口，否则很难明白理解贯通！只是单纯的背诵回答，面对面试官也不能做到逻辑清晰表达！结尾内容是一个个人梳理，理解后建议背诵！1:下图是TCP报文的数据格式，这里只针对三次握手，四次挥手所用到的进行了说明。1：TCP报文是TCP层传输的数据单元，也叫报文段。2：序号和确认号是TCP可靠传输的关键部分。3：序号：表示本报文段所发送数据的第一个字节的编号。在TCP连接中所传送的字节流的每一个字节都会按顺序.
2021-03-30 21:39:45
782
2
原创 前端面试——HTTP中POST与GET的区别？
回答此问题：先回答什么是http？什么是post？什么是get? 进而展开…1. 简单解释HTTP1:HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写2:字面意思理解：就是服务器传输超文本到本地浏览器的一种传送协议。3:HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。总结性的一句话：HTTP 是基于 TCP/IP 协议的应用层协议。它不涉及数据包（packet）传输，主要规定了客.
2021-03-30 16:05:17
557
原创 前端面试—指令v-show与v-if的区别？
回答此问题，不要八股文背书式回答，要有逻辑性，体现理解！首先共同点：v-show 和 v-if 都能控制元素的显示和隐藏。其次不同点：1：在实现本质方法上不同： 1：v-show本质就是通过设置css中的display为none，控制隐藏，只会编译一次 2:v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。2：编译的区别： 1：v-show实质就是css切换，先渲染出来在进行显示/隐藏的控制 2：v-if切换有一个完整的销毁和创建的过程，是一
2021-03-24 11:55:42
221
原创 前端面试——变量提升？函数提升？
回答侧重点：1：什么是变量提升？JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，包括函数，都会被提升到代码的头部（作用域顶端），这就叫做变量提升（hoisting）。1：预解析阶段：在预解析阶段，js会对以var声明的变量，和function开头的语句块进行提升，将var声明的变量和function 提升至代码的最前面。2：需要注意的是，function整体提升，var 声明的变量只提升变量声明，并不会在提升的同
2021-03-23 14:49:04
1060
1
原创 前端面试之任务队列/事件机制？同步异步
回答侧重点：1：强调JS是单线程的，诞生就是如此1：JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。2：作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。3：所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。2：单线程是如何做到异步操作的呢？——任务队列1：单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一
2021-03-22 22:47:41
556
1
原创 前端面试--谈谈你对MVVM的理解？如何回答
1. 首先解释：MVVM是什么？干什么用的？1：MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。2：其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。3：以Vue.js 为例。Vue是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。4：它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewMo
2021-03-22 16:27:39
6858
6
原创 JS中判断数据类型：typeof与instance of
1： typeof:1：typeof 一般被用于判断一个变量的类型，我们可以利用 typeof 来判断number, string, object,boolean, function, undefined, symbol 这七种类型，2：但是，typeof 在判断一个 object的数据的时候只能告诉我们这个数据是 object, 而不能细致的具体到是哪一种 object3：所以在typeof判断类型的基础上，我们还需要利用Object.prototype.toString方法来进一步判断数据
2021-03-22 10:50:31
568
3
原创 2022大厂前端面试必问--JS数据类型以及相关转化
首先明确ECMAscript中的数据类型分为两种：基本类型和引用类型基本数据类型即将一个基本类型的数据赋值给另外一个变量，是通过将原数据拷贝一份赋值的，两变量之间互不影响。Undefined,Null,Boolean,Number,String,symbol,bigint其中Number： 1：NaN(not a number),尽管字面不是一个数字的含义 typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写,意思是"不是一个数字"
2021-03-18 17:32:56
242
原创 Vue声明周期以及钩子函数
Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。一般情况下： 会在created中做一些网络请求，Vue对象创建好后，就会在created中请求一些数据，然后把这些数据放在data中，再在DOM中进行渲染。Vue.js官网中声明周期部分链接导航 vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中常用的方法有
2021-03-07 20:47:10
330
原创 用JavaScript来截取地址栏参数：const reg = new RegExp(‘(^|&)‘ + query + ‘=([^&]*)(&|$)‘) 详解
用JavaScript来截取地址栏参数：const reg = new RegExp(’(^|&)’ + query + ‘=([^&]*)(&|$)’) 详解前端框架中，utils.js文件是用来存放自己封装工具类函数的，是一个共享的方法。如下 getQuery (query) { // 创建一个含有目标参数的正则表达式对象 const reg = new RegExp('(^|&)' + query + '=([^&]*)(&|$)
2021-03-02 10:31:12
777
4
原创 Vue中的$ref和$refs属性介绍与使用
除了自定义属性外，Vue实例还暴露一些有用的实例属性和方法，他们都有前缀$，以便和用户定义的属性和方法分开在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现常用的属性有： 1：vm.$el //获取vue实例关联的Dom元素 2: vm.$data //获取vue实例的data选项 3：vm.$options //获取vue实例的自定义属性 4：vm.$refs //获取vue实例中所有含有ref属性的dom元素，如果有多
2021-03-01 23:26:32
1641
7
原创 前端必备——JSON语法规则及使用
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成，有效的提升了网络传输效率。1：简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。2：JavaScript对象表示法--JavaScript Object Notation3：JSON是存储和交换文本信息的语法，类似于XML4：JSON比XML更小、更快、更容易解析！5：一句话概括：JSON将基本数据类型储存为文本！在 JavaScript 语言中
2021-03-01 11:22:16
850
6
原创 async与await结合发送AJAX请求小案例
为熟悉async与await的使用，本文通过小案例来进行AJAX的发送！具体原理见如下博文！async函数与await函数基本原理介绍 https://blog.csdn.net/czj1049561601/article/details/114238733案例内容： 通过点击屏幕上的按钮来过去接口中的笑话，并进行打印！完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
2021-02-28 22:55:47
1100
5
原创 async与await基本认识与使用
async函数的含义和用法 异步操作是JavaScript编程的麻烦事，一直有人提出各种各样的方案，试图解决这个问题！ 从最早的回调函数，到Priomise对象，到Generator函数，每次都有所改进但是都不彻底！ async函数很多人人为它就是异步操作的终极解决方案。async函数： 1：函数的返回值为promise对象 2：promise对象的结果由async函数执行的返回值决定async函数的用法： 1：同Generator函数一样，async函数返回一个promise对象，可以
2021-02-28 22:43:39
3909
8
原创 Vue_Ajax请求------axios入门小案例
通过小项目演示使用vue-axios如何和后端进行通信！vue项目中通常使用的两个ajax库！ 1：插件vue-resource(不推荐使用，常用在vue1.0) 2：axios（推荐使用！！！！！）案例内容：目标：根据关键字 V 在后台GitHub中进行搜索，搜索到最受欢迎的带v的仓库（肯定是vue了） 然后点击链接，就回跳转到相应的主页中!具体：是一个异步效果，没有请求到时，显示loading状态，返回后显示相应链接具体结构代码如下：1：新建vue项
2021-02-26 18:40:48
295
原创 vue-router路由懒加载以及三种实现方式
什么是路由懒加载？ 也叫延迟加载，即在需要的时候进行加载，随用随载。官方解释： 1：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。 2：如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。官方在说什么呢？为什么需要懒加载？ 1：首先，我们知道路由中通常会定义很多不同的页面。 2：这个页面这项目build打包后，一般情况下，会放在一个单独的js文件中 3：但是，如果很多的页面都放在同一个js文件.
2021-02-26 12:03:02
21686
8
原创 nrm/npm/npm run xxx....安装/配置/查看/切换...详解记录
1. nrm基本知识nrm是一个NPM源管理器，能够快速的在各NPM源间切换nrm: 1:nrm（npm registry manager）是npm的镜像管理工具，有时候国外的资源太慢，使用这个就可以快速地在npm源间切换。 2:同时，当我们在公司任职工作时，可能需要使用公司的特有源 3:于是，便捷的查看和切换的重要性就出现了2. nrm安装在命令行执行命令，npm install -g nrm，全局安装nrm成功截图如下：3. 查看所有可选的源nrm ls //执行命
2021-02-24 19:40:59
575
原创 node神器--相见恨晚之nodemon的使用配置
1：nodemon能够帮我们重启服务，开发node.js相关的应用，自动检测代码变化，2：帮助我们重新启动应用因为我们开发的过程中会经常的修改ajax代码，重复重启会很麻烦！3：这是一个件监听node代码变化的工具，会自动的完成node服务器和数据库服务器的重启。nodemon官方网站：https://www.npmjs.com/package/nodemon安装步骤：安装使用前提:需要有node和npm环境，没有的话不能顺利使用安装nodemon1：npm install -g n
2021-02-21 18:02:01
222
原创 axios配置对象详细说明
axios官方文档配置说明本文主要针对GitHub上的axios的配置文档做一个详解的介绍和说明，并对常用的参数做一个提取说明。axios-GitHub链接地址–内含使用方法以及配置详解介绍高频常用参数罗列： 1：url // 通过设置url参数，决定请求到底发送给谁 2：method // 设置请求的类型，get/post/delete.. 3：baseURL // 设置url的基础结构，发送请求配置时只需要设置url即可，axios会自动将两者进行拼接 4：he
2021-02-21 10:07:17
1501
原创 Promise面试题整理
具体逻辑原则参考上一篇文章整理：- 面试题一：写出下列代码的打印结果？？ setTimeout(()=>{ console.log(1) },0) Promise.resolve().then(()=>{ console.log(2) }) Promise.resolve().then(()=>{ console.log(4) }) console.log(3)分析过程：实列结果：-
2021-02-15 10:32:06
2175
3
原创 Promise、Js异步之宏队列与微队列
回调原则：1. 宏列队: 用来保存待执行的宏任务(回调), 比如: 定时器回调/DOM事件回调/ajax回调2. 微列队: 用来保存待执行的微任务(回调), 比如: promise的回调/MutationObserver的回调3. JS执行时会区别这2个队列 JS引擎首先必须先执行所有的初始化同步任务代码 **每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行**原则：每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行setTimeout(() =&
2021-02-14 22:57:35
338
原创 Promise---详细学习总结以及面试题总结（二）--关键API介绍以及常见问题
promise的主要API介绍Promise构造函数: Promise (excutor) {}Promise.prototype.then方法: (onResolved, onRejected) => {}Promise.prototype.catch方法: (onRejected) => {}Promise.resolve方法: (value) => {}Promise.reject方法: (reason) => {}Promise.all方法: (promises)
2021-02-14 21:30:52
222
原创 Promise---详细学习总结（一）
知识储备前提:回调函数分类1). 同步回调: 理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中 例子: 数组遍历相关的回调函数 / Promise的excutor函数2). 异步回调: 理解: 不会立即执行, 会放入回调队列中将来执行 例子: 定时器回调 / ajax回调 / Promise的成功|失败的回调 // 1. 同步回调函数 // const arr = [1, 3, 5] arr.forEach(item => { //
2021-02-14 13:08:47
262
原创 Vue-cli4 配置文件路径别名以及使用详解
在开发vue项目中，我们经常需要引入不同的文件，这时就需要针对文件的路径进行设置，仅仅使用./ .//来进行文件的导入，维护和更改都变的相当麻烦，需要对文件的路径相当熟悉才可以所以可以设置alias别名来方便操作，然后脚手架cli4中并没有和cli2一样自动生成一个webpack.base.config.js文件来让我们直接写别名。所以需要我们自行创建，步骤如下：项目根目录下创建vue.config.js文件与package.json 同级目录2. 配置文件中写入一下代码：// 用来.
2021-02-13 11:05:20
3116
5
原创 Vue-router路由代码跳转以及动态路由的详细配置介绍
路由代码跳转有些时候，页面的跳转可能需要执行的对应的JavaScript代码，这个时候就需要使用另外一中跳转方式了this中有$router这个对象，就相当于app中实例的router。然后添加新的路径进去。<template> <div id="app"> <router-view></router-view> <h3>我是网站的标题</h3> <router-link to="/hom
2021-02-04 11:14:21
2068
3
原创 认识Vue-router以及其安装使用配置详解
基础理论知识什么是路由？路由就是通过互联的网络把信息从源地址传输到目的地址的活动---维基百科路由器提供了两种机制： 1：路由：路由是数据从来源到目的地的路径 2：转送：将输入端的数据转移到合适的输出端 3：路由中有一个非常重要的概念： 路由表：本质是一个映射表，决定了数据包的指向什么是前端渲染？什么是前端渲染？阶段一：后端路由1:早期开发都是使用后端渲染：jsp(java server page) 前端页面请求，利用jsp技术，服务器进行页面渲染，将渲
2021-02-03 20:40:18
249
1
原创 Vue CLI3配置详解-----脚手架的认识以及项目初始化、项目目录结构
使用Vue CLI3创建项目：脚手架(scaffold) 指施工现场为工人操作并解决垂直和水平运输而搭设的各种支架。建筑界的通用术语。写在前面： - 如果你只是简单的写几个Vue的**Demo**程序，那你不需要Vue CLI。 - 如果你**开发大型项目**，那你需要，而且**必须**使用Vue CLI。 - 开发大型项目时，必须考虑代码目录结构、项目机构和部署、热加载、代码单元测试等事情。 - 如果每个项目都要手动完成这些工作，工作效率低下，所以要使用脚手架来帮助我们完成这些事情。CL
2021-02-02 19:48:29
538
原创 纯css实现三角形--详细原理
利用css可以实现各种样式的三角形实现效果代码如下：<head> <meta charset="UTF-8"> <title>css实现三角形</title> <style> #tran{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparen
2021-01-27 22:05:35
607
原创 css实现--三角形/箭头（上下左右）--详细原理
纯css实现上下左右箭头**一直以为箭头知识引入的icon标签，直到实习才知道原来纯CSS是都可以实现的**实现效果在这里插入代码片 <style> #rightRow{ height: 20px; width: 20px; border-right: 5px solid black; border-top: 5px solid black; padding:3px; transform: rotate(-
2021-01-27 21:21:57
3407
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人