上篇文章我們讀了index.html。這篇文章我們主要從<code>weex.init()</code>函數入手,入門weex框架代碼。
由調試器我們走到了weex.js的168行,代碼為:
Weex.init = function (options) {
if (utils.isArray(options)) {
options.forEach(function (config) {
new Weex(config);
});
} else if (utils.getType(options) === 'object') {
/* 程序運行到這,執行實例化weex類*/
new Weex(options);
}
};
在調試器中,如果我們調試,代碼會走進index.js中的122行,其實這是webpack模塊化的寫法。如感興趣,可以自行百度進行了解。
Weex類的定義從weex.js133行開始
function Weex(options) {
if (!(this instanceof Weex)) {
return new Weex(options);
}
// 初始化基本參數.
this.width = options.width || window.innerWidth;
this.bundleUrl = options.bundleUrl || location.href;
this.instanceId = options.appId;
this.rootId = options.rootId || DEFAULT_ROOT_ID + utils.getRandom(10);
this.designWidth = options.designWidth || DEFAULT_DESIGN_WIDTH;
this.jsonpCallback = options.jsonpCallback || DEFAULT_JSONP_CALLBACK_NAME;
this.source = options.source;
this.loader = options.loader;
this.embed = options.embed;
this.data = options.data;
//判斷是否需要降級,好像weex的老版本初始化時傳遞的是數組
this.initDowngrades(options.downgrade);
//設置縮放比例
this.initScale();
//初始化組件管理器,即把我們寫的這個XX.we轉化整的XXX.js(其實是完整的url)放進組件隊列中
this.initComponentManager();
//初始化橋,即把weex的全局方法注冊到window對象上
this.initBridge();
//把由XXX.js組成的實例加到實例隊列中, 方便下面調用
Weex.addInstance(this);
//注冊api模塊
protocol.injectWeexInstance(this);
/*
這幾行注冊代碼需要仔細研究下,尤其每次注冊所執行的動作,這些將在之后的讀代碼過程中慢慢了解。
*/
//去服務器下載js bundle,即剛剛我們初始化實例的XX.js文件
this.loadBundle(function (err, appCode) {
if (!err) {
//下載成功我們創建這個app
this.createApp(config, appCode);
} else {
console.error('load bundle err:', err);
}
}.bind(this));
}
這個代碼其實,我有些也不是很明白作者為什么這么寫。不過沒關系,希望通過更加深入的閱讀認識到為什么這么寫
為了支持簡書,請在簡書上閱讀,請勿轉載