【笔记】重学前端-winter

2019年8月31日 300次阅读来源: Rainie

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

导语

假如深切进去相识，你会发明，表面上看他们多是一时遗忘了，或许之前没注重但实际上是他们关于前端的学问体系和底层道理没有真正体系地明白

前端学习要领：
一是驻足范例，体系性总结和整顿前端学问，竖立本身的认知和要领论
二是放眼团队，从营业和工程角度思索前端团队的代价和发展须要

第一个要领：竖立学问架构
学问的“目次”或许索引：把零星的学问构造起来，也能够协助我们发明一些学问上的盲区，面试时，定位到学问架构中的位置，相干点讲出

第二个要领：追根究底
看这个涌现的背景和缘由，提出他是为相识决什么或许其底层是什么，个中还能够挖掘一些妙闻，便于影象

课程目标：
把没法经由历程查阅处置惩罚的道理和背景讲清楚
不轻易查阅和影象的内容整顿好

前端学问体系：
javascript:用肯定的词法和语法，表达肯定语义，从而操纵运行时
数据构造
1.范例：JavaScript 的范例体系就是它的 7 种基础范例和 7 种言语范例
2.实例：内置对象部份
算法：JavaScript 的实行历程

《【笔记】重学前端-winter》
html
1.元素
文档元信息：一般是涌现在 head 标签中的元素，包括了形貌文档本身的一些信息
语义相干：扩大了纯文本，表达文章构造、差别言语要素的标签；
链接：供应到文档内和文档外的链接
替代型标签：引入声响、图片、视频等外部元素替代本身的一类标签…
表单：用于填写和提交信息的一类标签；
表格：表头、表尾、单元格等表格的构造。
2.把 HTML 看成一门言语来相识下：语法和言语机制
3.补充范例：ARIA，它是 HTML 的扩大，在可接见性范畴，它有至关主要的作用

《【笔记】重学前端-winter》

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>
......

《【笔记】重学前端-winter》

不加hgroup

《【笔记】重学前端-winter》
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>

《【笔记】重学前端-winter》

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 代码

除上面用到的标签以外，还须要用到：
《【笔记】重学前端-winter》

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