![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
文章平均质量分 79
小牲口online
。
展开
-
解决vscode 获取扩展失败,XHR failed
今天用Vscode下东西的时候发现不能报这个错误,发现Vscode也不能检查更新了vscode 获取扩展失败,XHR failed查了查原因是计算机使用了代理服务器的缘故,要想解决这个问题我们可以直接关掉代理服务器即可。位置在设置->网络和internet->代理...原创 2021-12-28 16:36:35 · 32393 阅读 · 11 评论 -
你应该掌握的浏览器相关知识
文章目录一.浏览器安全1. XSS攻击2. CSRF攻击3.有哪些可能引起的前端安全的问题二.浏览器缓存机制1.对缓存的理解2.浏览器缓存的分类强缓存协商缓存3.浏览器的缓存机制的全过程三.浏览器渲染原理1.浏览器渲染引擎的主要模块以及渲染过程3. style样式渲染4. link样式渲染5.阻塞渲染**关于CSS的阻塞**关于js的阻塞四.浏览器本地存储1. sessionStorage,LocalStorage和CookieCookieLocalStorageSessionStorage2.浏览器的跨页原创 2021-08-10 10:08:29 · 623 阅读 · 0 评论 -
你能手写一个Promise吗?
文章目录一.初始化Promise二.构造函数实现三.then函数的实现四. catch的实现五. Promise.reject的实现六. Promise.resolve的实现七. Promise.all方法八. Promise.race方法如果你想更加深入的了解Promise的使用以及它的内部机制,那不妨跟着我来手写一个Promise吧。一.初始化Promise首先我们应该清楚Promise的基本结构,Promise的原型方法以及函数对象本身的方法。then与catch是我们Promise构造函原创 2021-08-07 15:53:03 · 226 阅读 · 0 评论 -
CSS高频重点
1. CSS选择器以及优先级标签选择器、伪元素选择器:1类选择器、属性选择器、伪类选择器:10id选择器:100内联样式:1000注意:!important声明的样式优先级最高优先级相同时,最后出现的样式生效继承得到的样式优先级最低通用选择器(*)、子选择器(>)、相邻同胞选择器(+)并不在这四个等级中,所以它们的权值为02. display的属性值及其作用none:元素不显示,并且从文档流中移除该元素block:块类型,可设置宽高,换行显示(默认宽度为父元素宽度)inl原创 2021-08-03 23:20:10 · 214 阅读 · 0 评论 -
你应该掌握的前端性能优化面试点!
文章目录一.浏览器渲染原理1.浏览器渲染引擎的主要模块以及渲染过程3. style样式渲染4. link样式渲染5.阻塞渲染**关于CSS的阻塞**关于js的阻塞二. 重绘与重排1.什么是css图层2.图层创建的条件3.重绘4.重排(回流)5.常见的触发重排的操作6.关于重绘重排的优化方案7.requestAnimationFrame与定时器setTimeout的区别三. CDN1.CDN的概念2.CDN的作用3.CDN的使用常见四.防抖节流1.函数防抖2.函数节流五.懒加载1.懒加载的概念2.懒加载的实现原创 2021-07-16 00:24:34 · 281 阅读 · 1 评论 -
你需要注意的Javascript高频面试点
文章目录一.数据类型1. JavaScript有哪些数据类型,它们的区别?2. 数据类型的检测方式?3. 判断数组的方式有哪些?4. null和undefined的区别5.为什么null返回一个Object6.intanceof 操作符的实现原理及实现7. 为什么0.1+0.2 ! == 0.3,如何让其相等?8.如何获得安全的undefined值9.typeof NaN的结果是多少10.isNaN与Number.isNaN函数的区别11.==操作符的强制类型转换规则12.其他值转到string规则13.其原创 2021-07-08 19:00:42 · 722 阅读 · 10 评论 -
回望Javascript:执行上下文/作用域链/闭包
文章目录1.执行上下文2.执行上下文栈3.作用域4.作用域链5.闭包6.内存溢出与内存泄露1.执行上下文执行上下文是用来预处理JS代码的执行上下文栈是用来管理执行上下文的JS代码执行时它的代码位置分为一个全局代码和函数内的代码,因此执行上下文分为全局执行上下文和函数执行上下文,全局执行上下文在执行全局代码前会创建一个全局执行上下文环境将window将其确定为全局执行上下文;并且对全局数据进行一个预处理,这里面就包括:var 定义的全局变量设为undefined,并且将其添加为window原创 2021-06-08 18:14:05 · 238 阅读 · 2 评论 -
回望Javascript:原型与原型链
文章目录1.原型对象上的constructor指向哪里2.显示原型与隐式原型3.谈一谈原型与原型链4.Function,Object与原型的关系5.原型链指向题目6.探索instanceOf(手写instanceof)7.两道面试题1.原型对象上的constructor指向哪里每个函数都有一个prototype属性,这是一个引用,指向了函数的原型对象,每个原型对象都有一个constructor属性,这个属性指向函数对象本身。验证一下: function Fun(params) {} conso原创 2021-06-03 18:18:31 · 217 阅读 · 2 评论 -
Redux状态管理修炼手册
文章目录1.初识Redux1.1 为什么要使用Redux1.2 redux的核心理念1.3 redux的三大原则2.redux的基本使用2.1使用流程2.2 redux目录结构划分2.3 redux的处理流程3.react结合redux3.1 在组件中直接使用3.2 自定义connect函数4.react-redux使用5.中间件的使用5.1.中间件作用和目的5.2 redux-thunk的使用6.redux-devtools7.redux-saga在使用react进行开发的过程中,Redux作为一种状原创 2021-05-27 10:18:31 · 259 阅读 · 0 评论 -
React+antdesign实现添加评论功能(底部附源码地址)
React结合antDesign组件库实现一个的评论功能案例,有疑问评论区交流引入这些就不赘述了,直接说实现过程吧,这里的input部分和item是分开的两个组件,使用到的第三方的插件:"styled-components": "^5.3.0",//css in js "moment": "^2.29.1", //处理时间(推荐使用)"antd": "^4.15.6", //不多说"@craco/craco": "^6.1.2",//React处理配置文件(可修改antd的主题)接下来直..原创 2021-05-20 23:12:00 · 838 阅读 · 0 评论 -
jsx核心知识详情
文章目录1.认识jsx1.1 react为什么使用jsx1.2 使用前须知2. jsx基操2.1 jsx中的注释2.2 jsx嵌入变量2.3 jsx嵌入表达式2.4 jsx绑定属性3. jsx事件绑定3.1 jsx之间绑定中的this指向问题3.2 事件参数传递4. jsx渲染5.Jsx原理解析6.react的虚拟DOM7.为什么使用虚拟DOM1.认识jsx jsx实际上是JavaScript语法上的一个扩展,也是JavaScript XML的缩写。它的作用就是用来描述我们的用户界面,使有关界面的代码原创 2021-05-11 20:43:15 · 813 阅读 · 3 评论 -
React事件绑定时this指向问题解决以及事件传参
React事件绑定中的this指向问题当时如果这是我有一个需求,我点击以下按钮,来获取我们state中的数据。btnfun(){ console.log(this);//undefined console.log(this.state.data);//not undefined}这里为什么会出现这个问题呢?因为btnfun()函数并不是我们主动调用的,而是当触发button的事件时,react内部再去调用这个函数。而react的内部时不知道这里的this是指向哪里的。为了解决这个原创 2021-05-11 10:49:43 · 396 阅读 · 0 评论 -
开源一个Vue电商项目,欢迎交流
文章目录1. 项目基础架构1.1 项目基础架构1.2 主要插件1.3 路由封装1.4 sessionstorage的封装1.5 接口错误拦截1.6 接口环境的设置1.7 MOCK设置2.首页功能开发3.登录功能开发4.产品站功能开发5.商品详情页面6.购物车页面7.ElementUI集成8.订单确认功能9.订单支付功能10.订单列表功能实现11.源码地址1. 项目基础架构项目使用到的技术栈:Vue全家桶,后台接口线上调联,Sass预编译,ElementUI,前端优化,微信支付宝支付…1.1 项原创 2021-04-30 17:26:48 · 3493 阅读 · 24 评论 -
关于vue在面试或开发中需要留意的地方
前段时间学习了Vue框架,因此在我学习过程中整理了一些关于Vue的一些需要注意的地方,在后面根据所开发的项目,我可能会持续更新这篇基于Vue的博客,欢迎交流文章目录1.Vue中的mvvm2. methods和computed3. v-on的参数传递问题与常用的修饰符3.1 参数传递问题3.2 常用修饰符5.v-if和v-show的区别6.v-for时绑定key与不绑定key的区别7. Vue中数组方法中哪些是响应式的8. v-model双向绑定使用8.1 用于表单时9. 为什么组件中data必须是一个.原创 2021-04-19 19:17:51 · 1086 阅读 · 5 评论 -
Storage的封装
为什么要封装storage:Storage本身虽然有Api,但是只是简单的键值对的形式Storage只能存储字符串,需要人工转换成json对象Storage只能一次性清空,不能单个清空我们通常在Storage中存储json对象,因此我们需要自己封装Storage方法。/* Storage封装*/const STORAGE_KEY = 'mall';export default { // 存储值 setItem(key, value, modules_name) { if原创 2021-04-14 23:19:06 · 588 阅读 · 0 评论 -
vue-cli4.x配置Proxy代理解决跨域
我们在之前说了前端常见的跨域方式,其中说了proxy代理解决此问题 它的思想思想实际上是通过访问a接口代理b接口的请求,因此我们最终访问的是b接口。使用这种方式的好处是我们可以使用任何方式请求数据都可以。并且前后端都不需要做处理,只需要运维改一些配置信息。 我们这里vue项目使用的是nodejs服务器,因此我们要在vue.config.js中配置,最终传入webpack模块在给node服务器。 下面是我们的vue.confg.js的信息:module.exports={ devS.原创 2021-04-14 16:06:55 · 1935 阅读 · 1 评论 -
Vuex的五个核心概念
文章目录五个核心概念1. state2. Getters的使用3 Mutations3.1 基本使用3.2 响应规则3.3 常量类型3.4 同步函数4. Action4.1 使用Promise5 Moudle6 项目结构五个核心概念const store=new Vuex.Store({ state:{}, mutations:{}, actions:{}, getters:{}, modules:{}}) 以上为五个核心概念的内容,接下来我们一一介绍: 首先贴出一张图以原创 2021-04-11 10:54:37 · 530 阅读 · 0 评论 -
什么是Vuex?应用场景?
文章目录1. 作用以及使用场景1.1 Vuex的功能1.2 Vuex的使用场景1.3 Vuex多页面状态管理工作流程2. 基本使用1. 作用以及使用场景1.1 Vuex的功能Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 这是官网给我们的定义,那么什么是状态管理模式?什么是集中式存储管理?。 实际上就是我们多个组件可以共享一些数据。那么这时我们有些疑问,那这个功能我们也可以自己实现啊,只需要把我们需要的共享数据抽离为一个对象,挂载在Vue的原型上,这样我们所有的vue实例原创 2021-04-11 10:50:07 · 783 阅读 · 0 评论 -
SPA必备技能——vue-router详情
文章目录1.路由是什么1.1 后端路由1.2 前端路由2. vue-router基本使用2.1 搭建路由的框架:2.2 配置路由的映射关系2.3 设置默认路由2.4 改变前端路由模式2.6 使用代码跳转路由2.7 动态路由2.8 路由懒加载3. vue-router嵌套路由4. vue-router参数传递4.1 参数传递的两种方式5. vue-router导航守卫6. 使用keep-alive缓存路由界面1.路由是什么 首先我们需要搞清楚路由是什么东西摘自维基百科:通过互联的网络把信息从源地址传原创 2021-04-08 21:04:18 · 417 阅读 · 0 评论 -
vue-router优化之懒加载
关于路由的懒加载,官方给我们的解释为:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。其实就是说我们的每一个路由对应的就是一个给用户展示的页面,然而按照常规的操作这些页面最终会通过webpack打包为一个bundle.js的文件,因此就造成了这个页面十分的庞大,所在在请求的时候可能会花费一定的时间,给用户造成不好的体验。因此我们可以通过路由懒加载的方式来解决这个问题。也就是原创 2021-04-07 20:15:49 · 293 阅读 · 0 评论 -
webpack5以上抽离配置文件(生产开发分明)
文章目录1.为什么要分离配置文件2.实施3.总结1.为什么要分离配置文件在我们开发过程中,经常在webpack.config.js文件中配置很多东西,不管是开发环境下,还是生产环境下。但是当我们在生产环境下打包时,其实很多我们开发环境下的配置时用不到的。那么当我们把所有的配置写在一个文件中时,那时不太稳妥的。因此我们需要抽离配置文件。2.实施我们需要安装webpack-merge插件 npm install webpack-merge --save-dev接着分离文件,将配置文件分为三个文件原创 2021-04-05 15:46:14 · 1662 阅读 · 3 评论 -
跨域解决方式——JSONP,CORS
文章目录1.同源策略于跨域1.1 同源策略1.2 跨域1.3 为什么要设定跨域这个概念2.解决跨域的方案2.1 jsonp2.2 CORS2.3 CORS和jsonp的比较1.同源策略于跨域1.1 同源策略首先我认为想要了解跨域前必须先要知道浏览器的同源策略。同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源指的是协原创 2021-03-22 23:59:22 · 302 阅读 · 0 评论 -
使用npm引入socket.io出现err的问题
在引入socket.io时总是出错,原因找了很久,可能时因为npm引入时出现的版本错误。大概就是这个样子:解决方案:使用国内淘宝镜像引入:$ cnpm i socket.io -S原创 2021-03-20 17:27:08 · 424 阅读 · 0 评论 -
数据结构(js实现)——图解二叉搜索树
文章目录1.概念2.二叉搜索树的封装以及常见操作3.插入操作的封装4.三种遍历方式封装4.1 先序遍历4.2 中序遍历4.3 后序遍历5.获取最大值和最小值6.搜索特定的值7.删除操作7.1 结点是叶子节点(没有子节点)7.2 删除的结点有一个子节点7.3 删除的结点有两个子节点8.结语1.概念二叉搜索树(BST),又称二叉排序树和二叉查找树。二叉搜索树是一颗二叉树,可以为空,如果不为空,则满足以下三个条件:非空左子树的所有键值小于根节点的键值非空右子树的所有键值大于根节点的键值左右子树本身原创 2021-03-10 22:55:30 · 705 阅读 · 3 评论 -
Vscode解决 Failed to connect to github.com port 443:connection timed out
有用,转载git config --global http.proxy http://127.0.0.1:1080 git config --global https.proxy http://127.0.0.1:1080问题得到解决取消代理取消全局代理:git config --global --unset http.proxy git config --global --unset https.proxy 解决方案:先把子切换到全局,然后再取消,接着取消全局代理,最后git p转载 2021-02-27 19:00:56 · 5910 阅读 · 7 评论 -
Less预处理学习笔记
文章目录1.前言1.1为什么要进行CSS预处理1.2 三大预处理语言1.3 Less的功能与简介1.4 引入Less的方式2.正文2.1 变量2.2 混合用法2.3 嵌套2.4 运算2.5 作用域2.6 函数2.6.1 Color函数2.6.2 Math函数**2.7 避免编译**1.前言CSS预处理是一种将CSS作为目标生成文件的,使用变量、函数及其简单的逻辑实现更加简洁、适应性更强、可读性更好、更加易于代码维护的兼容浏览器的页面样式文件1.1为什么要进行CSS预处理 CSS自但诞生以来,原创 2021-02-20 21:28:26 · 387 阅读 · 2 评论 -
前端常用的8种设计模式
文章目录1.引入2.单例模式3.装饰器模式3.适配器模式4.观察者模式(发布订阅模式)5.策略模式6.模板模式7.代理模式8.外观模式9.面试点1.引入简介:设计模式代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码原创 2021-02-19 22:02:26 · 3359 阅读 · 1 评论 -
前端常见DOM元素坐标,事件对象中的坐标信息等
[TOC]1.获取窗口位置及其大小内容作用window.screenTop窗口顶部到屏幕顶部的距离window.screenLeft窗口左部到屏幕左部的距离window.innerWidth窗口中可视区域的宽度window.innerHeight窗口中可视区域的高度window.outerWidth浏览器窗口本身的宽度(可视区域+浏览器边框)window.outerHeight浏览器窗口本身的高度如下图所示:注意: chrome在最原创 2021-02-06 22:01:55 · 892 阅读 · 0 评论 -
HTML5手势、拖放、定位事件
文章目录1.手势事件(移动端)1.1 click事件1.2 tap类事件1.3 swipe类事件1.4 touch类事件2.拖放事件3.定位事件3.1 getCurrentPosition()方法3.2 watchPosition()方法3.3 clearWatch()方法3.4 百度地图api获取当前定位1.手势事件(移动端)引入:zepto库,该库与jQuery用法相同。封装了移动端手势Zepto.js是专门为现代智能手机浏览器推出的JavaScript框架Zepto的一些可选功能专门原创 2021-02-04 16:57:55 · 784 阅读 · 3 评论