uneedcode-CSDN博客

原创前端导入导出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 142

原创 UI小姐姐又想骗奶茶喝怎么办？

今天又是一个卑微落魄的小前端。一大早UI小姐姐又给我搞事情。这是我拿到的设计稿一部分。UI小姐姐说这个横杆竖杆你自己写！我内心想，一到周一女生就容易暴躁吗？？算了算了，保持微笑，头发重要。心态平和是一个优秀开发的标准之一啊。这点小效果就想为难我？话不多说，直接怼代码。下面的效果用到了定位和伪元素知识点。请自行补漏。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /&

2020-06-15 11:37:17 304

原创 UI小姐姐不给你小三角图标怎么办？？

最近得罪了UI小姐姐，因为没有给她买奶茶喝，所以下午不愿意给我制作小三角图标。作为一个小前端，本着能屈能伸的优秀品质，决定还是靠自己双手自力更生，而且能省下一顿饭钱和奶茶钱，甚至是开房钱哈哈，真是一举三得啊！话不多说，下面我们来看看图中的小三角要如何用css样式实现。各种三角形实现代码如下<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta

2020-06-12 22:46:59 282

原创关于border-box和content-box的区别

默认是内容盒子即content-box，width和height即设置内容宽高，内外边距和border都是另外加border-box即width和height设置到包括border的所有内容宽高，外边距另外加

2020-06-09 23:41:04 282

原创如何利用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 2318

原创前端面试官让你实现淘宝评分的效果

我们要实现的效果： <ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul>分析如下：1.鼠标移入，鼠标当前的li和左边的li是实心的，右边是空心的2.鼠标移出，

2020-06-07 18:29:12 378

原创 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 461

原创如何理解JS中的call、bind和apply

JS中的每个函数都包含两个非继承而来的方法：apply和call。这两个方法的用途都是在特定的作用域中调用函数。首先apply方法接收两个参数：一个是在其中运行函数的作用域this，另一个是参数数组。第二个参数可以是实例数组，也可以是arguments对象。call和apply的作用相同，区别只在于接收参数的方式不同。call的第一个参数跟apply一样，第二个参数开始不同。它不是一个数组，而是一个个单独参数，要逐个列举出来。bind的参数跟call一样，但是他返回的是一个全新的函数。需要再次调用。而

2020-06-05 22:01:31 129

原创 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 241

原创前端面试之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 195

原创 react-redux的使用及注意事项

使用react开发企业级应用在对数据进行共享时，原生的redux仓库管理方法比较繁琐。而react-redux是基于原生redux封装的一个插件库，使用起来比较简单，而且不用每次都订阅和取消订阅。下面就让我们来看看react-redux是如何使用的吧！1.在一个react项目中安装 react-reduxyarn add react-redux redux2.新建一个 stroe 文件夹，创建管理员文件夹。// 1. 定义管理员 src\store\reducer\index.jsconst

2020-06-02 23:27:05 202

原创 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 218

原创 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 183

原创 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 1451

原创 vue实现回车键登录注册

话不多说，上个小优化 created() { document.onkeyup = (e) => { var key = window.event.keyCode; if (key == 13) { this.dealClick(); } }; },整个页面监听键盘弹起，注意里面要写箭头函数将this指向上一级v...

2020-04-18 21:35:55 276

原创那些webpack你不得不知的坑

对于刚开始接触node的人来说，最烦的莫过于输入的命令行无法被终端识别执行，一般来说都是path配置有问题。如果我们直接在终端环境输入webpack命令行出现无法识别的情况的话，我们可以通过设置npm快捷方式来运行。**直接输入webpack命令行，node会去找系统配置下的webpack。而配置npm的快捷方式，则会在当前项目下找webpack这个包。**而对于一个项目来说，我们下载的包都是开发...

2020-04-13 23:52:02 393

原创深拷贝方法大全，前端面试必备

js里面的深拷贝是针对引用数据类型才有的，对于基本数据类型则没有这种深拷贝与浅拷贝之分。因为基本数据类型是名和值都存储在栈内存里，而引用数据类型是名存储在栈内存，他的值则指向堆内存空间。let arr1 = [1,2,3,4]let arr2 = arr1这里会将arr2和arr1共用一个堆内存指向，所以不管之后对两个数组如何操作都是作用在同一个堆。这种也是我们所说的浅拷贝那么如何对一...

2020-04-12 22:40:41 294

原创 html快速入门之一

什么是html?html又叫做超文本标记语言，注意一下，它不是编程语言。那html有什么用？我们日常浏览网站的时候，会打开一个个网页，页面上各种文字、图片、声音、视频、链接等都是用html写的。我们打开所谓的网页，就是打开一个个html文件。（注：文件后缀名为html）html的标签是什么？那么我们要如何写一个html文件呢？怎么才能把文字、图片、声音、视频、链接等这些东西放进html？这...

2019-12-16 11:45:34 84

NoManCodes的博客