5 suwu150

尚未进行身份认证

我要认证

业精于勤,荒于嬉;行成于思,毁于随;磨刀不误砍柴工。

等级
TA的排名 1k+

函数防抖和函数节流原理理解

防抖和节流有什么用,一般的使用场景,原理是什么1.作用使用函数节流与函数防抖的目的,就是为了节约计算机资源,提升用户体验。2.场景节流一般是用在必须执行这个动作,但是不能够执行太频繁的情况下,例如滚动条滚动时函数的处理,可以通过节流适当减少响应次数;防抖一般是用来,用户输入有操作时,暂时不执行动作,等待没有新操作时,进行相应响应,例如用户名输入校验的情况,可以等待用户输入完成后再...

2020-04-25 21:45:57

如何优雅的展示动态图标lottie-react-native

项目中,需要使用到动态图标,发现又好用的库,在这里分享一下,需要使用的工具库为lottie-react-native,通过导出AE软件中的动画特效,以json文件的方式导出,来实现动画的效果。一、Lottie是什么?Lottie是Airbnb开源的一个支持 Android、iOS 以及 ReactNative,利用Json文件的方式快速实现动画效果的库。简单点说就是Json文件记录动画路径,A...

2020-04-04 11:24:41

vue源码(六)-vue组件化机制

