犀牛書讀書筆記-01

標籤：style   blog   http   color   os   java   使用   io   strong   

第一章，概述

這章是綜述性質的，作者隨意的給出了一些例子。

1. visibility = hidden, display = none。

function hide (e, reflow) {        if (reflow) {            e.target.style.display = "none";        } else {            e.target.style.visibility = "hidden";        }}

這段代碼展示了兩種隱藏節點的方式，之前在項目中接觸最多的是display=none，對visibility=hidden的方式沒用過，還不知道這種方式和display = none有什麼區別。
visibility = "hidden"，元素會隱藏，但是不會把元素從渲染樹種拿掉,它依然會部分渲染，只是不可見而已（變成完全透明，只會觸發repaint）。
display = "none"，那麼元素就不會渲染，整個從渲染樹中拿掉了。會觸發reflow與repaint。
比如

block oneblock twoblock three

中間的元素visibility = hidden

block onehidden blockblock three

中間的元素display = none

block onehidden blockblock three

其實我想問為什麼中間那個所謂只會觸發repaint的隱藏方式會傲嬌的多出來一截。。。。。。顯然這種情況下瀏覽器會reflow的。想想可能是因為我用了自動寬度。果然，這樣就和諧多了。
使用固定寬度

block oneblock twoblock threeblock oneblock twoblock three

2. Bind events with DOM node‘s "on" attributes。

給DOM元素定義事件最簡單的方法是，給DOM節點以"on"為首碼的屬性綁定一個回調。出於頁面維護性的考慮，這種代碼和HTML節點寫一塊兒玩法正常情況下很少會用到。

<div style = "border: 1px solid gray" onmousedown="(function(node){node.textContent = new Date().toString();})(this);">點擊我文字會改變</div><div style = "border: 1px solid gray" onmouseup="(function(event){event.target.textContent = new Date().toString();})(event);">點擊我文字會改變</div>

3. addEventListener。

玩的更多的應該還是addEventListener。

<div id = "click_node">點擊我看看</div><script>    window.onload = function() {        var node = document.getElementById(‘click_node‘);        if (node && node.addEventListener) {           node.addEventListener(‘mousedown‘, function(){               node.textContent = "mouse down on node";           }, false);           node.addEventListener(‘mouseup‘, function(event){               node.textContent = "mouse up on node";           }, false);        }    }</script>

注意幾個小問題，比如addEventListener的第一個參數是需要綁定的事件名，全小寫，而且沒有”on”首碼。（如果相容老版IE用attachEvent的話則需要加上on首碼）。第三個參數是用來指定是否把linstener註冊在事件的capture階段，一般都是false，也是使用element.onclick = function(){}這種綁定方式的的預設行為。

關於DOM事件的生命週期，可以參考一下這篇文章。這裡插一句，文章中提到通過阻止沒必要的事件冒泡可以提升效能，不過作者提到的event.cancelBubble這種方式並不被提倡（參考），應該使用event.stopPropagation()來替代這種方式。

 

第二章，詞法結構

這章主要內容是JS程式的詞法構成，並沒有什麼需要特別注意的。

1. JavaScript會認為它正在解析的程式碼已經是這種標準格式，不會再對標示符、字串、Regex做標準化處理。

關於JavaScript與Unicode，我準備專門再寫一篇總結文章。這個Normalization問題有時候挺煩人的，特別是要對字串做細緻處理的時候。ES6已經添加一個新方法String.prototype.normalize來提供這個功能，在此之前可以使用一些庫來完成，比如unorm （https://github.com/walling/unorm）(by Bjarke Walling).

2. 在return、break、continue語句和隨後的運算式之間不能有換行。

否則會出現難以調試的程式問題。正常人應該都不會這麼寫的。

3. “++”與“--”作為尾碼的時候要與運算式在同一行。

同上，正常人不會另起一行寫++--的。

 第三章，類型、值和變數

1. JavaScript的資料類型分為兩類：原始類型（primitive type)與物件類型。簡單（原始）類型（simple types）有numbers、strings、booleans、null 和 undefined。剩下的其他的都是物件類型。

注意一下number、string、boolean是類對象（object-like）因為他們有一些預定義的方法，但它們是immutable的。

