Ext JS 5初探（二） ——Bootstrap.js

在Bootstrap.js文件中，总共有1500行（包含注释和空行），使用编辑器的代码折叠功能就如下图可以一窥全貌了。

从代码可以看到，这里主要定义了Ext.Boot、Ext.globalEval、Ext.Microloader和Ext.manifest这4个对象或属性。关键代码是最后一句的调用Ext.Microloader的load方法，下面来研究一下这个load方法，代码如下：

load: function (manifestDef) {
    var manifest = Microloader.initManifest(manifestDef),
        loadOrder = manifest.loadOrder,
        loadOrderMap = (loadOrder) ? Boot.createLoadOrderMap(loadOrder) : null,
        urls = [],
        js = manifest.js || [],
        css = manifest.css || [],
        resources = js.concat(css),
        resource, i, len, include,
        loadedFn = function () {
            _loaded = true;
            Microloader.notify();
        };

    for (len = resources.length, i = 0; i < len; i++) {
        resource = resources[i];
        include = true;
        if (resource.platform && !Microloader.filterPlatform(resource.platform)) {
            include = false;
        }
        if (include) {
            urls.push(resource.path);
        }
    }

    if (loadOrder) {
        manifest.loadOrderMap = loadOrderMap;
    }

    Boot.load({
        url: urls,
        loadOrder: loadOrder,
        loadOrderMap: loadOrderMap,
        sequential: true,
        success: loadedFn,
        failure: loadedFn
    });
},

代码第一句执行了Microloader的initManifest方法，代码如下：

initManifest: function (manifest) {
    Microloader.init();
    var tmpManifest = manifest || Ext.manifest;

    if (typeof tmpManifest === "string") {
        var url = Boot.baseUrl + tmpManifest + ".json",
            content = Boot.fetchSync(url);
        tmpManifest = JSON.parse(content.content);
    }

    Ext.manifest = tmpManifest;
    return tmpManifest;
},

根据load方法的调用，可以知道manifest为null，不过这里第一句又先调用了Microloader的init方法，代码如下：

init: function () {
    Microloader.initPlatformTags();
    Ext.filterPlatform = Microloader.filterPlatform;
},

又要跳到initPlatformTags方法，快给转晕了，代码如下：

initPlatformTags: function () {
    Microloader.platformTags = Microloader.detectPlatformTags(Microloader.platformTags);
},

还跳，这里省去n字，继续去看detectPlatformTags方法，代码如下：

detectPlatformTags: function (tags) {
    var ua = navigator.userAgent,
        isMobile = tags.isMobile = /Mobile(\/|\s)/.test(ua),
        isPhone, isDesktop, isTablet, touchSupported, isIE10, isBlackberry,
        element = document.createElement('div'),
        uaTagChecks = [
            'iPhone',
            'iPod',
            'Android',
            'Silk',
            'Android 2',
            'BlackBerry',
            'BB',
            'iPad',
            'RIM Tablet OS',
            'MSIE 10',
            'Trident',
            'Chrome',
            'Tizen',
            'Firefox',
            'Safari',
            'Windows Phone'
        ],
        isEventSupported = function(name, tag) {
            if (tag === undefined) {
                tag = window;
            }

            var eventName = 'on' + name.toLowerCase(),
                isSupported = (eventName in element);

            if (!isSupported) {
                if (element.setAttribute && element.removeAttribute) {
                    element.setAttribute(eventName, '');
                    isSupported = typeof element[eventName] === 'function';

                    if (typeof element[eventName] !== 'undefined') {
                        element[eventName] = undefined;
                    }

                    element.removeAttribute(eventName);
                }
            }

            return isSupported;
        },
        uaTags = {},
        len = uaTagChecks.length, check, c;

    for (c = 0; c < len; c++) {
        check = uaTagChecks[c];
        uaTags[check] = new RegExp(check).test(ua);
    }

    isPhone =
        (uaTags.iPhone || uaTags.iPod) ||
            (!uaTags.Silk && (uaTags.Android && (uaTags['Android 2'] || isMobile))) ||
            ((uaTags.BlackBerry || uaTags.BB) && uaTags.isMobile) ||
            (uaTags['Windows Phone']);

    isTablet =
        (!tags.isPhone) && (
            uaTags.iPad ||
                uaTags.Android ||
                uaTags.Silk ||
                uaTags['RIM Tablet OS'] ||
                (uaTags['MSIE 10'] && /; Touch/.test(ua))
            );

    touchSupported =
        // if the browser has touch events we can be reasonably sure the device has
        // a touch screen
        isEventSupported('touchend') ||
            // browsers that use pointer event have maxTouchPoints > 0 if the
            // device supports touch input
            // http://www.w3.org/TR/pointerevents/#widl-Navigator-maxTouchPoints
            navigator.maxTouchPoints ||
            // IE10 uses a vendor-prefixed maxTouchPoints property
            navigator.msMaxTouchPoints;

    isDesktop = !isPhone && !isTablet;
    isIE10 = uaTags['MSIE 10'];
    isBlackberry = uaTags.Blackberry || uaTags.BB;

    apply(tags, Microloader.loadPlatformsParam(), {
        phone: isPhone,
        tablet: isTablet,
        desktop: isDesktop,
        touch: touchSupported,
        ios: (uaTags.iPad || uaTags.iPhone || uaTags.iPod),
        android: uaTags.Android || uaTags.Silk,
        blackberry: isBlackberry,
        safari: uaTags.Safari && isBlackberry,
        chrome: uaTags.Chrome,
        ie10: isIE10,
        windows: isIE10 || uaTags.Trident,
        tizen: uaTags.Tizen,
        firefox: uaTags.Firefox
    });

    if (Ext.beforeLoad) {
        tags = Ext.beforeLoad(tags);
    }

    return tags;
},

