Nolan's Blog

初学 Canvas

Canvas 的功能和基本用法

一、概述 canvas 的英文意思是帆布，是 h5 的一个新的 html 元素，从意思上来讲，你可以在这块帆布上绘制一些图案，甚至是动画和 3D。 <canvas id="tutorial" width="150" height="150"></canvas> 二、基本用法 渲染上下文（The rendering context） canvas 是一个画布...

Posted by nolan on February 26, 2020

什么是设备像素比

物理像素、设备独立像素dips、设备像素比

概述 devicePixelRatio 在全局变量 window 中，指的是设备上物理像素和设备独立像素（device independent pixels，简称 dips）的比例。 devicePixelRatio = 物理像素 / dips ; 设备独立像素 dips 独立于设备的用于逻辑上衡量长度的单位，由底层系统的程序使用，是一种虚拟像素，会由相关系统转换为物理像素。 物理...

Posted by nolan on February 25, 2020

使用 FileReader 解析 txt 和 excel文件

FileReader、xlsl 解析库

FileReader FileReader 对象可以一步读取文件内容，使用 File 对象或 Blob 对象指定要读取的文件或数据。 File 对象：可以是 input 元素上选择文件后返回的 FileList 对象，也可以是来自拖放操作生成的 DataTransfer 对象， 还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile 方法后返回的结果。 ...

Posted by nolan on February 24, 2020

跨域

跨域的限制、如何实现跨域请求

为什么会跨域 为了保证用户的信息安全，1995 年 Netscape 公司引入同源策略。当 协议（http、https 等）、端口号、域名（包括子域）不同时，就会违反同源策略。 违反同源策略会受到以下限制： 无法读取缓存数据，cookie、localstorage、indexDB DOM 无法获得 ajax 无法发送 几种跨域请求方法 cors 通过在服务端设置,...

Posted by nolan on February 18, 2020

React 如何避免无用重复渲染

shouldComponentUpdate\PureComponent\React.memo

什么是无用渲染 当重复设置 setState 为同一个值，React 组件也会重复渲染，这种渲染是没必要的； 怎么避免无用渲染 class 组件 shouldComponentUpdate shouldComponentUpdate(nextProps, nextState) { if ...

Posted by nolan on February 12, 2020

JS Memoization

React.memo 的原理

源码 function memo(func){ var cache = {}; return function(){ var key = JSON.stringify(arguments); if (cache[key]){ console.log(cache) return cache[key]; } ...

Posted by nolan on February 12, 2020

React VS Vue

React VS Vue

相同点 使用 virtual dom 提供了响应式和组件化的视图组件 将注意力集中在核心库，将其他功能如路由和全局状态管理交给相关的库 不同点 性能 vue 组件的渲染是被系统自动追踪的，精确判断需不需要重新渲染； react 16 之前需要通过 pureComponet 或 shouldComponent， 且需要保证该组件...

Posted by nolan on February 9, 2020

使用MutationObserver跟踪DOM的变化

使用MutationObserver跟踪DOM的变化

概述 Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。 概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Obse...

Posted by nolan on February 7, 2020

Vue 响应式系统的原理实现

Vue 如何追踪DOM变化

Vue 是一种非侵入式的响应式框架。数据模型仅是普通 js 对象，当你修改他们，视图会自动更新。 如何追踪 Dom 变化 当把普通的 js 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象的所有属性，并使用 Object.defineProperty() 把这些属性全部转换为 getter 和 setter； 这些 getter 和 setter 用...

Posted by nolan on February 7, 2020

react hooks

useState、useEffect 模拟生命周期、自定义hook实现逻辑共享

React Hooks 的定位 1.可以在函数组件使用更多的 React 的特性， return JSX、state 管理、声明周期； 2.更容易的抽离公共逻辑函数，如请求数据 useHttp、设置订阅 的 Hook； React Hook 的定义 1.hook 是钩子的意思； 2.hook 总是以 use 开头； useStat...

Posted by nolan on February 5, 2020

FEATURED TAGS
FE js 算法 FullStack ts nodejs 工具 杂谈
ABOUT ME

格物致知，长期主义

wechat： RedNolan

✉️ 545921090@qq.com