前端
文章平均质量分 70
想想就很棒
这个作者很懒,什么都没留下…
展开
-
前端架构师神技,三招统一团队代码风格
本文从代码规范,代码检查,代码格式化,以及编辑器自动化实现的方向,介绍代码规范统一在我们团队的实践应用。大纲预览本文介绍的内容包括以下方面:认识代码规范制定和统一规范神技一:ESLint神技二:Prettier神技三:VSCode附录:命名和项目结构规范认识代码规范先来思考两个问题:1.什么是代码规范?2.为什么需要代码规范?如果你是一个经验丰富的前端开发,你一定接触过这样的老项目:变量名是abc,fds这种随意起的,或者是name1,name2这种带数字起名,这样的变量不加注原创 2022-01-04 16:47:42 · 1928 阅读 · 0 评论 -
清明全网灰色主题实现原理
首先,把网站做成一个纯灰色主题,最简单直接的办法就是给整个网站加一个滤镜,就像我们平时自拍完给照片加喜欢的滤镜一样。我们的网页也可以加滤镜,但不是在整个网页上面遮一个div蒙版,而是让整个网页只有灰色 。原理灰色其实是个比较复杂的颜色。从白色到黑色,有无数种灰色,那么这些不同的灰色,就可以代替我们网页中的五颜六色,使整个网页有不同色值的灰色,但是依然很有层次,而且又可以表达出一种深沉的感情。什么是灰度,用图片来解释就是:我们知道RGB代表三个颜色,Red、Green、Blue。rgb(0255.原创 2021-12-31 10:47:42 · 698 阅读 · 0 评论 -
初识nuxt.js框架(一)
nuxt.js框架1.什么是服务端渲染(SSR) ?vue.js是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出vue组件,进行生成dom和操作dom。然而,也可以将同一个组件渲染为服务端的html字符串,直接发送给浏览器,最后将这些静态标记‘激活’为客户端上完全可交互的应用程序。服务端渲染的vue.js应用程序也可以被认为是‘同构’或‘通用’,因为应用程序的大部分代码都可以在服务端可客户端上运行。通俗的讲:就是服务端把vue组件渲染为html字符串,直接发给浏览器。2.为什么要使用服务端原创 2021-01-31 18:01:14 · 768 阅读 · 1 评论 -
你眼中的静态网页和动态网页
作为一名前端开发,我们经常要做各种网页,那么对于静态网页和动态网页,大家又了解多少呢?今天就由我带大家深入了解一下什么是静态网页和动态网页。什么是静态网页?在网站设计中,纯粹HTML(标准通用标记语言的子集)格式的网页通常被称为“静态网页”,早期的网站一般都是由静态网页制作的。静态网页的网址形式通常为:也就是以.htm、.html、.shtml、.xml等为后后缀的。在HTML格式的网页上,也可以出现各种动态的效果,如.GIF格式的动画、FLASH、滚动字母等,这些“动态效果”只是视觉上的,与下面原创 2021-01-11 21:00:36 · 278 阅读 · 0 评论 -
react ant-design框架 基于hook 的表格分页查询
之前用react的做的项目一直都是用class ,setState,componentDidMount ,componentDidUpdate ,componentWillUnmount 的写法,但从16.8以来,react新增了Hook特性,对于喜欢技术尝试我的来说,岂能不试一下新写法。我们一般用react 的ant-design框架做后台管理系统,那么最常见的业务场景就是表格,查询,分页。西面我就拿最常用的一个例子和大家分享一下:首先请看我们的界面:上面是搜索条件,中间是表格,下面是分页。这个大原创 2020-10-21 17:58:45 · 2711 阅读 · 2 评论 -
chrome调试秘籍
作为一个前端开发者,一定要掌握的几个调试神器。1.copy(obj)copy(anything)是一个很有用的工具函数,方便我们把任何东西拷贝到系统的粘贴板暂存。给copy函数传入一个没有格式的JSON,会返回格式化后的结果:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BhhnSyNv-1602841438418)(http://showdoc.ceibsdigital.com/server/…/Public/Uploads/2020-10-16/5f894dc原创 2020-10-16 17:44:43 · 221 阅读 · 0 评论 -
制作邮件模板的规范
邮件模板的制作和我们平时的写html是有一些不一样的地方,在做邮件模板的时候踩了很多坑,尤其是outlook邮箱客户端,会自动屏蔽掉很多html标签,导致我们的样式错乱,但是在客户端又无法调试,所以给我们造成了很多困扰,这个文章只记录一下我们做邮件模板需要注意的地方:一:静态页面的制作1.邮件模板中,图片及文字应具有平衡的比例,从门户的判断机制上看,邮件正文中文本的比例越合理,被判断为垃圾邮件的可能性越小,尤其是网易。通常建议 根据邮件的内容将非效果性文字都以文本的形式展现。2.切图片时候,在不影响原创 2020-10-15 14:28:15 · 1490 阅读 · 0 评论 -
vue 锚点定位 tab切换
废话不说 下面直接上代码和说明我们这想要实现tab切换时候页面自动滚动定位到锚点位置,因为这个是单页面引用,也没有使用a标签等,使用的是最普通的方法,仅供大家参考。//要实现切换的三个tab项<div class="con_nav"> <span @click="changeTab(0)" :class="active === 0 ? 'active' : ''">介绍</span> <span @click="changeTab原创 2020-07-20 10:26:06 · 4129 阅读 · 0 评论 -
App内嵌H5活动页面携带用户token
此文章仅记录自己在app端做的一个活动所遇到的各种问题, 帮助大家避免入坑.背景:后端使用framemark动态生成html模板.我写好的以ftl为后缀名结尾的framemark文件给后台,后台打成jar包,并集合后端自己的代码部署.需求:app端通过banner页面进入到投票活动页面(这个活动页面是H5页面),H5页面需要拿到用户的token.并可以进行投票活动.问题1:通过postm...原创 2020-01-08 17:58:10 · 4564 阅读 · 0 评论 -
移动端登录后,携带token请求其他页面接口提示token验证失败
最近做移动端的h5,登录之后携带token跳到列表页面,请求列表接口,但是后端却一直报错,提示token校验失败.最后发现后端接到的sessionId和token不一致导致的,查看资料经过无数奋战才知道,原来是跨域要想带上cookie.必须在ajax请求里加上xhrFields:{withCredentials:true},crossDomain:true....原创 2019-10-27 10:23:49 · 2474 阅读 · 0 评论 -
babel-plugin-import 插件的使用
babel-plugin-import是一款babel插件,在编译过程中将import的写法自动转换成按需引入的方式.今天在使用react 的组件库ant-ui时候,想要引入babel-plugin-import插件实现按需加载,按照官网教程发现样式怎么都引入不进去.记录一下自己的过程.安装插件npm install babel-plugin-import --save-devant-...原创 2019-08-23 16:22:41 · 15994 阅读 · 1 评论 -
h5 移动端常见问题
1.在含有背景图的页面上端点击div,会出现一个灰色阴影 解决方案:给要点击的元素加上如下代码 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 或者-webkit-tap-highlight-color: transparent;2.移动端内嵌的h5进入页面缓慢首先查看你引入的js文件是否放在了head里面,如果放在head...原创 2018-11-23 14:37:59 · 258 阅读 · 0 评论 -
安卓和ios微信浏览器播放视频 自动全屏
最近在做小视频分享活动,发现分享到微信浏览器的小视频在播放时候会自动全屏.经过一番查找和测试,现在找到了解决方案,代码如下:<video class="video-js vjs-big-play-centered" id="myvideo" controls preload="auto" height="100%" width="100%" playsinline webkit-play..原创 2018-12-29 14:21:17 · 1324 阅读 · 1 评论 -
FingerprintJS 浏览器端实现指纹识别
FingerPrint 即我们常说的指纹识别,使用手指和拇指前端的纹理按下的纹印来鉴定身份。指纹是鉴别身份的一种可靠的方法,因为每个人的每个指头上的纹理排列各不相同而且不因发育或年龄而改变。FingerprintJS是一个快速的浏览器指纹库,纯javascript实现,没有依赖关系.默认情况下,使用Murmur Hash算法返回一个32位整数,Hash函数可以很容易更换.Fingerprint...原创 2018-12-24 16:37:08 · 10263 阅读 · 0 评论 -
绘制圆环进度条的两种方式
绘制圆环进度条有多种方式,那么现在介绍两种基本的,也是最常见的.第一种:canvas绘制圆环 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=原创 2019-03-02 19:51:35 · 540 阅读 · 0 评论 -
移动端h5调起数字键盘并且小数点后只能是两位
在做移动端调起数字键盘时候,输入的时候小数点后最多有两位.使用input[type=number]可以调起数字键盘,但是在安卓和ios下会出现一些问题,下面我我记录一下:安卓上使用input[type=number]可以调起数字键盘,但是当输入小数点后,光标就自动定位到小数点前面了,这显然不合理.但是ios手机使用input[type=number]却是正常的.经过一番查询和尝试,发现在安卓...原创 2019-03-08 14:41:23 · 2688 阅读 · 0 评论 -
element table 分页选中记忆功能
想要实现table checkbox 分页选中记忆功能,网上看了很多,总是有一些小问题.自己写了一个demo,供大家参考.思路是:把选中的数据用二维数组记录下来,二位数组的key是页码,value是当前页码选中数据的id集合.每次点击下面附上代码template模板:<el-table :data="tableData" style="width: 100%" border ...原创 2019-07-08 17:40:11 · 4375 阅读 · 5 评论 -
Echarts 图表大小自适应浏览器窗口缩放
最近使用element-ui做的后台管理要求嵌入图表功能,其实element-ui嵌入图表很简单,但是问题来了.开发场景是:页面上有多个图表,当我调整浏览器窗口大小的时候,发现图表并不会根据浏览器窗口大小而进行调整,这完全不符合我们的要求,也是作为一个合格的开发人员不能容忍的.我的页面内有两个echarts图表,下面是我的解决方案:(vue 代码)//data 里面定义的两个图表data:...原创 2019-07-09 09:38:01 · 8107 阅读 · 0 评论 -
对象类型数组 自定义排序
我们可以对任何对象类型的数组排序,比如,对象Person有名字和年龄属性,我们希望根据年龄排序,那么我们可以这么写:const friends=[ {name:'john',age:30}, {name:"lily",age:20}, {name:"merry",age:24},];function comparePerson(property){ return function(a...原创 2019-07-20 14:37:08 · 623 阅读 · 1 评论 -
前端优化:DNS预获取dns-prefetch提升页面载入速度
DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端优化中与DNS有关的有两个方法: 一个是减少DNS的请求次数,另一个就是进行DNS预获取 。DNS 作为互联网的基础协议,其解析的速度似乎很容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化,典型的一次DNS解析需要耗费 20-120 毫秒,减少DNS解析时间和次数是个很好的优化方式。DNS P...原创 2018-11-22 19:15:40 · 334 阅读 · 0 评论