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

简介:

 

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

我们在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文件的源代码,打开看一下源代码,在注释部分有文件引用的说明:

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

打开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,这个文件是被压缩过的,可以减少很多网络流量,适合于发布的环境。




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/3272559.html,如需转载请自行联系原作者

相关文章
|
1月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
32 4
|
4月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
197 0
|
6月前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
347 4
|
1月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
38 0
|
3月前
|
JavaScript 前端开发
BootStrap在Vue中的安装使用详细教程
这篇文章提供了在Vue项目中安装和使用Bootstrap的详细教程,包括安装jQuery、引入Bootstrap、配置Webpack以及在项目中进行测试和查看效果的步骤。
BootStrap在Vue中的安装使用详细教程
|
3月前
|
JavaScript NoSQL 前端开发
|
4月前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
392 3
|
4月前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
236 0
|
4月前
|
开发框架 监控 JavaScript
企业级node.js开发框架 【egg.js】 实用教程
企业级node.js开发框架 【egg.js】 实用教程
68 0
|
4月前
命令行加载特效 【cli-spinner.js】 实用教程
命令行加载特效 【cli-spinner.js】 实用教程
46 0