- 博客(18)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 前端导入导出excel
导入 const inputFileChange = () => { document.getElementById(`fileInput`).addEventListener('change', inputFileChangeDeal); }; const inputFileChangeDeal = (e) => { const files = e.target.files; if (files.length == 0) return; var
2021-03-30 22:54:26
220
原创 UI小姐姐又想骗奶茶喝怎么办？
今天又是一个卑微落魄的小前端。一大早UI小姐姐又给我搞事情。这是我拿到的设计稿一部分。 UI小姐姐说这个横杆竖杆你自己写！ 我内心想，一到周一女生就容易暴躁吗？？算了算了，保持微笑，头发重要。心态平和是一个优秀开发的标准之一啊。 这点小效果就想为难我？话不多说，直接怼代码。下面的效果用到了定位和伪元素知识点。请自行补漏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&
2020-06-15 11:37:17
387
原创 UI小姐姐不给你小三角图标怎么办？？
最近得罪了UI小姐姐，因为没有给她买奶茶喝，所以下午不愿意给我制作小三角图标。作为一个小前端，本着能屈能伸的优秀品质，决定还是靠自己双手自力更生，而且能省下一顿饭钱和奶茶钱，甚至是开房钱哈哈，真是一举三得啊！ 话不多说，下面我们来看看图中的小三角要如何用css样式实现。 各种三角形实现代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta
2020-06-12 22:46:59
341
原创 关于border-box和content-box的区别
默认是内容盒子即content-box，width和height即设置内容宽高，内外边距和border都是另外加 border-box即width和height设置到包括border的所有内容宽高，外边距另外加
2020-06-09 23:41:04
349
原创 如何利用JS防抖实现搜索框优化
什么是JS的防抖？ 防抖指的是触发事件后在n秒内函数只执行一次，若在n秒内再次触发事件则重新计算，函数不会重复执行。 在实际项目中我们可能会碰到搜索框会浪费大量的请求。比如我们有一个input，每次用户在搜索框输入的时候就触发onInput事件然后发送请求。 以下代码是未优化前 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="vi
2020-06-08 23:33:16
2688
原创 前端面试官让你实现淘宝评分的效果
我们要实现的效果： <ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> 分析如下： 1.鼠标移入，鼠标当前的li和左边的li是实心的，右边是空心的 2.鼠标移出，
2020-06-07 18:29:12
456
原创 JS基础面试题02--预解析与作用域
面试本没有坑，要饭的人多了，也就有了坑。 第一题 function a(b){ console.log(b); var b =1; } a(100) 执行结果为100。 函数内部的var定义的变量会预解析提升到当前作用域的最顶端。所以预解析后如下： function a(b){ var b; console.log(b); b =1; } a(100) 提升后b默认的值是undefined，但由于函数有接收一个形参b=100,所以打印时b的值已经是100了。 第二题 functi.
2020-06-06 17:51:33
535
原创 如何理解JS中的call、bind和apply
JS中的每个函数都包含两个非继承而来的方法：apply和call。这两个方法的用途都是在特定的作用域中调用函数。 首先apply方法接收两个参数：一个是在其中运行函数的作用域this，另一个是参数数组。第二个参数可以是实例数组，也可以是arguments对象。 call和apply的作用相同，区别只在于接收参数的方式不同。call的第一个参数跟apply一样，第二个参数开始不同。它不是一个数组，而是一个个单独参数，要逐个列举出来。 bind的参数跟call一样，但是他返回的是一个全新的函数。需要再次调用。而
2020-06-05 22:01:31
176
原创 JS基础面试题01--预解析与作用域
下面是面试题 var a = 123; function f1(){ console.log(a); } function f2(){ var a = 456; f1(); } f2(); console.log(a) 输出结果为123,123。 首先我们先看f2函数，里面定义了一个局部变量a还调用了f1。而f1执行后打印a。那这个a是全局的a还是局部的a呢？这就由函数的调用者决定了。而f1是一个全局函数，调用者是window，所以a自然是全局的a。结果为123。 再看console.log(a)，也就是
2020-06-04 23:31:29
305
原创 前端面试之ES6基础--let和const
ES6是什么？全称ECMAScript6，是新版本JS的语法规范。 ES5定义变量是用到var。ES6新增了两个声明标识的关键字let和const。 let和const的特点： 1.不存在变量提升 2.有严格的作用域–块级作用域 3.同一个作用域下不能重复定义同一个名称 下面我们结合代码来演示这三者的区别 //变量提升 console.log(a) ; console.log(b) ; console.log(c) var a = 'a'; let b = 'b'; const c = 'c'; 输出
2020-06-03 23:27:01
255
原创 react-redux的使用及注意事项
使用react开发企业级应用在对数据进行共享时，原生的redux仓库管理方法比较繁琐。而react-redux是基于原生redux封装的一个插件库，使用起来比较简单，而且不用每次都订阅和取消订阅。下面就让我们来看看react-redux是如何使用的吧！ 1.在一个react项目中安装 react-redux yarn add react-redux redux 2.新建一个 stroe 文件夹，创建管理员文件夹。 // 1. 定义管理员 src\store\reducer\index.js const
2020-06-02 23:27:05
279
原创 10分钟快速上手redux，是真的10分钟
最近自己琢磨了一星期，才了解了redux的使用方法。一星期你是在开玩笑吗？？？ 我们学一样东西，必须知道他有什么用，再了解要怎么运用。那redux是用来干什么的呢？ 简而言之，redux是用来传递数据的，实现组件间数据共享。类似于vue里面的vuex。 具体使用方法如下： 下载redux依赖包 yarn add redux 值得一提的是，redux虽然使用繁琐但可以用于任意项目，vuex只能用于vue项目。 引入redux并解构出创建仓库的方法 import {createStore} from
2020-06-01 22:54:54
285
原创 React报错了怎么办
最近在学习react，遇到一个报错。代码如下 class H1 extends Component { state = { num: 0, }; timer = 0; // 定时器在挂载时设置了，在卸载时应该销毁 // 如果实在render时设置了，在卸载时无法销毁 componentDidMount() { let { num } = this.state; this.timer = setInterval(() => { num++;
2020-05-29 21:16:02
247
原创 Vue的全局路由守卫与拦截器配置
Vue的全局路由守卫可以在每次发送axios请求时，判断用户是否有授权认证，如果没有则将引导用户前往登录或注册页面 import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import Vant, { Toast } from "vant"; import "vant/lib/index....
2020-04-18 21:49:33
1571
原创 vue实现回车键登录注册
话不多说，上个小优化 created() { document.onkeyup = (e) => { var key = window.event.keyCode; if (key == 13) { this.dealClick(); } }; }, 整个页面监听键盘弹起，注意里面要写箭头函数将this指向上一级v...
2020-04-18 21:35:55
337
原创 那些webpack你不得不知的坑
对于刚开始接触node的人来说，最烦的莫过于输入的命令行无法被终端识别执行，一般来说都是path配置有问题。如果我们直接在终端环境输入webpack命令行出现无法识别的情况的话，我们可以通过设置npm快捷方式来运行。**直接输入webpack命令行，node会去找系统配置下的webpack。而配置npm的快捷方式，则会在当前项目下找webpack这个包。**而对于一个项目来说，我们下载的包都是开发...
2020-04-13 23:52:02
464
原创 深拷贝方法大全，前端面试必备
js里面的深拷贝是针对引用数据类型才有的，对于基本数据类型则没有这种深拷贝与浅拷贝之分。因为基本数据类型是名和值都存储在栈内存里，而引用数据类型是名存储在栈内存，他的值则指向堆内存空间。 let arr1 = [1,2,3,4] let arr2 = arr1 这里会将arr2和arr1共用一个堆内存指向，所以不管之后对两个数组 如何操作都是作用在同一个堆。这种也是我们所说的浅拷贝 那么如何对一...
2020-04-12 22:40:41
355
原创 html快速入门之一
什么是html? html又叫做超文本标记语言，注意一下，它不是编程语言。那html有什么用？我们日常浏览网站的时候，会打开一个个网页，页面上各种文字、图片、声音、视频、链接等都是用html写的。我们打开所谓的网页，就是打开一个个html文件。（注：文件后缀名为html） html的标签是什么？ 那么我们要如何写一个html文件呢？怎么才能把文字、图片、声音、视频、链接等这些东西放进html？ 这...
2019-12-16 11:45:34
137
空空如也
企查查小程序图谱请教
2021-07-02
TA创建的收藏夹 TA关注的收藏夹
TA关注的人