很杂的笔记

2017-10-18  本文已影响0人  YeLqgd

关于Sass

Sass是一个CSS预处理器

下面是我照着自己的理解下的内涵的定义，感觉没有定义的话就不知道它到底是何物，网上找的好几篇博客在定义这块儿也是模棱两可，不够明确，反正我是没看懂。

CSS预处理器是为了解决由CSS语法不够强大而导致在开发过程中出现的一系列问题而设计的一种DSL。

把上面“CSS预处理器”换成“Sass”即得到Sass的定义。

DSL全名Domain Specific Language（领域特定语言），意即专门为某个领域设计的编程语言，特点是简洁、易懂、功能有限；与General Purpose Language（通用语言）相对。

关于data-*属性

data-*是HTML5的设计的一个属性，它允许我们在标准内于HTML元素中存储额外的信息，而不需要使用类似于 classList，标准外属性，DOM额外属性或是 setUserData之类的hack。

<audio controls="controls">
  <source src="track1.mp3" type="audio/mpeg" data-duration="345" data-tempo-camel="125bpm" />
</audio>

上面例子在data-*属性里存储了该audio元素的时长和码率信息

在外部使用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"}

关于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文本、值在JS里的体现

所有JSON文本都对应到JS里的某个字符串，于是JS里面，对于JSON文本格式的字符串我们可以对它进行求值，这个值必然是一个JSON值，于是必然也是某个JS类型的值（因为所有JSON值在JS里都有对应的）。
所以：

另外需要注意JSON与JavaScript 的几点区别：

JSON.parse('"lalal"')//"lalal"
JSON.parse("'lalal'")//SyntaxError
JSON.parse('{"lalal": 1,}')//SyntaxError


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值，后面可选的参数暂时不管。

关于序列化，有下面五点注意事项：

关于JSON.stringfy()更多可见

上一篇下一篇

猜你喜欢

热点阅读