2. JS不區分整數和浮點數。所有的數字都是雙精確度浮點數，採用IEEE 754標準。JS中實際的操作（比如數組索引、位操作)則是基於32位整數。

由於是雙精確度浮點數，所以有喜聞樂見的 0.1 + 0.2 != 0.3。任何採用二進位浮點數的程式設計語言都會有這個問題。
關於實際操作，比如位操作時使用32位整數， 寫代碼時可以利用這個特性來把小數轉換成整數，參考我這篇文章，《javascript中小數轉換為整數》。
IEEE 754 中關於雙精確度浮點數的規定是1位元符、11位階碼再加上52位的有效數位。由於規範要求小數必須是標準形式，即小數點左邊為1，所以用52位有效數字表示了53位的　　資訊。其所能精確表示的整數範圍就是 2^53 ~ -2^53。

3. JS中的NaN有一點特殊：它和任何值都不相等，包括自身。

所以看到dojo庫中有這樣的equals，也是為了讓兩個NaN能夠“相等”。

function equals(a, b){    return (a === b) || ( a !== a && b !== b);}

4. JS中字串是Immutable的，類似replace、toUpperCase都是返回新串。

其實前面第一條講類型時已經說過了。

5. JS中有“封裝對象”的存在，前面提到的使用簡單類型的方法實際上是通過建立臨時的封裝對象，然後再使用封裝對象的方法。null和undefined沒有封裝對象，試圖引用他們的任何屬性都會拋錯。

簡單對象雖然看起來有一些屬性，比如"123".length， 但是試圖給它賦值屬性（如"123".attr = 4）會被忽略掉 ("123".attr is still undefined)。

6. JS會在必要的時候把封裝對象轉換成原始值。如“==”認為原始值與其封裝對象相等（封裝對象會向原始值轉換），但是“===”不會進行任何轉換，所以不等。

對象原始值的比較（==）會試圖把對象的原始值求出來再比較，如果是兩個對象比較，則比較他們是否引用同一個對象。

var  a = ‘a‘,     b = ‘a‘,     c = new String(‘a‘);     d = new String(‘a‘);a == b // true
a === b // true　　a == c // true, 會轉換
a === c // false, 全等不轉換c == d // false, 兩個對象的比較
c === d // false, 沒懸念

7. 對象向原始值的轉換有些複雜。顯示轉換最簡單，比如 Number("3"), Object(3)。

有一些常用的簡單寫法

+x //把x轉換成Number， 相當於Number(x), 也可以寫成 x - 0，不過沒+x看起來好看!!x //估計大家見得多了，相當於Boolean(x)

8. Object to Boolean 所有的物件類型都會轉成true。

所以別太驚訝，new Boolean(false)實際上是會轉換成true。

if(new Boolean(false))   console.info("yes, new Boolean(false) is truthy");

9. Object to Number/String， 涉及到toString(), valueOf()這兩個方法，一般情況下轉成string，toString會先調用，不行就valueOf；轉成number則順序顛倒。

10. “-“會把它的兩個運算元都轉換成數字。而對於”+“，很多時候+的運算元會被轉換成字串。

[1] + 1; // ”11“[1] - 1; //0new Date() + 1; //"Sun Aug 10 2014 00:20:41 GMT+0800 (China Standard Time)1"new Date() - 1; //1407601216775

11. 關於變數，JS中沒有塊級範圍，JS是函數範圍。所以有一種”聲明提前“的非正式稱謂（hoisting)。

實際上JS指令碼雖然是解釋執行，但是在逐行執行之前還有一個”先行編譯“的過程，這個過程會把context中聲明的變數放入”棧“中，並未他們賦值為undefined，然後再開始逐條執行語句。

體會一下這個例子

a();function a() { console.info(1);}a();function a() {console.info(2);}a();a = function () { console.info(3);}a();//輸出://2 2 2 3

12. 使用var 聲明的變數無法被delete刪除，而作為對象的屬性可以。

刪除一個你自己聲明的變數確實沒有什麼必要。

(function() {    var a = ‘123‘;    console.info(a);    delete a;    console.info(a);})();//輸出兩個”123“

13. 範圍鏈與閉包。

這個我決定再單獨開一個坑。

犀牛書讀書筆記-01