喝着绿茶的猫
码龄7年
  • 288,357
    被访问
  • 88
    原创
  • 1,814,303
    排名
  • 75
    粉丝
关注
提问 私信
  • 加入CSDN时间: 2015-06-23
博客简介:

路遇惊喜

博客描述:
前端路上遇到的惊喜
查看详细资料
  • 3
    领奖
    总分 227 当月 10
个人成就
  • 获得83次点赞
  • 内容获得127次评论
  • 获得201次收藏
创作历程
  • 1篇
    2022年
  • 14篇
    2020年
  • 18篇
    2019年
  • 9篇
    2018年
  • 19篇
    2017年
  • 32篇
    2016年
成就勋章
TA的专栏
  • ES2015
    13篇
  • CSS
    10篇
  • JavaScript基础
    11篇
  • JavaScript-DOM
    9篇
  • JavaScript-BOM
    2篇
  • JavaScript-特效
    9篇
  • jQuery
    3篇
  • node.js
    2篇
  • CSS3
    1篇
  • Web移动开发
    2篇
  • 前端开发工具
    3篇
  • 小笔记
    6篇
  • ionic
    4篇
  • markdown
    2篇
  • hybrid app
    7篇
  • react
    3篇
  • react native
    3篇
  • Vue
    5篇
兴趣领域 设置
  • 前端
    vue.js
  • 最近
  • 文章
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

vue 拖拽指令

