- 博客(67)
- 收藏
- 关注
RSS订阅原创 computed与watch的区别？
computed是计算属性，依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取的computed值才会重新进行计算computed的值。一般应用于数值计算，并且依赖其他数据的时候，使用computed，可以利用computed的缓存属性，避免每次取值的时候，都需要重新计算。watch更多的是观察的作用，支持异步，类似于某种数据的监听回调，每当监听数据回调的变化才会执行回调以后的操作，watch一般应用于数据变化执行时异步或者开销较大的操作，这时使用watch，支持异步
2022-05-13 16:44:19
518
原创 react中hooks的优缺点是什么？
其实就是使用hooks之前有什么缺点，使用之后会有什么好处。肯定会优化的这个你总知道吧。（那不就是代码可读性变强，可维护性）。使用hooks之前（例如发布/订阅）自定义事件的时候，会被挂载到componentDidMount生命周期中，然后再componentWillUnmount生命周期中将它进行清除。这样就不利于开发者进行维护与迭代。但是在使用hooks之后，通过Effect可以将三个componentDidMount，componentDidUpdate，componentWillUnmount进
2022-05-12 14:10:21
1104
原创 有没有什么方法可以保持前后端实时通信？
这个其实就是问轮询，长轮询，iframe流，websocket，以及sse1 轮询就是指的客户端与服务端之间一直会有链接，每隔一段时间就会询问一次。有点的话就是实现简单，无需做过多的更改。缺点的话，连接数会变的很多，一个接收，一个发送，每次发送都会有请求头，会耗费流量，也会耗费CPU的效率。还有就是轮询的时间间隔不好控制，长的话会导致用户不能及时接收到消息，短的话增加服务器的负担。所以这时候就出现了长轮询。2 长轮询轮询的改进版，客户端发送HTTP请求给服务器之后，没有新消息的话，会一直在等
2022-05-11 13:58:19
1124
原创 前端面试题----ES6（随机排序）
1.es5和es6的区别，说一下你所知道的es6？ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化ECMAScript6，即ES6，ECMAScript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性：（1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明（2）箭头函数ES6
2022-05-02 21:45:57
253
原创 前端面试题----Ajax（随机排序）
1.什么是ajax？ajax作用是什么？AJAX = 异步JavaScript 和XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.2.为什么要用ajax？Ajax应用程序的优势在于：1. 通过异步模式，提升了用户体验2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。3.AJA..
2022-05-02 21:29:23
963
原创 浅谈Vue与React的区别
经过你自己的学习，相信你们你对vue与react已经有了一些了解，也觉得这两大框架有一些相同之处。那咱们就来谈一下你觉得这两大框架有什么地方是不太一样的？我觉得最大的相同点就是虚拟DOM节点，react与vue只有框架的骨架，其他的功能就是一些组件。1 监听数据变化的实现原理不同vue的话使用getter|setter 方法或者函数的劫持，去来判断数据的变化与否，不需要去做一些特别的优化就可以达到一些功能。react是通过比较引用的方法进行的，加入不进行优化的话，可能会导致一些VDOM进行重新渲
2022-05-02 16:54:52
450
原创 前端面试题----数据结构与算法（随机排序）
1 什么是复杂度分析？1.数据结构和算法解决是 “如何让计算机更快时间、更省空间的解决问题”。2.因此需从执行时间和占用空间两个维度来评估数据结构和算法的性能。3.分别用时间复杂度和空间复杂度两个概念来描述性能问题，二者统称为复杂度。4.复杂度描述的是算法执行时间（或占用空间）与数据规模的增长关系。2. 为什么要进行复杂度分析 ？1.和性能测试相比，复杂度分析有不依赖执行环境、成本低、效率高、易操作、指导性强的特点。2.掌握复杂度分析，将能编写出性能更优的代码，有利于降低系统开发
2022-05-02 16:14:15
523
原创 前端面试题----GIT(随机排序)
1.列举你在工作中常用的几个git命令？新增文件的命令：git add file或者git add .提交文件的命令：git commit –m或者git commit –a查看工作区状况：git status –s拉取合并远程分支的操作：git fetch/git merge或者git pull查看提交记录命令：git reflog2.假如你在工作提交时发生冲突，你能解释冲突是如何产生的吗？你是如何解决的？开发过程中，我们都有自己的特性分支，所以冲突发生的并不多，但也碰到过。诸
2022-05-01 12:51:52
428
原创 前端面试题----HTTP（随机排序）
1 我们所说的同源策略指的是什么？所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。同源策略/SOP（Same origin policy）是一种约定，由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，现在所有支持 JavaScript 的浏览器都会使用这个策略。如果缺少了同源策略，浏览器很容易受到XSS、 CSFR 等攻击。2 什么是域名发散与域名收敛？1、域名发散为了突破浏览器对于同一域名并发请求数的限制.
2022-04-30 10:43:00
188
原创 前端面试题----JS(随机排序)
1 js数据类型划分？javaScript属于弱语言类型，当前数据类型是由值决定的。- 基本数据类型- Number 数字类- String 字符串类- Boolean 布尔类- null 空，没有，访问一个不存在的对象，返回值就是null- undefined 未定义，没有进行赋值- symbol（es6新增）独一无二的数据类型- 复杂数据类型（引用数据类型）- Object 对象类- Array 数组类- function 函数2 基本数据类型与引用数
2022-04-28 23:14:16
349
原创 前端常见的网络请求状态码
1XX：接受的请求正在处理2XX：请求正常处理完毕3XX：请求重定向，需要附加操作4XX：客户端请求出错，无法处理请求5XX：服务器错误，服务器请求出错100：请求未完成200：请求成功302：请求临时重定向304：请求的资源在浏览器有缓存403：请求的资源没有权限404：要访问的资源不存在500:服务器问题503：服务器繁忙或者超载...
2022-04-27 20:32:57
255
原创 前端面试题----HTML与CSS(随机排序)
1 Doctype 作用？ 严格模式与混杂模式如何区分？它们有何意义？（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。2 五大浏览器以及内核？Chrome 内核 BlinkSafari 内核
2022-04-27 01:38:48
393
原创 使某一个字段唯一不重复
id: new Date().getTime() + '' + Math.floor(Math.random() * (999999 - 100000) + 100000),
2022-04-21 10:18:31
128
原创 react项目启动不了究极大招
出现类似Cannot find module 'react-dev-utils/getPublicUrlOrPath'一般是项目中没有下载报错中提到的模块（可以在项目中package.json文件dependencies属性查看）这时候只要使用指令npm install --save-dev react-dev-utils假如使用之后还报错，那可能是无法解析依赖树的问题，好 放大招npm i --legacy-peer-deps应该就解决了还解决不了的话那我也无能为力了
2022-04-20 20:15:24
1424
原创 React知识点1
1简介React是有Facebook进行开发与维护的，采取的是react(单向数据流)+redux，使用的是jsx语法，基于webpack的模块化思想进行编辑，一切皆是组件，较为考验原生JS的功底。我们直接从脚手架开始一步一步分析，react脚手架需要node14以上的版本，直接在官网进行安装node16，然后可以在cmdnode -v 查看当前node版本号 （不是window10的需要升级下系统）2安装npm i create-react-app -g //全局安装脚手架也可以采取
2022-04-17 19:26:12
1268
原创 vue项目创建流程
A 创建项目1vue create app2选择：babel router(按需选择)B 重置项目1app.vue中重置<template> <div></div></template><script>export default {}</script><style></style>2router/index.js重置import Vue from 'vu
2022-04-10 13:11:04
834
原创 前端跨域问题解决方法
1 什么是跨域?协议，端口，域名三者之中有一个不同就会构成跨域2 什么是同源？同源指的就是协议，端口，域名三者一一对应，就算两个不同的域名指向同一个IP地址，也非同源，同源也是浏览器安全功能的一部分，可以防止一些XSS、CSFR等攻击。3 如何解决跨域问题？a 利用jsonp进行跨域1创建一个script标签 2 给script标签一个路径就是 src 3 将script标签插入到页面之中 4 利用回调函数处理数据 加自己的逻辑b cors模块 往往需要与后端进行协商实现...
2022-04-09 11:10:51
1386
原创 封装一个get 以及 post 可以实现上传文件
get * @param {*} url 请求地址 * @param {*} params 请求参数,默认值是{} * @returns axios()export const get = (url, params = {}) => { return axios({ url, method: "get", params })}post * @param {*} url 请求地址 * @param {*} pa
2022-04-09 10:22:41
506
原创 谷歌浏览器支持12px以下的字体
对浏览器内核加webki前缀，并利用transform:scale()这个属性缩放的特性进行设置<style>pspan{font-size:10px;-webkit-transform:scale(0.8);display:block;}</style><p><span>前端小臂猿测试字体10px</span></p>...
2022-04-09 10:12:00
88
原创 vue实现简单的购物车案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link h...
2022-03-30 22:14:20
495
原创 vue中 v-for key的作用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2022-03-30 21:57:55
109
原创 有这样一个URL
代码实现var str = "http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e";var json = {}; //存储var arr = str.substring(str.indexOf("?")+1).split("&");//获取？后面的，并且按&分割for(var i = 0;i<arr.length;i++){ var a = arr[i].split("="); ..
2022-03-29 16:59:16
112
原创 vue实现简单的百度接口搜索框
效果展示<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />.
2022-03-29 16:29:40
1169
原创 vue中父子组件通信的理解
一 父传子：子组件使用了父组件的数据1.使用场景：父组件控制数据，子组件控制展示的结构，父组件需要将数据给子组件。2.语法：父组件通过自定义属性传值，子组件通过props接收二 子传父：子组件用了父组件的方法1.使用场景：子组件要修改父组件的值：子传父。2.语法：父组件绑定了一个自定义事件，子组件通过$emit()触发这个自定义事件三 非父子组件通信：1.在Vue原型链上绑定一个EventBus 2.接收方通过$on 绑定自定义事件 3.发送方通过$emit()触发自定义事件
2022-03-28 22:48:03
236
原创 vue实现简单发表评论
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./node_modules/...
2022-03-28 22:40:18
361
原创 vue实现图书的添加删除
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
2022-03-28 22:36:38
270
原创 vue实现简单的学生成绩
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...
2022-03-28 22:32:53
1246
1
原创 async...await函数浅理解
一. async...await函数浅理解 async函数默认会返回一个成功状态的promise实例对象，对象中的数据为async函数的返回值。await 只能用在async函数内部,二者联合一起使用，async加载函数前面，await意为等待，等待await后面的promise实例对象变成成功状态后填充在promise对象内部的数据，可以赋值给变量，// async...await 使用示例let fs = require("fs");function readFile(url) {
2022-03-28 22:26:06
593
原创 promise浅理解
一.promise函数的基本特征<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
2022-03-28 22:22:23
138
原创 箭头函数以及指向问题
1.普通函数改写箭头函数写法/* let fn = function(a,b){ return {x:a,y:b}; } */// 改写为箭头函数：// 1） function 替换为箭头// 2）假如只有一个形参，则圆括号可省略。// 3）假如只有一行代码，则大括号可省略// 4）假如只有一行代码，并且是return语句，则return也可省略// 5）假如只有一行代码，并且是return一个对象，为了避免歧义，则需要用圆括号包起来。let fn = (a,b)
2022-03-13 20:21:42
1040
原创 Ajax与async配合完成简单的级联菜单
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
2022-02-28 20:35:27
75
原创 原生js回到顶部的实现
首先得对js盒子模型的三个系列13个属性掌握<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0
2022-01-09 13:59:55
180
原创 js获取滚动条的距离
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2022-01-09 13:54:33
6210
原创 js 生成位验证码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2021-12-30 21:36:22
72
原创 原生js编写一个距离目标时间的倒计时
这里是距离2022.2.1的目标时间倒计时<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=...
2021-12-30 21:31:17
236
原创 JS 盒子模型
js的盒子模型width/height padding border三个系列 13个属性 client clientWidth :元素自身width + 左右padding clientHeight：元素自身height +上下padding clientLeft:左边框 clientTop:上边框 offset offsetWidth:元素自身width + 左右padding (clientWidth) +
2021-12-21 20:58:16
496
原创 JS BOM
BOM(Browser Object Model)：浏览器对象模型window 系统提示框 alter(弹出内容); 弹窗 prompt(提示内容); 带有输入的用户提示框 返回值：点击确定返回输入框的内容 取消：返回null confirm(提示内容); 带有确定和取消用户提示框 返回值：确定 ->true 取消->false open及close open(url,_self/blank,外观
2021-12-21 20:53:50
36
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人