文档章节

ExtJS 4.2 系列教程(2):bootstrap.js加载

hanfeng
 hanfeng
发布于 2014/06/10 16:36
字数 768
阅读 2280
收藏 1

通过上一篇DEMO的运行结果截图,我们可以看出,在index.jsp页面上,我们只是引入bootstrap.js这个文件,页面加载时候bootstrap.js会帮助我们自动判断加载ext-all-*.js的文件。

那么它是怎么确定要引用哪个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,所有自动加载的就是ext-all-dev.js文件。上篇被我修改成debug模式啦。

(function() {
    var scripts = document.getElementsByTagName('script'),
        localhostTests = [
            /^localhost$/,
            /\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(:\d{1,5})?\b/ // IP v4
        ],
        host = window.location.hostname,
        isDevelopment = null,
        queryString = window.location.search,
        test, path, i, ln, scriptSrc, match;

    for (i = 0, ln = scripts.length; i < ln; i++) {
        scriptSrc = scripts[i].src;

        match = scriptSrc.match(/bootstrap\.js$/);

        if (match) {
            path = scriptSrc.substring(0, scriptSrc.length - match[0].length);
            break;
        }
    }

    if (queryString.match('(\\?|&)debug') !== null) {
        isDevelopment = true;
    }
    else if (queryString.match('(\\?|&)nodebug') !== null) {
        isDevelopment = false;
    }

    if (isDevelopment === null) {
        for (i = 0, ln = localhostTests.length; i < ln; i++) {
            test = localhostTests[i];

            if (host.search(test) !== -1) {
                isDevelopment = true;
                break;
            }
        }
    }

    if (isDevelopment === null && window.location.protocol === 'file:') {
        isDevelopment = true;
    }

    document.write('<script type="text/javascript" charset="UTF-8" src="' + 
        path + 'ext-all' + (isDevelopment ? '-debug' : '') + '.js"></script>');
})();

源代码解读:

1、首先使用getElementsByTagName获取页面中所有带有script标记的元素,然后从中找出带有bootstrap.js的标记,将bootstrap.js的相对路径取出来保存在path中。

2、判断url的参数中是否有“debug”字符,例如,出现http://localhost/index.html? debug,则设置isDevelopment 为true。否则检测是否有“nodebug”字符,如果有,设置为false。如果以上两个条件都不符合,isDevelopment 还是初始值null,就要判断url的域名是否是“localhost”或IPv4地址,如果是,则isDevelopment设置为true。

3、如果isDevelopment是null且当前的url的协议是“file:”,则将isDevelopment 设置为true。如果isDevelopment为true时,则加载ext-all-debug.js文件,否则加载ext-all.js文件。

通过bootstrap.js,可自动控制加载ext-all-debug.js文件或ext-all.js文件,不用我们自己去修改script标记,非常方便。但如果你觉得自己修改方便,也可以使用Ext JS旧版的方式加载脚本文件。


© 著作权归作者所有

共有 人打赏支持
hanfeng
粉丝 19
博文 48
码字总数 36874
作品 0
福州
高级程序员
私信 提问
ExtJS 4.2 系列教程(1):Hello ExtJS4

1、下载ExtJS http://www.sencha.com/ 我下载的版本是 ext-4.2.1.883 2、使用Eclipse创建Dynamic Web Project ,不懂的自行google(今天下午彻底挂了)or 百度 3、引入ExtJS库 复制ext目录下...

hanfeng
2014/06/10
0
0
ExtJs4.1目录结构介绍和使用说明

一、在做ExtJs开发之前首先要到网站上下载ExtJs的开发包,我用的最新版本是4.1.1。此版本相对于之前的版本目录结构发生了一些变化,没有了adapter目录, 目录结构如下 文件/文件夹名的作用:...

Junn
2013/01/17
0
1
eclipse+spket+Extjs4.2.1开发环境搭建

一、开发工具配置 1、http://www.eclipse.org/downloads/下载Eclipse,解压。 2、http://spket.com/download.html下载Plugin,解压后覆盖到Eclipse的目录。 3、启动Eclipse,选择window→pro...

南風
2014/08/20
0
0
ExtJS 4.2 发布

ExtJS 4.2 下载地址:http://www.sencha.com/products/extjs/download/ext-js-4.2.0/2142 ExtJS 主要用来开发RIA富客户端的AJAX应用,主要用于创建前端用户界面,与后台技术无关的前端ajax框...

oschina
2013/03/15
10.6K
31
extjs2.0/3.4 入门教程以及一些例子

前言 有本资料叫extjs简易实用教程,讲得很棒,是初学者的福音——比起官方普遍较复杂的examples,这个教程更靠谱。而且虽说是2.x的教程,但同样适用于3.x——4.x就不知道了。 只是,有些问题...

itwriter
2014/02/25
0
5

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud搭建微服务架构----流量回放

前言 系统微服务化后,传统的自测/测试方式都变得比较困难: 依赖的服务可能不稳定。 服务无法提供期望的响应数据。 缺少场景构造标准。 随着整体业务越来越复杂,微服务依赖的越来越多,测试...

春哥大魔王的博客
32分钟前
3
0
记一次springboot模块配置问题导致读取Apollo配置中心配置文件始终错误的问题

现在正在做的一个项目采用的是微服务,主框架是spring cloud,配置中心用的是携程的Apollo。 项目下有多个服务,在测试服务器上启动用户服务的时候发现在eureka中心另一个服务被启动了,尝试...

zcqshine
33分钟前
6
0
流处理和批处理框架的异同

分布式流处理需求日益增加,包括支付交易、社交网络、物联网(IOT)、系统监控等。业界对流处理已经有几种适用的框架来解决,下面我们来比较各流处理框架的相同点以及区别。 分布式流处理是对...

hblt-j
36分钟前
4
0
spring cloud 面试题

什么是springboot 用来简化spring应用的初始搭建以及开发过程 使用特定的方式来进行配置(properties或yml文件) 创建独立的spring引用程序 main方法运行 嵌入的Tomcat 无需部署war文件 简化...

狼王黄师傅
38分钟前
4
0
前嗅ForeSpider教程:采集黄页88

以黄页88为例,采集当前列表页新闻的正文数据: 第一步:新建任务 ①点击左上角“加号”新建任务,如图1: 【图1】 ②在弹窗里填写采集地址,任务名称,如图2: 【图2】 ③点击下一步,选择进...

forespider
42分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部