ExtJS-bootstrap.js的工作方式
2016-07-18 10:16
453 查看
我们将bootstrap.js引入页面,并没有直接引用ExtJS的脚本文件,而是通过bootstrap在启动的时候动态的选择要将哪些extjs脚本添加到页面中。在本文中我们来介绍一下bootstrap.js的工作方式。
打开开发人员工具之后,点击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文件的源代码,打开看一下源代码,在注释部分有文件引用的说明:
这段注释的大概意思是:
很显然,我们的主机名是localhost,bootstrap.js自动为我们加载了 ext-all-dev.js。
我们要验证一下是否在发布环境中,bootstrap能够为我们自动加载ext-all.js,该怎么做呢?
方法是修改我们的 hosts 文件,这个文件在系统盘的 Windows\System32\drivers\etc 中,我们打开这个目录:
打开hosts文件,添加以下两行内容:
hosts 文件的作用就是将DNS服务器的作用,用来将域名 abc.com 和 www.abc.com 解析到我们本机(地址是127.0.0.1)。
接下来我们在浏览器中使用域名来浏览sampleExtJS:
在Network网格中可以看到,这次加载的文件是ext-all.js,这个文件是被压缩过的,可以减少很多网络流量,适合于发布的环境。
可以看到,尽管我们没有在页面中引用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 中,我们打开这个目录:
打开hosts文件,添加以下两行内容:
hosts 文件的作用就是将DNS服务器的作用,用来将域名 abc.com 和 www.abc.com 解析到我们本机(地址是127.0.0.1)。
接下来我们在浏览器中使用域名来浏览sampleExtJS:
在Network网格中可以看到,这次加载的文件是ext-all.js,这个文件是被压缩过的,可以减少很多网络流量,适合于发布的环境。
打开开发人员工具之后,点击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,这个文件是被压缩过的,可以减少很多网络流量,适合于发布的环境。
可以看到,尽管我们没有在页面中引用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,这个文件是被压缩过的,可以减少很多网络流量,适合于发布的环境。
相关文章推荐
- Extjs4如何处理后台json数据中日期和时间
- 解决Extjs4中form表单提交后无法进入success函数问题
- Extjs4 GridPanel的主要配置参数详细介绍
- Extjs4 Treegrid 使用心得分享(经验篇)
- ExtJS4 组件化编程,动态加载,面向对象,Direct
- 关于extjs4如何获取grid修改后的数据的问题
- Extjs4实现两个GridPanel之间数据拖拽功能具体方法
- spket,ExtJS4.0.2配置
- MHZG ExtJS4开发笔记
- extjs4.0——目录结构
- extjs4 弹出窗口
- 也谈谈Ext.Grid之记录用户使用习惯—隐藏列
- ExtJS4入门
- ExtJS 4.x中的布局(layouts in ExtJS 4.x)(一) 续
- ExtJS4 filter混乱问题
- extjs4实现双纵坐标柱形图
- 基于BS架构的聊天工具!暂时起名MyQQ!struts2.1.8+hibernate3.2+Spring3.0+ExtJs4.2+MySql+WebSocket
- struts2.1.8+hibernate3.2+Spring3.0+ExtJs4.2+MySql+WebSocket 更新
- ExtJS4 如何实现密码验证
- ExtJS 如何验证上传文件类型