好了，这次不用再跳了。代码先调用navigator.userAgent返回了浏览器用于 HTTP 请求的用户代理头的值，这个值可用来检查浏览器和版本号。如果值包含了字符串Mobile，说明是移动设备，这时候isMobile为true。在定义了一堆变量后，在页面中添加了一个div元素。接下来的uaTagChecks根据变量名可以知道，这是要检测的标记了。

接下来定义了isEventSupported函数，看名字就知道是用来检测是否支持事件的。根据函数内容，可以看到检测方式有两种，第一种就是检测事件名是否在刚才创建的元素div内，如果在，说明支持。第二种方法就是div元素上添加事件属性，然后判断元素对象内的事件属性是否为function，如果是，说明支持，否则就是不支持了。

定义结束后，就开始使用循环来检测平台属性了，检测结果将保存在uaTags对象中，对象中的属性名称就是uaTagChecks中的字符串，值就是检测值。

检测完之后就要给几个变量赋值了，赋值完成后，会调用apply方法将对象的成员复制到tags中。在调用apply方法时，还调用了loadPlatformsParam方法，该方法我就不列了，它的主要作用就是可通过访问地址的platformTags参数来自定义平台参数，这样做的目的是可以通过浏览器做一些模拟效果，如桌面pc模拟平板的效果。

下一句判断Ext.beforeLoad是否存在，在当前情况是不存在的，所以，这段代码可以忽略。最后是将平台检测结果返回了。

返回initPlatformTags方法，可以知道Microloader.platformTags现在指向的平台检测结果。再返回init方法，在计算出平台检测结果后，会将Ext.filterPlatform属性指向Microloader.filterPlatform方法，也就是说，在调用Ext的filterPlatform方法时，会执行Microloader.的filterPlatform方法，该方法的主要作用就是把不需要的平台过滤掉。

好了，现在返回initManifest方法，在执行完init方法后，会给tmpManifest赋值，由于在当前情况下，manifest为null，所以tmpManifes的值将会是Ext.manifest的值，而从图中可以知道，Ext.manifes的值是bootstrap，也就是说，现在tmpManifes的值是bootstrap。接下来判断tmpManifes是否为字符串，当前情况下，tmpManifes是字符串，所以要执行判断语句内的代码。先给url赋值，这个由Boot.baseUrl、tmpManifest和“.json”三部分构成，先不管Boot.baseUrl，可以知道，这里要找的是bootstrap.json文件。接下来会调用Boot.fetchSync方法，代码如下：

fetchSync: function(url) {
    var exception, xhr, status, content;

    exception = false;
    xhr = new XMLHttpRequest();

    try {
        xhr.open('GET', url, false);
        xhr.send(null);
    } catch (e) {
        exception = true;
    }

    status = (xhr.status === 1223) ? 204 :
        (xhr.status === 0 && ((self.location || {}).protocol === 'file:' ||
            (self.location || {}).protocol === 'ionp:')) ? 200 : xhr.status;
    content = xhr.responseText;

    xhr = null; // Prevent potential IE memory leak

    return {
        content: content,
        exception: exception,
        status: status
    };

},

