天天看點

《Ext JS實戰》——第2章 基礎回顧 2.1 正确的開始

本節書摘來自異步社群《ext js實戰》一書中的第2章,第2.1節,作者:【美】jesus garcia著,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

在編寫程式時,我經常形象思維,這會有助于在頭腦中形成與概念對應的等價物。例如,我喜歡把啟動一個應用程式想象成航天飛機的發射,因為二者都可能成功或者無法挽回地失敗。要想操作dom,最重要的一點是要知道應該在什麼時候啟動javascript代碼。在這一章裡,會學習如何用ext運作javascript代碼,而且還得保證這些代碼在每個浏覽器上都能在最恰當的時機初始化。然後再讨論如何通過ext.element操作dom。

你肯定也知道,對dom的操作是程式員花費時間最多的編碼任務。不管是增加一個元素或者是删除一個元素,如果你以前曾用過javascript的内置方法來完成這些任務的經曆,一定會覺得痛苦不堪。畢竟,截止到目前為止,dhtml作為動态web頁面的核心已經存在很長時間了。

我們還會看到ext的核心,一個名為ext.element的類,這是一個強健的跨浏覽器的dom元素管理工具包。你将學到如何用ext.element在dom中增加或者移除節點,并且還會看到它讓這個工作變得多麼輕松。

熟悉了ext.element類之後,接着就要學習如何通過模闆把html内容加到dom中去,我們要深入了解xtemplate的用法,這個類繼承自template,而且你将會學到如何通過它輕松地周遊資料,并能夠注入行為調整的邏輯。這會是很有趣的一章。不過,在開始輸入代碼之前,首先必須要知道的是啟動代碼的正确方法。

早前的時候,大多數開發人員所采用的初始化javascript的方法是在被加載的html頁面的< body>标簽加上一個onload屬性:

《Ext JS實戰》——第2章 基礎回顧 2.1 正确的開始

用這種方法觸發javascript的确有效,不過對于那些使用了ajax的web 2.0站點或者應用程式來說,這并不是一個理想的方法。因為對于不同的浏覽器而言,onload代碼被觸發的時間并不完全相同。例如,有的浏覽器是在dom已經準備就緒,而且所有的内容都已經加載完畢、浏覽器也已經渲染完畢之後才觸發。對于web 2.0來說,這可不是什麼好事,因為一般都希望能在dom準備就緒之後,但是加載任何圖檔之前啟動代碼,進而管理和操作dom元素。這就需要在時機和結果之間找到最好的平衡點,我喜歡把這個時間點叫做頁面加載周期中的“最佳時點”。

在浏覽器的世界中,每種浏覽器都有它自己的方式判斷什麼時候dom節點可以操作。

2.1.1 準備好了再行動

每個浏覽器都有自己的原生方案用來檢測dom就緒,不過在不同浏覽器間這些方案并不統一。例如,firefox和opera會觸發domcontentloaded事件。ie要求在文檔中放一個帶defer屬性的腳本标簽,一旦dom就緒就會觸發它。webkit不會觸發任何事件,不過會把document.readystate屬性置成complete,是以必須通過一個循環不斷地檢查這個屬性,然後再觸發一個客戶事件通知代碼dom已經就緒了。真夠亂的吧!

2.1.2 由ext js來觸發

幸運的是,現在有了ext.onready,它解決了這個時機問題,可以用作應用代碼的啟動基點。ext js通過檢測代碼在哪種浏覽器執行,并管理對dom就緒狀态的檢測,進而實作了跨浏覽器的相容性,保證了在正确的時間執行代碼。

ext.onready其實是對ext.eventmanager.ondocumentready的引用,它接收3個參數:要調用的方法、調用該方法的作用域以及傳給該方法的選項。如果初始化方法需要在一個特定的作用域中執行,那麼第二個參數,即作用域參數,就會被使用。

擷取作用域的處理方法

作用域是許多javascript開發人員在他們的職業生涯早期一直糾結的概念。我認為它是每個javascript開發人員都要掌握的一個概念。

自己寫的那些基于ext的javascript代碼可以放在引入ext js腳本之後的任何地方。這一點很重要,因為javascript檔案的請求和加載是同步進行的。如果命名空間中還沒有ext的定義時就調用ext的方法會導緻異常,同時代碼也就無法啟動。下面就是一個簡單的例子,這個例子通過ext.onready觸發一個ext的messgebox警告視窗:

《Ext JS實戰》——第2章 基礎回顧 2.1 正确的開始

在這個例子中,把一個所謂的匿名函數作為唯一的參數傳給ext.onready,一旦dom就緒,這個匿名函數就會被執行。這裡的匿名函數隻包含了一行代碼,即調用ext.messagebox,如圖2-1所示。

《Ext JS實戰》——第2章 基礎回顧 2.1 正确的開始

匿名函數就是沒有被任何變量或者任何對象中的鍵引用的函數。ext.onready登記了我們提供的匿名函數,當内部的docreadyevent事件被觸發時,就會執行這個函數。簡單地說,事件很像是說明已經發生了什麼事情的消息。而監聽器是一個被注冊的方法,當有事件發生時,這個方法就會被執行,也可以說是被調用。

當ext的頁面加載周期到達了執行我們提供的匿名函數和其他注冊的監聽器的精确時點(還記得之前提到的最佳時點嗎)時,就會觸發這個docreadyevent事件。如果事件這個概念聽起來很迷糊,不要擔心。事件管理本身就是一個複雜的主題,我們會在第3章介紹。

ext.onready的重要性毋庸置疑。所有的示例代碼(乃至最終應用程式代碼)都必須用這種方法來啟動。如果說這個例子中的ext.onready還不夠詳細,那就先記住必須用它來啟動代碼,而且必須要用下面這種方式來封裝示例代碼:

《Ext JS實戰》——第2章 基礎回顧 2.1 正确的開始

既然适應了通過ext.onready啟動代碼,就要花些時間探讨ext.element類,它是架構的核心。操作dom是一個貫穿整個架構的關鍵主題。

繼續閱讀