ExtJS-bootstrap.js的工作方式

忘是亡心i 2022-09-23 10:55 155阅读 0赞

我们将bootstrap.js引入页面，并没有直接引用ExtJS的脚本文件，而是通过bootstrap在启动的时候动态的选择要将哪些extjs脚本添加到页面中。在本文中我们来介绍一下bootstrap.js的工作方式。

打开开发人员工具之后，点击Network标签，然后刷新页面，这时我们就跟踪到了所有文件的请求：

[![image][]][image 1]

可以看到，尽管我们没有在页面中引用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 中，我们打开这个目录：

[![image][image 2]][image_image 2]

打开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][image 3]][image_image 3]

在Network网格中可以看到，这次加载的文件是ext-all.js，这个文件是被压缩过的，可以减少很多网络流量，适合于发布的环境。

[![image][]][image 1]

可以看到，尽管我们没有在页面中引用ext-all-dev.js 文件，但页面仍然进行将这个脚本加入了页面的引用，而它的引入者（Initiator 列）是bootstrap.js。

由此可以考出，bootstrap.js 会自动为我们添加ext 的引用，那么它是怎么确定要引用哪个ExtJS文件的呢？我们的目录中有分别有三个文件：

*  ext-all-debug.js：用于调试时引用
 *  ext-all-dev.js：用于开发时引用
 *  ext-all.js：在发布时引用

所幸我们有bootstrap.js文件的源代码，打开看一下源代码，在注释部分有文件引用的说明：

这段注释的大概意思是：

很显然，我们的主机名是localhost，bootstrap.js自动为我们加载了 ext-all-dev.js。

我们要验证一下是否在发布环境中，bootstrap能够为我们自动加载ext-all.js，该怎么做呢？

方法是修改我们的 hosts 文件，这个文件在系统盘的 Windows\\System32\\drivers\\etc 中，我们打开这个目录：

[![image][image 2]][image_image 2]

打开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][image 3]][image_image 3]

在Network网格中可以看到，这次加载的文件是ext-all.js，这个文件是被压缩过的，可以减少很多网络流量，适合于发布的环境。

[image]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/91d302515e19_DC87/image_thumb.png
[image 1]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/91d302515e19_DC87/image_2.png
[image 2]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/91d302515e19_DC87/image_thumb_1.png
[image_image 2]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/91d302515e19_DC87/image_4.png
[image 3]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/91d302515e19_DC87/image_thumb_2.png
[image_image 3]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/91d302515e19_DC87/image_6.png