ExtJS 4.2 教程-02:bootstrap.js 工做方式

 

在上一篇中,咱們將bootstrap.js引入頁面,並無直接引用ExtJS的腳本文件,而是經過bootstrap在啓動的時候動態的選擇要將哪些extjs腳本添加到頁面中。在本文中咱們來介紹一下bootstrap.js的工做方式。bootstrap

咱們在Google Chrome 瀏覽器中,打開開發人員工具(關於在Google Chrome 瀏覽器中調試Javascript代碼,參考我以前的文章 《在Chrome 中調試Javascript》)瀏覽器

打開開發人員工具以後,點擊Network標籤,而後刷新頁面,這時咱們就跟蹤到了全部文件的請求:服務器

image

能夠看到,儘管咱們沒有在頁面中引用ext-all-dev.js 文件,但頁面仍然進行將這個腳本加入了頁面的引用,而它的引入者(Initiator 列)是bootstrap.js。網絡

由此能夠考出,bootstrap.js 會自動爲咱們添加ext 的引用,那麼它是怎麼肯定要引用哪一個ExtJS文件的呢?咱們的目錄中有分別有三個文件:工具

  • ext-all-debug.js:用於調試時引用
  • ext-all-dev.js:用於開發時引用
  • ext-all.js:在發佈時引用

所幸咱們有bootstrap.js文件的源代碼,打開看一下源代碼,在註釋部分有文件引用的說明:this

/**
 * 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
 */

這段註釋的大概意思是:spa

/**
 * 加載本文件相同路徑中的庫
 *
 * 知足如下條件將自動加載 ext-all-dev.js:
 * - 當前主機名是 localhost
 * - 當前主機名是 IP v4 地址
 * - 當前協議是 "file:"
 *
 * 其它狀況下將加載 ext-all.js (minified)
 */

很顯然,咱們的主機名是localhost,bootstrap.js自動爲咱們加載了 ext-all-dev.js。debug

咱們要驗證一下是否在發佈環境中,bootstrap可以爲咱們自動加載ext-all.js,該怎麼作呢?調試

方法是修改咱們的 hosts 文件,這個文件在系統盤的 Windows\System32\drivers\etc 中,咱們打開這個目錄:code

image

打開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:

image

在Network網格中能夠看到,此次加載的文件是ext-all.js,這個文件是被壓縮過的,能夠減小不少網絡流量,適合於發佈的環境。

相關文章
相關標籤/搜索