【筆記】重學前端-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