个人心得
请针对我谢谢
这个作者很懒,什么都没留下…
展开
-
7分钟教你用时间切片让页面看起来更流畅
一、前置知识首先,在开始介绍时间分片前,很有必要先把浏览器的渲染流程梳理一下,这里面涉及的知识有event loop、渲染帧等知识,下面会简单地介绍。event loop事件循环,这个严格来说其实并不是js语言本身的特性,而是在浏览器这个宿主环境下提供的机制,(因为在node环境下又是另一种事件循环机制了),浏览器虽然是多进程,但是本身每个Tag页就是一个子进程,而每个子进程的js都是以单线程执行的,按道理来说就是代码从上往下执行,中间如果有东西卡住了,那么整个js的执行就会阻塞掉。那么诸如setTi原创 2020-10-24 09:43:55 · 1932 阅读 · 0 评论 -
写个简单的babel插件对前端来说有多难?
一、前置知识在编写一个babel插件前,我们至少需要先大概了解一下babel的工作流程,才能知道编写的组件具体在哪个步骤生效或者会产生哪些副作用。1、Babel原理Babel在对项目代码进行转换为目标代码时,主要经历这些步骤:解析——>转换——>生成解析:主要是用babel内置的AST解析器Babylon,将我们项目的代码转换成一棵抽象语法树(也就是AST),然后对树中的节点进行深度遍历完成整个抽象语法树的生成;转换:可以类比Vue和React中的virtual dom的替换原创 2020-08-30 10:59:34 · 516 阅读 · 0 评论 -
使用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 · 6454 阅读 · 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 · 2114 阅读 · 2 评论 -
关于在vue2.6+ts技术栈下高德地图API的使用方法
最近公司某个项目用上了vue2.6+typescript的技术栈,整个工程都是用vue-cli3直接生成的,自带了ts-loader来解析ts文件,非常方便。但是对于一些没有没有声明文件的第三方模块,用起来会比较麻烦,过程中,我们用到的高德地图就是其中之一,虽然官方推荐使用vue-amap,但是想追求粒度更细的操作,还是原生的api更为方便,下面来记录一下全程的配置过程。一、引入api文件...原创 2020-01-20 14:37:43 · 3353 阅读 · 2 评论 -
vue项目中全局消除console的几种途径
在日常开发中,经常免不了在debug或者联调时在函数中使用console打印变量,但是过后总会有人忘记删除,造成在生产环境中依然把这些测试的打印变量输出到控制台的尴尬,容易造成内存泄露。所以最近根据项目需要,找到了两种处理的途径,分别比较一下。一、使用webpack的UglifyJsPlugin配置鉴于目前大多数项目无论是react还是vue,都基本在wepack的配合下开发,那么就少不了...原创 2019-11-24 10:38:39 · 2878 阅读 · 0 评论 -
koa2中使用redis(Typescript版本)
最近公司某个项目涉及到了视频直播的模块,看了网上许多案例都是基于rtmp或hls的方案进行直播的,考虑到日后chrome不再支持flash,于是试着结合MSE和node中间层进行直播流的推送和解析操作,其中就涉及到了node操作redis的环节。一、配置ORM库一般来说,无论服务端还是中间层,针对mysql和mongoDB这种数据库都会使用ORM进行操作,redis也一样,因此在开始使用r...原创 2019-10-25 15:45:18 · 2338 阅读 · 0 评论 -
关于typescript中创建Proxy实例编译报错解决办法
众所周知,vue3.0也将要把数据劫持的实现从Object.defineproperty转向Proxy,同时也提升对typescript的类型支持,但是当我们自己使用typescript去new Proxy()的时候,可能会得到未定义Proxy这个错误警告,下面提供两个办法。解决办法一:查看tsconfig.json文件,一般来说如果没有特别设置过,那么你的compilerOptions中...原创 2019-08-31 15:46:59 · 3173 阅读 · 0 评论 -
vue实现子组件监听父组件数据状态变化而变化
一、使用背景正常情况下,更多推荐的是利用vuex来进行父子组件间的状态变化监听,毕竟vue是支持单向数据流的,违背了这个特性,一是不好维护,二是耦合性降低了,但是否没有了vuex,子组件就难以主动根据父组件的变化而变化呢?这里探讨一下可行的办法,供大家思考。二、实现原理其实子组件往外传递数据,不外乎借用$emit的方法。试想像一个场景,比如说开发一个定时组件,出发的按钮在子组件上,需求是...原创 2019-07-29 22:35:55 · 12231 阅读 · 0 评论 -
关于在Vue中使用localStorage的技巧
一、导读关于在Vue中进行状态或数据储存的方案,主要有Vuex,LocalStorage,sessionStorage等几种,但是如果应对的场景是属于那种可以手动刷新,只需第一次加载的页面时,vuex的优势就不明显了,因为一旦刷新就相当于失效,而如果展示的数据非常大,那么sessionStorage也会因为大小的限制问题而被放弃,那么如何能够提高页面的加载体验同时,又能有效地管理本地状态呢?答...原创 2019-06-10 22:56:42 · 5628 阅读 · 0 评论 -
关于Vue开发中的一些踩坑记录(三)
一、async&await在生命周期中的使用如果你希望在生命周期中做到阻塞异步,ES6中虽然提供了aysnc的语法糖,但是在钩子函数中使用是无法生效的,如:async created(){ await this.getList();}mounted(){ this.format()}//这里依然会是执行完mounted()中的this.format()之后才执行this.g...原创 2019-06-04 16:21:52 · 729 阅读 · 0 评论 -
关于Vue中生成pdf的注意事项,内容缺失,样式缺失等
一、背景近日接到一个需求是把element表格内容输出成pdf,在网上找了许多方案,主要是利用html2canvas + jspdf 来实现的比较多,然而一方面由于html2canvas对某些css样式有支持缺陷之外,canvas本身截取的内容也非常多坑,所以借此机会记录一下二、踩坑记录(一)pdf生成的内容缺失,不完整首先,如果你的pdf内容和我一样,到了页面大概1/2或2/3的位置就断...原创 2019-06-12 17:25:32 · 12336 阅读 · 5 评论 -
前端面试总结——函括80%常见题目(下)
一、 引言配合前面的面试总结一起观看更佳,传送门:前端面试总结——函括80%常见题目(上)二、CSS部分(1)什么是盒子模型?盒子模型分为两种:IE盒子和W3C盒子。W3C盒子包含了Content部分、padding部分、border部分、margin部分;IE盒子则是把content、padding、border统一为Content部分。(2)什么是BFC,它有什么作用?...原创 2019-03-23 15:04:47 · 299 阅读 · 0 评论 -
前端面试总结——函括80%常见题目(上)
引言最近面试,遇到了不少基础题和一些不常见的拓展类问题,直接击穿了自己的误以为滴水不漏的知识基础体系,所以趁着拿到Offer后这段空闲时间做了一点整理,,主要是一面和二面时常见的题目,包括了笔试和面试官的基础问答。一、HTTP部分:(是HTTP,不是html,这个前端面试也是经常遇到的)(1)HTTP协议的主要特点?无状态、无连接、灵活、简单快速;(什么是无状态、无连接,这还可以牵引出...原创 2019-03-22 16:27:46 · 414 阅读 · 0 评论 -
django中,关于session的通用设置
最近发现session的知识有点脱节了,默认设置愣是搞半天,看来忘了不少。今天把一些通用设置贴上来,以备随时回顾。配置文件中设置默认操作(通用配置): SESSION_COOKIE_NAME = "sessionid" # Session的cookie保存在浏览器上时的key,即:sessionid=随机字符...原创 2018-09-07 10:05:43 · 2531 阅读 · 0 评论 -
django Form组件用法(转载)
详情请看:链接地址内置form组件的字段也挺多的,全部应用倒是不可能,就放在博客里需要的时候去找“轮子”吧转载 2018-09-10 23:19:38 · 140 阅读 · 0 评论 -
django-rest-framework中页面报错__str__ returned non-string (type NoneType)解决办法
调试的API的时候,遇到了如下报错页面:报错的主要原因排查了很久,居然是因为在后台登录了admin账户。。。服了。只要再登进admin后台把账号登出,在打开API调试页面就没问题了...原创 2018-11-06 11:08:39 · 718 阅读 · 0 评论 -
关于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 · 4091 阅读 · 0 评论 -
最简洁的解释动态语言中的鸭子类型和闭包
常见定义闭包是拥有独立变量(在封闭空间中定义的可以在本地环境中使用的变量)的函数程序语言中的闭包(closure)概念不是由JavaScript最先提出的,从smalltalk开始,闭包就成了编程语言的一个重要概念。几乎所有的知名动态语言(如Perl、python、ruby等)都支持闭包,JavaScript也不例外。鸭子类型是程序设计中的一种类型推断风格,这种风格...原创 2018-11-27 10:18:06 · 1413 阅读 · 0 评论 -
Flex弹性布局——属性总结(一)
前言最近小程序的势头渐渐变猛,一方面有微信逐渐完善的生态社区,另一方面又有百度、阿里甚至头条都开始构建自己的小程序生态。在移动端的兼容需求越来越多,那么提高开发效率自然也就成了前端的需求,Flex布局是个好东西。一、Flex与传统盒子的对比传统布局的核心是盒子模型,依赖 display 属性 + position 属性 + float 属性。可以看出来传统布局非常容易实现像 word 左...原创 2018-12-29 22:44:18 · 1568 阅读 · 0 评论 -
关于JS中的预解析机制和作用域链的总结
一、作用域链首先,js是有全局作用域和局部作用域之分的,当js要使用一个变量的时候,该变量有自己的活动范围,出了这个范围就无效,而这个范围就是它的作用域。但是,在一个函数中,往往有些变量是当前作用域不存在的,可是却依然能够从其他作用域调用它,这是为什么呢?一切从作用域链说起。。。(一)作用域作用域有全局作用域、局部作用域之分。通常来说,我们用var来声明一个局部变量。var perso...原创 2019-01-15 11:43:32 · 350 阅读 · 0 评论 -
兼容IE8以下的办法——跨浏览器处理事件
写js最常见的场景就是不断兼容各个版本的浏览器了。其中,又以IE系列最让人心塞,虽然jquery在早期解决了额不少麻烦,但是随着近期jquery逐渐淡出,那么原生的兼容方法就比较重要了。一、事件注册兼容:众所周知,IE8是一个分水岭,除了IE8及其以下的浏览器意外,chrome、Firefox都基本支持以addEventListener方法来注册事件,以removeEventListene...原创 2019-01-28 16:15:06 · 1288 阅读 · 1 评论 -
兼容IE8及其以下的DOM元素方法——低版本浏览器也能用class取DOM
虽然说目前IE9及其以上的就浏览器大部分都支持了两个很爽的dom选择器:querySelector和querySelectorAll,可是总是有些冥顽不灵的项目死活赖在低版本的IE上,这时候你又不得不去兼容它。那么最大的问题就在于,我们很多时候需要根据类名class来取多个DOM对象,那么该怎么办呢?这里给出一个解决方案。一、解决方案唯一的办法就是自己去封装一个跨浏览器的DOM元素获取方法...原创 2019-01-30 13:17:04 · 2202 阅读 · 0 评论 -
项目技巧——函数节流
一、前言最近用vue在写一个类商城,无法避免肯定会有商品搜索模块,如果要做搜索建议的显示或自动补全,那么必然需要监听输入内容向后台发送请求。然而每次键入都发送一次请求到后台是非常好性能的,很多时候用户需要看到的是自己输完整个词语才显示结果,这时候就需要我们自己手动去做个节流了。二、函数节流主要用了setTimeout方法,同时结合每次运行前clear一遍来达到节流效果,整个出来的逻辑就是...原创 2019-02-26 10:11:46 · 172 阅读 · 0 评论 -
django 缓存cache配置注意事项
最近在个人项目优化的过程中,发现自己重新踩了一下缓存配置的坑,转念一想索性在博客上留存一份资料以备日后随时反查,也给各位正在学习或使用django的朋友提个醒。配置缓存CACHES 关于配置这块,目前百度Google差不多都清一色的是复制粘贴呢,就没有人发现有时候settings里面根本没有CACHES这个配置么?搞得很多刚学习的小伙伴找半天都不知道可以自己创建。。。没错!如果...原创 2018-09-08 13:10:54 · 4924 阅读 · 0 评论