Vue.directive('dragscroll', function(el) { el.onmousedown = function(ev) { const disX = ev.clientX; const disY = ev.clientY; const originalScrollLeft = el.scrollLeft; const originalScrollTop = el.scrollTop; const originalScrollBehavio
原创
发布博客 2022.03.02 ·
92 阅读 ·
0 点赞 ·
0 评论

ES2015 迭代器模式 Iterator

设计模式:迭代器模式一、实现迭代器的目的是干什么呢?// 迭代器设计模式// 场景:你和我协同开发一个任务清单应用// 我的代码 =========const todoList = { life:['吃饭','睡觉','撸猫'], study:['语文','数学','英语']}// 你的代码 =========for (const item of todoList.life) { console.log(item);}for (const item
原创
发布博客 2020.11.22 ·
97 阅读 ·
0 点赞 ·
2 评论

ES2015 Iterable(可迭代的)接口

一、为什么ES2015提供Iterable(可迭代的)接口ES中能够表示有结构的数据类型越来越多,以前有数组、对象等等,ES2015中新增了Map和Set对象…为了给各种各样的数据结构提供统一遍历方式,ES2015提供了Iterable(可迭代的)接口接口的概念:可以理解为一种规格标准例如在ES中,任意一种数据类型都有toString()方法,这是因为他们都实现了统一的规格标准,即他们都实现了统一的接口实现Iterable接口就是for…of的前提二、了解for…of 的内部原理在控制台打
原创
发布博客 2020.11.22 ·
127 阅读 ·
0 点赞 ·
0 评论

ES2015 for of 循环

一、为什么ES2015 引入 for of 循环我们先来回想一下,ES2015以前与遍历相关的方法for循环:遍历普通的数组for in : 遍历键值对一些函数式的遍历方法 ,比如forEach这些遍历方式都有一定的局限性,比如说forEach() 不能退出循环// for of 基本语法const arr = [100,200,300,400]for(const item of arr){ console.log(item) if(item > 100){ br
原创
发布博客 2020.11.18 ·
182 阅读 ·
0 点赞 ·
0 评论

ES2015 Symbol 一种全新的原始数据类型

一、Symbol 的基本使用在ES2015之前,对象的属性名都是字符串,而字符串有可能会重复,重复的话有可能会有冲突。看一个例子,比如有3个js文件// share.js=========const cache = {}// a.js=========cache['foo'] = '123'// b.js=========cache['foo'] = Math.random()console.log(catch)现在我们大量使用第三方库,很多时候需要自己去扩展。如果出现属性重复怎么办
原创
发布博客 2020.11.17 ·
66 阅读 ·
0 点赞 ·
0 评论

ES2015 Reflect 统一的对象操作API

Reflect属于一个静态类,也就是说他不能通过new方法去构建一个实例对象 new Reflect。只能够去调用这个静态类的一些静态方法,比如 Reflect.get( ),Math对象也是如此。Reflect 内部封装了一系列对对象的底层操作,提供了13个静态方法。Reflect.get(target, name, receiver)Reflect.set(target, name, value, receiver)Reflect.has(target, name)Reflect.de
原创
发布博客 2020.11.07 ·
93 阅读 ·
0 点赞 ·
0 评论

ES2015 class

一、类 classES2015以前ECMAScript都是通过定义函数和定义原型对象来实现类// 比如定义一个Person类// 先定义一个函数,作为类的构造函数function Person(name){ this.name = name;}Person.prototype.say = function(){ console.log(`say ${this.name}`)}ES2015以后新增了class关键词来声明一个类class Person{ // 如果需要在
原创
发布博客 2020.11.07 ·
84 阅读 ·
0 点赞 ·
0 评论

ES2015 Proxy 对比 defineProperty

如果我们想监视某个对象的读写,我们可以使用ES5提供的defineProperty方法为对象添加属性,可以捕获到对象属性的读写过程。defineProperty应用场景:在vue3.0 以前的版本,就是使用defineProperty实现了数据响应从而实现双向数据绑定。因为Proxy比defineProperty,vue3.0 中使用的是Proxy在ES2015中,全新设计了一个叫做Proxy 的类型,专门用来为对象设置访问代理器。什么是代理呢?通俗点解释:把代理想象成门卫,无论你是想出去还是
原创
发布博客 2020.11.06 ·
194 阅读 ·
0 点赞 ·
0 评论

ES2015 箭头函数( Arrow functions ) 与 this

箭头函数没有this的机制,箭头函数不会改变this的指向第一个例子const person = { name:'tom', sayHi:function(){ console.log(`hi,my name is ${this.name}`) }}person.sayHi()// hi,my name is tomconst person = { name:'tom', sayHi:()=>{ console.log(`hi,my name is
原创
发布博客 2020.11.06 ·
99 阅读 ·
0 点赞 ·
0 评论

ES2015 ...操作符的2种用法

ES2015中新增了一种...的操作符,...操作符有两个作用一、剩余参数 RestES2015以前对于未知个数的参数,我们是用arguments对象来接收,arguments是一个伪数组function foo(){ console.log(arguments)}foo(1,2,3,4,5,6,7)ES2015以后,可以用...来代替arguments 接收剩余参数//在形参前面加上...操作符,这个形参以数组的形式接收从当前这个位置开始往后所有的实参。可以取代以前以argumens
原创
发布博客 2020.11.06 ·
90 阅读 ·
0 点赞 ·
0 评论

ES2015 函数的参数默认值 Default Parameters

ES2015以前,如果我们想要设置参数默认值,需要在函数体中通过逻辑代码来实现。// ES2015以前我们需要在函数体中通过逻辑代码来实现function foo(param){ param = param === undefined ? true : param; console.log(param)}foo() // trueES2015以后,实现方法就简单方便多了:function foo(param = true){ console.log(param)}foo()
原创
发布博客 2020.11.05 ·
202 阅读 ·
0 点赞 ·
2 评论

ES2015 解构 Destructuring

ES2015 新增了一种从数组/对象中获取指定元素的方法,叫解构。一般来说,所有新增方法都是为了弥补过去版本的不完美,正是因为遇到了问题,才出现了新的解决方案。一、数组的解构 (Destructuring)在过去,如果我们想提取一个数组的元素,方法如下:const arr = [100,200,300]const item1 = arr[0]const item2 = arr[1]const item3 = arr[2]console.log(item1,item2,item3) //
原创
发布博客 2020.11.05 ·
122 阅读 ·
0 点赞 ·
0 评论

ES2015 let与块级作用域

一、块级作用域在ES2015之前,ES中只有2种作用域:全局作用域函数作用域ES2015新增了一种作用域——块级作用域,现在有3种了:全局作用域函数作用域块级作用域块: 代码中用花括号所包裹起来的范围举两个常见的块:if(true){ console.log('花括号里面是块')}for(var i = 0; i<10; i++){ console.log('花括号里面是块')}ES2015以前块是没有单独的作用域的,这就导致我们在块里面定义的成员,外部也可以
原创
发布博客 2020.11.05 ·
49 阅读 ·
0 点赞 ·
0 评论

JavaScript和ECMAScript之间的关系

JavaScript是ECMAScript的扩展语言ECMAScript 也是一门脚本语言,缩写为ES,通常看做JavaScript的标准化规范。但实际上JavaScript是ECMAScript的扩展语言,因为ECMAScript只提供了最基本的语法,通俗点说只是约定了我们的代码如何编写,比如定义变量和函数,循环和分支…它只是停留在语言层面,并不能用来完成我们应用中的实际功能开发。JavaScript实现了ECMAScript的语言标准,并且在这个基础之上做了一些扩展,使得我们可以在浏览器环境中操作
原创
发布博客 2020.11.05 ·
1004 阅读 ·
1 点赞 ·
1 评论

说说我陷入的思维误区

昨天,听了关于价值变现的分享,有一个点对我触动特别深。摘取我的一部分笔记:=======只要行业还在,就永远有刚刚入门的人。你别觉得自己进入这个行业晚了,还会有比你更晚的人,所以,你的经验就会有价值。比你晚入门的后辈可以参考你分享的经验前进,因为对于一个新手来说,一开始就看资深顶级内容明显是一头雾水,能力也不匹配的。当然,市场上永远有比你专业精进的前辈,你也可以向他们学习,可以避免走很多弯路,减少时间成本和金钱成本,快速成长。你的经验,同样也可以作用给起步比你晚的人。举个意思想通的例子,当我
原创
发布博客 2020.10.15 ·
149 阅读 ·
0 点赞 ·
1 评论

ant design vue 和 v-contextmenu右键点击菜单实现树tree 增删改查

实现思路:vue的实现思路和前面写的react版本的是一样的…ant design vue 有一个右键点击的API @rightClick, 所以想自己扩展基于树结构的增删改查功能还是蛮简单的。我这里实现的是,右键点击会出现操作图标,增加、删除按钮会弹出相应的操作弹窗。右键单击出现的菜单是用v-contextmenu实现的v-contextmenu文档说明:https://github....
原创
发布博客 2019.09.29 ·
8744 阅读 ·
4 点赞 ·
2 评论

ant design react 右键点击菜单实现树tree 增删改查

效果展示:html: <Card bordered={false} onClick={this.clearMenu}> <Alert type="info" showIcon message="左键点击组织可查看该组织下的人员,右键点击该组织可以进行添加、修改、删除操作" type="info" /> <di...
原创
发布博客 2019.09.29 ·
10007 阅读 ·
3 点赞 ·
4 评论

vue 使用 v-charts 实现环形图

v-charts 文档直达v-charts 有环形图的示例demo但这不是我想要的效果,需要自己调整一下样式下图是我调整之后的样子,我隐藏了自带的legend,环形图里面的颜色改成了渐变色1、安装v-chartsnpm i v-charts echarts -S2、在main.js 引入环形图因为我现在里面只用到了环形图,所以我只引入了这一个。// main.jsimpor...
原创
发布博客 2019.07.07 ·
16413 阅读 ·
3 点赞 ·
9 评论

react native 接入百度AI活体检测、人脸识别 iOS版本

1、下载iOS 有动作版本SDK下载下来的的压缩包解压后是这样的:2、把用xcode 把FaceSDK导入到iOS项目3、确认下Bundle Identifier 是否是申请license时填报的那一个(注意:license和Bundle Identifier是一一对应关系,填错了会导致SDK不能用)3、把6个文件导入iOS包名把FaceParameterConfig.h...
原创
发布博客 2019.06.28 ·
1405 阅读 ·
2 点赞 ·
5 评论

react native 接入百度AI活体检测、人脸识别 Android版本

https://github.com/songxiaoliang/react-native-baidu-face业务需求场景: 利用百度AI进行活体检测1、注册百度AI开放平台账号注册地址:百度AI开放平台注册之后,进行企业认证,这项功能需要企业认证才开放的。2、创建应用登录之后找到人脸识别模块,然后创建应用创建应用之后,会生成AppID 、API Key 等信息,这些后续在An...
原创
发布博客 2019.06.28 ·
4013 阅读 ·
2 点赞 ·
2 评论
加载更多