- 博客(50)
- 收藏
- 关注
RSS订阅原创 7分钟教你用时间切片让页面看起来更流畅
一、前置知识首先，在开始介绍时间分片前，很有必要先把浏览器的渲染流程梳理一下，这里面涉及的知识有event loop、渲染帧等知识，下面会简单地介绍。event loop事件循环，这个严格来说其实并不是js语言本身的特性，而是在浏览器这个宿主环境下提供的机制，（因为在node环境下又是另一种事件循环机制了），浏览器虽然是多进程，但是本身每个Tag页就是一个子进程，而每个子进程的js都是以单线程执行的，按道理来说就是代码从上往下执行，中间如果有东西卡住了，那么整个js的执行就会阻塞掉。那么诸如setTi
2020-10-24 09:43:55
2166
原创 写个简单的babel插件对前端来说有多难？
一、前置知识在编写一个babel插件前，我们至少需要先大概了解一下babel的工作流程，才能知道编写的组件具体在哪个步骤生效或者会产生哪些副作用。1、Babel原理Babel在对项目代码进行转换为目标代码时，主要经历这些步骤：解析——>转换——>生成解析：主要是用babel内置的AST解析器Babylon，将我们项目的代码转换成一棵抽象语法树(也就是AST)，然后对树中的节点进行深度遍历完成整个抽象语法树的生成；转换：可以类比Vue和React中的virtual dom的替换
2020-08-30 10:59:34
568
原创 使用ResizeObserver对单个元素进行大小监听
一、API介绍ResizeObserver这是一个能针对某个元素实行大小、位置变化监听的API，是一个类，它提供了一个观察器，该观察器将在每个 resize 事件上调用，目前chrome、safari、fireFox(pc)基本支持。二、常规用法const resizeOb= new ResizeObserver(entries => { for(const entry of entries) { console.log(entry) }})resize
2020-06-23 15:28:39
6640
3
原创 react+less实现antd全局主题在线替换
一、实现原理使用一些外部依赖，在webpack打包前先把antd所有的样式抽离出来到一个独立的css样式表，然后在html模板的<body>顶层中手动引用这个样式来达到样式覆盖的。二、前期准备(一) 安装相关依赖npm i less less-loader antd-theme-generator(二) 配置less-loader以启用变量修改功能在webpack.c...
2020-04-29 11:14:34
2157
2
原创 使用React-Hook创建轻量版的Redux（下）
接着上一篇继续记录一下关于使用useContext和useReducer结合创建的readux使用方法，还不了解如何创建的请参考:使用React-Hook创建轻量版的Redux(上)一、创建connet工具紧接着上一篇的步骤，我们在App.jsx中使用了自己创建的Provider包裹了组件，那么，我们按照平时使用react-redux透传store的参数到子组件的props时，都会使用co...
2020-03-15 10:31:43
319
原创 使用React-Hook创建轻量版的Redux（上）
由于平时工作中使用vue比较多，故而在全局状态管理上必然离不开vuex这个依赖库，使用起来尤为顺手。最近在搭建公司前端的配置中心时，考虑到维护性和可扩展性的需求，想使用typescript作为基础，权衡之下选择了对typescript支持更友好的react作为基础框架，那么除了mobx之外，也尝试了redux，虽说和vuex的原理差不多，但是用起来却十分繁琐，于是看了一下其他大佬的文章，发现结合...
2020-02-29 15:56:42
345
原创 关于在vue2.6+ts技术栈下高德地图API的使用方法
最近公司某个项目用上了vue2.6+typescript的技术栈，整个工程都是用vue-cli3直接生成的，自带了ts-loader来解析ts文件，非常方便。但是对于一些没有没有声明文件的第三方模块，用起来会比较麻烦，过程中，我们用到的高德地图就是其中之一，虽然官方推荐使用vue-amap，但是想追求粒度更细的操作，还是原生的api更为方便，下面来记录一下全程的配置过程。一、引入api文件...
2020-01-20 14:37:43
3438
2
原创 vue项目中全局消除console的几种途径
在日常开发中，经常免不了在debug或者联调时在函数中使用console打印变量，但是过后总会有人忘记删除，造成在生产环境中依然把这些测试的打印变量输出到控制台的尴尬，容易造成内存泄露。所以最近根据项目需要，找到了两种处理的途径，分别比较一下。一、使用webpack的UglifyJsPlugin配置鉴于目前大多数项目无论是react还是vue，都基本在wepack的配合下开发，那么就少不了...
2019-11-24 10:38:39
2943
原创 关于docker容器中使用ffmpeg拉流rtsp报错问题
一、问题背景最近有个业务需求用到node中间层使用ffmpeg对rtsp流转码成MP4推给前端，本地开发基本完成并且能完美运行，但是通过docker部署时发现ffmpeg不能正常使用，根据Log一步步排查，发现可能时端口以及协议问题。docker容器内环境：node v12.0Debian GNU/Linux 9ffmpeg 3.2.10-1~deb9u1二、报错问题通过排查...
2019-10-31 11:43:30
3002
3
原创 koa2中使用redis（Typescript版本）
最近公司某个项目涉及到了视频直播的模块，看了网上许多案例都是基于rtmp或hls的方案进行直播的，考虑到日后chrome不再支持flash，于是试着结合MSE和node中间层进行直播流的推送和解析操作，其中就涉及到了node操作redis的环节。一、配置ORM库一般来说，无论服务端还是中间层，针对mysql和mongoDB这种数据库都会使用ORM进行操作，redis也一样，因此在开始使用r...
2019-10-25 15:45:18
2395
原创 关于typescript中创建Proxy实例编译报错解决办法
众所周知，vue3.0也将要把数据劫持的实现从Object.defineproperty转向Proxy，同时也提升对typescript的类型支持，但是当我们自己使用typescript去new Proxy()的时候，可能会得到未定义Proxy这个错误警告，下面提供两个办法。解决办法一：查看tsconfig.json文件，一般来说如果没有特别设置过，那么你的compilerOptions中...
2019-08-31 15:46:59
3231
原创 关于Vue开发中的一些踩坑记录(四)
一、关于vuex的dispatch与直接commit的区别vuex既可以通过dispatch一个action来触发commit来调用mutation来改变vuex状态管理的变量，其实也可以直接调用this.$store.commit进行提交直接改变状态，但是其实两者是有区别的。dispatch其实返回的是一个promise对象，它的提交其实是一个异步操作，所以很多时候如果我们某个组件需要实...
2019-08-28 17:10:41
471
原创 vue实现子组件监听父组件数据状态变化而变化
一、使用背景正常情况下，更多推荐的是利用vuex来进行父子组件间的状态变化监听，毕竟vue是支持单向数据流的，违背了这个特性，一是不好维护，二是耦合性降低了，但是否没有了vuex，子组件就难以主动根据父组件的变化而变化呢？这里探讨一下可行的办法，供大家思考。二、实现原理其实子组件往外传递数据，不外乎借用$emit的方法。试想像一个场景，比如说开发一个定时组件，出发的按钮在子组件上，需求是...
2019-07-29 22:35:55
12335
原创 关于Vue中生成pdf的注意事项，内容缺失，样式缺失等
一、背景近日接到一个需求是把element表格内容输出成pdf，在网上找了许多方案，主要是利用html2canvas + jspdf 来实现的比较多，然而一方面由于html2canvas对某些css样式有支持缺陷之外，canvas本身截取的内容也非常多坑，所以借此机会记录一下二、踩坑记录(一)pdf生成的内容缺失，不完整首先，如果你的pdf内容和我一样，到了页面大概1/2或2/3的位置就断...
2019-06-12 17:25:32
12545
5
原创 关于在Vue中使用localStorage的技巧
一、导读关于在Vue中进行状态或数据储存的方案，主要有Vuex，LocalStorage，sessionStorage等几种，但是如果应对的场景是属于那种可以手动刷新，只需第一次加载的页面时，vuex的优势就不明显了，因为一旦刷新就相当于失效，而如果展示的数据非常大，那么sessionStorage也会因为大小的限制问题而被放弃，那么如何能够提高页面的加载体验同时，又能有效地管理本地状态呢？答...
2019-06-10 22:56:42
5707
原创 关于Vue开发中的一些踩坑记录(三)
一、async&await在生命周期中的使用如果你希望在生命周期中做到阻塞异步，ES6中虽然提供了aysnc的语法糖，但是在钩子函数中使用是无法生效的，如：async created(){ await this.getList();}mounted(){ this.format()}//这里依然会是执行完mounted()中的this.format()之后才执行this.g...
2019-06-04 16:21:52
794
原创 关于Vue开发中的一些踩坑记录(二)
一、导读本文少量涉及踩坑，更多涉及目前在vue+element得开发环境下得一些技巧以及潜在隐患做记录。二、踩坑&技巧（一）善用CommonJS和ES6模块规范基于解藕得原则，很多时候我们会把每个模块得请求封装成一个js文件，然后再把各个js文件统一管理，那么在导入api接口函数时可能会出现以下情况:import { getLoraList } from "@/api/bat...
2019-05-30 17:29:36
292
原创 关于Vue开发中的一些踩坑记录(一)
前言最近公司在做关于物联网的管理后台，因为v1版本是用php后端渲染的，目前v2版本用前后端分离的方法相当于完全重构了，于是采用了Element-admin + vue的方式作为前端技术栈进行开发，过程中遇到不少坑，有些是因为以前的基础薄弱，有些则是新的知识，所以借此记录一下。一、Vue中的事件代理在原生ES5或ES6开发中，由于经常和dom元素打交道，我们可以很轻易地通过浏览器的冒泡和...
2019-04-25 22:47:20
765
原创 关于使用elementUI、v-chart开发后台中遇到的问题集合
最近入职新公司，接手的是phper用vue的element-admin和v-chart快速开发的一个物联网管理后台，代码暴力直接，很多模块都没有用到组件化，直接照搬了demo的实例修改，这就无意间增加了我接手的难度，所以趁还有记忆，记录一下自己遇到的坑。一、数据过滤优化前端最常做的就是对后台返回的数据做过滤和整合，那么对于那种对象与数组间关联的数据处理，我们经常会套用一层又一层的循环来达到...
2019-04-18 17:25:20
1971
3
原创 前端面试总结——函括80%常见题目（下）
一、 引言配合前面的面试总结一起观看更佳，传送门：前端面试总结——函括80%常见题目（上）二、CSS部分(1)什么是盒子模型？盒子模型分为两种：IE盒子和W3C盒子。W3C盒子包含了Content部分、padding部分、border部分、margin部分；IE盒子则是把content、padding、border统一为Content部分。(2)什么是BFC，它有什么作用？...
2019-03-23 15:04:47
322
原创 前端面试总结——函括80%常见题目（上）
引言最近面试，遇到了不少基础题和一些不常见的拓展类问题，直接击穿了自己的误以为滴水不漏的知识基础体系，所以趁着拿到Offer后这段空闲时间做了一点整理，，主要是一面和二面时常见的题目，包括了笔试和面试官的基础问答。一、HTTP部分：(是HTTP，不是html，这个前端面试也是经常遇到的)（1）HTTP协议的主要特点？无状态、无连接、灵活、简单快速；(什么是无状态、无连接，这还可以牵引出...
2019-03-22 16:27:46
447
原创 webpack4踩坑记录：关于Babel配置报错
在用babel-loader去编译打包js的时候，遇到了如下报错信息：（一）ReferenceError: Unknown option: .presets.这是由于babel 6中在配置.babelrc文件时，用的presets配置为：{ presets:["env"]}而在github的issue区通过查找可知，babel 7以后需要配置为：{ presets:["@ba...
2019-03-09 22:16:54
1857
原创 Vue的双向绑定实现原理浅析——适用于其他MVVM框架
一、前言在Vue.js的使用中，不多不少会触及到数据驱动视图的功能，也就是我们常说的“数据双向绑定”，并且在面试中也经常会被问及它的实现原理，今天打算做个由浅入深的总结，回顾知识。二、MVVM的概念首先需要理解MVVM到底是什么。要说起这个，还得从最早的MVC开始说起，直接上图两者的区别：首先我们看MVC：然后是MVVM：可以发现，实际上MVVM是有MVC演变而来，由原来的 ...
2019-03-07 11:32:06
253
原创 gulp自动化构建的常用功能和组件总结
一、使用gulp的原因gulp是基于Node.js的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成等功能。gulp 和 grunt 非常类似，但是后者对I/O的操作更为频繁，容易产生许多中间态的临时文件，从而影响其他任务最重操作结果，相比之下，g...
2019-02-28 12:38:16
241
原创 项目技巧——函数节流
一、前言最近用vue在写一个类商城，无法避免肯定会有商品搜索模块，如果要做搜索建议的显示或自动补全，那么必然需要监听输入内容向后台发送请求。然而每次键入都发送一次请求到后台是非常好性能的，很多时候用户需要看到的是自己输完整个词语才显示结果，这时候就需要我们自己手动去做个节流了。二、函数节流主要用了setTimeout方法，同时结合每次运行前clear一遍来达到节流效果，整个出来的逻辑就是...
2019-02-26 10:11:46
190
原创 踩坑——关于zepto与jQuery之间的区别分析
一、导语众所周知，其实zepto就是精简版的jquery，在其上面增加了移动端的适配性和相关的事件方法，基本上一个项目在zepto和jquery之间转换是比较平滑的，但是两者之间其实有不少坑需要特别注意，本文就这些坑做了一些分析。二、主要区别兼容性区别：针对移动端程序，Zepto 有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe 事件），Zepto 是不支持 IE ...
2019-02-18 09:46:07
397
原创 关于ES6中的Promise——远离回调地狱
所谓“回调地狱”，相信不少用JS写异步的同学都见识过，一层又一层的函数嵌套，运行是没问题的，可是维护的时候却相当可怕。举个最简单的例子：function join(){ if(true){ function joinAgain(){ return function item(){ return 'done' } } }else{ if(false){...
2019-02-16 13:39:16
494
原创 兼容IE8及其以下的DOM元素方法——低版本浏览器也能用class取DOM
虽然说目前IE9及其以上的就浏览器大部分都支持了两个很爽的dom选择器：querySelector和querySelectorAll，可是总是有些冥顽不灵的项目死活赖在低版本的IE上，这时候你又不得不去兼容它。那么最大的问题就在于，我们很多时候需要根据类名class来取多个DOM对象，那么该怎么办呢？这里给出一个解决方案。一、解决方案唯一的办法就是自己去封装一个跨浏览器的DOM元素获取方法...
2019-01-30 13:17:04
2263
原创 兼容IE8以下的办法——跨浏览器处理事件
写js最常见的场景就是不断兼容各个版本的浏览器了。其中，又以IE系列最让人心塞，虽然jquery在早期解决了额不少麻烦，但是随着近期jquery逐渐淡出，那么原生的兼容方法就比较重要了。一、事件注册兼容：众所周知，IE8是一个分水岭，除了IE8及其以下的浏览器意外，chrome、Firefox都基本支持以addEventListener方法来注册事件，以removeEventListene...
2019-01-28 16:15:06
1311
1
原创 关于JS中的预解析机制和作用域链的总结
一、作用域链首先，js是有全局作用域和局部作用域之分的，当js要使用一个变量的时候，该变量有自己的活动范围，出了这个范围就无效，而这个范围就是它的作用域。但是，在一个函数中，往往有些变量是当前作用域不存在的，可是却依然能够从其他作用域调用它，这是为什么呢？一切从作用域链说起。。。（一）作用域作用域有全局作用域、局部作用域之分。通常来说，我们用var来声明一个局部变量。var perso...
2019-01-15 11:43:32
368
原创 元素拖拽的实现方式及其总结
实现元素拖放的两种方式：传统方式：通过监听鼠标事件，获取元素移动的位置，计算并赋值到目标位置上（依赖position的定位样式）；HTML5方式：HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true一、传统方式：<!DOCTYPE html&g...
2019-01-06 11:10:08
1941
原创 Flex弹性布局——属性总结（二）
Flex不止有“容器属性”来控制底下各个子元素的布局，还有专门用于子元素自身设置的“子元素属性”。紧接着上一篇，继续总结：（二）子元素属性1、order定义子元素的排列顺序。数值越小，排列越靠前，默认为0。假设有以下标签：<div class="total"> <div class="one">apple</div> <div cl...
2018-12-31 16:19:35
701
原创 Flex弹性布局——属性总结（一）
前言最近小程序的势头渐渐变猛，一方面有微信逐渐完善的生态社区，另一方面又有百度、阿里甚至头条都开始构建自己的小程序生态。在移动端的兼容需求越来越多，那么提高开发效率自然也就成了前端的需求，Flex布局是个好东西。一、Flex与传统盒子的对比传统布局的核心是盒子模型，依赖 display 属性 + position 属性 + float 属性。可以看出来传统布局非常容易实现像 word 左...
2018-12-29 22:44:18
1591
原创 浅析瀑布流布局及其原理
一、什么是瀑布流很多时候我们会看到一些Vlog网站或者展示图片的网站，它们的图片明明每一张的高度大小都不同，但是却能自动地适应，排成一行一行地展示，并且下拉到底的时候，加载的图片也会自动适应，这就是瀑布流，比如下图。...
2018-12-20 09:53:20
24726
原创 理解padding和margin，等于理解了盒子模型
导读如果你在找有关盒子模型的理解问题，那么花上几分钟来看看，我会用通俗易懂的方法尽可能地把它讲清楚。可能很多人觉得，前端的难点大概就在于JavaScript和各种框架了，但是真正被CSS支配过的人会明白，CSS从使用上，难度甚至比JS还高。尤其是布局中对盒子模型的理解，直接影响整体效率。本文目的最近在开发中遇到了不少CSS的坑，打算记录一下以免再踩；希望用最浅显易懂的方法把盒子模型...
2018-12-10 23:33:18
2208
原创 最简洁的解释动态语言中的鸭子类型和闭包
常见定义闭包是拥有独立变量（在封闭空间中定义的可以在本地环境中使用的变量）的函数程序语言中的闭包（closure）概念不是由JavaScript最先提出的，从smalltalk开始，闭包就成了编程语言的一个重要概念。几乎所有的知名动态语言（如Perl、python、ruby等）都支持闭包，JavaScript也不例外。鸭子类型是程序设计中的一种类型推断风格，这种风格...
2018-11-27 10:18:06
1460
原创 关于解决爬取拉勾全网遇到的302重定向问题的一些记录
问题背景没想到，拉勾再次进行了一番反爬策略的更新，不再是针对爬取频率、user-agent锁定等方案去反爬了，爬取的难度也增加了一些。今天发现，如果单纯地使用scrapy的crawlspider去做全网爬取，会出现如下问题：就是重定向到登录页面，增加了登录验证才能进行内容访问的逻辑，但接下来却发现并没有这么简单。问题分析分析一：如果单纯只是需要登录才能爬取，那么只需要用selen...
2018-11-18 23:53:26
5986
4
原创 关于scrapy中request过滤问题
问题起因由于scrapy中有自带的spidermiddlewares去过滤我们yield进来的request请求，很多时候会导致爬取数据缺失会直接一部分跳过。常见情景：可以发现，最常见的就是spidermiddlewares.offsite过滤，官方文档也说明了：我收到了 “Filtered offsite request” 消息。如何修复？这些消息(以 DEBUG 所记录)并不...
2018-11-14 12:33:29
1990
原创 django-rest-framework中页面报错__str__ returned non-string (type NoneType)解决办法
调试的API的时候，遇到了如下报错页面：报错的主要原因排查了很久，居然是因为在后台登录了admin账户。。。服了。只要再登进admin后台把账号登出，在打开API调试页面就没问题了...
2018-11-06 11:08:39
733
原创 关于Celery4.x以上在Win10下报错解决办法
报错提示：ValueError: not enough values to unpack (expected 3, got 0)顺着代码路径去找源文件，发现是缺少了一个参数，可是摸索半天不知道该传什么。。。于是把思维转向面向google和面向segmentfault解决问题，最后找到了解决办法：首先，报一下环境：系统：win10python版本：3.6celery版本：4.0发...
2018-11-02 14:46:50
4178
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人