从代码中的new XMLHttpRequest这语句就知道，这段代码的主要作用就是使用Ajax去加载bootstrap.json文件了。现在假定能正确加载bootstrap.json文件并返回initManifest方法。

在initManifest方法内，接下来要做的是调用JSON.parse将返回的数据解析为JSON对象，并Ext.manifest属性指向该对象。最后将JSON对象返回laod方法。

在load方法的第二句，会先从返回的对象中取出loadOrder的值。在bootstrap.json文件中，loadOrder是一个由对象组成的数组，而每一个对象包含path、requires、uses和idx这4个成员。如果对于Ext JS有一定理解，那么要理解这4个成员不难。成员paths的值就是Ext JS类的脚本的路径，requires和uese指的是这个类所需要的类和使用到的类，而idx则是这个类的唯一标识。在requires和uese中就是使用这个唯一标识来指定所需或使用到的类文件的。

把这个loadOrder取出后，会调用Boot.createLoadOrderMap方法进行处理，代码如下：

createLoadOrderMap: function(loadOrder) {
    var len = loadOrder.length,
        loadOrderMap = {},
        i, element;

    for(i = 0; i < len; i++) {
        element = loadOrder[i];
        loadOrderMap[element.path] = element;
    }

    return loadOrderMap;
},

代码的作用只是把loadOrder数组转换为对象，对象的属性名称就是类文件的路径，值就是类对象本身。

返回到load方法，在处理完loadOrder数组后，会继续从bootstrap.json文件中把js和css的值取出来，然后合并到resources数组中。在当前项目中，bootstrap.json文件中的js和css的定义如下：

"js":[{"path":"app.js"}],
"css":[{"path":"bootstrap.css"}

这样对于理解后面的循环就容易多了，由于在定义中，没有platform这个成员，所以循环中的第一个判断就会被跳过，直接执行第二个判断了，也就是把路径信息推人urls数组中。

处理完这个，就开始调用Boot.load方法了，代码如下：

load: function (request) {
    if (request.sync || _syncMode) {
        return this.loadSync(request);
    }

    // Allow a raw array of paths to be passed.
    if (!request.url) {
        request = {
            url: request
        };
    }

    // If there is a request in progress, we must
    // queue this new request to be fired  when the current request completes.
    if (_currentRequest) {
        _suspendedQueue.push(request);
    } else {
        Boot.expandLoadOrder(request);

        var url = request.url,
            urls = url.charAt ? [ url ] : url,
            length = urls.length,
            i;

        // Start the counter here. This is reduced as we notify this fellow of script
        // loads.
        request.urls = urls;
        request.loaded = 0;
        request.loading = length;
        request.charset = request.charset || _config.charset;
        request.buster = (('cache' in request) ? !request.cache : _config.disableCaching) &&
            (_config.disableCachingParam + '=' + (+new Date()));

        _currentRequest = request;
        request.sequential = false;

        for (i = 0; i < length; ++i) {
            Boot.loadUrl(urls[i], request);
        }
    }

    return this;
},

在这段代码中，前面的代码都是与处理请求地址有关，而当这些都准备好了以后，就会调用Boot.loadUrl方法去加载文件了。而在Boot.loadUrl方法内，会调用Boot.create方法去创建加载标记，代码如下：

        create: function (url, key) {
            var css = url && cssRe.test(url),
                el = doc.createElement(css ? 'link' : 'script'),
                prop;

            if (css) {
                el.rel = 'stylesheet';
                prop = 'href';
            } else {
                el.type = 'text/javascript';
                if (!url) {
                    return el;
                }
                prop = 'src';

                if(Boot.hasAsync) {
                    el.async = false;
                }
            }

            key = key || url;
            return _items[key] = {
                key: key,
                url: url,
                css: css,
                done: false,
                el: el,
                prop: prop,
                loaded: false,
                evaluated: false
            };
        },

从代码doc.createElement这句就可以看到，在这里会创建SCRIPT或LINK标记去加载脚本或样式。

这么简单的东西搞得那么复杂的一个原因是要确保类的加载顺序，以确保不会出现类初始化时找不到依赖类的情况。因而，在整个加载过程中，需要监控每个脚本的加载情况，在依赖类没有加载完成之前，不去加载该类。

在bootstrap.json文件中，已经把app.js、bootstrap.css等文件加进去了，所以，在index.html文件中，只需要加载bootstrap.js文件就行了。

至此，我们已经基本了解了Ext JS 5的启动过程了。现在的问题是，我们怎么去加载本地化文件。