- 博客(24)
- 收藏
- 关注
RSS订阅原创 React 学习笔记 —— 事件绑定和 state 属性修改简写版
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2021-03-31 13:27:04
258
原创 React 学习笔记 —— 事件绑定和 state 属性修改
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2021-03-31 12:23:38
293
原创 React 学习笔记 —— 组件创建的两种方式
函数式组件定义一个函数，命名时首字母大写，其返回一个VDOM<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s
2021-03-31 10:16:47
218
原创 React 学习笔记 —— React 开发者工具安装
在chrome地址栏输入 chrome://extensions/ 回车点击扩展程序打开应用商店（需要VPN）搜索 react developer tools认准提供方 facebook，然后添加可以在扩展程序页面看到已经添加成功将其钉住，方便查看如果当前页面是由react开发，则该开发者工具会被激，例如：美团官网然后在控制台中，可以看到多出了两个选项其中 Components中，包含了组件信息，Profiler包含了性能信息..
2021-03-30 23:04:14
403
原创 React 学习笔记 —— JSX 语法规则
定义VDOM时，不要用引号包起来// 错误的写法const VDOM = '<h1>hello, react</h1>'// 正确的写法const VDOM = <h1>hello, react</h1>使用表达式时，需要用{}括起来let name = 'react'// 错误的写法const VDOM = <h1>name</h1>// 正确的写法const VDOM = <h1>{nam
2021-03-30 22:11:59
290
原创 React 学习笔记 —— 为什么使用 JSX，而不是 JS 去创建 VDOM
使用 JSXconst VDOM = ( <h1 id="title"> <span>Hello, React</span> </h1>) 使用 JSconst VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Hello, React'))对比使用 JSX，通过HTML的语法格式直接来描述VDOM，代码直观，便于书写
2021-03-30 16:57:03
302
原创 JS中 Object 与 Map 的区别
概述在很多时候，我们都把Object当成Map来使用，例如使用Objectlet dict = { 'hello': '你好', 'world': '世界'}console.log(dict['hello'], dict['world'])// 你好 世界使用Maplet dict = new Map([ ['hello', '你好'], ['world', '世界']])console.log(dict.get('hello'), dict.get('wo
2021-03-24 20:07:47
1232
原创 两栏布局——左边固定宽度、右边自适应
HTML <div class="main"> <div class="left"></div> <div class="right"></div> </div>基于 flex代码 .main { display: flex; } .left { background-color: pink; height: 200px; flex-basis: 200px
2021-03-24 16:15:11
903
原创 DOM元素获取位置信息各类方法图示
getBoundingClientRect用法domRect = element.getBoundingClientRect();图解The returned value is a DOMRect object which is the smallest rectangle which contains the entire element, including its padding and border-width.返回值是一个DOMRect对象，该对象是包含这个元素的最小矩形，
2021-03-23 20:01:27
1292
原创 绑定 unhandledrejection 事件，处理未显式捕获的Promise异常
绑定方式其一window.addEventListener("unhandledrejection", event => { console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);});其二window.onunhandledrejection = event => { console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);};
2021-03-17 20:11:18
4392
1
原创 TypeScript 类型操作符、类型保护
环境搭建typescript 安装npm install typescript -g // 全局安装ts目录结构tsconfig.json配置内容{ "compilerOptions": { "target": "ES2015", // 编译的目标标准 "outDir": "./dist", // 编译后的文件输出目录 "watch": true // 进入监听模式，文件发生变动立即重新编译 }, "include"
2021-03-15 16:48:31
381
原创 TypeScript 联合、交叉、字面量类型，类型别名、推导、断言
环境搭建typescript 安装npm install typescript -g // 全局安装ts目录结构tsconfig.json配置内容{ "compilerOptions": { "target": "ES2015", // 编译的目标标准 "outDir": "./dist", // 编译后的文件输出目录 "watch": true // 进入监听模式，文件发生变动立即重新编译 }, "include"
2021-03-15 15:28:42
383
原创 NodeJS事件循环
事件循环原理流程图timers：本阶段执行setTimeout()和setInterval()调度的回调函数pending callbacks：本阶段执行某些系统操作的回调函数，例如文件操作回调idle、prepare：本阶段仅系统内部使用，我们并不关心poll：检索新的I/O事件，执行与I/O相关的回调，以及其他几乎所有的回调check: 本阶段执行setImmediate()调度的回调函数close callbacks: 本阶段执行一些与关闭相关的回调函数，如 socket.on('cl
2021-03-13 21:24:47
266
原创 为什么使用setTimeout模拟setInterval
setInterval的缺点“丢帧”现象：setInterval()仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中，即在向队列插入代码实例之前，会先检测是否正在执行该代码实例，以及队列中是否已经存在该代码实例，只要存在其一就都不会再向队列中插入。实际代码执行间隔 <= 设定的时间间隔：比如一个1000ms的interval，在插入队列后因为前一个任务执行超时（假设超时800ms），导致该任务不能及时执行，当它执行完毕后（假设执行不耗时，即还剩下200ms），下一个代码（相
2021-03-13 18:39:34
327
转载 浏览器之DNS解析过程详解
概念域名解析是把域名指向网站空间IP，让人们通过注册的域名可以方便地访问到网站的一种服务。简单的说，域名解析就是将域名转换为IP地址的过程。因为想要访问一台服务器，最终是靠IP地址访问的，而不是靠域名访问的，他们的之间的映射关系保存在本地缓存和网络上的各种域名解析服务器中，如浏览器缓存，系统缓存，域名商的域名解析服务器，…，那么他们的查询顺序和查询方式就是本文的内容。域名结构域名结构就以mail.baidu.com域名为例，域名最后一个.的右侧部分我们称之为顶级域名，倒数第二个.右侧部分称之为
2021-03-12 10:27:16
1738
原创 5种对象属性遍历方法对比
实验代码// 创建对象x，并分别赋值可遍历与不可遍历属性let x = {}x.name = 'tl'Object.defineProperty(x, 'age', { value: 17, writable: true, enumerable: false, configurable: true})// 创建x的原型对象p，并分别赋值可遍历与不可遍历属性let p = {}p.sex = 'm'Object.defineProperty(p, 'job'
2021-03-11 17:45:36
346
原创 CSS @import 用法
目录结构a.cssp { color: pink}b.css/* 引入 a.css， 注意结尾需要分号 */ @import 'a.css'; /* 或者 @import url('a.css'); */ p { font-size: 30px;}index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
2021-03-06 19:25:50
6524
原创 绕脑的 js 问题
. 以下输出什么 var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x) console.log(b.x) // 输出 undefined {n: 2}解释：首先，a 和 b 同时引用了 {n: 1} 对象 , 接着执行到 a.x = a = {n：2}语句。虽然赋值是从右到左的，但是.的优先级比=要高。首先执行 a.x，相当于为 a（或者 b）所指向的{n: 1}对象新增了一个属性 x，即此时对象将变为 ..
2021-03-04 11:44:38
256
2
原创 ES6模块化使用方法
目录结构a.js对外导出对象let name = 'j'let age = 18let sex = 'm'// 导出对象export { name, age}// 默认导出export default sexb.js// 导入a.js中导出对象import {name, age} from './a.js'// 导入a.js中默认导出import sex from './a.js'console.log(name, age, sex)index
2021-03-03 15:44:33
346
6
原创 Array.isArray 跟 instanceof 的差异
Array.isArray如果参数是数组一定返回true，否则一定返回false，在判断对象是否为数组时，采用Array.isArray 更加可靠instanceof众所周知，instanceof 的工作原理是判断右边参数的原型是否在左边参数的原型链上对比Array.isArray// Array.prototype 也是一个数组。Array.isArray(Array.prototype); // true// 原型对象指向数组原型的对象也可以被分辨Array.isArr
2021-03-03 15:06:37
2067
1
原创 nodejs 作为代理服务器替换网页文件
背景有时候我们调试某个网页的时候，由于直接访问目标服务器，会返回些阻止调试的代码，为了方便可以将这些 js 替换掉 (fiddler的autoResponder也可以达到这种效果)另一种情况则是，我们需要达到访问某个站点，而转到另一个站点的效果思路将自己的服务器设置为代理服务器，这样所有请求都会经过处理使用express + requests转发：对不需要过滤的请求，直接放行，需要过滤的特殊处理假如我们想达到 访问 http://www.origin.com ，但是返回http://www
2021-03-03 10:59:33
674
原创 为什么 [‘1‘, ‘2‘, ‘3‘].map(parseInt) 的结果不是 [1, 2, 3]
.map方法接受一个callback作为回调，同时会为这个回调传入三个参数，分别是value、index、arr，即迭代中的值、索引、数组本身parseInt接收两个参数，分别是s、radix，即要解析的字符串、解析为的进制基数因此 ['1', '2', '3'].map(parseInt)，每一次迭代相当于执行 parseInt(‘1’, 0)、parseInt(‘2’, 1)、parseInt(‘3’, 2)第一次执行，radix为0，默认为10进制，因此返回1， 而后面两次执行，radix为1.
2021-03-01 10:31:39
208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人