“聲討”高雲的《jQuery技術內幕》

王福朋發表於2014-04-09

1. 前言:

其實本文有點太標題黨了,哈哈,見諒。說“聲討”,就是說說我作為一個《jQuery技術內幕》一個忠實讀者,讀本書的一些想法和建議。

2014年2月20日,我收到了《jQuery技術內幕》,密密麻麻600多頁。到今天4月9日,我已經看了400多頁(除卻sizzle的一部分沒看,因為那塊實在是看不懂,就先略過)。

我買了書,當時花了大約80元,而且認認真真的看了一大半,後面的部分我還會繼續看下去。也算是一個忠實的讀者。

 

學習新知識,總是一個痛苦的過程,期間也是痛並快樂著。總結痛苦的原因,一方面解讀jQuery原始碼確實是一個龐大的工程,另一方面,也覺得作者在寫書的時候漏掉了許多。

書看了一半多,總是想著寫點什麼。想來想去,印象最深的,是覺得作者沒有給讀者一個“臺階”,而是直接拔高到了原始碼的層面,一行一行的解讀、註釋。詳細解讀原始碼並沒有什麼不好,但是在解讀每行的原始碼之前,應該想說點什麼,把讀者帶進去。

下面我說幾個例子:

 

例1. jQuery('div')到底是個什麼物件?

本書一上來就是構建jQuery物件,列出了N中構建jQuery物件的方式,有DOM元素、字串、函式等等。但是讀者看了好大一部分篇幅之後,都不知道這些構建的物件,到底是什麼?這些程式碼的最終結果是什麼?到底為誰服務?以及對Jquery物件進行各種操作的時候,由於不明白它的結構而產生迷惑。

恰巧,當時我在看這本書的同時,也正在看miaov.com的視訊教程,教程裡面的講師就及早的提到了這一點。例如:

jQuery('div')返回的,其實是一個物件,加入頁面中有3個div元素,那麼這個物件就會建立“0”、“1”、“2”這三個屬性,分別指向這三個DOM物件,length屬性記錄個數。這樣就不會讓我們誤以為jQuery('div')是一個陣列。

我當時問過許多人,jQuery('div')是個什麼物件,他們都誤以為是一個陣列,後來我跟他們說jQuery('div')是一個object,不是陣列。

(題外話:jQuery('div')既然是object,那麼JSON.stringify(jQuery('div'))會出錯,為什麼?因為jQuery('div')裡面的DOM元素存在著迴圈引用。)

 

有些人可能會說:那是你自己懶,你不會去chrome中跟蹤以下嗎?   如果非要那麼嚴格要求讀者,就繼續看下一例子。

 

例2. 屬性操作中,“修正物件”是什麼?

記得當時看這一段的時候,我都懵了,從來沒接觸過“修正物件”這個概念,滿篇提到的get,set到底是什麼東西?

現在回頭再看,這些問題確實迎刃而解,但是當時確實不知道,於是就湊合著往前看,終於看到最後才算明白了,修正物件就是為了解決瀏覽器相容性,分離除了的處理瀏覽器“個性”需求的方法。

一般情況下的html/DOM屬性操作,可能通過簡單的賦值或者設定就可以完成,但是有一些是需要照顧瀏覽器個性的,例如瀏覽器不支援getAttribute()該怎麼辦,更多例子可參見jQuery.support。jQuery把這些特殊情況,分離出來,集中到一個叫做“修正物件”的物件中,通過設定set和get來操作。因此,在獲取一個html/DOM屬性時,jQuery會先檢查是否符合修正物件裡的情況,如果符合就呼叫get來返回值,如果不符合,就用最基本的操作返回值。

如果本書在該章節前面,加這樣一段解釋,以例子或者流程圖的形式展示更好,先把修正物件、get、set、的意義大體說一遍,讓讀者心裡有個譜,我想讀起來會輕鬆許多。

 

例3. jQuery的事件儲存結構是怎樣的?

正是我現在看的章節,現在才算稍微明白一點。書中之前介紹過,事件儲存在jQuery.cache中,不是直接用div1.onclick=function(){...}的方式。但是寫到事件這一章節,沒有再深入介紹,即直接上來程式碼解釋了。看它程式碼中各種取值賦值,看的很難受,不知道從哪裡取出,也不知道賦值到哪裡去。

我覺得我現在像是個警察再查詢一個案件的線索一樣,探尋著程式碼中的蛛絲馬跡,再加上自己看一些部落格,才算稍微明白點事件的儲存結構,待完全明白估計得把這一章看完,然後再重新梳理一遍才行。

            elemData = $.data(div1);    //div1對應的快取

            handle = elemData.handle;   //主監聽函式(統一觸發、執行其他函式)

            events = elemData.events;   //elemData.events
            handlers = events["click"]; //click 對應的監聽物件陣列
            handlers.push(handleObj);   //監聽物件陣列中儲存了若干個監聽物件
                                        //handleObj又包含了事件型別、觸發函式等等各類資訊

另外,還有一個重要資訊:事件既然被jQuery給重新規定了格式,那麼“事件冒泡”肯定是沒有了,怎麼辦呢? jQuery在事件執行的時候自己來模擬冒泡,這一點如果不明白,看程式碼也會遇到許多疑惑。

 

總結:

說了這麼多,我想大家也應該明白我的意思了。

《技術內幕》是一本很不錯的書,我也很佩服作者的功力,自己看著人家的書,理解都那麼費勁,何況作者寫書呢。

如果《技術內幕》能夠出第二版,希望作者能採納我的建議,多加一些解釋性的東西,多加一些“臺階”。

 

相關文章