- 博客(121)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 2020最全的前端面试大全
一、HTML和CSS1、css动画实现：animation（动画）：keyframes提供了更多的控制；可以指定播放次数或是无限循环；可以定义动画的中间状态transition（过渡）：需要事件来触发；是一次性的，不能重复发生；只能定义开始和结束状态，不能自定义中间状态；transform（变形）：元素的缩放、旋转、移动和倾斜translate（移动）：transform的...
2020-04-06 13:44:27
649
原创 vue封装图片滑块验证组件
滑块验证组件整体不难，主要在于设置图片的样式问题，想要让背景图充满div，就需要滑块图片也跟随等比放大，效果与代码如下：HTML：<template> <section class="slider-section"> <div class="img-box"> <img :src="'data:image/png;ba...
2020-03-16 18:33:43
1651
原创 使用vue-cropper实现最实用的图片裁剪组件
先上效果图：1、安装vue-croppernpm install --save vue-cropperjs2、项目中引入使用：（1）全局引入man.jsimport Vue from 'vue'import VueCropper from 'vue-cropper'import 'cropperjs/dist/cropper.css'Vue.use(VueCro...
2019-12-16 14:34:36
2638
11
原创 删除git远程库中误传的文件
不小心把node_modules文件夹上传到远端了哇，别急，有办法：git rm -r --cached node_modules如果是在某个文件夹下面，也可以使用路径：xxx/node_modules之后再执行push：git commit -m fix:remove-filegit push origin dev成功之后别忘了赶紧写入.gitignore文件：gitignore的配置语法：以斜杠“/”开头表示目录；以星号“*”通配多个字符；以问号“?”通配..
2021-10-09 18:03:29
502
2
原创 Emmet-HTML速写
框架横行的时代，vue和react写多了，你是不是都忘了html基础结构是怎样的了？一个"!"键就可以解决，输入英文感叹号，然后回车或者tab，即可看到下面的基础html结构Emmet常用语法! —— 生成Html结构 # —— 元素id . —— 元素class > —— 子节点 + —— 兄弟节点 ^ —— 父节点 *n—— 重复n次指令 $ —— 计数编号 () —— 分组 [] —— 属性 {} —— 文本内容 隐式标签：在不输入标签名的时候默认是d.
2021-09-24 17:24:49
332
原创 怎么判断ios设备、移动设备、浏览器
NavigatorNavigator接口表示用户代理的状态和标识。允许脚本查询它和注册一些自己的服务我们可以通过window.navigator来访问Navigator对象常用属性Navigator.appVersion：浏览器版本Navigator.appName：浏览器官方名称Navigator.connection：设备网络连接信息Navigator.geolocation：可访问设备的地址位置信息Navigator.language：浏览器用户界面的首选语言Na
2021-09-16 18:23:55
583
原创 如何把本地项目上传到gitee远程仓库
这只是一个简洁的操作步骤说明书：登录你的Gitee账号，并创建一个合适的仓库，简单的写一下描述信息，不写也行，最好给你的仓库起一个有礼貌的名称，可以看看我的仓库。guanxuerong (guanguan0_0) - Gitee.com 在你本地的代码文件中，打开git bash。 执行 git init 命令，这是在初始化git本地仓库，会发现多了一个.gitignore文件，用于配置忽略文件等。 执行 git remoteadd origin xxx ，xxx是你的远程仓库的名称，为了互通.
2021-09-16 15:56:49
199
原创 你值得拥有的CSS编码规范
相信大多数开发者都很了解js的编码规范，但是对css的编码要求都不高，如果你的css代码经常处于很难阅读的状态，那么你就很需要一套完善的class命名和css编码规范了。语法规则每条声明都应该独占一行 每条声明语句的:后应该插入一个空格 声明块的右花括号应当单独成行 所有声明语句都应当以分号结尾 为了代码的易读性，在每个声明块的左花括号前添加一个空格 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5代替...
2021-09-15 17:29:21
152
原创 如何在纯js文件中使用redux
源起我们都知道如何在react文件中使用redux，但是你们有没有遇到在普通的纯js中使用redux的场景呢，比如：公共方法文件utils.js等如何处理废话不多说，直接上代码，具体的解释会放在代码注释中入口文件 index.js:import { applyMiddleware, createStore } from 'redux';import createSagaMiddleware from 'redux-saga';import rootReducer from '.
2021-09-14 18:03:48
1891
2
原创 优雅的Git Commit Message
源起不知道大家看到那些非常随意的提交信息会有什么感受，这里可以上一个图给大家感受一下。会不会觉得太过于潇洒和随便了。完全看不出做了哪些变更，在项目正常运作时还好，一旦需要回滚，就很难寻找版本了。所以，不管是团队开发还是个人开发，遵循统一合理的提交规范是很有必要的，毕竟没有人能记得住一年前的代码吧。Git Commit Message规范<type>(<scope>): <subject>下面分别介绍这几个参数的具体含义和规范<...
2021-09-14 15:46:00
247
原创 background-image无法显示图片
在使用js来设置backgroundImage参数时，我发现有些图片无法正常显示，仔细看了区别发现，文件名中带有括号的无法显示解决方法：在url的括号内上添加引号，将其固定为字符串，来防止圆括号的冲突问题backgroundImage: `url('${imgUrl}')`因为获取的地址是随机的，所以需要加引号来避免发生括号冲突...
2021-04-21 17:36:39
5919
1
原创 js数据类型及判别方法
你可能在面试题中见过如下题目：!!null!!''!!1!!undefined做两次非运算？其实就是想要取Boolean值，将其强制转换为布尔值例如，想要判断输入值是否为空，!!valuejs中类似这样的套路还有：// 转换为数字+ '123' // 123- '123' // -123// 转换为字符串123 + '' // '123'...
2021-03-09 17:52:12
1844
原创 平板横竖屏适配问题
因为平板更容易变换方向，相较于手机设备，更需要进行适配处理除了在head中加入这句必备代码之外，<meta name="viewport" content="width=device-width, initial-scale=1" />我们还可以做点别的：1、如果是嵌入到客户端中，可以通过调用接口的方式来禁止用户横屏操作，这种方式简单粗暴，也很有效，很多客户端的活动页都是这样做的；2、如果没法控制用户操作，就只能通过媒体查询的方式来对横竖屏样式进行适配@media s
2020-12-18 16:24:45
1353
2
原创 你不知道的javascript
1、数组和对象都是有属性的，都不相等2、+ 'a'=NaN3、NaN 与其他数值进行比较的结果总是不相等的，包括它自身在内4、js加法运算符：做数据类型转换为可以计算的类型5、min() 方法返回参数中最小的值。如果没有参数，则返回 Infinity。如果有某个参数为 NaN，或是不能转换成数字的非数字值，则返回 NaNmax() 方法参数中最大的值。如果没有参数，则返回 -Infinity...
2020-12-18 14:32:32
122
原创 前端开发必须知道的分辨率（手机、电脑、平板）
你知道手机、电脑、平板的分辨率都有哪些吗？我们以屏幕的比例做维度来统计一下，那些名词啥的也没必要知道了，也看不懂，直接列分辨率吧常见移动端分辨率320*480480*800640*960768*12801024*768 （这里之后都是平板）1280*8001366*7681920*10801920*12002048*15362560*1600移动端的分辨率需要mark一下，做移动端适配需要考虑4:3 最常见的屏幕比例640*480800*6
2020-12-17 10:42:20
5181
原创 css+js实现水波状进度条动画
进度条在前端很常见，效果也多种多样，慢慢积累。这次介绍一个水波状的进度动画，如图主要是使用js和css来处理，这里需要计算一个值，因为是匀速增加百分比，所以我们需要对照总耗时来计算对应的增长速度，这里是我的配置：总时间：30s，也就是在样式的动画效果中的播放时间设置为30s总进度：100%增长间隙时间：150ms （经过测试，如果设置100ms感觉变化太快，看不清）增长速度：0.48% 。30/0.15 = 100/0.5 但是为了让数据变化看起来更加真实，所以想要显示两位小数.
2020-12-10 16:50:01
3004
原创 css解决移动端弹框下背景滑动问题
如何处理移动端弹框下页面滑动的问题我们不需要依靠js来处理，只需要设置简单的css就可以啦重点：最外层设置absolute定位代码来了：<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <style&
2020-12-10 15:33:43
967
原创 介绍几种js脱敏加密（手机号邮箱等）
虽然前端数据都是从后端拿到的，我们也知道前端对数据的处理也都是表皮层，没法达到真正的安全目的。但，没法，有时候我们还是要去做一些本不该做的事情来让某些东西看似合理。下面介绍几种前端js加密的方法：加密，其实就是对字符串的处理，主要包括查找，截取，替换，当然我们还可以使用正则1、手机号脱敏拿手机号脱敏举例：可以使用slice、substring或者正则，类似的所有字符串的处理都可以使用这几种方法：const phone = "13031325689";const str1 = pho
2020-12-09 18:26:44
7741
5
原创 hover控制同级元素css样式
css中我们经常遇到hover态的样式处理，通常我们用的更多的是控制自身或者控制子元素，但是遇到同层级元素怎么处理呢？直接上一个很经典的例子，也是在项目中遇到的：例子是一个图片预览控件，需求：当鼠标移动到可视区域内时显示左右切换按钮和下方的操作区，但是当用户左右切换图片时，我们发现如果按钮操作区一直处于显示状态会遮盖部分图片信息，严重影响用户体验。所以，当鼠标移动到左右切换按钮时，我们需要将按钮操作区隐藏1、如果a是b的父元素，使用 #a:hover #b{ }2、如果a和b是同级元素，
2020-12-09 17:31:25
4664
1
原创 js条件语句的优化
一、优化if/else条件语句满篇的if/else语句是每个程序员在阅读老代码时最头疼的了，那么优化条件语句就成为了不可抗拒的使命。增加代码可读性，让你的js代码看起来更优雅。1、多条件筛选遇到多条件筛选，我们经常会使用"||"运算符，但是如果条件过多就显得非常冗杂，例如：const handleFile = (fileType) => { if (fileType === 'png' || fileType === 'jpg' || fileType === 'jpeg') {
2020-12-08 17:25:46
234
原创 解决全屏下antd的Tooltip不显示的问题
因为tooltip是定位到父节点的，全屏后或者页面发生变化后，可能会导致tooltip找不到父节点的位置。因此，需要加一个属性来给tooltip绑定它的父节点getPopupContainer={()=>document.getElementsByClassName("img-opt")[0]}就这么简单，类似的因为页面位置发生变化而找不到的有联系的组件都可以使用这个来尝试一下。...
2020-09-24 14:26:16
5018
2
原创 JS最大最小安全数和精度丢失问题
此篇内容是由一道题目引发的思考，题目如下：const END = Math.pow(2, 53);const START = END - 100;var count = 0;for(let i = START; i <= END; i++){ count++;}console.log(count);结果是100还是101呢？都不是，打印不出来，已经陷入死循环。我们可以通过 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER
2020-08-20 14:15:10
1367
原创 JS运算符和运算符优先级
先做一道题：var val = 'abcd';console.log('Value is ' + (val === 'abcd') ? 'A' : 'B');控制台打印出的结果是 // A因为连接符的优先级高于三元运算符，所以该题目相当于：'Value is ' + true ? 'A' : 'B'，由此得出该题的两个变体：console.log('Value is ' + val === 'abcd' ? 'A' : 'B'); // Bconsole.log('Value i.
2020-08-19 15:06:44
474
原创 js网址域名的校验
二话不说，直接上代码export const IsURL = (str_url) => { const strRegex = '^((https|http|ftp|rtsp|mms)?://)' + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + // ftp的user@ '(([0-9]{1,3}.){3}[0-9]{1,3}' + // IP形式的URL- 199.194.5
2020-06-28 13:58:22
1900
原创 react封装请求拦截处理
request.jsimport { Modal } from "antd";import axios from "axios";const instance = axios.create();// 是否正在刷新tokenlet isRefreshing = false;// token 过期时的请求队列let requestQueue = [];//token获取失败处理const LoginAgain = () => { Modal.warning({ co
2020-06-24 16:05:43
2053
原创 react实现一键复制react-copy-to-clipboard
前端实现一键复制功能除了用原生js和window属性来写，还可以使用外部插件react-copy-to-clipboard使用方法如下：1、安装$ npm install --save react-copy-to-clipboard2、使用import { CopyToClipboard } from 'react-copy-to-clipboard'return ...
2020-04-09 18:14:35
1220
原创 五种方案实现CSS三栏布局
方案一、浮动布局float<html> <head> <style> .container::after { content: ''; display: block; clear: both; } .container>div { he...
2020-04-07 16:06:24
607
4
原创 四种方案实现CSS两栏布局
实现两栏布局：左侧定宽，右侧自适应html：<html> <head> </head> <body> <div class="container"> <div class="left">LEFT</div> <div class="right">...
2020-04-07 11:29:26
435
原创 react空标签「」「/」
在vue开发中，我们常常用<template></template>作为一个不可见的包裹元素，用来包裹不能有父级容器的标签（例如tbody）；在react开发中，也有这样一个空标签<React.Fragment>，给需要的组件或元素提供包裹层，并且不添加真实的dom结构const Table = ( return <Rea...
2020-04-06 14:26:55
1518
原创 ES6--深入理解Set和Map
当问到数组去重方式时，我们能想到的最简单的方法就是ES6中的Set；Set是一个数据容器，能够存储无重复值的有序列表1、创建Set2、Set添加元素3、Set删除元素4、判断Set中是否含有某个元素5、Set的长度6、Set遍历输出7、Set转化为数组let set = new Set([1,2,3,1,1,1,2]); // 创建Setset.size;...
2020-02-21 10:57:04
184
原创 安装node库时报错node-sass@4.12.0 postinstall: `node scripts/build.js`
最近安装node库经常遇到这种报错：node-sass@4.12.0 postinstall: `node scripts/build.js`可以设置一下npm淘宝镜像，然后用cnpm来重新安装库$ npm install -g cnpm --registry=https://registry.npm.taobao.org...
2020-02-19 18:32:18
3616
原创 vue使用lottie渲染json动画
1、安装vue-lottie$ npm install vue-lottie --save2、在组件中使用Lottie渲染json动画<template> <Lottie :options="defaultOptions" :height="26" :width="26" /></template><script>i...
2020-02-19 18:26:10
1996
原创 如何在vue项目中使用websocket
一般先要在项目中使用websocket对某个数据流进行监听，最好使用全局方式来定义websocket具体代码如下：<script> export defalut { data() { return { path:"ws://192.168.10.4:8085" } ...
2020-02-18 23:59:51
1718
1
原创 vue获取上级路由地址
可以通过从vue-router中beforeRouteEnter钩子函数中的from参数中获取url，利用next()传递回当前组件，具体代码如下：<sctipt> export default { data() { return { beforeUrl: '' } ...
2020-02-17 15:01:31
7103
1
原创 vue对象属性变化时无法刷新v-if、v-show
普通对象赋值方式可能会使v-if和v-show无法刷新，可以使用this.$set(this.obj, 属性名,属性值)的方式来改变对象的值，例子如下：<template> <button @click="handleShow">点击</button> <div v-if="params.isShow">显示出来div<...
2020-02-15 13:53:55
9677
原创 vue封装加载更多组件
LoadMore.vue<template> <div class="load-more-wrapper" @touchstart="touchStart($event)" @touchend="touchEnd($event)"> <div class="inner"> <slot></slot> ...
2019-12-25 18:09:07
696
原创 react路由传参的三种方式
方式一、params优势：刷新页面，参数依然存在缺陷：只能传字符串，并且值太长影响美观1、路由表：<Route path='/detail/:id' component={Detail} />2、Link标签:<Link to={'/detail/'+'2'} activeClassName='active' >Detail</Link&g...
2019-12-20 15:25:09
875
原创 解决移动端vue项目资源缓存问题
我们希望每次进入项目都会重新加载资源配置，以防配置文件修改而导致页面没有更新问题我们习惯通过在资源路径加上时间戳等参数来保证每次进入的正常刷新但是，vue中要怎么处理呢，代码如下：index.html:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> &...
2019-12-18 16:01:32
2290
原创 react的父子组件通讯
1、父组件调用子组件的方法或值父组件调用子组件方法是父组件通过读取子组件的ref，可以获取子组件的所有参数和方法，在没有使用redux时可以直接使用this.refs.child.useChildFunc()如果使用了redux，ref获取的则是connect组件，所以需要将子组件的this通过父组件中绑定在子组件的方法传递给父组件parent.js:import Reac...
2019-12-18 14:38:53
170
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人