- 博客(244)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 webp→png：图片格式的优雅降级
背景：项目中一直使用的图片格式是png，因为其无损压缩，分辨率高的同时体积相对也会大一些，在H5中，如果使用了大量图片，而且每一张图片体积都很大，几百K甚至几兆，那页面的性能会很低。webp是谷歌推出的图片格式，具有体积小，还原度高的特点。所以希望图片格式优先使用webp，在不支持webp格式的环境中在使用png格式。判断当前环境是否支持webp：document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/
2022-01-15 18:25:24
891
1
原创 Vue+Swiper 滑动到最后一个卡片时继续滑动跳转页面
最近PM提出了这样的一个需求，卡片可以横向滑动，当滑动到最后一个卡片，且还在滑动时，要跳转到另一个页面。这是就需要把握一个范围，当超过这个范围时，就进行跳转，否则不跳转。1.首先通过swiper进行页面布局布局成如下，可以进行左右滑动，最后一个之后显示"查看更多"，在继续滑动且超过一定范围时跳转页面。2.swiper监听事件，touchMove：触摸滑动时触发；touchEnd：触摸结束后触发。在事件触发时判断"查看更多"元素离视口左侧的距离，如果小于屏幕宽度，证明该元素已经全部显示，文案提示变成"
2021-07-05 15:26:03
2871
3
原创 Vue实现tab导航栏，支持左右滑动
本文主要介绍：利用Vue实现tab导航栏，并且通过flex布局实现左右滑动，计算按钮的位置，当点击第一屏展示的最后一个且还有元素未展示时，自动滑动显示出未显示的元素。tab导航栏布局：<section class="theme-list"> <div class="fixed-nav" ref="fixednav"> <div class="fixed-nav-content"> <p v-for="(item, inde
2021-06-27 23:27:59
7436
10
原创 回首2020，展望2021
转眼间，2020已经要过去了，这一年，不如以往的平和，生活上，经历了疫情的打扰，蛋壳的重创，很幸运还能安静的坐在这里分享着2020年的点点滴滴。工作环境的改变 2020初开始，便听说了疫情的消息，刚开始并不重视，到后来禁止拜年，延期上班，在家办公，真是感受到了被恐惧支配的感觉，尤其是到家一个月之内发烧了一次，当时还真挺害怕的，万幸最后没事。 所以这一年，有将近4个月的时间在家办公，不能说是懈怠，但是跟在公司相比，氛围还是较轻松的，也实践了一波RN的开发，晚上在线会议也是充分利用了科技提供的便利
2020-12-27 22:10:48
3790
1
原创 PC调试手机上APP的多种方式
与Web端调试相比，移动端调试似乎有很大难度，之前尝试过使用alert，页面引入vconsole的方式，最近又发现了其他更加方便的调试，顺道整理下来。1.Chrome浏览器Inspect调试1）在x5内核下，访问debugx5.qq.com/，点击信息，勾选 ‘打开TBS内核Inspector调试功能’；2）手机打开开发者模式，允许USB调试；3）谷歌浏览器地址栏输入：chrome://inspect/#devices，下方可以看到4）在可以翻墙的基础上，点开inspect，就可以看到自己的界面以
2020-12-11 19:48:20
2809
原创 Mac本地向服务器（经跳板机）上传文件的多种方案
在项目开发的过程中，偶尔会遇到需要手动把本地的文件上传到服务器的情况，本次整了一下上传的多种方案，做一下总结。1.Mac下可以使用rz和sz由于服务器的登陆需要经过跳板机，所以采用rz和sz的方式，但是需要自己配置，具体配置过程可以参考：我是可以点击的哦，但是在安装ruby时，耗费的时间巨长，而且可能由于网络的原因会安装失败。2.可视化工具YummyFTP或FileZilla需要知道服务器的用户名密码及端口3.fis3【需要服务器支持】1)安装低的Node版本，如6.10.02)安装fis3：
2020-11-28 20:42:54
2251
原创 HTML页面通过iframe嵌套Vue项目
之前都是在Vue项目中通过iframe嵌套外部写好的HTML页，但是最近接触了一个需求，是需要在HTML页面中嵌入Vue项目。Vue项目打包完成之后会形成一个包含所有静态资源的文件夹，点击HTML页可以运行（后端解决的跨域），现在需要新建一个test.html页去嵌套Vue打包后形成的HTML页，在test.html中有几个input框，输入完成之后点击搜索按钮，Vue项目会显示出来，同时请求了后端接口数据进行显示（接口是在Vue项目中请求的，参数是通过window.location.href获取的）。
2020-11-22 22:40:09
3886
4
原创 bug修复---同时触发mousedown事件和touchstart事件
这两天遇到一个bug，每次点击下方键盘时，点击一次数字，文本框中会出现两次重复值，如下所示：而且console中还有以下报错信息：查看项目代码，代码如下：<ul> <li v-for="(item, index) in keys" :key="index" v-html="item.name" @mousedown="handleKeyboardClick(item.val, index)" @touchstart="handleKey
2020-11-20 20:21:03
2025
原创 金九银十，附赠一份前端面试知识点总结
现在是九月的小尾巴，不知道还有多少小伙伴想要换工作呢？下面是我这一段时间面试的相关知识点总结，大厂小厂都有，整理了一下分享给大家，希望能对大家有所帮助。JS篇1.ES6语法的新特性，Promise，async，await①async和await如何用异步实现同步写法的②为什么promise可以实现链式调用③手写实现promise的思路④如何去管理promise的状态2.for each和map的区别3.闭包①闭包的特点，有什么问题，可以用来做什么4.原型链5.JS体积太大，如何解决
2020-09-27 21:25:30
406
2
原创 面经总结：何为Promise
Promise是ES6提供的对象，代表了未来将要发生的事件，用来传递异步操作的消息。Promise在开发和面试的过程中都很重要，下面我们一起来看一下关于Promise的相关知识。说一下对Promise的理解Promise是JS中进行异步编程的解决方案，是一个构造函数，用来封装一个异步操作并可以获取其结果，可以解决之前的回调地狱的问题。使用Promise的好处：①可以避免多层异步调用嵌套问题②简洁的API，更加容易控制异步操作Promise的缺点：①无法取消Promise，一旦新建它就会立即执
2020-09-17 10:24:09
276
原创 你需要知道的解决跨域的方案
今天我们再来分享一下关于跨域的问题，虽然之前也有分享过，但是解决方案不太全，且最近在面试的过程中，跨域是一个经典问题，所以我们需要知道其中的原理。什么是跨域跨域是浏览器的同源策略导致的。什么是同源策略呢？同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。如何算同源呢？当协议、域名、端口都相同时才算同源。举例如下：http://www.hpp.com/hao.jshttp://www
2020-09-10 09:33:16
213
原创 JS数组去重方法整理，再也不用担心数组如何去重了
前端笔试的过程中，大概率会有这样一道题，给你一个字符串数组，让你输出其中不重复的字符串的个数，这就是典型的数组去重了，那应该如何进行数组去重呢？本篇文章整理了10余种方案，你来看看那个最适合。1.利用set对数组去重set是ES6中的一种数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值。function unique(arr) { return [...new Set(arr)] // 扩展运算符，将伪数组转换为真正的数组}var arr = ["abc","ade","bef","
2020-09-07 19:40:40
264
2
原创 前端面试分享：冒泡排序和快速排序
前端面试过程中，某些公司对基础的算法也有一定的要求，比如常见的冒泡排序，快排等，今天我们就一起来看一下这两个排序算法。 冒泡排序排序思想： 每次比较相邻的两个数，如果后一个比前一个小，则换位置。看一下动图来体验一下：每一次冒泡，都会把最大的一个数选出来，之后就会少比较一次。基本思路： 每一次冒泡都需要选出一个最大值，可知：假设有n个数，我们就需要执行n-1次冒泡，每一次冒泡，会比较相邻的两个数，而且比较的次数是n-1-冒泡次数，因为冒泡一次会选出一个最大值，最大值就不参与之后的比较了。代码实现：
2020-08-30 21:05:03
396
原创 Node.js用户登录：从cookie到session到redis
前言当用户登录之后，需要标识用户的登录信息，用户在做其他操作的时候，比如电商系统中的添加购物车的功能，博客系统中的新建博客等都需要用户登录之后才可以操作，那如何才能标识用户已经登录呢？cookiecookie是存储在浏览器的一般字符串，最大5kb。特点：①存储在浏览器中②跨域不共享③存储格式：k1=v1;k2=v2，可以存储结构化数据④每次发送http请求，会将请求域中的cookie一起发送给server⑤server可以修改cookie并返回给浏览器⑥浏览器也可以通过js修改cooki
2020-08-22 15:53:20
501
原创 前端布局系列---flex布局
布局是指HTML的整体结构，好的布局直接影响到用户的体验，同样，在前端面试的过程中，布局也是一个必问点，所以，今天我们来整体回顾一下flex布局。什么是flex布局？flex是flexibleBox的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，主要用来为移动端布局，PC端支持较差。布局原理通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。开始flex布局的方式/* 块级元素 */display:flex/* 行内元素 */display:inline-flex任何一
2020-08-12 11:16:21
1005
原创 小程序入门到上手开发项目，这些知识点应该知道（附项目的git地址）
小程序的特点小程序在目前越来越流行，离不开小程序的特点：对于用户来说： ①无需安装，即搜即用； ②优秀的用户体验，和APP体验相同； ③依靠微信，使用方便对于开发者来说： ①开发成本低，不用太过考虑手机兼容性的问题； ②接口多，微信提供了很多接口，可以直接使用；小程序与H5的区别小程序是依赖于APP的，无法脱离APP而单独存在；H5是网页应用在PC浏览器或移动端的形式。二者之间的区别： ①开发成本不同：以微信小程序来说，微信提供了开发的组件和封装好的API，不用考虑兼容
2020-08-05 15:06:21
273
原创 微信小程序原生框架实现界面上拉加载和下拉刷新
在移动端开发中，上拉加载和下拉刷新是很常见的功能，可以用它来替代PC端表格分页的功能。今天我们来复盘一下在小程序中实现该功能的思路。上拉加载当用户上滑界面时，滚动条触底，开始加载下一页数据，实现思路如下：1.从文档中查询滚动条触底事件（小程序的页面生命周期事件onReachBottom）2.判断还有没有下一页数据（总页数 = Math.ceil(总条数 / 页容量) / 判断当前页数是否大于等于总页数）3.假如没有下一页数据，提示用户4.有下一页，就加载数据（当前页码++，重新发送请求，对数组进
2020-07-29 16:20:19
1066
1
原创 前端布局系列---居中布局的多种实现方式
布局是指HTML的整体结构，好的布局直接影响到用户的体验，同样，在前端面试的过程中，布局也是一个必问点，所以，在这里小编进行了统一整理，形成一个布局系列博客，主要包含以下布局方式：①居中布局（水平居中布局、垂直居中布局、水平+垂直居中布局）②多列布局（两列布局、三列布局、圣杯布局+双飞翼布局、等分布局、等高布局、css多列布局）欢迎其他伙伴进行补充！0.搭建基本格式代码一个父盒子套一个子盒子，代码如下：<html lang="en"> <head> <
2020-07-25 17:38:05
986
原创 Vue 从零开始搭建PC端项目完整框架（附GitHub地址和Vue项目执行流程）
主要步骤：①根据脚手架创建一个项目vue-cli4新建项目及分环境打包Windows搭建vue环境②引入axios发送请求项目搭建完成后，引入axios用于和后端进行交互终端执行命令npm install axios执行完在package.json文件中会出现axios的版本号在main.js文件中进行全局挂载import axios from 'axios'Vue.prototype.$axios = axios这样，在页面中通过this.$axios就可以进行访问了③配置
2020-07-14 16:44:40
3204
5
原创 JS实现继承的7种方式，你都知道哪几种???
题记ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链来实现的。继承的方式方式一：原型链基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法
2020-07-11 16:24:33
305
2
原创 JS创建对象的9种方式，你还在愁不知道如何创建对象吗？
什么是对象呢？ECMA-262中定义：对象是无序属性的集合，其属性值可以包含基本值、对象或者函数。理解一下：对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。知道什么是对象，下面我们一起来看一下创建对象的多种方式。创建Object的实例简介：创建对象的最简单方式：创建一个Object实例，然后添加属性和方法。早期JS开发人员使用这个模式创建对象。var perosn = new Object();perosn.name = 'Helen';person.
2020-07-09 16:15:14
240
原创 ES5中新增的方法，让你的开发效率6的飞起
前言ES5也被称为ECMAScript 5或ECMAScript 2009，在ES5中新增了许多方法，包括数组方法、字符串方法、对象方法等。今天我们主要来学习以下内容：数组迭代方法：forEach()、map()、filter()、some()、every()字符串方法：trim()对象方法：Object.keys()、Object.defineProperty()数组迭代方法1.forEach()forEach是用来遍历数组的，有三个参数，参数一是数组元素，参数二是数组元素的索引，参数三
2020-07-05 16:30:13
320
1
原创 Vue组件如何封装，这些原则您需要了解一下！
什么样的内容需要封装一段代码在项目中出现两次就开始考虑是否应该进行封装，出现三次就肯定要封装，大到一个页面，一个组件，小到一个function和一个css样式。封装原则以下将封装出来的通用组件叫做子组件，引用通用组件的界面叫做父组件。封装出来的组件必须具有高性能，低耦合的特性，主要从以下几点入手：1.数据从父组件传入子组件本身不要生成数据，如果需要生成数据，只能在组件内部进行使用，不要传递出去。父组件使用props对子组件进行传参：// 父组件向子组件传值props: { // 表
2020-06-28 21:14:50
5476
原创 前端将后端返回的数字(英文字母)，转成对应的文字进行显示
前言类似于省市区，状态，性别之类的可以枚举出来的变量，一般情况下数据库中存储的是其对应的value值，像省市区联动的话，前端界面中显示的是省市区的名字，但是接口的入参一般是对应的code码；如果界面中需要状态的话，类似于我这种的稿件状态：草稿、待审批等，接口返回的不是草稿这样的文字，而是DRAFT这样的英文标识。那问题就来了，前端如何将后端返回的数字或英文字母，转成对应的文字进行显示呢？枚举类型后端返回的数据中有英文标识，具体标识如下："status": { "DRAFT": "草稿", "AP
2020-06-16 09:49:10
12403
2
原创 ElementUI对于表格的二次封装
前言最近在做的项目中，有大量界面用到了表格(el-table)组件，但是里面具体显示的内容不同，是从后端获取过来的，如果每一个界面写一下el-table的代码的话，会造成代码量大且不易维护的后果，所以就对el-table表格进行了二次封装。过程先看一下最终效果代码实现1.抽出来的子组件的代码：<template> <div> <!-- 表格部分 --> <el-table :data="tableData" stripe border
2020-06-14 21:10:43
2895
4
原创 你清楚JS的原型链吗
题记每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，这个对象是包含可以由特定类型的所有实例共享的属性和方法。简单理解：prototype就是通过调用构造函数而创建的那个对象实例的原型对象，可以让所有对象实例共享它所包含的属性和方法。function Person() {}Person.prototype.name = "Helen";Person.prototype.age = 23;Person.prototype.job = "Software Engine
2020-06-06 20:57:30
339
3
原创 ElementUI自定义修改列的内容（一列显示多个文本）
背景ElementUI组件库中的表格，每一列默认只能显示一个文本，但是在项目需求中，需要一列显示两个文本内容，如下图所示：这样应该如何实现呢？????方式一：render-headerElementUI中暴露了render-header属性，我们可以使用这个属性来实现这个功能。<el-table-column prop="address" label="地址" :render-header="renderHeader"></el-table-column>method
2020-05-28 21:27:11
2125
原创 前端项目通过Jenkins部署并持续构建的方法
前言项目在测试以及最终上线的时候，都需要部署到服务器上来供大家访问，但是无论是测试还是线上，都避免不了代码的修改，那么可以持续构建就方便了许多。项目发布流程1）Jenkins创建任务2）服务器上配置NginxJenkins创建任务1）登录Jenkins，创建新任务 2）输入任务名称，选择自由风格软件项目，同时也可以复制已经存在的项目3）开始进行项目配置了到这里，选择保存之后就可以看到自己新建的任务了，Jenkins上的配置也就告一段落了。服务器上配置Nginx1）连接
2020-05-20 14:45:12
568
原创 箭头函数和普通函数的区别，你知道几个呢？
箭头函数是ES6新增的写法，那为什么要增加这样的写法呢？它与普通函数有哪些区别呢？区别一：箭头函数语法更加简洁// 普通函数写法function fn(x) { return function(y) { return x + y; };}// 箭头函数写法let fn = x => y => x + y箭头函数相当于匿名函数，并且简化了函数的定义，像上例代码所示，只包含一个表达式，所以就可以省略{ }和return，但是如果包含多个表达式，是不可以省略{ }.
2020-05-16 09:36:58
332
1
原创 Vue项目优化：从3.19MB到684KB的优化之路
前言项目优化是我们前端开发人员必备的技能，本文以Vue项目为例，详细阐述优化的过程，看看如何使文件大小从3.19MB缩小到684KB，同时欢迎大家提出自己的优化方案。项目技术栈阐述本项目采用Vue前端框架、ElementUI组件库优化之前优化步骤1.新建vue.config.js，添加main-dev.js、main-prod.js文件，设置不同的入口文件利用Webpack打包...
2020-05-05 21:21:13
889
原创 使用icomoon引入字体图标及扩充字体图标的方法
何为字体图标？在说字体图标之前，我们先说一下图片，图片可能让我们的界面更加美丽，但是图片也是有缺点的，比如图片会增加总文件的大小，还会增加额外的HTTP请求，这都会降低网页的性能的。更重要的是图片不能很好的进行缩放，因为放大和缩小可能会使图片失真，所以我们就开始使用字体图标。字体图标可以做出跟图片一样的事情，但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等，而且本身体积更小，但携...
2020-05-03 11:16:32
2182
3
原创 Vue组件传值，你真的都清楚了吗？
Vue为什么要组件化不知道大家有没有思考过这个问题，什么是组件？Vue为什么要是组件化的开发方式呢？其实组件化的思想主要体现在：标准（有统一的规范）、分治（独立完成功能）、重用（可以重复使用）、组合（多个组件组合在一起共同完成一个大的功能）。组件化是Vue的核心思想，主要目的是为了代码重用。组件在编程中的体现：组件通信的方式1.父组件→子组件①属性props我们在用脚手架创建完项目之...
2020-04-23 21:08:22
599
2
原创 看了这篇文章，让你不在害怕前端方法异步的问题
1.同步API与异步API同步API：只有当前API执行完成后，才能继续执行下一个API；异步API：当前API的执行不会阻塞后续代码的执行；区别：①同步API可以从返回值中拿到API执行的结果，但是异步API不可以。②代码执行顺序不同2.异步API都有哪些呢？常见的异步调用有：定时任务（setTimeout），Ajax以及在此基础之上封装的axios等。因为异步API的代码执行顺...
2020-04-19 15:45:58
355
2
原创 JS由浅入深的一道面试题
前言： 前端面试中，JS是一大热点，下面就跟着小编来看一下一道由浅入深的面试题吧。正文： 请说出下面代码的执行结果：for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000);}---------------------揭晓答案了-------------------...
2020-04-09 21:09:19
320
1
原创 JS的this指向及改变this指向的方法
写在前面call、apply与bind都可以用来修改this的指向，但是他们之前有什么区别呢？下面我们来举例子说明一下。this指向请说出下面这个函数的输出结果：var o = {hobby: 'abc'}function test(){ console.log(this.hobby);}test()这个题考查的就是this指向的问题，在本题中，test函数是由windo...
2020-04-05 21:39:34
441
3
原创 新冠病毒后，我们应该做出哪些改变呢？
到目前为止，新冠病毒给人们带来的影响将近三个月了，工厂停工、公司远程办公、学生线上学习，之前繁华的街道现在空无一人，武汉的樱花已经盛开，但是却不复往年的人烟，庆幸的是，对新冠病毒的治疗已经有了很多的好消息，那么在新冠病毒过去之后，我们的生活会发生哪些改变呢？1.实时资讯方面的发展相信大家这段时间都十分关注疫情的消息，笔者也能看到许多软件针对获取实时资讯这一方面也有很大的完善。UC、支付宝等都有...
2020-04-02 20:43:59
2695
原创 前端函数防抖和节流
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2020-03-29 14:17:23
294
1
原创 Node项目区分开发环境和生产环境
一、区分当前的环境 项目会区分开发环境、生产环境与测试环境，那在Node项目中，应该从哪里进行环境的区分呢？ Node项目会读取电脑系统中的环境变量，所以可以在环境变量中新建系统变量NODE_ENV，值为development表示开发环境，值为production表示为生产环境。 那在代码中如何获取环境变量呢？// 获取当前的环境 开发环境 还是生产环境console.log(p...
2020-03-18 20:47:42
2895
原创 Node中实现真分页的两种方式
在项目中，通常会有分页的需求，分页有两种实现方式：真分页和假分页。假设每页要显示10条数据，真分页只查询10条数据，当进行换页的时候，只是查询到对应页数应该显示10条数据；假分页会一次性把所有数据查询出来，然后进行计算本页应该显示的10条数据。方式一所需内容：当前要查询的页数（page）、每一页显示的条数（pagesize）、数据的总数（count）、总页数（total）、开始查询的位置（...
2020-03-16 21:16:30
1114
1
原创 解决同源政策限制的三种方案
何为同源政策产生原因JSONPCORS服务器端的方案withCredentials属性，运行请求携带cookie信息
2020-03-15 19:28:28
547
1
mintui 中的button可以自己控制是否可用吗?
2019-08-15
TA创建的收藏夹 TA关注的收藏夹
TA关注的人