前端培训-中级阶段（37）- vue 2.x 单文件组件
2020-05-25
阅读 2 分钟
2.2k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
36 * N 个工作中常用的 JavaScript 函数片段
2020-05-24
阅读 14 分钟
2.8k最近在思否看到一个文章36个工作中常用的JavaScript函数片段。 身为坑爹面试官（▄█▀█●），怎么能只有一个答案呢？ 数组 Array 数组去重 方案一：Set + ... {代码...} 方案二：Set + Array.from {代码...} 方案三：双重遍历比对下标 {代码...} 方案四：单遍历 + Object 特性 Object 的特性是 Key 不会重复。这里使用 valu...
前端培训-中级阶段（36）- vue 2.x 组件定义和使用、组件间的通信
2020-05-23
阅读 3 分钟
2.3k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端上传前预览文件 image、text、json、video、audio
2020-05-22
阅读 2 分钟
7.5k前天有个需求，上传前需要校验视频长度，然后让我出个 Demo。预览文件 demo其实预览功能实现上都差不多，所以今天我们都来实现一下咯。选择文件一般来说上传常见的操作就三种，单击、拖拽、粘贴。下面我们分别来说一下。input 选择文件我们无法获取用户本地的内容，需要通过 <input> 标签，让用户自己选取。<in...
实现摇一摇功能 - H5 设备运动事件 DeviceMotionEvent DeviceOrientationEvent
2020-05-21
阅读 4 分钟
6.9k新年不是搞了个摇签的功能吗，弹幕效果咱们前面讲过了，今天来说说摇一摇效果 DEMO 基础 DEMO，摇一摇然后可以看红绿色，有颜色代表触发。 完整 DEMO 摇一摇手机，绿色变为黄色，为分数统计 黄色 + 触发 50 阈值时 ，触发 200ms 震动 黄色 + 触发 100 阈值时 ，触发声音效果 设备方向和运动监听 html 5 提供了一些方法在...
实现 input 无内容时缩小居中显示，有内容、有焦点时变长显示
2020-05-20
阅读 1 分钟
3k前两天做了一个搜索中间页，有个 input 的效果挺有意思，准备分享一下。 要求 默认时（无内容、无焦点）显示居中效果。 有焦点或者有内容，input 变长 测试地址 [链接] 实现思路 Vue + css 实现 <input v-model="value" :class="{'focus':value.length}"> 我们通过内容的长度来动态修改 class ，用来实现有内容时...
封装 axios 实现自动重试
2020-05-19
阅读 3 分钟
7.5k为什么写这个题目呢？因为之前写的一个 Node 程序有点小问题，使用的 axios 通过代理请求数据，代理服务器（阿布云）时不时抽风（407、413、503）。
Vue 实现选中、拖拽、排序效果，基于 vuedraggable 实现
2020-05-18
阅读 2 分钟
8.7k今天有个朋友说要做个效果：Vue实现拖拽排序，要有 checked，输出结果是排序后的，要全选，未选中的不能拖动。 其实我之前基于 Sortable 做过一个类似的效果。也给他看过了，没看太明白，他就自己基于 vuedraggable 实现了一下。 正好有点问题给他解决了一下。废话不多说，先上最终效果：Vue 拖拽排序效果 测试地址。下...
Vue 实现弹幕效果
2020-05-17
阅读 2 分钟
17.7k这两天又看到有人问 Vue 如何做弹幕效果。 正好我过年的时候做了个活动，其中用户可以摇签，然后 C 位飘屏展示。 Vue 版本效果地址：[链接]网上原生版本：[链接] 实现原理 弹幕动画效果 动画效果其实很简单，从右到左。 一般来说我们认知的动画流畅度顺序是 css(transform) > css(left) > js。 实现 css 的动画效...
[面试官系列] input、change、keydown、keypress、keyup 触发的时机是？
2020-05-16
阅读 2 分钟
7k我认为这道题是一个挺有意思的题，但是回答正确的面试者很少，今天我来聊一聊。先上 DJ，哦不对先上 DEMO，测试地址：[链接] 事件含义及触发时机 focus、blur 获取焦点 (focus)、失去焦点(blur)。 属于 FocusEvent 接口。 keydown、keypress、keyup keydown 键盘按下，一直按就一直触发 keypress 按下 产生字符值的键时...
前端培训-中级阶段（35）- Vue 语法
2020-05-15
阅读 4 分钟
2.6k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（34）- Vue 生命周期
2020-05-14
阅读 3 分钟
2k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（33）- Vue 介绍、实例
2020-05-13
阅读 3 分钟
2.4k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（32）- set、map、proxy、reflect、generator（2020-01-02期）
2020-05-12
阅读 6 分钟
2.4k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
你真的知道 Cookie 吗？ SameSite 、 Secure 、 HttpOnly
2020-05-11
阅读 3 分钟
16.6k这两天（已经是一个多月前了） SF 上面很多 cookie 的问题，然后还有个 cookie 相关的付费问答。所以咱们今天来这么一节，废话多说点，先说说大体问题方向。
前端获取图片 exif 流信息
2020-05-10
阅读 4 分钟
5.3k看到这里你要懵逼了，我为什么又要写一遍。emmmm...因为我需求变了，直接拿到 exif 部分的数据，然后 base64 提交。（giao） 测试地址
多种方式实现吸顶效果
2020-05-09
阅读 2 分钟
5.2k还是前两天的那个唱歌中间页，上线前发现滚动时候体验不好。 因为之前没有做吸顶效果，搜索内容然后滚下去，没有找到内容需要再手动划上来。 方案一：JS 实现 js 无敌大法好。兼容极佳，但是体验上就比较感人了。这里不过多介绍。 方案二：Fixed 实现 fixed 是基于浏览器的定位，在组件中显的不是很适用。而且在 iOS 也...
分享一波前端二维码生成分案
2020-05-08
阅读 5 分钟
7.3k前端生成二维码我们之前使用的是 QRCode.js，我相信大家首选也都是这个。 然后前两天，来需求了，想要实现二维码中间放 logo 的效果。没办法我就上网调研了一番。 qrcodejs 是不是支持的。 支付宝他们就是生成了一个二维码，然后在中心位置又放了个 logo。dom上看是两层，分离的。 也有一些插件基于 qrcodejs 封装，支持...
基于better-scroll 实现歌词联动功能
2020-05-07
阅读 2 分钟
4.1k前段时间公司要做个歌词标记功能，标记副歌、前奏、无效内容等等。找了找没有找到类似的实现，只能自己实现一把。 功能已经上线了，这里记录一下用到的相关内容。 需求 可以拖动进度条修改播放进度 可以拖动歌词来修改播放进度 播放时滚动歌词 标记功能 测试地址：[链接] 实现 技术栈是 Vue + vant + better-scroll。开...
前端答疑 - v-if 重新渲染导致的 Bug
2020-05-06
阅读 2 分钟
11.9k问题是这样的，有个页面它里面有两个组件 1活动组件、2搜索组件，然后活动组件里面有个评论留言的功能，测试同学发现组件切换之后评论被清空了。问题大体就这样。因为活动不是我做的，我只负责排查问题，所以我也是听别人的反馈来分析问题。
前端er 使用 Node 爬数据
2020-03-31
阅读 3 分钟
3.7k其实抓取数据对于前端来说，就是 ajax 请求一个接口，只不过返回值有 text/html（早期 XML 之类的），application/json（目前工作中都是这个类型的） 两种。有时候为了一些简单的数据分析，我就直接在控制台请求数据。
[面试官系列]数组中查找元素下标
2020-03-30
阅读 1 分钟
4.4k面试题1：如何在数组中查找元素的下标。API 和其他实现方案都可以。 答案1：面试题不难吧？基本上我面试过的人，都能说上来用 indexOf 实现，但是我这种魔鬼还会追问的。 我先来介绍一下 indexOf 的入参 {代码...} 再来说一下 indexOf 的返回值。返回值为数值类型，返回值为查找到的元素的下标，如果没找到返回-1。（前...
前端获取图片exif信息
2020-03-19
阅读 1 分钟
9.5k对又是我，每天都有新的需求。 这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。 不用考虑服务端做，他们肯定是不做。 pc、android、ios 都支持了，现在就缺少 web 这边上传的图片了。 废话不对说，上测试地址：[链接] 获取图片宽高 {代码...} URL.createObjectURL 可以把 input 选择的文件转换为一个 url。...
前端使用自定义字体方案
2020-03-18
阅读 2 分钟
7k工作中我相信大家都遇到过设计要求使用一些奇奇怪怪字体的需求，然后因为字体文件太大，选择切图。 我这个需求就厉害了，用户发的文章可以选择字体。这文章中可以出现的字就太多了，显然上个方案就不合适了，那我们是这么做的呢？ 废话不多说，先上 demo，别问我 demo 是谁。 接口地址：[链接] 页面地址： [链接] 实现方...
前端答疑-换行如何输出在页面上
2020-03-17
阅读 2 分钟
5.4k工作中我们有下面几种方式收集用户输入的内容 input 输入框，单行，整体样式，纯文本。 textarea 输入框，多行，整体样式，纯文本。 contentEditable，多行，独立样式，富文本。 其他富文本编辑器，多行，独立样式，富文本。 在不想使用那么重的富文本编辑器的情况下，又想可以换行，那么 textarea 就是我们的不二之选。...
BUG排查 - koa2 中 koa-body 和 koa-bodyparser 共用时 POST 会出现超时
2020-03-16
阅读 2 分钟
4k周日有个小伙加我，帮他排查了一下问题。正好记录一下。 前端是：axios后台是：koa2问题：axios 发 post 请求不携带参数请求正常，携带参数就无响应。 因为我也不知道小伙那些说的是真的，那些是假的，那我们就一点一点排查，我大致定位问题为以下几个方向。 参数携带不正确，axios 发过去的数据是错的，比如说被 {id: 1...
前端安全之 xss 攻击
2020-03-15
阅读 3 分钟
6.1k前段时间公司网页被 xss 搞了一下，微信把域名封了，通宵搞了好几天。 这两天把公司好几年来的代码都改了一遍，这工作丧心病狂。 什么是 xss？ XSS 攻击指通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的代码。 危害有什么？ 跳转到广告页面，页面注入广告等等。 导致公司域名被其他平台拉黑，...
横竖屏检测 orientation resize matchMedia
2020-03-14
阅读 2 分钟
3.8k这在家办公也不让闲着点。虽然说需求提出来了，但是我们身为一个前端er，还是要有自己的想法呀，我们要统计一波数据看看到底有多少人在横屏使用我们的产品。
NodeJS中配置请求代理服务器
2020-03-14
阅读 3 分钟
15.4k先来说说场景，之前我写过一个小爬虫，node写的，一直都是当做玩具来用的。某天不知道谁在刷我的接口，导致被拉黑了。大佬让我换个机器重新装一下，但是因为我的里面用到了一个图片处理库 sharp 装起来很烦，然后就研究研究能不能搞个代理服务器。