【笔记】重学前端-winter

时间 2019-11-11

标签笔记前端 winter 繁體版

原文原文链接

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

导语

若是深刻进去了解，你会发现，表面上看他们多是一时忘记了，或者以前没注意但其实是他们对于前端的知识体系和底层原理没有真正系统地理解css

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

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

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

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

前端知识体系：
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:阅读视图功能segmentfault

使用场景：
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

10.浏览器：一个浏览器是如何工做的？（阶段一）

https://segmentfault.com/a/11...

11.浏览器：一个浏览器是如何工做的？（阶段二）

https://segmentfault.com/a/11...

12.浏览器：一个浏览器是如何工做的？（阶段三）

https://segmentfault.com/a/11...

13.浏览器：一个浏览器是如何工做的？（阶段四）

https://segmentfault.com/a/11...

14.浏览器：一个浏览器是如何工做的？（阶段五）

https://segmentfault.com/a/11...

16.JavaScript执行（一）：Promise里的代码为何比setTimeout先执行？

https://segmentfault.com/a/11...