前端
文章平均质量分 80
请针对我谢谢
这个作者很懒,什么都没留下…
展开
-
写个简单的babel插件对前端来说有多难?
一、前置知识在编写一个babel插件前,我们至少需要先大概了解一下babel的工作流程,才能知道编写的组件具体在哪个步骤生效或者会产生哪些副作用。1、Babel原理Babel在对项目代码进行转换为目标代码时,主要经历这些步骤:解析——>转换——>生成解析:主要是用babel内置的AST解析器Babylon,将我们项目的代码转换成一棵抽象语法树(也就是AST),然后对树中的节点进行深度遍历完成整个抽象语法树的生成;转换:可以类比Vue和React中的virtual dom的替换原创 2020-08-30 10:59:34 · 503 阅读 · 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 · 6382 阅读 · 3 评论 -
vue项目中全局消除console的几种途径
在日常开发中,经常免不了在debug或者联调时在函数中使用console打印变量,但是过后总会有人忘记删除,造成在生产环境中依然把这些测试的打印变量输出到控制台的尴尬,容易造成内存泄露。所以最近根据项目需要,找到了两种处理的途径,分别比较一下。一、使用webpack的UglifyJsPlugin配置鉴于目前大多数项目无论是react还是vue,都基本在wepack的配合下开发,那么就少不了...原创 2019-11-24 10:38:39 · 2826 阅读 · 0 评论 -
koa2中使用redis(Typescript版本)
最近公司某个项目涉及到了视频直播的模块,看了网上许多案例都是基于rtmp或hls的方案进行直播的,考虑到日后chrome不再支持flash,于是试着结合MSE和node中间层进行直播流的推送和解析操作,其中就涉及到了node操作redis的环节。一、配置ORM库一般来说,无论服务端还是中间层,针对mysql和mongoDB这种数据库都会使用ORM进行操作,redis也一样,因此在开始使用r...原创 2019-10-25 15:45:18 · 2312 阅读 · 0 评论 -
关于使用elementUI、v-chart开发后台中遇到的问题集合
最近入职新公司,接手的是phper用vue的element-admin和v-chart快速开发的一个物联网管理后台,代码暴力直接,很多模块都没有用到组件化,直接照搬了demo的实例修改,这就无意间增加了我接手的难度,所以趁还有记忆,记录一下自己遇到的坑。一、数据过滤优化前端最常做的就是对后台返回的数据做过滤和整合,那么对于那种对象与数组间关联的数据处理,我们经常会套用一层又一层的循环来达到...原创 2019-04-18 17:25:20 · 1940 阅读 · 3 评论 -
关于Vue开发中的一些踩坑记录(二)
一、导读本文少量涉及踩坑,更多涉及目前在vue+element得开发环境下得一些技巧以及潜在隐患做记录。二、踩坑&技巧(一)善用CommonJS和ES6模块规范基于解藕得原则,很多时候我们会把每个模块得请求封装成一个js文件,然后再把各个js文件统一管理,那么在导入api接口函数时可能会出现以下情况:import { getLoraList } from "@/api/bat...原创 2019-05-30 17:29:36 · 263 阅读 · 0 评论 -
关于Vue中生成pdf的注意事项,内容缺失,样式缺失等
一、背景近日接到一个需求是把element表格内容输出成pdf,在网上找了许多方案,主要是利用html2canvas + jspdf 来实现的比较多,然而一方面由于html2canvas对某些css样式有支持缺陷之外,canvas本身截取的内容也非常多坑,所以借此机会记录一下二、踩坑记录(一)pdf生成的内容缺失,不完整首先,如果你的pdf内容和我一样,到了页面大概1/2或2/3的位置就断...原创 2019-06-12 17:25:32 · 12156 阅读 · 4 评论 -
关于Vue开发中的一些踩坑记录(三)
一、async&await在生命周期中的使用如果你希望在生命周期中做到阻塞异步,ES6中虽然提供了aysnc的语法糖,但是在钩子函数中使用是无法生效的,如:async created(){ await this.getList();}mounted(){ this.format()}//这里依然会是执行完mounted()中的this.format()之后才执行this.g...原创 2019-06-04 16:21:52 · 700 阅读 · 0 评论 -
关于在Vue中使用localStorage的技巧
一、导读关于在Vue中进行状态或数据储存的方案,主要有Vuex,LocalStorage,sessionStorage等几种,但是如果应对的场景是属于那种可以手动刷新,只需第一次加载的页面时,vuex的优势就不明显了,因为一旦刷新就相当于失效,而如果展示的数据非常大,那么sessionStorage也会因为大小的限制问题而被放弃,那么如何能够提高页面的加载体验同时,又能有效地管理本地状态呢?答...原创 2019-06-10 22:56:42 · 5581 阅读 · 0 评论 -
vue实现子组件监听父组件数据状态变化而变化
一、使用背景正常情况下,更多推荐的是利用vuex来进行父子组件间的状态变化监听,毕竟vue是支持单向数据流的,违背了这个特性,一是不好维护,二是耦合性降低了,但是否没有了vuex,子组件就难以主动根据父组件的变化而变化呢?这里探讨一下可行的办法,供大家思考。二、实现原理其实子组件往外传递数据,不外乎借用$emit的方法。试想像一个场景,比如说开发一个定时组件,出发的按钮在子组件上,需求是...原创 2019-07-29 22:35:55 · 12182 阅读 · 0 评论 -
关于Vue开发中的一些踩坑记录(四)
一、关于vuex的dispatch与直接commit的区别vuex既可以通过dispatch一个action来触发commit来调用mutation来改变vuex状态管理的变量,其实也可以直接调用this.$store.commit进行提交直接改变状态,但是其实两者是有区别的。dispatch其实返回的是一个promise对象,它的提交其实是一个异步操作,所以很多时候如果我们某个组件需要实...原创 2019-08-28 17:10:41 · 411 阅读 · 0 评论 -
关于typescript中创建Proxy实例编译报错解决办法
众所周知,vue3.0也将要把数据劫持的实现从Object.defineproperty转向Proxy,同时也提升对typescript的类型支持,但是当我们自己使用typescript去new Proxy()的时候,可能会得到未定义Proxy这个错误警告,下面提供两个办法。解决办法一:查看tsconfig.json文件,一般来说如果没有特别设置过,那么你的compilerOptions中...原创 2019-08-31 15:46:59 · 3144 阅读 · 0 评论 -
前端面试总结——函括80%常见题目(下)
一、 引言配合前面的面试总结一起观看更佳,传送门:前端面试总结——函括80%常见题目(上)二、CSS部分(1)什么是盒子模型?盒子模型分为两种:IE盒子和W3C盒子。W3C盒子包含了Content部分、padding部分、border部分、margin部分;IE盒子则是把content、padding、border统一为Content部分。(2)什么是BFC,它有什么作用?...原创 2019-03-23 15:04:47 · 288 阅读 · 0 评论 -
前端面试总结——函括80%常见题目(上)
引言最近面试,遇到了不少基础题和一些不常见的拓展类问题,直接击穿了自己的误以为滴水不漏的知识基础体系,所以趁着拿到Offer后这段空闲时间做了一点整理,,主要是一面和二面时常见的题目,包括了笔试和面试官的基础问答。一、HTTP部分:(是HTTP,不是html,这个前端面试也是经常遇到的)(1)HTTP协议的主要特点?无状态、无连接、灵活、简单快速;(什么是无状态、无连接,这还可以牵引出...原创 2019-03-22 16:27:46 · 393 阅读 · 0 评论 -
理解padding和margin,等于理解了盒子模型
导读如果你在找有关盒子模型的理解问题,那么花上几分钟来看看,我会用通俗易懂的方法尽可能地把它讲清楚。可能很多人觉得,前端的难点大概就在于JavaScript和各种框架了,但是真正被CSS支配过的人会明白,CSS从使用上,难度甚至比JS还高。尤其是布局中对盒子模型的理解,直接影响整体效率。本文目的最近在开发中遇到了不少CSS的坑,打算记录一下以免再踩;希望用最浅显易懂的方法把盒子模型...原创 2018-12-10 23:33:18 · 2126 阅读 · 0 评论 -
Flex弹性布局——属性总结(一)
前言最近小程序的势头渐渐变猛,一方面有微信逐渐完善的生态社区,另一方面又有百度、阿里甚至头条都开始构建自己的小程序生态。在移动端的兼容需求越来越多,那么提高开发效率自然也就成了前端的需求,Flex布局是个好东西。一、Flex与传统盒子的对比传统布局的核心是盒子模型,依赖 display 属性 + position 属性 + float 属性。可以看出来传统布局非常容易实现像 word 左...原创 2018-12-29 22:44:18 · 1566 阅读 · 0 评论 -
Flex弹性布局——属性总结(二)
Flex不止有“容器属性”来控制底下各个子元素的布局,还有专门用于子元素自身设置的“子元素属性”。紧接着上一篇,继续总结:(二)子元素属性1、order定义子元素的排列顺序。数值越小,排列越靠前,默认为0。假设有以下标签:<div class="total"> <div class="one">apple</div> <div cl...原创 2018-12-31 16:19:35 · 673 阅读 · 0 评论 -
元素拖拽的实现方式及其总结
实现元素拖放的两种方式:传统方式:通过监听鼠标事件,获取元素移动的位置,计算并赋值到目标位置上(依赖position的定位样式);HTML5方式:HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素,必须设置该元素的 draggable 属性为 true一、传统方式:<!DOCTYPE html&g...原创 2019-01-06 11:10:08 · 1884 阅读 · 0 评论 -
关于JS中的预解析机制和作用域链的总结
一、作用域链首先,js是有全局作用域和局部作用域之分的,当js要使用一个变量的时候,该变量有自己的活动范围,出了这个范围就无效,而这个范围就是它的作用域。但是,在一个函数中,往往有些变量是当前作用域不存在的,可是却依然能够从其他作用域调用它,这是为什么呢?一切从作用域链说起。。。(一)作用域作用域有全局作用域、局部作用域之分。通常来说,我们用var来声明一个局部变量。var perso...原创 2019-01-15 11:43:32 · 340 阅读 · 0 评论 -
兼容IE8以下的办法——跨浏览器处理事件
写js最常见的场景就是不断兼容各个版本的浏览器了。其中,又以IE系列最让人心塞,虽然jquery在早期解决了额不少麻烦,但是随着近期jquery逐渐淡出,那么原生的兼容方法就比较重要了。一、事件注册兼容:众所周知,IE8是一个分水岭,除了IE8及其以下的浏览器意外,chrome、Firefox都基本支持以addEventListener方法来注册事件,以removeEventListene...原创 2019-01-28 16:15:06 · 1280 阅读 · 1 评论 -
兼容IE8及其以下的DOM元素方法——低版本浏览器也能用class取DOM
虽然说目前IE9及其以上的就浏览器大部分都支持了两个很爽的dom选择器:querySelector和querySelectorAll,可是总是有些冥顽不灵的项目死活赖在低版本的IE上,这时候你又不得不去兼容它。那么最大的问题就在于,我们很多时候需要根据类名class来取多个DOM对象,那么该怎么办呢?这里给出一个解决方案。一、解决方案唯一的办法就是自己去封装一个跨浏览器的DOM元素获取方法...原创 2019-01-30 13:17:04 · 2180 阅读 · 0 评论 -
关于ES6中的Promise——远离回调地狱
所谓“回调地狱”,相信不少用JS写异步的同学都见识过,一层又一层的函数嵌套,运行是没问题的,可是维护的时候却相当可怕。举个最简单的例子:function join(){ if(true){ function joinAgain(){ return function item(){ return 'done' } } }else{ if(false){...原创 2019-02-16 13:39:16 · 454 阅读 · 0 评论 -
踩坑——关于zepto与jQuery之间的区别分析
一、导语众所周知,其实zepto就是精简版的jquery,在其上面增加了移动端的适配性和相关的事件方法,基本上一个项目在zepto和jquery之间转换是比较平滑的,但是两者之间其实有不少坑需要特别注意,本文就这些坑做了一些分析。二、主要区别兼容性区别:针对移动端程序,Zepto 有一些基本的触摸事件可以用来做触摸屏交互(tap事件、swipe 事件),Zepto 是不支持 IE ...原创 2019-02-18 09:46:07 · 349 阅读 · 0 评论 -
gulp自动化构建的常用功能和组件总结
一、使用gulp的原因gulp是基于Node.js的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成等功能。gulp 和 grunt 非常类似,但是后者对I/O的操作更为频繁,容易产生许多中间态的临时文件,从而影响其他任务最重操作结果,相比之下,g...原创 2019-02-28 12:38:16 · 215 阅读 · 0 评论 -
项目技巧——函数节流
一、前言最近用vue在写一个类商城,无法避免肯定会有商品搜索模块,如果要做搜索建议的显示或自动补全,那么必然需要监听输入内容向后台发送请求。然而每次键入都发送一次请求到后台是非常好性能的,很多时候用户需要看到的是自己输完整个词语才显示结果,这时候就需要我们自己手动去做个节流了。二、函数节流主要用了setTimeout方法,同时结合每次运行前clear一遍来达到节流效果,整个出来的逻辑就是...原创 2019-02-26 10:11:46 · 167 阅读 · 0 评论 -
浅析瀑布流布局及其原理
一、什么是瀑布流很多时候我们会看到一些Vlog网站或者展示图片的网站,它们的图片明明每一张的高度大小都不同,但是却能自动地适应,排成一行一行地展示,并且下拉到底的时候,加载的图片也会自动适应,这就是瀑布流,比如下图。...原创 2018-12-20 09:53:20 · 24586 阅读 · 0 评论