- 博客(41)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 前端小白学习路径。及12大UI库
简介不管是刚接触前端的小白还是有些工作经验的前端人员来说，前端的技术栈真是个又大又杂的坑。一些技术可能长时间用不到自己都忘了。花点时间整理一下前端的资源和知识库。方便用到的时候直接拿链接。首先是一个学习路径，大概一个路子就是：基础学习HTML基础，css，js，js和UI库：jquery（js封装的一个库），echarts（图表可视化库），elementUI（饿 了么UI库，后台管理系统），bootstrap（着重响应式布局），layui（后台管理系 统），vant（移动端库），uview
2021-04-01 14:50:27
250
原创 vue自定义指令directive实现接口请求转圈的加载效果
封装个自定义指令v-Loading实现接口请求前，调用元素在一直转圈的效果，当然ele-UI也有类似的组件，我们是为了实现下，避免有特殊的业务要求，不多说，上代码，先看效果。vue中配合jq实现的 jq比较少 项目中要是没jq的 可以直接把用到的一行换成原生的就行。还有个转圈动画的实现，去iconfont拿一个半圆的空心圆就行，具体怎么用自定义指令~就不说了吧，各位看官自行补充知识。该条为vue版本，后面封装个原生基于jq版本的。
2023-02-13 14:55:59
1016
原创 记录js的简便语法
可以无限链下去，不论有多少属性，只要有最后可以访问到属性，就会直接赋值最后的属性值。否则当任何一个链出现问题，立刻停止，而后赋值undefined。
2022-11-24 11:20:31
126
原创 vue自适应带圆圈的进度条实现#根据数量占比计算进度条长度#颜色可控
可以全局挂载–然后调用，这里的dom用了uuid当作id去渲染样式，不用担心互相影响，里面可配置。一些组件库例如ele的进度条实现只是简单的实现进度条样式，进度条的长度是百分比形式，未做到。去动态计算，这是我在这里要去实现的。
2022-11-15 09:53:17
1242
原创 css大背景图相对于浏览器固定，不随着放大缩小改变，不随着浏览器滚动而滚动
css大背景图相对于浏览器固定，不随着放大缩小改变，不随着浏览器滚动而滚动。
2022-09-15 14:12:33
1254
原创 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
原创 记录ajax的jsonp类型请求
常规的ajax请求，可以直接外层return后，就为异步，但是ajax的jsonp类型请求，直接外层return不为异步，得不到请求promiss结果。
2022-08-11 15:06:43
460
原创 js滚动条触底加载更多#js懒加载数据#步骤条布局懒加载
不浪费大家时间，兄弟们先看效果图，如果是你们想要的就看，不是想要的效果就去下家....这次实现的是步骤条式的懒加载效果，滚动条到底实现触发接口；说加载前先说下步骤条样式的实现思路，具体代码有点杂，有需要的可以留言dd思路div不浮动竖排排列，或者用flex布局的纵向轴，第一层的每个div上下紧靠这里不可以用magin-top和button，然后设置个border-left或者border-right样式，这时一条不间断长线就会形成，然后设置圆圈;cssless或scss。...
2022-07-28 10:54:06
1904
原创 element中less，scss，sass穿透设置表格table头的背景色(样式)
直接上代码上面的是在less中，需要/deep/，scss中 要用::v-deep？记住不可以使用>>>会报错！！要是不想在css中设置，或者设置不成功的，也可以在标签中去设置,这样肯定是不会影响其他的为啥想记录写这样式呢，因为element这种第三方样式库的样式，我f12去点击元素，获取class的时候，获取到了但是设置不了样式，出现的场景是设置后，刷新一瞬间设置成功了，然后立刻消失了，没定位到原因，而且这样式几年前不是这要设置的，我拿几年前的样式写法竟然也不生效？？？这不恶心人吗...
2022-07-06 10:01:55
775
原创 原生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
原创 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
原创 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
原创 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
原创 css中BFC的解释与解决方案
什么是BFC？BFC是一个概念，可能有开发经验的人遇到过场景，但是没怎么理解。概念：是个块级格式化上下文，他是指一个独立的块级渲染区域，只有块级盒子（Block-level BOX）的参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。现象一个div盒子不设置height，当内容子元素都浮动时，div盒子无法被撑起。也就是说height一直为0；这个盒子没有形成BFC；如何创建BFC？float的值不是none；position的值不是static或者relativedi
2021-08-13 11:55:31
170
原创 两分钟详解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
原创 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
原创 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
原创 前端如何展示后台返回的一张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
原创 封装flex布局---及flex简易解析--最简单入门上手flex布局
flex简介布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局为“弹性布局”。任何一个容器都可以设置为flex布局，设置了flex属性的容器，其子成员元素都自动成为flex成员。容器默认存在两根
2021-04-21 13:46:01
614
原创 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
原创 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
原创 vue三级路由解读--及模块化路由导出
简介近期做项目需要用到vue三级路由的概念，踩了不少坑。看了不少网上的教程和博客还是有坑。记录一下。（PS：各位既然能看到三级路由–普通路由的基本知识就不带大家回顾了 ）。先上代码：（代码的路由片段为我项目的路由，看思路，这是一个路由js文件，{}内的代表的是路由数组中的一个值，我这是模块化把路由分离出去了，不是完整的index.js的路由哈，知道思路就行了）。所有的icon为阿里图标库三级路由代码import Narbar from '@/components/HeaderNar/index.v
2021-04-09 15:30:20
771
原创 前端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
原创 js箭头函数对象返回值简写问题
es6的箭头函数现在用的是越来越多。当使用箭头函数有对象返回值时，可以简写const func = ()=>({name:''wudada});//表示return 一个对象{name:'wudada'}//为什么不是这样const func = ()=>{name:''wudada};//因为直接{}，会被解析为一系列语句，不是纯对象！！//所以要用圆括号包裹起来()....
2021-04-07 14:50:44
832
原创 解决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
原创 react的组件传值（消息订阅与发布pubsub）
import pubsub from 'pubsub-js';//下载后引入消息的订阅pubsub.subscribe('func',(msg,res)=>{ //func为pubsub发布的事件--后面是回调函数--res为func传递的消息名，res为数据--一般只用第二个});消息的发布pubsub.unsubscribe('func',data);//func为该发布事件的函数名，data为数据...
2021-03-30 10:57:48
279
原创 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
原创 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
原创 js的函数自执行两种方式
让函数自执行一般用如下代码：(function(a){})(x)//x为传递进去本函数的参数-另外还看到了一种函数自执行方式–没用过–记录下-function(){}()qaq~
2021-03-11 10:22:58
181
原创 vue--阶梯区间数据的监听--头尾数据实时同步
很早之前码的一个代码–记录一下。做阶梯区间的一个功能，发现做好容易，要增加客户的体验感有点不容易，前后上下input数据不能不一致。不能断层填写。截图说明：如上图所示，比如两个2的input。我填写了上面的，那么下方的input就要同步改变，数据不同步改变就会导致区间不能连贯的闭合起来。这里用了input的实时触发事件，然后改变上（下）一层的数据（看思路就好，具体的数据不要深究）：//触发input事件---修改上一级的upStairs值changeinputdown(event,index){
2021-03-09 16:18:42
404
1
原创 element-输入框实时搜索展示列表-js-filter事件传参
现有产品有实时搜索展示数据，采用了element的el-autocomplete，最后效果如图上标签代码：<el-autocomplete size="mini" class="inline-input" v-model="keyword" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" ></el-autocomp
2021-03-09 15:43:00
584
3
原创 element表格table进行单选操作
标签代码–其中有个函数 @selection-change="selectstation"还有个ref=''<el-table class="th-bg" max-height="380" :data="allstation" ref="listTable" @selection-change="selectstation"> <el-table-column type="selection" width="55"></el-table-
2021-03-04 17:34:10
2724
4
TA创建的收藏夹 TA关注的收藏夹
TA关注的人