vue源码(六)-vue组件化机制在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了:Vue.component('my-component-name', { /* ... */ })该组件名就是 Vue.component 的第一个参数。1.组件名大小写定义组件名的方式有两种:使用 kebab-caseVue.component('my-com...

2019-12-11 12:56:51

vue源码(五)-vue虚拟dom和diff对比

vue源码(五)-vue虚拟dom一、概念虚拟DOM(Virtual DOM)是对DOM的JS抽象表示,它们是JS对象,能够描述DOM结构和关系。应用程序 的各种状态变化会作用于虚拟DOM,最终映射到DOM上。二、优点虚拟DOM轻量、快速:当它们发生变化时通过新旧虚拟DOM比对可以得到最小DOM操作量,从 而提升性能和用户体验。跨平台:将虚拟dom更新转换为不同运行时特殊操作实现跨平台...

2019-12-10 16:41:26

vue源码(四)-vue项目配置和入口文件,数据响应化处理

vue源码(四)-vue入口文件和项目配置,数据响应处理一、获取vue项目代码项目地址:https://github.com/vuejs/vue迁出项目: git clone https://github.com/vuejs/vue.git 当前版本号:2.6.10二、文件结构如上所示文件结构:dist: 所有产出的文件地址examples:官方案例,可参考flow:强类型编...

2019-12-02 18:17:34

vue源码(三)-vue组件插件开发

vue源码(三)-vue组件插件开发插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:添加全局方法或者属性。如: vue-custom-element添加全局资源:指令/过滤器/过渡等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实...

2019-11-22 10:42:13

vue源码(二)-vue组件通信方式

vue源码(二)-vue组件通信方式一、组件化组件化开发能够提高开发效率,方便重复使用简化调试步骤,提升项目的可维护性,便于多人系统开发二、通信方式1.父组件->子组件######1.1通过属性props进行传递子组件进行定义一个字段msg接受父组件传递的参数<template> <div class="hello"> <h...

2019-11-11 23:19:22

vue源码(一)-搭建简单的vue项目

vue源码(一)-搭建简单的vue项目一、下载vue到官网直接下载开发版本vue:https://cn.vuejs.org/v2/guide/installation.html下载完成后,会有一个vue.js文件二、嵌入到网页创建html文件,将下载好的vue.js文件嵌入到html中<!DOCTYPE html><html lang="en"><h...

2019-11-10 12:08:39

react-native树形结构选择组件

react-native-tree-selectreact-native-tree-select,树结构选择组件,通过层级展示数据,能够进行多选和单选,进行自定义节点样式等.=项目结构--components: treeSelect组件--treeSelectExample: 组件演示代码--.gitignore:git忽略文件--README.md:说明文档1.使用说明:1...

2019-09-06 15:01:53

解决 canvas 在高清屏中绘制模糊的问题

使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊。如图:因为 canvas 不是矢量图,而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏,浏览器就会以2个像素点的宽度来渲染一个像素,该 canvas 在 Retina 屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此绘制出来的图片文字等会变模糊。因此,要做 Retin...

2019-07-30 10:35:00

JavaScript键盘鼠标监听功能

实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结.#### Keyboard​EventKeyboardEvent 对象描述了键盘的交互方式。 每个事件都描述了一个按键(Each event describes a key);事件类型keydown, keypress 与 keyup 可以确定是哪种事件在活动。 KeyboardEvent 表示刚刚发生在按键上的事情。 当你需要处理文本输入的时候,使用 HTML5 input 事件代替。例如,用户使用手持系统如平板

2019-06-11 10:31:20

h5 Canvas转换为图片格式并下载

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。如果画布的高度或宽度是0,那么会返回字符串“data:,”。如果传入的类型非“image/png”,但是返回的值以“data:image/png”开头,那么该传入的类型...

2019-06-05 00:03:05

CSS自动换行、强制不换行、强制断行、超出显示省略号

CSS样式设置自动换行、强制不换行、强制断行、超出显示省略号P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,如下所示,当设置div宽度为固定值时,p中内容能够自动换行:但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,当时获取的数据是一长串的数字,浏览器应该是对数字和英文单词处理方式相近,不会截断。...

2019-05-31 00:20:08

m3u8格式视频源列表

平时,需要测试m3u8格式视频的播放,会使用一些可用的播放源,整理在这里:constsourceList=[{name:'cctv1',src:'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'},{name:'cctv2',src:'http://ivi.bupt.edu.cn/hls/cc...

2019-05-19 17:41:15

如何检测页面加载完成

document.readyState1.定义一个document 的 document.readyState 属性描述了文档的加载状态。2.值一个文档的 readyState 可以是以下值之一:loading / 加载document 仍在加载。interactive / 互动文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。compl...

2019-04-16 22:19:17

h5 Canvas正多边形绘制

在之前,我们使用线段进行绘制过矩形,使用arc,arcTo绘制过圆弧和圆形,但是Canvas还能够进行绘制其他图形,比如三角形、六边形、八边形等.这篇文章主要就是说明如何绘制多边形.
 See the Pen h5Polygon by suwu150
 (@suwu150) on CodePen.
上述代码,我们进行绘制了一组根据时间进行变化的生成的多边形,通过方法...

2019-03-23 14:18:16

h5 Canvas圆弧与圆形的绘制

圆和圆弧是图形中基本图形之一.在Canvas中,CanvasRenderingContext2D对象提供了两个方法(arc()和arcTo())来绘制圆和圆弧。JavaScript中弧度角度换算仅难了解角度和弧度之间的关系是不够的,我们还需要知道怎么使用JavaScript来实现角度和弧度之间的换算。一个π大约是3.141592653589793,在JavaScript中对应的是Math.PI...

2019-02-27 21:57:00

h5 Canvas线段的绘制

在Canvas中,线段也是路径中的一种,被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。通常创建线条的方法是moveTo()和lineTo()方法,但是要使线性路径出现在canvas之中,我们必须使用上面提到的stroke()方法创建线条const canvas = document.getElementByI...

2019-02-27 16:04:53

h5 Canvas矩形的绘制

h5 Canvas矩形的绘制1.绘制矩形api在Canvas中提供了绘制矩形的API:fillRect(x, y, width, height):绘制一个填充的矩形strokeRect(x, y, width, height):绘制一个矩形的边框clearRect(x, y, width, height):清除指定矩形区域,让清除部分完全透明除此之外还可以通过Canvas中Canv...

2019-02-26 16:05:43

h5 Canvas时钟制作

canvas可以说是html5中最强大的元素之一下面我们就使用canvas来进行绘制一个时钟在绘制之前,我们需要知道需要绘制的元素都有哪些,其中包括钟最外边的圆圈、钟表上的数字、钟表上的指针,还有定时器下面确定使用的html页面:1.h5Clock.html<!DOCTYPE html><html lang="en"

2019-02-25 12:47:44

查看更多

CSDN身份
  • 博客专家
勋章 我的勋章
  • 领英
    领英
    绑定领英第三方账户获取
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 新人勋章
    新人勋章
    用户发布第一条blink获赞超过3个即可获得
  • 阅读者勋章Lv1
    阅读者勋章Lv1
    授予在CSDN APP累计阅读博文达到3天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。