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的启动过程了。现在的问题是，我们怎么去加载本地化文件。
