colliZ-CSDN博客

原创二进制流(ArrayBuffer)转为图片

首先通过ajax或者ws获取到传来的二进制流数据responseType 需要设置为arraybuffer。然后我们拿到所需的二进制数据，通过console打印发现是一个ArrayBuffer，接着我们对其进行如下处理，转为base64 function arrayBufferToBase64(buffer) { var binary = ''; var bytes = new Uint8Array(buffer); var len = bytes.b.

2020-10-15 15:21:28 11144 1

原创 js 的浅拷贝和深拷贝

深、浅拷贝的区别浅拷贝只能拷贝对象第一层，如果对象之中还嵌套有对象则不能实现深层对象的拷贝深拷贝可以实现对象深层次的拷贝，怎样修改拷贝后的对象，原对象都不会改变浅拷贝// 实现function clone(obj) { let obj2 = Array.isArray(obj) ? [] : {} if(obj && typeof obj === 'object') { for(let item in obj) { obj2[item] = obj[it

2020-10-15 15:19:48 76

原创 less 使用笔记

变量@color: red;.a { color: @color;}变量选择器@my-selector: swipper;.@{my-selector}-list { color: red;}// 转换成.swipper-list { color: red;}Properties@my-propertity: width;.block { @{my-propertity}: 10px;}// 转换成.block { width: 10px;

2020-10-15 12:29:12 127

原创 css 水位图波纹特效

水波纹动效直接上代码通过遮罩和动画实现水位图波纹特效可以通过输入0-100的数字或者拖动滑动条调节水位的高低 (通过修改wave-mask的top)<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

2020-07-20 15:18:48 1489

原创 Js 实现函数只执行一次

Js 如何实现函数只执行一次有时候我们会遇到某个函数在多次执行中只运行一次的情况，那么如何实现呢？下面直接上代码let once = function(fn) { let caller = true; return function() { if(caller) { caller = false fn.apply(this, arguments) } } }通过调用上面的函数let

2020-07-11 17:50:28 11880

原创从零开始学习Vue源码(二) —— 响应式系统

从零开始学习Vue源码 ——响应式基本原理这里实现一个简易版本的响应式系统来形象的理解数据是如何在初始化的时候被劫持，以及如何在修改时更新视图的。首先看下Vue2.x实现响应式系统最重要的方法Object.defineProperty, Vue2.x就是基于它实现的响应式/* obj: 目标对象 prop: 需要操作的目标对象的属性名 descriptor: 描述符 return value 传入对象*/Object.defineProperty(obj

2020-07-01 23:45:00 169

原创 react 性能优化

react 知识点(hooks, class)1. usecallback缓存函数，依赖项变化后再重新生成.useCallback Hook 允许你在重新渲染之间保持对相同的回调引用以使得 shouldComponentUpdate 继续工作当缓存的函数依赖项频繁变动的话，可以采用useRef的形式，在 xxxRef.current 上把所依赖的变量写入xxxref， usecallback依赖 xxxRef，因为xxxref只会创建一次，且xxxref.current始终是最新的，所以可以解

2020-07-01 15:12:00 108

原创从零开始学习Vue源码（一）

从零开始学习Vue源码 —— 概览先上一张图以上流程包括了从：初始化 —— 挂载 —— 解析模版 —— 生成渲染函数 —— render function转换为VNode节点最终形成Virtual Dom Tree —— virtual dom tree转化为真实Dom节点从而渲染视图响应式更新包括了:在init时进行了Object.defineProperty 的绑定 —— render function渲染读取值，触发getter函数 —— 进行依赖收集 —— 修改对象值触发se

2020-07-01 12:20:40 782

collieZ的博客