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

 

在上一篇中，咱们将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，这个文件是被压缩过的，能够减小不少网络流量，适合于发布的环境。