![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
吴大大逛博客
身为菜鸟~我不骄傲qaq
展开
-
vue自定义指令directive实现接口请求转圈的加载效果
封装个自定义指令v-Loading实现接口请求前,调用元素在一直转圈的效果,当然ele-UI也有类似的组件,我们是为了实现下,避免有特殊的业务要求,不多说,上代码,先看效果。vue中配合jq实现的 jq比较少 项目中要是没jq的 可以直接把用到的一行换成原生的就行。还有个转圈动画的实现,去iconfont拿一个半圆的空心圆就行,具体怎么用自定义指令~就不说了吧,各位看官自行补充知识。该条为vue版本,后面封装个原生基于jq版本的。原创 2023-02-13 14:55:59 · 1016 阅读 · 0 评论 -
记录js的简便语法
可以无限链下去,不论有多少属性,只要有最后可以访问到属性,就会直接赋值最后的属性值。否则当任何一个链出现问题,立刻停止,而后赋值undefined。原创 2022-11-24 11:20:31 · 126 阅读 · 0 评论 -
vue命名式路由#render函数#es6箭头函数的柯里化
render中,如果不用h(createElement),就直接return后面写节点元素内容啥的就行,如果用了h,则return中要按照其格式严格执行。我这里再附上第二个参数的一些属性吧,第三个参数就是传递子节点元素:标签内部的html。createElement:h 主要是创建虚拟节点,render是将虚拟节点进一步处理挂载,,es6的箭头函数还能快速实现函数的柯里化,就不说了,自行研究。(h是vue里面默认的一种createElement简写方式),简单两句说下render的使用方法吧。...原创 2022-08-16 15:27:47 · 372 阅读 · 0 评论 -
记录ajax的jsonp类型请求
常规的ajax请求,可以直接外层return后,就为异步,但是ajax的jsonp类型请求,直接外层return不为异步,得不到请求promiss结果。原创 2022-08-11 15:06:43 · 460 阅读 · 0 评论 -
js滚动条触底加载更多#js懒加载数据#步骤条布局懒加载
不浪费大家时间,兄弟们先看效果图,如果是你们想要的就看,不是想要的效果就去下家....这次实现的是步骤条式的懒加载效果,滚动条到底实现触发接口;说加载前先说下步骤条样式的实现思路,具体代码有点杂,有需要的可以留言dd思路div不浮动竖排排列,或者用flex布局的纵向轴,第一层的每个div上下紧靠这里不可以用magin-top和button,然后设置个border-left或者border-right样式,这时一条不间断长线就会形成,然后设置圆圈;cssless或scss。...原创 2022-07-28 10:54:06 · 1904 阅读 · 0 评论 -
原生js下载excel表格实现#基于XMLHttpRequest#根据后端blob数据下载excel
不多bb,直接上代码注意事项:这里是get方式,参数要在路径后面传。如果是post直接放send中,具体的可以去查阅下资料。因为我jq的ajax调用excel的时候,设置response:arraybuffer报错。可能版本问题,所以只能想用原生的去实现。vue的axios实现下载报表的原理相同,主要就是response属性的设置,axios的例子也可以留言找我要。或者直接百度搜,很多,搜不到就加我vx:cw1922833403对铁铁们有帮助就行。...原创 2022-06-17 17:35:47 · 1264 阅读 · 0 评论 -
html实现dom元素的鼠标拖拽--js拖拽
ps:好久没写了—更新个小案例吧~ - ~实现一个dom元素的拖拽 主要是定位加三个dom事件:1.鼠标摁住:onmousedown2.鼠标松开:onmouseup3.鼠标移动:onmousemove先上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DIV拖拽</title></head>原创 2021-12-16 15:21:45 · 795 阅读 · 0 评论 -
npm本地发布自己的包--最细教学--我把坑全踩了应该--npm发布踩坑
npm包的发布与下载时隔多日,我又来了前端与后端都离不开线上包的开发,我们平时都是下载,那我们如何去上传它呢,写一个优秀的代码供别人去下载。跟着我,带你填坑~本地下载安装node这个无需多说去npm官网注册账号在此注册验证邮箱上面注册账号后,需要绑定个邮箱,然后邮箱要进行验证,就是发个邮件,点进去进行一下验证,这里千万不能跳过,后面publish发布的时候报错会不提示未验证,很坑!还有,这里进行绑定邮箱的时候,我当时填的是qq邮箱,并且试了两个号,一直都是验证失败!失败!失原创 2021-10-14 17:21:38 · 648 阅读 · 1 评论 -
瀑布流和图片的懒加载--配合节流函数--完整js代码
瀑布流在上一篇已经说了我实现的思路和方法,不懂原理的小伙伴可以去看看,当然这一篇代码是继着上一篇的瀑布流来实现的,也可以直接在这里看代码,代码中的注释都齐全。代码的实现是我手撸,但是思路是网上看各大佬的讲解来的,然后自己优化了点,加了节流和更直观的看到懒加载的情景。这里主要是为了附上完整的代码,方便各位看官能去直接ctrl+C懒加载概念:为了减少流量,提升网站性能,图片展示型网站会采用懒加载。一般第一屏的图片直接显示,从第二屏开始采用懒加载。(大概就是这个意思)实现思路① 通常的做法是在对标签.原创 2021-08-17 17:27:25 · 327 阅读 · 6 评论 -
完整瀑布流布局-手撸原生js实现瀑布流-附上完整js代码拿来即可用-列数自适应网页窗口大小-并走了节流
瀑布流什么是瀑布流:等宽不等高的样式在网页中按照一定的规则去排列实现原理:先根据窗口宽度和等宽div的大小计算出列数,然后先给第一行的div进行布局,第 一行布局完毕再去布局第二行,但是第二行的第一个元素放在哪呢?要放在第一行的最短的div下方!!css的布局走定位去实现,然后根据js的判断去设置每个div的top和left值。主要是网上的这些资料太杂了,看半天都是介绍,或者是展示个核心代码,我相信来搜这个的兄弟们肯定是想有个能直接运行的例子,所以就来个干货,代码中的onresize走了截流~原创 2021-08-17 11:37:21 · 205 阅读 · 0 评论 -
js中数组的扁平化处理的五大方法--多维数组展开成一维数组
前言看了挺多资料,觉得很多都是不全,或者是不够方便,来花点时间总结下数组的扁平化处理方法,主要是为铁子门方便和不用处理拿去就能用。let arr = [1,[2,3],4];//这里申明一个数组下面所有的方法都是这个数组1.数组自带方法–flatconsole.log(arr.flat(Infinity));//[1,2,3,4]//PS:Infinity为不管多少层都展开成一维---也可自己输入层数--如下console.log(arr.flat(2));//这就是展开两层2.正原创 2021-08-13 14:31:22 · 597 阅读 · 1 评论 -
两分钟详解Array.prototype.shift.call(arguments)!
一个函数中为啥可以写这样的代码??? function f() { let a = Array.prototype.shift.call(arguments); console.log(a) } f('11','22')//11能进来的哥们都知道这代码的作用是为了取实参的第一项!为啥就可以拿到呢,一步步来:1. arguments其是一个类数组形式数据,打印出来发现其原型上少了数组的很多方法。也就是说空有其表,只有数组的样子,截图看下这就原创 2021-08-12 16:30:19 · 3681 阅读 · 6 评论 -
js中的策略模式的概念和案例实现(表单校验的封装:单个数据和深层对象中全部属性的校验)
我靠,自己也有一年多开发经验了,竟然还不知道策略模式的概念–弟弟我属实太菜了。看了b站上讲解的视频–记录下js中策略模式的概念和案例实现并尝试实现个表单校验的函数封装策略模式的定义:定义一系列的算法,把他们封装起来,并且他们之间可以相互替换核心:将算法的使用和算法的实现分离开来样例一般是薪资等级的算法,这个网上很多,基本策略模式的讲解都是拿薪资等级的代码来说。截个图吧上方的代码片段不全,只是举个例子,网上特多=>薪资讲述策略模式看了下好像只是简单的概念,如果想深入了解策略模式,b站.原创 2021-08-12 14:29:00 · 124 阅读 · 1 评论 -
浅谈js中es5(闭包)--es6类分别实现单例的思想
先说单例—es5实现单例—(闭包)es5的单例—由于没有类的概念–我们走闭包实现单例的职责和实现思路,因为闭包可以记录变量。使用场景登录弹窗–或者一些全局的提示理由弹窗的触发是多次的,但是弹窗的代码只需初次点击后生成一次就可,后续触发弹窗事件。只需拿到上次生成的dom就行,无需再次生成,造成资源浪费。当然在我们一次未点击的时候,弹窗代码也无需生成上代码://生成登录框的单例 var getSingle = function (fn) { var re原创 2021-08-11 18:08:00 · 393 阅读 · 1 评论 -
js中的event-loop;事件循环机制--代码运行顺序。即setTimeout和Promise事件执行顺序
这篇博文来聊聊js中的时间循环机制,也就是代码的运行顺序。js的语言特点单线程 解释性语言!event-loop这就是重点,也就是js中的代码的执行顺序=>事件循环机制的运作原理,主要分为三大部分:调用栈微任务队列消息队列调用栈event-loop开始的时候,会从全局一行一行的执行,遇到函数调用,会压到调用栈中,被压入的函数称之为帧,当函数返回后会从调用栈中弹出。消息队列js中的一些异步操作,比如fetch,setTimeout,setInterval,在被压入到栈中的时候原创 2021-08-11 10:40:45 · 363 阅读 · 0 评论 -
js一个对象根据已有属性去另外一个对象中进行赋值。Object.entries结合Object.fromEntries使用
做项目时发现了一个繁琐的对象处理事项。先说场景:我在一个项目的编辑界面声明了一个对象,该对象字段较少(因为只需要编辑少数内容),现在我在前一个界面取数据的时候,将一表格某行全部的字段全拿到了,然后当成一个对象传给了编辑界面,现在是不是存在这种情况就是:编辑界面的字段对象objone中的字段为a,b,c,但是传过来的字段对象objtwo有a,b,c,d,e,f,g,写个代码块: const objone = { a:'', b:'', c:'', };原创 2021-07-20 10:28:08 · 1901 阅读 · 0 评论 -
element的树结构功能菜单--初始化勾选状态选中--element的setCheckedKeys事件
做一个项目的功能菜单权限,用到了element的树结构。如下图所示:eg: <el-tree :data="menuList" show-checkbox default-expand-all node-key="menuId" ref="tree" highlight-current @check="changetree" :props="defaultProps"></原创 2021-07-07 10:21:48 · 4633 阅读 · 0 评论 -
前端如何展示后台返回的一张blob图片(接口里面显示的是一张图片)
后端返回的图片不是url,而是显示的图片(blob数据),前端如何在img里面展示出来。如图所示为后端返回的图片。以axios为例,我们 传递的 responseType要是blob类型responseType: 'blob',然后走window.URL.createObjectURL将其返回的数据处理一下window.URL.createObjectURL(res),将处理好的数据放在img便签里面就成功了。上个完整的代码,(axios封装的)this.$http({ url原创 2021-04-28 14:57:43 · 12551 阅读 · 0 评论 -
js原型对象的属性寻找规则和实例对象的原型用法
为构造函数的原型上添加一条属性–in和hasOwnProperty的区别//创建一个构造函数function My(){ }//为其原型中添加一个name属性My.prototype.name = '武松';var my = new My();//用in去检查my对象是否有name的属性console.log('name' in my);//truein能检查对象中是否含有某个属性时---其对象没有时,但是原型有--也会返回true此时,如果只检查对象自身是否含有某个属性时,可原创 2021-04-19 18:00:56 · 321 阅读 · 0 评论 -
js构造函数与创建的实例对象--工厂化创造新对象
说到构造函数–我们先看看构造函数与普通函数的区别与定义一般情况下,首字母大写的函数名为构造函数(隐式定义)。反过来说首字母大写的函数一定是构造函数吗,错!!我们来看看函数中的this指向谁?谁用这个函数指向谁!函数自执行时this指向???window!!测试一下function Person(){ console.log(this);}//调用var per = new Person();//输出Person创建的per是个对象,Person函数被per所调用,this指向pe原创 2021-04-19 11:30:53 · 141 阅读 · 0 评论 -
前端js的函数对象与实例对象解读
区别实例对象:new函数产生的对象,称为实例对象,简称为对象。函数对象:将函数作为对象使用时,简称为函数对象。!!!什么是构造函数?一般下首字母大写的函数即为构造函数,但是!首字母大写的函数一定是构造函数吗?不一定,我们也可以去调用它。所以被我们new出实例的函数为构造函数。所以,构造函数首字母大写是其一个暗示作用,或者是一个隐式定义。function Func() {}const fc = new Func();//此时Func就必是构造函数--fc为实例对象(简称为对象)console.l原创 2021-04-08 17:08:19 · 638 阅读 · 1 评论 -
前端js中回调地狱的两种异步解决方案与promise。捕获错误解读trycatch与throw
异步编程的方式解决方案有4种:Callback(回调函数)generouterpromiseasync+await原创 2021-04-08 16:18:00 · 712 阅读 · 0 评论 -
js箭头函数对象返回值简写问题
es6的箭头函数现在用的是越来越多。当使用箭头函数有对象返回值时,可以简写const func = ()=>({name:''wudada});//表示return 一个对象{name:'wudada'}//为什么不是这样const func = ()=>{name:''wudada};//因为直接{},会被解析为一系列语句,不是纯对象!!//所以要用圆括号包裹起来()....原创 2021-04-07 14:50:44 · 832 阅读 · 0 评论 -
前端小白学习路径。及12大UI库
简介不管是刚接触前端的小白还是有些工作经验的前端人员来说,前端的技术栈真是个又大又杂的坑。一些技术可能长时间用不到自己都忘了。花点时间整理一下前端的资源和知识库。方便用到的时候直接拿链接。首先是一个学习路径,大概一个路子就是:基础学习HTML基础,css,js,js和UI库:jquery(js封装的一个库),echarts(图表可视化库),elementUI(饿 了么UI库,后台管理系统),bootstrap(着重响应式布局),layui(后台管理系 统),vant(移动端库),uview原创 2021-04-01 14:50:27 · 250 阅读 · 0 评论 -
解决react二级路由刷新后样式丢失问题
初学react,发现在写二级路由的时候有个问题,刷新后样式取不到了比如:路由<Route path='/home/index' component={Home} />可以发现这里是一个二级路由----也就是说url上面会追加home/index(这里和vue的稍微不一样哈)public里面我们这样引入css<link rel='./css/boot.css' />这里就有坑了 因为你引入的是本路径下的css–而react是会在你开的端口下去找public里面的文件。原创 2021-03-31 17:22:36 · 1101 阅读 · 2 评论 -
js函数参数占位
function func(a,b){ console.log(b+100);}//上方的函数是两个参数//当我们想调用时,发现两个参数很麻烦,但是又不能只传递一个,函数的参数接收是按照顺序接收的。这时我们可以用这样简写func(_,70);//_占位...原创 2021-03-29 16:39:10 · 5134 阅读 · 5 评论 -
js解析赋值的连续写法
一般的解析赋值:const obj = { name:'wu', keyword:'key'}const {keyword} = obj;//赋值了keyword为obj的keyword属性。现在有个这样的数据const obj = { name:'wu', keyword:{ value:'nihao' }}此时要解析赋值取value我们可以连续写const {keyword:{value}} = obj;...原创 2021-03-29 10:43:31 · 246 阅读 · 0 评论 -
js原生事件confirm
confirm(‘确定删除吗’);这里会触发浏览器的顶部弹窗提示,有两个选项:确定,取消。分别代表着这段代码的返回值true和false。进行判断的时候我们可以这样if(confirm('确定删除吗')){ xxxxx}如果是在react中要加个widnow,要不然识别不了if(window.confirm('确定删除吗')){ xxxxx}...原创 2021-03-24 16:25:01 · 2162 阅读 · 1 评论 -
js生成uuid(nanoid)。随机字符串生成
因为uuid的库比较大,一般在项目里面我们不直接用uuid的库,导致项目变大。现在有个能生成uuid的另外一个库,较小:nanoidnpm安装npm i nanoidoryarn add nanoid这样安装后,一般是react或者vue使用。想在页面中用,要先引入nanoid(nanoid内部采用了分别暴露的方式暴露出来的)。eg:import {nanoid} from 'nanoid';//调用方法即可nanoid();//每次生成的即为一串不相同的字符串祝各位看客老爷,万福金原创 2021-03-24 13:38:36 · 1623 阅读 · 0 评论 -
js的函数自执行两种方式
让函数自执行一般用如下代码:(function(a){})(x)//x为传递进去本函数的参数-另外还看到了一种函数自执行方式–没用过–记录下-function(){}()qaq~原创 2021-03-11 10:22:58 · 181 阅读 · 0 评论