web前端
文章平均质量分 56
未来前端程序员
傲骨不可无,傲心不可有。
展开
-
React中实现一键复制——五种办法
该方法是基于copy-to-clipboard的,如果在安装copy-to-clipboard的时候,发现和其他部分npm包有版本限制的话,那估计这个也不行,但是也不是不可以试试。但是这个方法可能在一些应用里边的端内浏览器会有限制,在正常浏览器里是可以使用的,但是比如说现在在飞书端内浏览器里边是没有clipboard这个对象的。中,一个根元素裹着两个兄弟节点比如div和一个button的话,复制也不会生效,我也不知道为啥,有兴趣的小伙伴可以去看看源码。这个方法我没有使用过,有什么坑我也不清楚。...原创 2022-09-01 17:35:36 · 5611 阅读 · 1 评论 -
将rgb(0,0,0)转为十六进制
浅浅记录一下。将rgb里的内容转为十六进制const rgbToHex = (r,g,b)=>{ const toHex = (num)=>{ const hex = num.toString(16); return hex.length === 1 ? `0${hex}`:hex; } return `#${toHex(r)}${toHex(g)}${toHex(b)}`;}console.log(rgbToHex(46,56,67原创 2022-04-07 17:42:30 · 671 阅读 · 0 评论 -
Modal的二次确认弹框触发时机
Modal的二次确认弹框触发时机react中modal中的值变化了之后点击取消弹出二次确认弹窗,要是值没有变化可以直接关闭modal。在项目里边有个需求,就是需要我们的modal弹窗(modal里边是表单)在点击关闭或者蒙层的时候,会根据表单里边的值是否修改而弹出二次确认弹窗就是这样的需求来看代码实现 const onCancel = () => { const formValues = form.getFieldsValue(); //这块就是拿到表单里边的内容值 con原创 2022-04-02 14:48:11 · 2367 阅读 · 0 评论 -
实现ajax、网络你必须要知道的点
实现ajax以2开头都是正常的以3开头的都是重定向–地址变化了以5开头就是服务器端的问题以4开头,就是前端的问题 404–没有找到资源,原因可能是地址写错了400—代表的是传递的数据的类型不是后端接收的ajax: async javascript and json主要用来实现前后端的数据交流A 要发送一个信息给B请求当中需要有的基本信息:1、B的地址2、请求方式 get post3、请求数据4、状态码(B是否正常接受数据)5、响应数据function ajax(u原创 2021-08-03 21:17:28 · 166 阅读 · 0 评论 -
localStorage、sessionStorage、cookie的区别
localStorage、sessionStorage、cookie的区别WebStorage本地存储localStoragesessionStoragelocalStorage:本地存储生命周期是永久,除非自己手动清除,否则这些信息将永久存在存储在客户端,数据大小为5MBsessionStorage:仅在当前会话下有效,关闭页面或浏览器后被清除。存放的数据大小为5MB,仅在浏览器中保存WebStorage的目标:提供一种在cookie之外存储会话数据的路径提供一原创 2021-08-03 20:31:49 · 195 阅读 · 0 评论 -
Vue路由传参的三种基本方式
Vue路由传参的三种基本方式参考与这篇文章https://www.jianshu.com/p/d276dcde6656vue-router传递参数分为两大类:编程式导航 router.push声明式导航< router-link >编程式导航项目中很多情况下都需要进行路由之间的传值,想过很多种方式,sessionStorage、localStorage、cookie进行离线缓存存储也可以,用vuex也可以,还是要看场景来应用。下面就讨论一下vue自带的路由传参的三种基本方式现原创 2021-08-03 09:04:15 · 177 阅读 · 0 评论 -
跨域问题及解决办法
跨域问题及解决办法三要素:协议、域名、端口三要素有一个不同就是跨域默认端口不显示跨域解决办法Webpack proxy——>有个问题,但是打包之后,就没有这个proxy了JSONP 本质上是get请求 不安全——》前端的处理方式,也需要后端的支持Nginx——》反向代理——》其实就是中间件webpack plugin ——》中间件CORS(后端)后端需要写一个函数才能支持JSONP,并且只支持getWebpack proxy ——只能在本地调试使用原创 2021-08-01 23:37:03 · 267 阅读 · 0 评论 -
跨域问题的解决方案和实现原理
跨域问题的解决方案和实现原理浏览器本身的特点:http:80https:443ftp:21跨域问题的产生及其价值意义JSONP跨域解决方案的底层原理客户端script请求资源文件是get请求,不存在域的限制后台将请求的路径放在script中的src中,路径中的?号后面是一个回调函数 比如http://api.qq.com/list?callback=func 客户端写一个函数叫做func(data) , 服务器接收到了请求后,准备要发送的数据,放在data中,然后拼接成这原创 2021-08-01 23:30:00 · 141 阅读 · 0 评论 -
数组扁平化的几种方法
数组扁平化的几种方法什么叫数组扁平化?就是将多维数组变为一维数组reducetoString & splitjoin & split递归扩展运算符reduce要是不清楚reduce的用法,那就看文章最后吧,有简单的对reduce的使用做了介绍。要是还不清楚,那就百度吧哈哈哈哈var arr = [1,2,3,[3,4,5,[3,4,5,6,[3]]]];var newArr = function(arr){ return arr.reduce((prev,cu原创 2021-08-01 23:22:11 · 120 阅读 · 0 评论 -
分享一下最近被打击到的一场面试
昨天去面试了,原本以为准备好的自己,才发现很多知识点被自己疏忽了,比如昨天面试官问我,**如何判断一个对象是否为空,**我当时就想,只要判断一下长度是否为空就行了,但是写了这么久的代码,都忘记了对象是没有长度的,不能通过.length来获取对象的长度。真是致命错误。后来仔细想想,发现是可以通过以下两种方法判断的。如何判断一个对象是否为空,方法一可以使用JSON.stringify()方法,将对象转换为json字符串,在判断该字符串是否为"{}"var obj1={ name:'b',原创 2021-07-21 10:21:05 · 104 阅读 · 0 评论 -
手写instanceOf
function myInstanceOf(leftvalue,rightvalue){ let rightProto = rightvalue.prototype; leftvalue = leftvalue.__proto__ while(true){ if(leftvalue === null){ return false } if(leftvalue === rightProto){原创 2021-07-20 11:24:28 · 187 阅读 · 0 评论 -
数组去重的几大方法
数组去重的几大方法1、reducevar arr = [1,2,3,3,4,4,5,5,6];var newArr = arr.reduce((prev,cur)=>{ if(!prev.includes(cur)){ return prev.concat(cur); }else{ return prev; }},[]);console.log(newArr);2、setvar arr = [1,2,3,3,4,4,5,5,6,'原创 2021-07-20 10:01:31 · 165 阅读 · 0 评论 -
实现repeat函数
实现repeat函数 function myRepeat(fn, times, wait) { return function (content) { let count = 0; var timer = setInterval(() => { count += 1; fn(content) if (count === times) { clearInterval(timer) } }, wait) } } const re原创 2021-07-20 09:16:06 · 728 阅读 · 0 评论 -
防抖和节流
防抖所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间简单来解释就是,,假如此时有一辆大巴车,规定只要在n秒后没人上车司机就发车,但要是在n秒之内,有人上了车,就会重新计算时间。<div id="show">0</div><button id="btn">click me</button>var in原创 2021-07-20 08:59:13 · 168 阅读 · 0 评论 -
手写Vue数据响应式原理
手写Vue数据响应式原理// 判断是否是对象function isObserve(obj){ // 因为null 也是object typeof null ====》'object' return obj !== null && !Array.isArray(obj) && typeof obj === 'object' // 返回布尔值 如果是对象返回true}function observe(obj){ if(!isObs原创 2021-07-19 22:12:08 · 100 阅读 · 0 评论 -
手写Map
手写Map先来了解一下怎没使用map吧var arr = [1,2,3]var array = arr.map((item,index)=>{ return item*2}console.log(array) // [2,4,6]开始自己手写实现Mapfunction myMap(arr,mapCallback){ //判断传进来的arr是不是数组并且mapCallback是否是一个函数 // 如果不是直接返回空数组 if(!Array.isArray(arr)|| !arr.原创 2021-07-19 20:37:15 · 515 阅读 · 0 评论 -
手撕bind源码
手撕bind源码要想手撕bind源码,首先要先了解bind的用法function show(a,b,c){ console.log(this.x,a,b,c) // 这里输出20,2,3, 4}var x = 10;var obj = { x:20}var newShow = show.bind(obj,2,3,4)newShow()function A(){}var o = {}var x = 1;var y = 2;var z = 3;var B = A.bind(o原创 2021-07-19 20:07:41 · 91 阅读 · 0 评论 -
ES6中的模块化
过去,JS很难编写大型应用,因为有以下两个问题:全局变量污染难以管理的依赖关系这些问题,都导致了JS无法进行精细的模块划分,因为精细的模块划分会导致更多的全局污染以及更加复杂的依赖关系于是,先后出现了两大模块化标准,用于解决以上两个问题:CommonJSES6 Module注意:上面提到的两个均是模块化标准,具体的实现需要依托于JS的宿主环境CommonJSnode目前,只有node环境才支持 CommonJS 模块化标准,所以,要使用 CommonJS,必须要先安装node原创 2021-07-19 16:04:02 · 107 阅读 · 0 评论 -
深度剖析事件循环机制
线程和异步进程当一个应用程序运行时,需要使用内存和CPU资源,这些资源需要向操作系统申请,操作系统以进程的方式来分配这些资源,一个进程就代表着一块其他进程的内存空间一个应用程序要运行,必须至少有一个进程启动进程的最大的特点就是独立,一个进程不能随意访问其他进程的资源。这就保证了多个程序在操作系统上运行互不干扰。线程任何一个进程在启动的时候,操作系统都会给其分配一个线程,应用程序的入口函数在主线程中运行。在应用程序的运行过程中,可能有多个任务需要同时执行,于是可以向操作系统申请分配更多的线程来执原创 2021-07-19 16:02:16 · 94 阅读 · 0 评论 -
前端面试题总结
1、预编译习题function fn(a,c){ console.log(a); // function a(){} var a = 123 console.log(a) // 123 console.log(c) // function c(){} function a(){} if(false){ var d = 678 } console.log(d) // undefined console.log(b) // undefined var b = function(){}原创 2021-07-19 16:01:00 · 315 阅读 · 0 评论 -
ES6整套异步解决方案
异步处理的演化JS实现异步的代码模型主要依托于回调dom.addEventListener("click", function(e){ // 回调函数作为第二个参数传递,函数可接收一个参数}, {})dom.onclick = function(e){ // 回调函数作为属性传递,函数可接收一个参数}fs.readFile("./txt", function(err, buffer){ // 回调函数作为最后一个参数传递,函数可接收两个参数})这种设计实际上是有缺陷的原创 2021-07-19 15:58:16 · 119 阅读 · 0 评论 -
Promise练习题
Promise练习题const promise = new Promise((resolve,reject)=>{ console.log(1) resolve() console.log(2)})promise.then(()=>{ console.log(3)})console.log(4)依次输出1243,不做过多解释,因为比较简单const promise = new Promise((resolve,reject)=>{原创 2021-07-19 15:55:09 · 476 阅读 · 0 评论 -
详解js对称加密和非对称加密
详解js对称加密和非对称加密https保证数据在传输过程中不被窃取和篡改,从而保证传输安全1、加密对称加密:产生一个密钥,可以用其加密,可以用其加密,也可以用其加解密。这个密钥可以是任何东西,比如说一个字符串,这个字符串通过一种数学算法,可以把我们的信息根据密钥产生加密过后的信息,又可以通过一种密钥解密成原始信息。一开始客户端请求服务器的时候,服务器产生一个密钥,并且返回一个密钥给客户端告诉客户端使用这个密钥进行通信,客户端再发生数据的时候就会通过服务器给的密钥进行加密传送给服务器原创 2021-05-31 11:57:36 · 2165 阅读 · 0 评论 -
js引入的defer和async区别
js引入的defer和async区别defer解析HTML遇到带有defer属性的script标签,继续解析HTML,同时下载script引入的文件浏览器解析完HTML后,再执行下载的脚本文件async解析html遇到带有async属性的script标签,继续解析HTML文件,同时下载script引入的文件js文件下载完毕,停止解析HTML,开始执行js文件js执行完毕后,浏览器接着解析HTML...原创 2021-05-31 11:52:40 · 112 阅读 · 0 评论 -
一道关于EventLoop事件循环事件队列的JS题
一道关于EventLoop事件循环事件队列的JS题上代码async function async1(){ console.log("async1 start"); await async2(); console.log('async1 end'); } async function async2(){ console.log('async2') }; console.log('script start'); setTimeout(function(){原创 2021-05-31 11:48:53 · 179 阅读 · 0 评论 -
浅谈对象(数组)的深克隆和浅克隆
浅谈对象(数组)的深克隆和浅克隆浅克隆object.assign()Array.prototype.concat()Array.prototype.slice()深克隆JSON.stringify 和 JSON.parseObject.assign()通过JQuery中的extend方法实现深拷贝lodash.cloneDeep()实现深拷贝递归注意:当对象只有一层结构的时候,使用Object.assign()是深拷贝,但是对象里面要是有子对象,就是浅拷贝浅克隆浅原创 2021-05-31 11:06:58 · 247 阅读 · 0 评论 -
经典布局方案(圣杯布局+双飞翼布局)左右固定,中间自适应
经典布局方案(圣杯布局+双飞翼布局)左右固定,中间自适应圣杯布局双飞翼布局flex布局其实就是左右固定,中间自适应圣杯布局:浮动和负margin就像一个对称的杯子,由中间和两边的把儿布局<style> html,body{ height: 100%; overflow: hidden; } .container{ height: 100%;原创 2021-05-30 14:35:46 · 246 阅读 · 0 评论 -
盒子水平居中(详解)
掌握盒子水平垂直居中的五点方案定位(有三种方式)display:flexJavaScriptdisplay:table-cell定位第一种<style> html,body{ height: 100%; overflow: hidden; } .box{ width: 100px; height: 50px; b原创 2021-05-30 14:08:34 · 355 阅读 · 0 评论 -
Vue数据响应式原理
响应式数据的最终目标,是当对象本身或对象属性发生变化时,将会运行一些函数,最常见的就是render函数。在具体实现上,vue用到了几个核心部件:ObserverDepWatcherSchedulerObserverObserver要实现的目标非常简单,就是把一个普通的对象转换为响应式的对象为了实现这一点,Observer把对象的每个属性通过Object.defineProperty转换为带有getter和setter的属性,这样一来,当访问或设置属性时,vue就有机会做一些别的事情。原创 2021-05-29 15:43:01 · 1710 阅读 · 3 评论 -
Vue中的虚拟DOM解析
1.什么是虚拟dom?虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构在vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树为什么需要虚拟dom?在vue中,渲染视图会调用render函数,这种渲染不仅发生在组件创建时,同时发生在视图依赖的数据更新时。如果在渲染时,直接使用真实DOM,由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗,从而就会极大的降低渲染效率。因此,vue在渲染时,使用虚原创 2021-05-29 15:37:25 · 451 阅读 · 1 评论 -
在cmd中创建vue项目——小白
这里用我自己的项目来演示在cmd中创建vue项目——小白选择合适的路径,在下图中的路径那一栏输入cmd敲回车 就会出来接着直接输入vue create 你的项目名 ,这里我忘记截图了 我输入的就是vue create mall-app选择Manually select features 上下键选择 然后回车接着会选择一些组件 这里我需要用到的组件我已经选择好了,注意这里用上下键移动然后空格选择,选择完了在回车进行下一步项目创建好后就分别输入cd mall-admin-app原创 2021-03-08 13:28:51 · 2047 阅读 · 2 评论 -
Inline JavaScript is not enabled. Is it set in your options?+解决方法
Inline JavaScript is not enabled. Is it set in your options?在遇到运行Vue项目的时候,报错信息为Inline JavaScript is not enabled. Is it set in your options?解决办法为:在文件根目录创建vue.config.js文件如下图在里面写如下代码module.exports = { css:{ loaderOptions:{ le原创 2021-03-08 12:58:21 · 8244 阅读 · 0 评论 -
js中数据类型的转换(Number、String、Boolean)
数据类型的转换其他数据类型转Numberundefined转Number为NaNnull转Number为0布尔值------ true为1,false为0字符串空字符串,空格字符串转为0非空字符串,并且内容为纯数字(包含进制与科学表示法)转成对应的数字其余都是NaN数字 ----- 原来的数字对象对象、函数转为NaN空数组转为0,数组里只有一个数据并且这个数据能转成数字,则转成对应的数字,其它都转成NaNconsole.log(原创 2021-02-04 23:35:03 · 349 阅读 · 0 评论 -
js中性能优化的几大方法(页面级优化和代码级优化)
js中性能优化页面级优化页面级优化的方法有以下几种:CSS Sprites—使用雪碧图具体的使用方法可以自行百度教你来使用雪碧图使用CDN下图用bootstrap来举例使用bootstrap的时候,下载bootstrap文件比使用CDN性能差得多压缩合并代码–使用webpack等打包工具压缩代码使用DNS预解析代码级别的优化代码级别的优化有以下几种:减少DOM操作避免直接对DOM进行操作,例如如下操作var lis=document.queryS原创 2021-02-04 17:06:52 · 1644 阅读 · 1 评论 -
js中相等比较的原理、逻辑运算符&&与||、逗号运算符(详解)
js中相等比较的原理、逻辑运算符&&与||、逗号运算符(详解)看下面的代码 console.log( 12 == '12', //true 12 == 12 0 == '', //true 0==0 1 == true, //true 1==1 2 == false, //false 2==0 'true'==true, //false NaN==1原创 2021-02-02 22:56:52 · 424 阅读 · 0 评论 -
事件循环机制详解
事件循环机制单线程与多线程单线程多线程任务队列与事件循环机制单线程与多线程线程分为单线程和多线程单线程只能同时进行一个任务,后面的任务想要进行就必需等前面的任务完成了可以保证代码执行顺序,但是容易导致阻塞多线程同时可以执行多个任务,谁也不挡谁可以解决阻塞问题,但是会改变代码执行顺序。改变顺序后可能让程序变得稍微难理解了一些== js是单线程 ==任务队列与事件循环机制...原创 2021-02-01 20:00:34 · 2230 阅读 · 0 评论 -
大厂面试之闭包问题详解
大厂面试之闭包问题详解1、闭包的表面现象2、闭包的底层原理3、闭包的形式4、经典题什么是闭包?闭包的表面现象产生闭包的条件:1、有父子函数的关系2、子函数使用了父函数的变量3、子函数有调用如下代码,子函数可以使用父函数身上的变量 function father() { var n = 10; function son() { n++; console.log(n) } son()原创 2021-02-01 01:05:29 · 166 阅读 · 0 评论 -
Vue报错——“Trailing spaces not allowed no-trailing-spaces”
Vue报错——“Trailing spaces not allowed no-trailing-spaces”“Trailing spaces not allowed no-trailing-spaces”这句话翻译过来的意思是"不允许尾随空格,不允许尾随空格"我的报错信息哈哈哈哈想不到吧!我把图片中的空格删了后就好了。...原创 2020-12-16 21:50:18 · 8952 阅读 · 2 评论 -
下载vue-cli报错+解决办法
下载vue-cli报错+解决办法我之前用的npm install -g @vue/cli下载了最新的vue-cli,但是在做项目的时候,准备用2点几的版本,就打算把最新的删除掉,就用npm uninstall @vue/cli -g 准备卸载掉,重新安装,但是重新安装后报错,并且在查看vue-V的时候也有问题查看版本号的出错安装npm install -g @vue/cli 也报错,错误如下,仔细读错误后,我发现下图红色部位,然后我就进入文件手动删除vue,就是我下下图红色部位,但是还是不行,然原创 2020-12-14 14:56:12 · 1927 阅读 · 0 评论 -
原型链、隐式原型
原型链、隐式原型之间的关系你搞懂了吗?听说面试要被考到?原型和原型链你们知道所有的对象都是通过new函数创建的;var obj = new Object(); var obj = {}这里的var obj={},大括号是语法糖 相当于new Object={};就比如:function test(){ return {}}new test();--------这里是有产生对象的,并且这里的构造函数是Object对象,因为return返回的是一个{} 相当于return new原创 2020-11-22 23:47:15 · 295 阅读 · 0 评论