全栈开发从零开始

SVG 是我基本没有用过的知识块，所以这里也是边分享边学习，尽量在我自己理解的基础上来分享。 1 概念 SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）；其他图像格式都是基于像素处理的， SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。 SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。 上面是 SVG 代码直接插入网页的例子。 SVG 代码也可以写在一个独立文件中，然后用 、 、 、 等标签插入网页： < img src = "circle.svg" > < object id = "object" data = "circle.svg" type = "image/svg+xml" ></</span> object > < embed id = "embed" src = "icon.svg" type = "image/svg+xml" > < iframe id = "iframe" src = "icon.svg" ></</span> iframe > CSS 也可以使用 SVG 文件： . logo { background : url ( icon.svg ); } SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页： < img src = "data:image/svg+xml;base64,[data]" > 2 语法 2.1 标签 我们可以把 SVG 代码都放在顶层标签 之中，下面是一个例子： < svg width = "100%" height = "100%" >

  还记得之前提到过，目前在 JavaScript 里面，一共有7种数据类型；今天就来介绍这第7种，也是最新的数据类型—— Symbol 。 这个类型目前并没有合适的中文翻译，因为叫做标志或者标识都有其局限性，主要是感觉不够准确，故此这里就直接使用了它的英文名称。 1 概念 ES 5  的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（ mixin  模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是  ES 6  引入 Symbol 的原因。 ES 6  引入了一种新的原始数据类型 Symbol ，表示独一无二的值。它是  JavaScript  语言的第七种数据类型，前六种是： undefined 、 null 、布尔值（ Boolean ）、字符串（ String ）、数值（ Number ）、对象（ Object ）。 Symbol 值通过 Symbol 函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的  Symbol  类型。凡是属性名属于  Symbol  类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。 上面代码中，变量 s 就是一个独一无二的值。 typeof 运算符的结果，表明变量 s 是  Symbol  数据类型，而不是字符串之类的其他类型。 注意， Symbol 函数前不能使用 new 命令，否则会报错。这是因为生成的  Symbol  是一个原始类型的值，不是对象。也就是说，由于  Symbol  值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。 Symbol 函数可以接受一个字符串作为参数，表示对  Symbol  实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。 上面代码中， s1 和 s2 是两个  Symbol  值。如果不加参数，它们在控制台的输出都是 Symbol() ，不利于区分。有了参数以后，就等于为它们加上了描述，输出的时候就能够分清，到底是哪一个值。 如果  Symbol  的参数是一个对象，就会调用该对象的 toString 方法，将其转为字符串，然后才生成一个  Symb