hjson-CSDN博客

原创 dom-to-image分享多张异步图片遇到的坑

需要等待所有dom（尤其是所有图片）渲染完成后，再去执行html转化换。useEffect预加载所有图片，本来期望利用图片缓存的方式。其时间会早于真实dom中所有图片onload时间，转化时，图片可能还没完全加载成功。之前有一张图片时通过执行2次domtoimage.toJpeg（魔法），当超过1张图片时，图片第一次仍然会空白。：当超过一张图片时，ios/safari首次会出现某张图片空白，再次生成canvas才正常。原理：直接将将图片绘制到canvas当中，因而就存在上面的问题。

2023-06-13 10:07:16 1144

原创 TypeScript基础知识

一. ts是js的超集，可以应用所有js语法二. 特点：１. 优点 a. 可以在编译阶段就发现大部分错误，这总比在运行时候出错好 b. 同一目录下不同文件中，使用统一命名，会有命名冲突 c. 不显式的定义类型，也能够自动做出类型推论 d. 即使 TypeScript 编译报错，也可以生成 JavaScript 文件 e. Google 开发的 Angular 就是使用 TypeS...

2021-12-28 15:38:07 80 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 488

原创 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 171

原创通俗理解vuex原理---通过vue例子类比

本文主要通过简单的理解来解释下vuex的基本流程，而这也是vuex难点之一。首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库，相当于数据库mongoDB，MySQL等，任何组件都可以存取仓库中的数据。vuex流程与vue类比我们看一下一个简单的vue响应式的例子，vue中的data 、methods、computed，可以实现响应式。视图通过点击事件，触发methods...

2019-03-09 14:43:00 1351 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 101 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 194 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 169

原创 js中事件2-事件冒泡及事件委托

一、事件冒泡要了解事件冒泡，先理解下事件处理的三个周期。DOM处理周期：三个阶段都存在第一阶段：事件捕获；这步在后台完成，用户无法操作。例如当点击元素div时，实际上点击顺序是：document-html-body-div第二阶段：目标触发；第三阶段：事件冒泡；这是用户可以操作的，默认是冒泡。当触发目标后，事件的传递方式。例如当点击元素div时，实际上点击顺序是：div-body-htm...

2019-01-29 15:42:28 242 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 225

原创 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 2730 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 619 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 40068 4

原创前端js中this指向及改变this指向

一、 this含义this是JS中的关键字，它始终指向了一个对象， this是一个指针;二、 this显示绑定和隐式绑定1. this显示绑定含义：当一个函数没有明确的调用对象的时候，也就是单纯作为独立函数调用的时候，将对函数的this使用默认绑定：绑定到全局的window对象在显式绑定下：函数将取得在“ 包含对象“ 里的永久居住权，一直都会” 住在这里“ 1.1 全...

2019-01-10 13:46:36 1530 1

原创 js对象拷贝的方法

对象拷贝的方法是一个难点，尤其是深拷贝。建议把代码都运行下，帮助理解拷贝。一. json方法1. 适合情况： JSON对象的深度克隆。方法是先JSON.stringify() 转为json字符串，再JSON.parse() 转为json数组2. 缺点： a. 如果你的对象里有函数, 函数无法被拷贝下来 b. 无法拷贝copyObj对象原型链上的属性和方法var obj ...

2019-01-09 13:34:41 1413 3

原创 js面向对象3-继承

一、了解继承1.1 继承就是后辈继承前辈的属性和方法1.2 面向对象编程(OOP) JavaScript不是面向对象编程语言，但是它的特性支持面向对象的编程思维。二、继承的方法从父类继承属性和方法对象冒充，模仿java中的继承对象冒充，模仿java中的继承。通过改变父类的执行环境进行继承；// 从父类中继承属性和方法function Father() { thi...

2019-01-06 12:40:14 731 2

原创 js面向对象2-原型

一、原型和原型对象函数的原型prototype：函数才有prototype，prototype是一个对象，指向了当前构造函数的引用地址。所有对象都有__proto__属性，所有的__proto__ 指向改对象的原型对象（注意：proto前面是两个__）关系示意图：虚线代表：指针实线：prototype原型对象实例 function A() { t...

2019-01-05 13:23:17 151 1

原创 js面向对象1--了解构造函数

一、构造函数与实例的区别构造函数1.1. 构造函数主要是一种用于生成对象的饼干模具，这些对象具有默认属性和属性方法，它可以创建多个共享特定特性和行为的对象。1.2. 构造函数只是一个函数，但当函数遇到了new，就发生了一些微妙的关系，它会将该函数的this值设置为正在构建的新对象，并且默认返回新创建的对象。构造函数实例2.1. 在js中，大多数值（不包括原始值）都涉及正在...

2019-01-04 13:55:41 103 1

原创块状元素垂直外边距重叠

一、垂直外边距重叠属于同一个BFC的两个相邻盒子，垂直margin会发生重叠二、重叠外边距计算1、如果都是正边界，边界宽度是相邻边界宽度中最大的值2、如果出现负边界，则在最大的正边界中减去绝对值最大的负边界（正-|负|）3、如果没有正边界，则从零中减去绝对值最大的负边界三、示例1、如果都是正边界，边界宽度是相邻边界宽度中最大的值div1{height:200px;widt...

2018-12-03 21:07:24 970

json博客