SVG 学习笔记（四）样式相关
着色
stroke：线条颜色
stroke-width：线条宽度
stroke-opacity：瞄边透明度
fill：区域填充色
SVG 学习笔记（三）基础形状
12345678910111213141516171819<!--椭圆--><svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"><!--矩形 起始位置坐标 设置圆角的半径 宽高 线条颜色 填充色 线条宽度 --> <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/><!--圆 圆心坐 ...
SVG 学习笔记（一）基础
一、基本构成
<svg>标签 + <g> 组合 + 各式形状
SVG 里的属性值必须用引号引起来，数值也同样。
渲染顺序：后来居上，越后面的元素越可见。
二、SVG的引入常规HTML
如果 HTML 是 XHTML 并且声明类型为 application/xhtml+xml，可以直接把 SVG 嵌入到 XML 源码中。
SVG 可以直接被嵌入到 HTML 中。12345678<html> <body> <h1>Inline SVG 示例</h1> <svg width="200" height="200"> <circle cx="100" cy="100" r="50" fill="red" /> </svg> </body></html>
可以使用 img 元素。1<img src=' ...
SVG 学习笔记（二）viewbox、height、width
123<svg viewbox="0 0 100 100" width="100" height="100"> ...</svg>
基础
viewBox：视窗盒子，简单理解就是在整个svg里截取某一块可见的区域
viewBox="x, y, width, height" x: 左上角横坐标，y: 左上角纵坐标，width: 截取的宽度，height: 截取的长度
通过传递以上参数就可以确定区域。
width，height: svg 面板的宽和高
难点
如何正确设置三者的值？
需要明确需求是什么？——获取到我们需要/绘制的svg
如果说当前绘制的矢量图已经将整个svg空间填满，此时我们需要去拿到整个形状，此时将我们的viewBox完全覆盖整个svg面板即可。123<svg width="24" height="24" viewBox="0 0 24 24"> ...</svg>
怎样 ...
前端工具包 - className
简介
用于有条件地将类名连接在一起，常用于 React 应用。
基本使用
该classNames函数接受任意数量的参数，可以是字符串或对象。该参数'foo'是 的缩写{ foo: true }。
如果与给定键关联的值是假的，则该键将不会包含在输出中。
12345678910111213const classNames = require('classnames') // import classNames from 'classnames'classNames('foo', 'bar'); // => 'foo bar'classNames('foo', { bar: true }); // => 'foo bar'classNames({ 'foo-bar': true }); // => 'foo-bar'c ...
Antd 组件源码分析（一）Spin
Spin组件介绍
可以理解为loading组件，在页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
源码分析
定义了SpinFC组件，它是Spin组件的包装，并提供了默认的指示器设置和样式处理
props12345678910111213interface SpinProps { prefixCls?: string; className?: string; rootClassName?: string; spinning?: boolean; style?: React.CSSProperties; size?: SpinSize; tip?: React.ReactNode; delay?: number; wrapperClassName?: string; indicator?: SpinIndicator; children?: React.ReactNode;}
prefixCls（可选）：Spin组件的CSS类名的前缀。
className（可选）：Spin组件的额外CSS类名。
rootCla ...
数据类型（十一）手写Promise
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199const PENDI ...
数据类型（十）闭包
闭包
即使外部函数已经不存在，也可以获取作用域链上变量的函数。
12345678910function outer(){ const a = 1; function f(){ console.log(a) } return f;}let f = outer()f()
内存泄漏
常见于监听DOM元素时，做了一些额外的操作，然后在某些API作用下导致DOM元素不存在后，变量未被清除。
面试题
一定要在外部函数中 return 内部函数，才会形成闭包吗？
不需要，只要满足能够访问外部变量的函数就是闭包。
数据类型（九）垃圾回收机制
引用计数法
跟踪记录对象的引用次数，当次数为0时就需要被销毁。
缺点：当对象中存在循环引用时，该对象无法被回收，造成内存泄漏
标记-清除法
解决循环引用的问题，但是会出现内存碎片。
解决策略：first-fit、best-fit、worst-fit
标记阶段
从根出发，遍历所有可达的对象并将其标记上活动对象。
清除阶段
清除所有未被标记的对象
Weakmap 和 Map
Weakmap，键值对集合，键是弱引用，只能是对象，值没有限制。Map没有限制。
Weakmap，键是弱引用，不会阻止与之关联的对象被垃圾回收。Map键是强引用，会阻止。
Weakmap的 key 无法使用forEach()和keys()遍历。
使用场景
引用 DOM 元素，
对象的缓存
数据类型（八）This指向
this的绑定时机
this和函数定义的位置没有关系，只和调用者有关
this是在运行时被绑定的
1234567891011function foo{ console.log(this)}foo() // windowlet obj = { foo: foo}obj.foo() // objfoo.call('hello')// string('hello')
this的绑定规则
隐式绑定
通过对象调用函数绑定this
显示绑定：
call、bind
使用new关键字
如果返回的是对象，则直接返回该对象，
如果返回的是基本类型，则return语句无效，仍然返回我们创建的新对象
多重绑定优先级
new绑定 > 显示绑定(bind) > 隐式绑定
面试题12345678910111213141516// 输出结果：obj1// 谁直接调用this就指向谁function foo{ console.log(this)}let obj1 = { ...
