- 博客(19)
- 资源 (1)
- 收藏
- 关注
原创 dom-to-image分享多张异步图片遇到的坑
需要等待所有dom(尤其是所有图片)渲染完成后,再去执行html转化换。useEffect预加载所有图片,本来期望利用图片缓存的方式。其时间会早于真实dom中所有图片onload时间,转化时,图片可能还没完全加载成功。之前有一张图片时通过执行2次domtoimage.toJpeg(魔法),当超过1张图片时,图片第一次仍然会空白。:当超过一张图片时,ios/safari首次会出现某张图片空白,再次生成canvas才正常。原理:直接将将图片绘制到canvas当中,因而就存在上面的问题。
2023-06-13 10:07:16
1447
原创 TypeScript基础知识
一. ts是js的超集,可以应用所有js语法二. 特点:1. 优点 a. 可以在编译阶段就发现大部分错误,这总比在运行时候出错好 b. 同一目录下不同文件中,使用统一命名,会有命名冲突 c. 不显式的定义类型,也能够自动做出类型推论 d. 即使 TypeScript 编译报错,也可以生成 JavaScript 文件 e. Google 开发的 Angular 就是使用 TypeS...
2021-12-28 15:38:07
92
1
原创 mobx项目创建 + mobx项目流程代码
一. 安装mobx1. react 安装并 reject抽离配置 1. 全局安装 create-react-app 这个脚手架 npm/cnpm i create-react-app -g yarn add create-react-app global 2. 创建项目 create-react-app project //自定义...
2019-03-19 12:14:31
507
原创 Redux简易理解
1. createStore(相当于vuex的$store)这才是数据存储仓库,用来存储初和输出的数据,更vuex$store功能一样作用: 创建一个 Redux store 来以存放应用中所有的 state。 应用中应有且仅有一个 store。a.store构成 //发送action store.dispatch(actions) //获取数据 store.getStat...
2019-03-17 13:40:49
177
原创 通俗理解vuex原理---通过vue例子类比
本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一。首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以存取仓库中的数据。vuex流程与vue类比我们看一下一个简单的vue响应式的例子,vue中的data 、methods、computed,可以实现响应式。视图通过点击事件,触发methods...
2019-03-09 14:43:00
1364
1
原创 数组中常用api 2
1. Array.toString()将数组转换成字符串,以","分隔。返回:新字符,不修改源数组var arr = [5, 8, true,'zhangsan', 123, 'lisi'];var str = arr.toString();console.log(str); //5,8,true,zhangsan,123,lisiconsole.log(arr); //[5, 8,...
2019-01-31 14:05:30
112
1
原创 数组中常用api 1
1. Array.push()依次将内容添加到数组的尾部,并返回新长度 直接在源数组上进行修改var arr = [5, 8, true];var alength = arr.push('zhangsan', 123, 'lisi'); console.log(arr); // [5, 8, true,"zhangsan", 123, "lisi"] console.log(a...
2019-01-31 13:49:44
201
1
原创 JSON对象与JSON字符串转换
一、JSON对象及JSON数组1. JSON对象特点: a. JSON对象属性名,要带双引号 b. JSON没有变量JSON对象的表达式有两种:a.表达式var object ={ "username": 'zhangsan', "age": 20, "sex": 'nan' };b.对象字面量字面量后不需要分好 ...
2019-01-30 15:06:35
181
原创 js中事件2-事件冒泡及事件委托
一、事件冒泡要了解事件冒泡,先理解下事件处理的三个周期。DOM处理周期:三个阶段都存在第一阶段:事件捕获;这步在后台完成,用户无法操作。例如当点击元素div时,实际上点击顺序是:document-html-body-div第二阶段:目标触发;第三阶段:事件冒泡;这是用户可以操作的,默认是冒泡。当触发目标后,事件的传递方式。例如当点击元素div时,实际上点击顺序是:div-body-htm...
2019-01-29 15:42:28
263
1
转载 gulp教程2:gulp常见插件
gulp常用插件1. 复制文件系统自带的api: gulp.src() 源文件路径 (需要传送文件的路径) gulp.dest() 目标路径--(传送到的文件夹) gulp.pipe() 管道,通道,表示下一步--流(送去哪里,像流程一样,一步步执行)实例:复制文件a. 把src的html复制到src目录下gulp.task("copyhtml",function(){...
2019-01-29 15:16:29
233
原创 gulp教程3:几个常见问题及解决方案
1. 找不到local gulp报错代码:$ gulp [23:29:31] Local gulp not found in [23:29:31] Try running: npm install gulp 解决:npm link gulp或者重新全局和项目安装gulp2. cannot find module 'gulp’报错代码:cannot find module 'gu...
2019-01-28 20:21:38
2759
1
原创 gulp教程1:gulp环境搭建
gulp环境搭建gulp是一款基于stream的前端构建工具,下面就是安装教程1. 初始化package.json命令行: npm init -y a. 需要node.js支持,初始化一个package.json文件 如果输入命令:npm init,系统会向用户提问一系列问题,如果你觉得不用修改默认配置,一路回车就可以了。如果使用了 -f(代表force)、-y(代表yes),则跳过提...
2019-01-28 19:47:53
646
1
原创 windows下NVM安装nodejs的方法
NVM可以帮助我们快速切换 node版本,但安装过程中有很多坑,这里记录下一、 下载安装包1. 下载地址 github上下载最新版本:https://github.com/coreybutler/nvm-windows/releases成功安装的nvm标志命令行:nvm二、配置淘宝镜像 由于nvm默认的下载地址http://nodejs.org/dist/是外国外服务器,国内...
2019-01-16 13:32:04
40377
4
原创 前端js中this指向及改变this指向
一、 this含义this是JS中的关键字, 它始终指向了一个对象, this是一个指针;二、 this显示绑定和隐式绑定1. this显示绑定 含义: 当一个函数没有明确的调用对象的时候, 也就是单纯作为独立函数调用的时候, 将对函数的this使用默认绑定: 绑定到全局的window对象 在显式绑定下: 函数将取得在“ 包含对象“ 里的永久居住权, 一直都会” 住在这里“ 1.1 全...
2019-01-10 13:46:36
1594
1
原创 js对象拷贝的方法
对象拷贝的方法是一个难点,尤其是深拷贝。建议把代码都运行下,帮助理解拷贝。一. json方法1. 适合情况: JSON对象的深度克隆。方法是先JSON.stringify() 转为json字符串, 再JSON.parse() 转为json数组2. 缺点: a. 如果你的对象里有函数, 函数无法被拷贝下来 b. 无法拷贝copyObj对象原型链上的属性和方法var obj ...
2019-01-09 13:34:41
1458
3
原创 js面向对象3-继承
一、了解继承1.1 继承就是后辈继承前辈的属性和方法1.2 面向对象编程(OOP) JavaScript不是面向对象编程语言, 但是它的特性支持面向对象的编程思维。二、继承的方法从父类继承属性和方法对象冒充, 模仿java中的继承对象冒充, 模仿java中的继承。通过改变父类的执行环境进行继承;// 从父类中继承属性和方法function Father() { thi...
2019-01-06 12:40:14
743
2
原创 js面向对象2-原型
一、原型和原型对象函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址。所有对象都有__proto__属性, 所有的__proto__ 指向改对象的原型对象(注意:proto前面是两个__)关系示意图:虚线代表:指针实线:prototype原型对象实例 function A() { t...
2019-01-05 13:23:17
158
1
原创 js面向对象1--了解构造函数
一、构造函数与实例的区别构造函数1.1. 构造函数主要是一种用于生成对象的饼干模具,这些对象具有默认属性和属性方法,它可以创建多个共享特定特性和行为的对象。1.2. 构造函数只是一个函数,但当函数遇到了new,就发生了一些微妙的关系,它会将该函数的this值设置为正在构建的新对象,并且默认返回新创建的对象。构造函数实例2.1. 在js中,大多数值(不包括原始值)都涉及正在...
2019-01-04 13:55:41
109
1
原创 块状元素垂直外边距重叠
一、垂直外边距重叠属于同一个BFC的两个相邻盒子,垂直margin会发生重叠二、重叠外边距计算1、如果都是正边界,边界宽度是相邻边界宽度中最大的值2、如果出现负边界,则在最大的正边界中减去绝对值最大的负边界(正-|负|)3、如果没有正边界,则从零中减去绝对值最大的负边界 三、示例1、如果都是正边界,边界宽度是相邻边界宽度中最大的值div1{height:200px;widt...
2018-12-03 21:07:24
988
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人