【笔记】重学前端-winter

本文为：winter 发布在极客时间【重学前端】系列课程的的笔记和总结
支持正版哦: https://time.geekbang.org/col...
文章太大了，划分成多个文章，链接贴在对应章节里啦

导语

如果深入进去了解，你会发现，表面上看他们可能是一时忘记了，或者之前没注意但实际上是他们对于前端的知识体系和底层原理没有真正系统地理解

前端学习方法：
一是立足标准，系统性总结和整理前端知识，建立自己的认知和方法论
二是放眼团队，从业务和工程角度思考前端团队的价值和发展需要

第一个方法：建立知识架构
知识的“目录”或者索引：把零散的知识组织起来，也能够帮助我们发现一些知识上的盲区，面试时，定位到知识架构中的位置，相关点讲出

第二个方法：追本溯源
看这个出现的背景和原因，提出他是为了解决什么或者其底层是什么，其中还可以发掘一些趣闻，便于记忆

课程目标：
把无法通过查阅解决的原理和背景讲清楚
不方便查阅和记忆的内容整理好

前端知识体系：
javascript:用一定的词法和语法，表达一定语义，从而操作运行时
数据结构
1.类型：JavaScript 的类型系统就是它的 7 种基本类型和 7 种语言类型
2.实例：内置对象部分
算法：JavaScript 的执行过程

html
1.元素
文档元信息：通常是出现在 head 标签中的元素，包含了描述文档自身的一些信息
语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；
链接：提供到文档内和文档外的链接
替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签...
表单：用于填写和提交信息的一类标签；
表格：表头、表尾、单元格等表格的结构。
2.把 HTML 当作一门语言来了解下：语法和语言机制
3.补充标准：ARIA，它是 HTML 的扩展，在可访问性领域，它有至关重要的作用

1.HTML语义

定义：
语义类标签则是纯文字的补充,eg:标题、自然段、章节、列表，这些内容都是纯文字无法表达的
建议：
只靠 div 和 span 就能走天下了:用于描述“软件界面”多过于“富文本”
好处：
1.无css时,清晰的目录结构
2.SEO
3.读屏软件,根据文章可以自动生成目录 eg:阅读视图功能

使用场景：
1.作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义 eg: ruby(注释)/em(重音)
2.文章标题摘要
hgroup 标签：在 hgroup 中的 h1-h6 被视为同一标题的不同组成部分

<hgroup>
<h1>JavaScript 对象 </h1>
<h2> 我们需要模拟类吗？</h2>
</hgroup>
<p>balah balah</p>
......

不加hgroup

section 的嵌套会使得其中的 h1-h6 下降一级,HTML5之后，只需要 section 和 h1 就足以形成文档的树形结构

<section>
    <h1>HTML 语义 </h1>
    <p>balah balah balah balah</p>
    <section>
        <h1> 弱语义 </h1>
        <p>balah balah</p>
    </section>
    <section>
        <h1> 结构性元素 </h1>
        <p>balah balah</p> 
    </section>
......
</section>

3.适合机器阅读的整体结构
“阅读模式”，以及各种非浏览器终端的出现

<body>
    <header>
        <nav>
            ……
        </nav>
    </header>
    <aside>
        <nav>
            ……
        </nav>
    </aside>
    <section>……</section>
    <section>……</section>
    <section>……</section>
    <footer>
        <address>……</address>
    </footer>
</body>

article，报纸的多文章结构适合用 article 来组织，article为独立性质文章，article与body有相似结构，也可包含header/footer
header，如其名，通常出现在前部，表示导航或者介绍性的内容
footer，通常出现在尾部，包含一些作者信息、相关链接、版权信息
aside 表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容

2.HTML语义：如何运用语义类标签来呈现Wiki网页？

实现如下wiki网页需要的标签：
https://en.wikipedia.org/wiki...
aside: 左侧侧边栏/导航性质的工具内容
article: 独立为文章主体
abbr 标签表示缩写
hr 表示故事走向的转变或者话题的转变
strong 重要，黑体
blockquote, q, cite： blockquote 表示段落级引述内容，q 表示行内的引述内容，cite 表示引述的作品名。
time 机器阅读方便
figure, figcaption 表示与主文章相关的图像、照片等流内容
dfn 被包裹的名词
pre 不需要浏览器帮我们做自动换行，不需要浏览器进行排版。
samp 计算机程序的示例输出
code 代码

