在上一篇中,我們將bootstrap.js引入頁面,並沒有直接引用ExtJS的腳本文件,而是通過bootstrap在啟動的時候動態的選擇要將哪些extjs腳本添加到頁面中。在本文中我們來介紹一下bootstrap.js的工作方式。
我們在Google Chrome 瀏覽器中,打開開發人員工具(關於在Google Chrome 瀏覽器中調試Javascript代碼,參考我之前的文章 《在Chrome 中調試Javascript》)
打開開發人員工具之后,點擊Network標簽,然后刷新頁面,這時我們就跟蹤到了所有文件的請求:
可以看到,盡管我們沒有在頁面中引用ext-all-dev.js 文件,但頁面仍然進行將這個腳本加入了頁面的引用,而它的引入者(Initiator 列)是bootstrap.js。
由此可以考出,bootstrap.js 會自動為我們添加ext 的引用,那么它是怎么確定要引用哪個ExtJS文件的呢?我們的目錄中有分別有三個文件:
- ext-all-debug.js:用於調試時引用
- ext-all-dev.js:用於開發時引用
- ext-all.js:在發布時引用
所幸我們有bootstrap.js文件的源代碼,打開看一下源代碼,在注釋部分有文件引用的說明:
/**
* Load the library located at the same path with this file
*
* Will automatically load ext-all-dev.js if any of these conditions is true:
* - Current hostname is localhost
* - Current hostname is an IP v4 address
* - Current protocol is "file:"
*
* Will load ext-all.js (minified) otherwise
*/
這段注釋的大概意思是:
/**
* 加載本文件相同路徑中的庫
*
* 滿足以下條件將自動加載 ext-all-dev.js:
* - 當前主機名是 localhost
* - 當前主機名是 IP v4 地址
* - 當前協議是 "file:"
*
* 其它情況下將加載 ext-all.js (minified)
*/
很顯然,我們的主機名是localhost,bootstrap.js自動為我們加載了 ext-all-dev.js。
我們要驗證一下是否在發布環境中,bootstrap能夠為我們自動加載ext-all.js,該怎么做呢?
方法是修改我們的 hosts 文件,這個文件在系統盤的 Windows\System32\drivers\etc 中,我們打開這個目錄:
打開hosts文件,添加以下兩行內容:
127.0.0.1 abc.com
127.0.0.1 www.abc.com
hosts 文件的作用就是將DNS服務器的作用,用來將域名 abc.com 和 www.abc.com 解析到我們本機(地址是127.0.0.1)。
接下來我們在瀏覽器中使用域名來瀏覽sampleExtJS:
在Network網格中可以看到,這次加載的文件是ext-all.js,這個文件是被壓縮過的,可以減少很多網絡流量,適合於發布的環境。



