每周知识总结（四）

有限状态机

有限状态机，（英语：Finite-state machine, FSM），又称有限状态自动机，简称状态机，是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。

常见的计算机就是使用有限状态机作为计算模型的：对于内存的不同状态，CPU通过读取内存值进行计算，更新内存中的状态。CPU还通过消息总线接受外部输入设备（如键盘、鼠标）的指令，计算后更改内存中的状态，计算结果输出到外部显示设备（如显示器），以及持久化存储在硬盘。
电脑游戏设计中也经常使用有限状态机模型。以水果忍者游戏为例，游戏中水果的状态是有限状态，其运行轨迹是由模拟物理运动规律的计算公式运算而成的，一个香蕉抛起来后会按照抛物线运行，其每一帧位置变化都是一个状态的改变，状态改变通过计算公式来决定。当然作为游戏不会仅仅这么简单，如果这么简单就是动画了，游戏还有复杂的人机交互事件，比如用手在屏幕上“切”了水果，水果感知到这个事件后，会按照程序逻辑进入爆炸状态。

跨越问题

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域

1、端口和协议的不同，只能通过后台来解决
2、localhost和127.0.0.1虽然都指向本机，但也属于跨域

跨域限制
1、无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
2、无法接触非同源网页的 DOM
3、无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）

跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。

其实这就是同源策略：

同源策略
一种约定，是浏览器最核心也最基本的安全功能。保证用户信息的安全，防止恶意的网站窃取数据。
例子：
用户登录shopA商城A之后，继续浏览到shopB，这时如果商城B可以拿到商城A的Cookie信息，就会泄露用户的相关隐私信息，也有可能被他人非法使用，甚至破坏等等。

我们一般会采用cors的跨域方案，来解决开发中的问题。

4.原理:

浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求。

只要同时满足以下两大条件，就属于简单请求。：

（1) 请求方法是以下三种方法之一：

1.HEAD
2.GET
3.POST

（2）HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

当浏览器发现发现的ajax请求是简单请求时，会在请求头中携带一个字段：Origin.
Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务器会根据这个值决定是否允许其跨域。
如果服务器允许跨域，需要在返回的响应头中携带下面信息：

Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true

如果遇到的是特殊请求：
则认定为可以跨域，后续就跟简单请求的处理是一样的了。

局域网、广域网、以太网

以太网不是一种具体的网络，是一种技术规范。

1、简单来说，网络按照区域来划分，分为广域网和局域网。这只是按照使用区域大小来划分的。就像省和村的关系。
2、然后在这个小区域（局域网）里建设网络，就需要使用多种标准技术，其中电气标准中规定用双绞线还是单芯线等，这个电气标准中有以太网技术、令牌环网技术、ATM网技术、帧中继技术等，不要被以太网中这个网字迷惑，把它看成技术，我们是用了CSMA/CA技术（别名：以太网技术），使用方便、网络建造简洁，以太网技术就是流传开来。
3、局域网中物理网络按照以太网技术敷设完毕，还并不能通信，这个时候就需要其他技术标准，我们经常见到的TCP/IP技术，tcp/ip技术可以依托以太网技术、令牌环网技术等上使用，而且我们经常TCP/IP与以太网配合使用，所以我们日常中口语中容易将TCP/IP与以太网技术混在一起说。其实是不同层级的技术。

局域网：（Local Area Network，LAN）， 局域网是一个局部范围的计算计组，比如家庭网络就是一个小型的局域网，里面包含电脑、手机和平板等，他们共同连接到你家的路由器上。又比如学校的机房就是一个局域网，里面有几百几千台电脑，当机房无法上外网时，但是电脑之间仍可以通信，你们可以通过这个局域网来打CS 、玩红警。理论上，局域网是封闭的，并不可以上外网，可以只有两台电脑，也可以有上万台。

广域网：（WAN，Wide Area Network），广域网的范围就比较大了，可以把你家和别人家、各个省、各个国家连接起来相互通信。广域网和局域网都是从范围的角度来划分的，广域网也可以看成是很多个局域网通过路由器等相互连接起来。

以太网：(Ethernet)，以太网可以看成是一种实现局域网通信的技术标准，是目前最广泛的局域网技术。以太网的运行速率有10Mbps,100Mbps,1Gbps,10Gbps的，它的传输介质有的是双绞线，有的是光纤。 简单的说，以太网就是在局域网内，把附近的设备连接起来，可以进行通讯。

通常广域网的数据传输速率比局域网高，而信号的传播延迟却比局域网要大得多。广域网的典型速率是从56kbps到155Mbps，已有622Mbps、2.4 Gbps甚至更高速率的广域网；传播延迟可从几毫秒到几百毫秒（使用卫星信道时）。

svg和g

SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。如果svg不是根元素，svg 元素可以用于在当前文档（比如说，一个HTML文档）内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。

嵌套SVG元素可用于将SVG形状分组在一起，并将其放置为一个集合。嵌套在svg元素内的所有形状都将相对于其包围svg元素的位置（x，y）定位（x，y）。通过移动封闭svg元素的x和y坐标 ，您也可以移动所有嵌套的形状。

SVG < g >元素用于将SVG形状分组在一起。分组后，您可以像变形单个形状一样变换整个形状。与 不能单独成为转换目标的嵌套 < svg >元素相比，这是一个优势。您还可以设置分组元素的样式，并像对待单个元素一样重复使用它们。

元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过 元素来引用它们。

缺点：G元素没有X和Y属性
与将嵌套的< svg >元素内的形状分组相比，转换< g >元素内的所有形状的能力是一个优势。 < svg >元素不能自行转换。 您必须将< svg >元素嵌套在< g >元素内，以转换其嵌套形状。
不过，与< svg >元素相比，< g >元素有一个缺点。 不能仅通过更改 元素的x和y属性来移动包括所有嵌套形状的< g >元素。 < g >元素没有x和y属性。 要移动 元素的内容，只能使用transform属性使用“ translate”函数，例如：transform =“translate(x,y)”。
如果需要使用x和y属性在< g >元素内移动所有形状，则需要将< g >元素嵌套在< svg >元素内。 < svg >元素具有x和y属性。