除上面用到的标签之外，还需要用到：

3.JavaScript类型：关于类型，有哪些你不知道的细节？

1.开篇winter提出了几个问题，测试是否了解js类型
为什么有的编程规范要求用 void 0 代替 undefined
字符串有最大长度吗？
0.1 + 0.2 不是等于 0.3 么？为什么JavaScript 里不是这样的？
ES6 新加入的 Symbol 是个什么东西？
为什么给对象添加的方法能用在基本类型上？

2.js七种基本类型
1)Undefined
定义：是全局对象的一个属性
什么时候值为Undefined：
1.任何变量在赋值前是 Undefined 类型、值为 Undefined
2.或使用void 运算来把任一一个表达式变成 undefined 值
3.函数不定义return返回值时，函数返回undefined
判断一个值是否为Undefined

全等，不能用==： == undefined 会检查x是不是null
if (x === undefined)
typeof x === 'undefined'
x === void 0

为什么有的编程规范要求用 void 0 代替 undefined：
js中undefined 是一个变量，而并非是一个关键字，避免无意中被篡改，我建议使用 void 0 来获取 Undefined 跟 null 的区别
2)Null
null 是 JavaScript 关键字
Null 类型也只有一个值，就是 null，它的语义表示空值
可以放心用 null 关键字来获取 null 值
3)Boolean
4)String
长度：最大长度是 2^53 - 1
字符串的编码长度影响，我们字符串的操作 charAt、charCodeAt、length 等方法针对的都是 UTF16 编码，所以处理非 BMP（超出 U+0000 - U+FFFF 范围）要谨慎
（补充：字符是以 Unicode 的方式表示的，每一个 Unicode 的码点表示一个字符，UTF 是 Unicode 的编码方式，规定了码点在计算机中的表示方法，常见的有 UTF16 和 UTF8）
JavaScript 中的字符串是永远无法变更的，字符串具有值类型的特征。

5)Number
范围：
Number 类型有 18437736874454810627(即 2^64-2^53+3) 个值
基本符合 IEEE 754-2008 规定的双精度浮点数规则
为了表达几个额外的语言场景，规定了几个例外情况
1.NaN，占用了 9007199254740990，这原本是符合 IEEE 规则的数字
2.Infinity，无穷大；
3.-Infinity，负无穷大。
JavaScript 中有 +0 和 -0
注意除法：“忘记检测除以 -0，而得到负无穷大”
区分 +0 和 -0 的方式，正是检测 1/x 是 Infinity 还是 -Infinity
Number 类型中有效的整数范围是 -0x1fffffffffffff 至 0x1fffffffffffff
浮点数非整数的 Number 类型无法用 ==（=== 也不行）
原因：有些小数以二进制表示位数是无穷的

十进制           二进制
    0.1              0.0001 1001 1001 1001 ...
    0.2              0.0011 0011 0011 0011 ...
    0.3              0.0100 1100 1100 1100 ...
    0.4              0.0110 0110 0110 0110 ...
    0.5              0.1
    0.6              0.1001 1001 1001 1001 ...

现象：

console.log(1.0-0.9 == 0.1)    //false
console.log(1.0-0.8 == 0.2)    //false
console.log(1.0-0.7 == 0.3)    //false
console.log(1.0-0.6 == 0.4)    //true
console.log(1.0-0.5 == 0.5)    //true
console.log(1.0-0.4 == 0.6)    //true

解决：

1.console.log( Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON);
2.((0.3*1000)-(0.2*1000))/1000 = 0.1
3. 在判断浮点运算结果前对计算结果进行精度缩小，因为在精度缩小的过程总会自动四舍五入
console.log(parseFloat((1.0-0.9).toFixed(10)) === 0.1)   //true

6)Symbol
7)Object