关于Sass
- Sass是什么？
Sass是一个CSS预处理器
- CSS预处理器是什么？
下面是我照着自己的理解下的内涵的定义，感觉没有定义的话就不知道它到底是何物，网上找的好几篇博客在定义这块儿也是模棱两可，不够明确，反正我是没看懂。
CSS预处理器是为了解决由CSS语法不够强大而导致在开发过程中出现的一系列问题而设计的一种DSL。
把上面“CSS预处理器”换成“Sass”即得到Sass的定义。
- DLS是什么？
DSL全名Domain Specific Language（领域特定语言），意即专门为某个领域设计的编程语言，特点是简洁、易懂、功能有限；与General Purpose Language（通用语言）相对。
-
Sass的两种后缀名
- .scss 与css写法格式要求一致，需要大括号和分号
- .sass 不适用大括号和分号
-
Sass基本功能：变量、计算、嵌套以及其他
关于data-*属性
data-*是HTML5的设计的一个属性，它允许我们在标准内于HTML元素中存储额外的信息，而不需要使用类似于 classList，标准外属性，DOM额外属性或是 setUserData之类的hack。
- HTML语法：自定义的data属性的名字必须以data-开头，并且连字号后面至少要有一个符合HTML规范的字符。比如一个音频需要存储一些没有可视化展现意义的额外信息，那我们就可以使用data属性来存储
<audio controls="controls">
<source src="track1.mp3" type="audio/mpeg" data-duration="345" data-tempo-camel="125bpm" />
</audio>
上面例子在data-*属性里存储了该audio元素的时长和码率信息
- js访问
在外部使用JavaScript去访问这些属性的值同样非常简单。你可以使用getAttribute()配合它们完整的HTML名称去读取它们，但标准定义了一个更简单的方法：DOMStringMap你可以使用dataset读取到数据。
let srcNode = document.querySelector('audio').querySelector('source')
srcNode.dataset //{duration: "345", tempoCamel: "125bpm"}
srcNode.getAttribute('data-tempo-camel')//"125bpm"
srcNode.dataset.duration = "4396"
srcNode.dataset//{duration: "4396", tempoCamel: "125bpm"}
- css访问
可以通过属性选择器访问，也可以通过可以generated content使用函数attr()来显示data-*属性的内容，详见例子。
关于localStorage
localStorage 属性允许我们访问一个 local Storage 对象。localStorage 与 sessionStorage 相似。不同之处在于，存储在 localStorage 里面的数据没有过期时间（expiration time），而存储在 sessionStorage 里面的数据会在浏览器会话（browsing session）结束时被清除，即浏览器关闭时。二者的作用是存储客户端的数据，大小在5M到10M之间。
先列出常用的四种方法，其作用见名知意
localStorage.clear();
localStorage.setItem('key', 'value');
localStorage.getItem('key'); // => 'value'
localStorage.removeItem('key');
localStorege里只能存储字符串形式的数据，也就是说，每个键值对的值都是字符串的形式，如果我们需要存储json格式的对象，需要提前将值序列化为字符串形式，即调用JSON对象的stringify()方法，那么不调用会怎么样呢？
localStorage.setItem('forTest', {a:1, b:2})
localStorage.getItem('forTest')//"[object Object]"
localStorage.setItem('forTest', JSON.stringify({a:1, b:2}))
localStorage.getItem('forTest')//"{"a":1,"b":2}"
可以看到对于非字符串格式的数据，存储之前它会先调用该数据的toString()方法将数据转化成字符串格式以后再存储，而"[object Object]"并非一个符合规范的JSON格式字符串，调用parse()方法会报错。
关于JSON
之前一直就模棱两可，一直有在用但是就是说不清楚它到底是什么。
JSON是什么？
先看定义：
JSON is a lightweight, text-based, language-independent data interchange format. It was derived from the
ECMAScript programming language, but is programming language independent. JSON defines a small set of
structuring rules for the portable representation of structured data.
JSON是一种轻量级的，基于文本的，与语言无关的数据交换格式。 它来自于
ECMAScript编程语言，但是编程语言是独立的。 JSON定义了一系列
构造结构化数据的便携式表示的规则。
换句话说，JSON定义了一种的格式，这种格式用于数据交换，这种格式需要体现在文本上。
JSON文本
A JSON text is a sequence of tokens formed from Unicode code points that conforms to the JSON value
grammar. The set of tokens includes six structural tokens, strings, numbers, and three literal name tokens.
JSON文本是一堆tokens组成的序列，这些tokens由符合JSON值的Unicode代码点（不知道怎么翻译）形成。形成的这组tokens包括6个结构tokens（'[', ']', '{', '}', ':', ','）、字符串、数字、以及三个字面名称tokens（true, false, null）。
如果一个文本的结构符合JSON定义的那一系列规则，那我们就可以说这个文本是JSON格式的文本，或者直接称为JSON文本。
JSON Values
A JSON value can be an object, array, number, string, true, false, or null.
JSON 值可以是一个对象、数组、数字、字符串、true、false、null。
上面那些在JS里都有对应，同时可以看到JSON是无法表示JS里的函数和undefined的。
显然，透过上面关于JSON值和JSON文本的定义我们可以得出下面的结论：
- 单个JSON值形成的文本必然是JSON文本
- 一个符合JSON规范的文本必然也是某个类型的JSON值
- 其中数字、字符串、
true、false、null这5个token各自单独都可以组成一个JSON文本，因为他们自身就是一个JSON值；然后这些token与6个结构tokens（'[', ']', '{', '}', ':', ','）组合构成另外两个相对复杂的JSON值——对象和数组。
JSON文本、值在JS里的体现
所有JSON文本都对应到JS里的某个字符串，于是JS里面，对于JSON文本格式的字符串我们可以对它进行求值，这个值必然是一个JSON值，于是必然也是某个JS类型的值（因为所有JSON值在JS里都有对应的）。
所以：
- JSON文本对应JS里与之相对的字符串
- JSON值对应JS里对上述字符串的求值的结果
另外需要注意JSON与JavaScript 的几点区别：
- 对象和数组：JSON里面属性名称必须是双引号字符串；最后一个属性后面不能有逗号。
JSON.parse('"lalal"')//"lalal"
JSON.parse("'lalal'")//SyntaxError
JSON.parse('{"lalal": 1,}')//SyntaxError
- 数值：JOSN里前导0是禁止的（数字前面有0和没0结果完全不一样）
JSON.stringify(0234)//"156"
JSON.stringify(234)//"234"
我知道的求值的方式有eval()和JSON.parse()前者貌似用的不多就不去了解了。
JSON.parse和JSON.stringify
首先JSON是内置的全局对象，它包含parse()和stringify()这两个方法，用于将JSON值和与JSON文本对应的字符串相互转化。
JSON.parse(text[, reviver])接受两个参数，第一个为需要转换为JSON值的字符串，第二个可以在转换前做一些操作，暂时没接触到。
JSON.stringify(value[, replacer [, space]])接受三个参数，value为需要序列化为字符串的JSON值，后面可选的参数暂时不管。
关于序列化，有下面五点注意事项：
- 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中
- 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值
-
undefined、任意的函数以及symbol值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成null（出现在数组中时） - 所有以
symbol为属性键的属性都会被完全忽略掉，即便replacer参数中强制指定包含了它们。 - 不可枚举的属性会被忽略
关于JSON.stringfy()更多可见
网友评论