前端笔记
何其涛
我的qq:459069283 有什么问题可以加我,一起讨论学习!
展开
-
兼容所有浏览器的js简单手动复制粘贴文本方法
兼容所有浏览器的js简单手动复制粘贴文本方法因为比较简单所以就简短说三步:创建一个不显示在页面上的textarea/input标签将需要复制的值设置到标签的value属性上获取标签dom调用select方法选中所有内容,调用document.execcommand('copy')执行复制完事!其实就是模拟手动选中复制的操作代码://html<textarea value=...原创 2020-04-09 20:00:51 · 1192 阅读 · 0 评论 -
js的eventloop中的宏任务和微任务理解,实现对setTimout定时器补偿
js的eventloop中的宏任务和微任务理解,实现对setTimout定时器补偿写有关宏任务和微任务的优秀博文有很多已经差不多讲的很详细,写这边博客并不是要做一个补充, 大略只是对自己学习理解做一个记录补充,同时进行分享。有助于输出推动学习。外文链接:https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/...原创 2020-03-26 20:12:47 · 526 阅读 · 0 评论 -
观察者及发布订阅模式区别详解及js实现
观察者模式和发布订阅模式的概念在项目开发中很常见 ,这里记录一下自己的理解,详解一下两者的区别的并分别用代码实现来直观体现两者区别,便于日后温故知新观察者模式 观察者模式别名也叫发布-订阅模式,但是发布订阅模式其实只是观察者模式中的一种具体的实现方式通常我们所说的观察者和发布订阅模式的区别,其实只是把观察者模式的一种原始的实现方式和现在的流行的发布订阅实现方式对比)。 好了,现在先...原创 2020-03-19 21:13:17 · 816 阅读 · 0 评论 -
算法导论 - 红黑树及红黑树平衡的详细解析个人理解
算法导论 - 红黑树及红黑树平衡的详细解析个人理解红黑树一种数据结构,效率极高,插入和删除的操作的时间复杂度都是logn,虽然红黑树对于前端来说基本很少用到,但是作为一个目标是全栈的程序员来说,算法的学习是很必要的,so … 图是"借的",字都是自己打的,也依据了自己的理解数组 链表数组特点是元素在内存中紧挨着存储,因而优点是定位快(O(1)),缺点是插入删除慢(O(n));而链表则不...原创 2020-01-17 17:58:56 · 1250 阅读 · 2 评论 -
常用的正则汇总(身份证,手机号,车牌,账号等)
常用的正则汇总(身份证,手机号,车牌,账号等)这里就汇总一下项目中有用到的一些常用的正则,不断更新。。。身份证/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/手机号/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3...原创 2018-12-11 16:23:42 · 394 阅读 · 0 评论 -
ant design pro 详情页面包屑保持路由层级并显示,菜单不显示
ant design pro 详情页面包屑保持路由层级并显示,菜单不显示新项目中使用antd-pro框架,所以接下来会写一些关于antd-pro的踩坑详情页(修改页/添加页)和列表页在路由层级上通常是处在同一层的,这样可以渲染在同一位置,但是在面包屑的展示上给用户的感觉是详情页应该在列表页的下面,在antd-pro项目中并没有直接的方法,所以需要对menu.js文件做一下修改,下面是实现:...原创 2019-01-10 17:16:47 · 15313 阅读 · 2 评论 -
npm换淘宝源及安装cnpm
npm换淘宝源及安装cnpm换源是为了使用国内的镜像资源来取代从国外下载资源,速度上可以大大提升,虽然是很简单的操作,但是为了避免每次换源都需要从去网上找,故在此记下来安装cnpm使用淘宝源(方便安装完即用,但是存在有的资源cnpm无法下载 ,npm可以)npm install -g cnpm --registry=https://registry.npm.taobao.org命令行直...原创 2019-01-02 14:56:57 · 4425 阅读 · 0 评论 -
antd-pro 配置请求代理
antd-pro 配置请求代理新项目中使用antd-pro框架,所以接下来会写一些关于antd-pro的踩坑antd-pro中用的是fetch来实现http请求,封装成功一个request方法,在本地联调的时候需要该代理,通过本地服务器来请求后端服务,在部署到线上时需要使用nginx做反向代理需要在config/config.js 添加下面代码proxy: { '/api/': { ...原创 2019-01-07 20:22:17 · 12501 阅读 · 7 评论 -
ant design 表单数字校验失效问题
ant design 表单数字校验失效问题ant design 的表单字段校验有很多细致得了类型校验, 就是用rule内的type属性设置的其中的值有:string: Must be of type string. This is the default type.number: Must be of type number.boolean: Must be of type boolea...原创 2019-01-21 20:30:30 · 7036 阅读 · 3 评论 -
sessionStorage多标签页共享
sessionStorage多标签页共享sessionStorage在不同页面上不是同步共享的,但是我们有时候会将token或者一些登录凭证记录在token里(你肯定要问为什么后端不把token直接写到cookie里,因为他懒…),所以这里就写一下怎么将不同页面的sessionStorage同步更新sessionStorage和localStorage区别localStorage的生命周...原创 2019-01-18 11:35:39 · 14030 阅读 · 1 评论 -
小程序表单校验即wxVaildate使用
小程序表单校验即wxVaildate使用在小程序里面遇到表单校验的需求,如果一个用if…else 判断是十分麻烦的所以用了wxVaildate插件,用起来很方便的,记录一下wxVaildate参考jQuery Validate开发的一个针对小程序的表单校验插件使用使用的时候直接在js里引用就行了import WxValidate from '../../utils/WxValida...原创 2018-12-20 21:52:26 · 620 阅读 · 0 评论 -
Notification 浏览器桌面通知API使用理解及心得
Notification 浏览器桌面通知API使用理解及心得之前的项目中用到notification的桌面通知api,这里写一下自己的使用理解,虽然不是很麻烦,这里记录一下以防下次再去找。notification是通过向浏览器授权,向桌面推送通知的api,因为类似于一些重要消息,可能会被用户忽略,发起桌面通知更为明显,在这种业务场景下,我们就可以使用notificationNotific...原创 2018-12-19 21:21:28 · 1160 阅读 · 0 评论 -
小程序的登陆流程个人详解
小程序的登陆流程个人分析最近开发了小程序,小程序感觉有很多坑,比方说授权方式从主动推送现在改为了必须主动点击,还有类似于无法进行双向绑定,还有表单校验的问题,这里先写一下我认为比较关键的小程序的 登陆流程下面这张图是小程序官方文档登陆流程图光看这张图理解起来其实是有点难以理解的这里我先分析一下我在做小程序的时候登陆的流程登陆流程 首先我们手动触发wx.login()这个内置...原创 2018-12-04 20:13:51 · 2554 阅读 · 0 评论 -
dva umi roadhog区别和个人理解
dva umi roadhog区别和个人理解因为最近再写react的项目 ,所以这三个都有学习,因为都属于阿里系的技术栈而且都是用于react项目搭建的,通常是组合在一起的。roadhog关于roadhog的介绍好像唯一的介绍文章的就是github上作者写的一篇介绍文章链接因为roadhog本来就很简单,只有三个命令server(启动服务),build(构建项目),test(测试)。...原创 2018-12-04 18:52:32 · 5232 阅读 · 0 评论 -
图片居中等比缩放且填充div
图片居中等比缩放且填充div因为经常会有这种需求,需要等比将图片缩放并填充满整个div的需求,但是前端本身图片并没有这种属性设置,所以要进行特别处理这种图片的展示方式再ios中叫Aspect fit,在安卓中叫 crop center 都是可以直接设置的,而再css里只能用特殊处理一般情况我们展示图片的时候,如果需要将图片设置一定比例的展示,可能会用div包裹,然后将图片设置最大宽度...原创 2018-11-29 16:10:15 · 3866 阅读 · 1 评论 -
Axios代理配置及封装响应拦截处理
Axios代理配置及响应拦截处理Axios是vue官方推荐的异步处理方案,所以在几个vue的项目里,都用到了,所以这里写一下Axios的代理配置和响应拦截处理代理配置代理主要是为了解决跨域问题,但是现在常规解决跨域的方式,就是让后端配置响应头,使用cors方式跨域前端基本不需要任何处理。但是有时候后端比较懒,就需要前端通过代理请求完成跨域,其实就是相当于在本地开了一个服务器,通过服务器...原创 2018-11-29 11:55:18 · 1944 阅读 · 0 评论 -
对于redux-saga中 actionChannel 缓存器的个人理解
对于redux-saga中 actionChannel 缓存器的个人理解官方对于actionChannel 的解释和例子都比较奇怪,很容易让人误以为actionChannel 的作用是阻塞流程,让action可以一个一个的处理。其实并不是这样理解的。actionChannelactionChannel 的作用更像是为了防止在阻塞过程中导致中间的的action被忽略,所以要创建一个缓存器,...原创 2018-11-14 23:00:09 · 877 阅读 · 0 评论 -
redux-saga中 take,takeEvery,takeLatest区别,自己的直白理解
redux-saga中 take,takeEvery,takeLatest区别,自己的直白理解redux-saga 的时候,对于take,takeEvery,takeLatest的区别比较迷惑,官方的解释很难理解,然后自己通过写了例子和看了一些解释,下面写一下我的直白理解先看看官方文档对于take,takeEvery区别的解释在 takeEvery 的情况中,被调用的任务无法控制何时被...原创 2018-11-14 22:44:47 · 15615 阅读 · 1 评论 -
Ant Design的表单onChange阶段不更新踩坑,以及修改表单值方法
Ant Design的表单onChange踩坑新项目中使用antd-pro框架,所以接下来会写一些关于antd-pro的踩坑在写项目中,中有一个需求是在某个表单元素变化时,出发表单提交,但是发现一个问题是,将方法绑定onChange的时候发现此时通过表单方法获取的值还没有更新,不知道这个属于一个bug,还是在这个阶段本来就没有变更表单的values ,所以我是在onChange绑定的方法中手动...原创 2019-01-08 18:46:06 · 37335 阅读 · 8 评论 -
antd-pro中loading状态的dva-loading使用
antd-pro中loading状态的dva-loading使用新项目中使用antd-pro框架,所以接下来会写一些关于antd-pro的踩坑传统写loading状态的方法是,在异步请求的开始的时候开启loading,在异步请求的结束关闭loading,这样的写法是比较麻烦的,因为这一部分的操作都是比较一致的,在ant Design pro中就直接用了dva-loading插件,封装的很...原创 2019-01-08 20:34:08 · 11823 阅读 · 2 评论 -
直白理解javascript中函数柯里化,偏函数,反函数柯里化
直白理解javascript中函数柯里化,偏函数,反函数柯里化因为之前有写过一篇理解函数式编程的,但是讲到函数式编程就必须提到函数柯里化, 函数柯里化是函数式编程中很常见的写法,这篇也是看了很多篇大佬的文章综合理解,下面是个人的一写简洁,希望能够更直白的理解上面这些定义函数柯里化定义官方定义: 是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受...原创 2019-03-22 15:01:15 · 345 阅读 · 0 评论 -
vue数据绑定中defineProperty清晰解析和set和get使用,不懂就问
defineProperty清晰解析和set和get使用,不懂就问都知道vue中的数据绑定就是用object.defineProperty以及其中的set和get实现的,所以理解vue的内部原理之前就需要理解object.defineProperty.因为很多关于这个的解释博客都写得很难理解,所以自己写一下自己的理解.概念Object.defineProperty(obj, prop, ...原创 2019-03-18 22:04:10 · 2128 阅读 · 0 评论 -
兼容所有浏览器, 关闭记住密码的input的自动填充功能
当你在登陆页面选择了记住密码,会导致在后面修改密码的输入框中,直接自动填充密码.想要古娜彼自动填充.方法一:在表单中创建一个不显示的input且type等于password<input type="password" style="position: absolute;z-index: -999">由于密码直接填充到这个input中所以不会在真正的input上显示方法二...原创 2019-03-18 19:07:14 · 7462 阅读 · 4 评论 -
小程序get/post/上传文件请求用promise封装
小程序的wx.request没有对传过来的请求进行处理,对于各种状态进行处理,所以需要在代码里封装,这里是直接写app.jsl里的,get和post的封装.首先写通用headerheader header: { 'app_code': "DAFENGBAODAI", 'client': 'miniProgram', 'imei': 'idfv', ...原创 2019-03-07 18:45:28 · 1180 阅读 · 0 评论 -
ant design/react 利用setTimeout解决表单还未加载,动态校验的问题
ant design/react 利用setTimeout解决表单还未加载,动态校验的问题在写项目中出现一个问题,在表单中用一个A控件控制另一个B控件显示隐藏,当A控件切换的时候,同时校验B控件,这时候会出现B控件内就算有初始值也会检验报错, 因为当校验代码执行的时候,B控件还没有加载出来,因为两个操作都在同一个eventloop里.handleVisible() { this.set...原创 2019-03-05 18:59:32 · 1449 阅读 · 0 评论 -
JSON对象转成formData对象,formData对象转成JSON对象
在向后端请求时,如果上传的数据里存在file文件对象,需要用到表单提交,这时候我们需要将JSON对象,转成formData对象,具体见代码 Object.keys(params).forEach((key) =&amp;amp;gt; { formData.append(key, params[key]); });...原创 2019-02-14 15:53:16 · 29625 阅读 · 1 评论 -
React中的函数式编程及函数式编程定义的深刻解读
React中的函数式编程及函数式编程定义的深刻解读因为一直有了解函数式编程,也知道React是比较遵循函数式编程设计模式的框架,但是一直对函数是编程的定义和理解不是很清楚,到底函数式编程有上面优势,React如何遵循函数是编程,这些都是需要去仔细推敲的,可以让以后的代码写的更为优雅和合理什么是函数式编程函数是编程是一种设计思想,就像面向对象编程也是一种设计思想。函数式编程总的来说就是用...原创 2019-02-13 22:35:04 · 4433 阅读 · 3 评论 -
sessionStorage与localStorage存储的数据问题
今天发现一个问题,sessionStorage存储字符串的时候是直接存储的,localStorage存储数据的时候会自动将字符串再使用一次JSON.stringfy() 导致存的时候会加上双引号,这样如果sessionStorage和localStorage都存储了同一个字段的情况下就会出现问题。所以最好的解决方法就是,sessionStorage再存储的时候要手动使用JSON.stringfy...原创 2019-01-29 11:07:34 · 1258 阅读 · 0 评论 -
超级好用的图片预览查看插件Viewer及在react,vue,jquery以及原生js的使用方法,详解react复用单个组件的写法
因为项目种常查看大图预览的需求,如果是自己写的用模态框写的查看大图,只是简单看看还可以,如果需要旋转,放大缩小,反转等等操作,就会很麻烦。也看过很多用来查看大图的插件,viewer真的是功能最为全面的,而且在各个框架中均有对应的封装插件,使用起来也很方便,所以这里写一下各个框架内viewer的使用方法。下面之说直接使用的方法,具体细节的options可以查看文档,下面也有文档连接Viewe...原创 2019-02-02 15:50:07 · 14745 阅读 · 11 评论 -
Fetch API基于Promise封装的Http请求接口详解
fetch接口是用来解决Ajax(xhr)在写法和调用上的不合理和开放的js接口,已经在很多项目上使用,运行良好,取代ajax也只是时间问题,虽然fetch还有一些功能不全面但是使用上已经没有什么问题,所以我写下来记录一下自己的学习两者对比Ajax请求var xhr = new XMLHttpRequest();xhr.open('GET', url);xhr.responseTyp...原创 2019-01-16 20:47:25 · 1792 阅读 · 0 评论 -
ant design pro 修改request请求方法,修改为符合实际业务接口请求的数据处理方式
ant design pro 修改request请求方法,修改为符合实际业务接口请求的数据处理方式ant design pro中对fetch进行了封装处理,写在utils/request.js,但是与我们通常的接口格式的处理并不适配,我们业务出现的错误代码并不会直接放在网络层,而是放在json中,所以需要做一些修改原本写法在ant design pro的项目中,原本的请求处理中可以看出,...原创 2019-01-14 20:00:41 · 20576 阅读 · 4 评论 -
vue中实现拖拽,复制粘贴操作获取上传图片
拖拽,复制粘贴操作获取图片因为最近项目需要实现一个图片组件,包含压缩,拖拽上传,复制上传,图片裁剪,兼容多图和单图上传功能,好像这类组件也比较少,所以自己就封装了一个,连带着相关知识也熟悉了。这里分开几篇写,下面说一下图片拖拽,复制粘贴获取文件首先复制粘贴是只支持微信qq或者钉钉上的截图的,而本地文件是不支持的,且复制粘贴不支持同时上传多张其次拖拽上传支持本地的文件,不支持截图的拖拽...原创 2018-11-12 19:07:33 · 7395 阅读 · 1 评论 -
canvas压缩图片方法
canvas压缩图片方法因为最近项目需要实现一个图片组件,包含压缩,拖拽上传,复制上传,图片裁剪,兼容多图和单图上传功能,好像这类组件也比较少,所以自己就封装了一个,连带着相关知识也熟悉了。这里分开几篇写,下面先说一下图片压缩。关于图片压缩好像有不少方法,这里我选了一种我认为比较好的方法,也就是很多图片插件里用到的canvas截图方法,原理就是将图片渲染到canvas上,再将canvas截...原创 2018-11-07 21:33:56 · 1833 阅读 · 0 评论 -
promise,Generator函数,async函数区别与理解
promise,Generator函数,async函数区别与理解promise,generator函数和async函数是es6中的三个比较重要的新语法,都是用来解决异步操作为问题的,初学时只知道三者大概怎么用,但是最关键的三者到底有什么区别,什么时候可以用到这些认识都很模糊。这里对这三者进行一下个人理解的记录Promisepromise比较简单,也是最常用的,主要就是将原来的用回调函数的...原创 2018-11-07 21:09:53 · 9950 阅读 · 2 评论 -
基本笔记14
根据字符返回索引数值indexOf(“字符”); 从前往后找找不到返回-1lastIndexOf(“字符”) 从后往前找网址编码解码encodeURIComponent() 可以把字符串作为URI组件进行编码decodeURIComponent() 可以把字符串作为URI组 件进行解码操作字符串concat 连接两个字符串 返回 会一个新的字符串slice(“...原创 2018-04-27 22:27:08 · 103 阅读 · 0 评论 -
flex笔记
flex布局注意事项分为 main-axis 主轴横向 cross axis 纵向交叉轴使用flex布局 子元素float clear vertival-align属性都将失效Webkit内核的浏览器 必须display: -webkit-flex;第一部分 设置再父元素中控制子元素布局flex属性 flex-directon取值 row 横向排列从左到右row-r...原创 2018-04-27 22:22:58 · 193 阅读 · 0 评论 -
基础笔记13
清除浮动 标准做法 — 准确说是闭合浮动 .clearfix:before,.clearfix:after { content:”“; display:table; } .clearfix:after{clear:both;} .clearfix{ zoom:1;/IE/7/6/ }鼠标样式 cursor:pointer 鼠标变成手 default 默认鼠标 mov...原创 2018-04-26 21:50:20 · 87 阅读 · 0 评论 -
基础笔记12
数据类型简单数据类型 存在栈中 Stringnumberbooleanundefindnullundefind与null区别 null 代表函数企图返回一个不存在的值 undefind代表变量未被初始化 两者值相同 类型不同复杂数据类型 栈中记录名字和地址值 堆中存放数据、 数组 Array对象 Object数组区别 声明 var arr = new Ar...原创 2018-04-26 21:49:02 · 91 阅读 · 0 评论 -
基础笔记11
11.01_Java开发工具(常见开发工具介绍)(了解)A:操作系统自带的记事本软件B:高级记事本软件C:集成开发环境 IDE (Integrated Development Environment)D:Eclipse和MyEclipse的区别 a:Eclipse是一种可扩展的开放源代码的IDE。b:Eclipse的特点描述免费纯Java语言编写免安装扩展性强c:MyE...原创 2018-04-26 21:47:04 · 132 阅读 · 0 评论 -
基础笔记10
10.01_面向对象(package关键字的概述及作用)(了解)A:为什么要有包 将字节码(.class)进行分类存放 包其实就是文件夹B:包的概述举例: 学生:增加,删除,修改,查询 老师:增加,删除,修改,查询 …方案1:按照功能分 com.heima.add AddStudent AddTeacher ...原创 2018-04-26 21:46:28 · 90 阅读 · 0 评论