CDN是什么

如果没有CDN

www.baidu.com 
-> DNS解析 
-> 123.123.123.123

加入了CDN以后

访问 www.baidu.com  
-> DNS解析为CNAME域名 
-> CDN地址image.baidu.cnd258.com 
-> 在CDN服务器中未发现请求的资源 
-> 到源服务器请求资源

当再次请求相同的资源时，CDN服务器会直接返回资源，而不会访问源服务器。

1. 由于有了cdn缓存资源，源服务器的压力大大减小。避免了由于访问量过多而无法响应请求。
2. cdn服务商有大量的服务器分布于广阔的地理范围内，可以就近响应请求，从而提高响应请求的速度。
3. 可以通过cdn的api提前将cdn没有缓存的资源添加到缓存中，这样用户第一次访问资源就可以享受到cdn的缓存加速。

配置

1. 提供给CDN服务商需要加速的网址和源服务器的ip或域名。服务商会给我们一个cdn网址
2. 域名解析：在网址的dns解析处，加一条CNAME解析，将原来的网址解析为cdn网址

MDN

选择器

优先级

伪类

伪元素

盒子模型

• 内容、内边距、边框、外边距、box-sizing
• 背景颜色、背景图片、背景渐变色
• outline、box-shadow

外边距合并

块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者

布局

• 浮动和定位在内的传统布局方法
• 弹性盒（flexbox）布局

书写规范

less

官网

官网

需求

1. 资源本地化：上课时课件的所有资源预先下载。
2. 绘本插件图片资源多，需要预先下载。

实现方案

workbox

使用

1. 安装 workbox

   npm install workbox-cli --global
   

2. 在项目目录下运行命令，进行 workbox 的配置，会生成一个配置文件 workbox-config.js

   cd ./a/b/project_path
   workbox wizard
   

3. 默认生成的 workbox 的依赖是 google 的 cdn ，国内无法访问，可通过配置改为使用本地依赖。在配置文件（workbox-config.js）中添加或修改为

   "importWorkboxFrom": "local",
   

4. 根据配置文件让 workbox 工作，会生成一些 service worker 相关的文件，入口是 sw.js 文件

   workbox generateSW workbox-config.js
   

5. 在项目入口的html文件（index.html）中引入 workbox 。

   <script>
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', () => {
       navigator.serviceWorker.register('/sw.js');
     });
   }
   </script>
   

workbox 会遍历它的工作目录下的所有html文件，将html文件及其中依赖的图片、css和js文件全部加入一个列表中。当第一个页面载入后 workbox 开始工作，利用 service worker 的 api 预下载列表中的文件（缓存）。当访问其他网页或者没有网络/弱网时，就可以使用缓存工作。

精准匹配

一个字符跟着一个字符，完全匹配

/test/

匹配一类字符

匹配组合中的任意一个👇

[abc]

除了组合中的所有👇

[^abc]

☢️歧义：^有2中含义：在[]中表示“非”，在正则表达式的开头/^abc/，表示匹配以abc开头的字符串。

从a到m之间👇

[a-m]

转义

字母和数字都可以表示自己。但$``-``^可以表达自身以外的东西，要使用反斜杠“\”来转义。

重复

/t?est/👉字符后加?表示一次或零次出现

/t+est/👉+表示一次或多次出现

/t*est/👉 *表示零次或多次出现

/t{4}est/👉{4}表示4次出现

/t{4,10}est/👉{4-10}表示4-10次出现

/t{4,}est/👉{4,}表示4-多次出现

预定义字符

\t表示水平制表符tab

\s表示任何空字符，如空格、tab、回车等

还有很多

分组

操作符（如+``*``?)只能影响它前面的术语。使用小括号()可以使操作符作用于一组术语。

例子：/(ab)+/会匹配"ab"字符串一次或多次。

☢️歧义：()同时还有捕获的作用。

或

使用竖线表示或的关系，比如/a|b/匹配a或b，与/[ab]/类似

反向引用

看这个正则/^([abc])a\1)/，其中()为捕获，可能捕获到a或b或c，\1就表示被捕获到的那个字符。

比如，对于字符串bab，首先([abc])捕获到了b，\1就代表b，所以bab可以匹配。

捕获及捕获的引用

/(hello) (world)/ 在匹配字符串 hello world 时会将 () 中的字符进行捕获，可以用 $1 $2 表示。

在string.replace()中，使用"$1"表示被捕获到的字符。

比如，'hello world'.replace(/(hello) (world)/, '$1 666-$2')，会输出"hello 666-world"

(?: . . .)表示非捕获分组，也就是不会被捕获，仅表示分组。

trim()的实现

方法1

str.replace(/^\s+|\s+$/g,"")，在头尾分别替换掉空字符

方法2

var str = strings.replace(/^\s\s*/,""), //在头部替换
    ws = /\s/,
    i = str.length;

while(ws.test(str.charAt(--i))); // 看在尾部有几个空字符

return str.slice(0,i+1); // 剔除空字符

方法2比方法1在长文档中性能更好。

参考：例子网站1，例子网站2，树1

circle

circle（圆形）有3个主要属性

1. cx、cy，圆心的坐标
2. r，半径

线性映射

const scale = d3.scaleLiner();
scale.domain = ([100, 200]);
scale.range = ([10, 50]);
const output = scale(50);

3个概念：

1. scaleLiner，线性映射。
2. domain（域），存放的是真实的数据。
3. range（范围），映射后的范围。 domain中的数据会被线性映射到range中。scale(50);中的50是domain中的值，output为映射后的值。

最值

const positionData = [[1, 7, -4],[6, 3, 8],[2, 8, 3]]
const maxZ = d3.max(positionData, (d)=>d[2])

动态缩放

处理复杂数据的第一步是确定缩放比例，才能让所有数据点都包含在svg画布中。

const xScale = d3.scaleLinear()
  .domain([0, d3.max(dataset, (d) => d[0])])
  .range([padding, w - padding]);

在数据集中找到最大最小值，作为domain的边界，将数据集映射到画布大小的range中

坐标轴

const yAxis = d3.axisLeft(yScale);

svg.append("g")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);

svg的image元素

<image 
  fill="#000000" 
  x={x} y={x}
  width={w} height={h} 
  preserveAspectRatio="none"
  xlinkHref={mark.point.image} 
/>