Ext create动态加载分析

主要涉及到Ext.js Inventory.js ClassManager.js Class.js Loader.js Boot.js

在ClasManager.js的Ext.create中

Ext.syncRequire(name); // 加载类的js

Loader.js 中

syncRequire: function () {
            var wasEnabled = Loader.syncModeEnabled;

            Loader.syncModeEnabled = true;

            var ret = Loader.require.apply(Loader, arguments);

            Loader.syncModeEnabled = wasEnabled;

            return ret;
        },
 require: function (expressions, fn, scope, excludes) {
            if (excludes) {
                return Loader.exclude(excludes).require(expressions, fn, scope);
            }

            var classNames = Manager.getNamesByExpression(expressions);

            return Loader.load(classNames, fn, scope);
        },
load: function (classNames, callback, scope) {
            if (callback) {
                if (callback.length) {
                    // If callback expects arguments, shim it with a function that will map
                    // the requires class(es) from the names we are given.
                    callback = Loader.makeLoadCallback(classNames, callback);
                }
                callback = callback.bind(scope || Ext.global);
            }

            var state = Manager.classState,
                missingClassNames = [],
                urls = [],
                urlByClass = {},
                numClasses = classNames.length,
                url, className, i, numMissing;

            for (i = 0; i < numClasses; ++i) {
                className = Manager.resolveName(classNames[i]);

                if (!Manager.isCreated(className)) {
                    missingClassNames.push(className);

                    if (!state[className]) {
                        urlByClass[className] = Loader.getPath(className);
                        urls.push(urlByClass[className]);
                    }
                }
            }

            // If the dynamic dependency feature is not being used, throw an error
            // if the dependencies are not defined
            numMissing = missingClassNames.length;

            if (numMissing) {
                Loader.missingCount += numMissing;

                Manager.onCreated(function () {
                    if (callback) {
                        Ext.callback(callback, scope, arguments);
                    }

                    Loader.checkReady();
                }, Loader, missingClassNames);

                if (!_config.enabled) {
                    Ext.raise("Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. " +
                             "Missing required class" + ((missingClassNames.length > 1) ? "es" : "") +
                             ": " + missingClassNames.join(‘, ‘));
                }

                if (urls.length) {
                    Loader.loadScripts({
                        url: urls,
                        // scope will be this options object so we can pass these along:
                        _classNames: missingClassNames,
                        _urlByClass: urlByClass
                    });
                }
                else {
                    // need to call checkReady here, as the _missingCoun
                    // may have transitioned from 0 to > 0, meaning we
                    // need to block ready
                    Loader.checkReady();
                }
            }
            else {
                if (callback) {
                    callback.call(scope);
                }

                // need to call checkReady here, as the _missingCoun
                // may have transitioned from 0 to > 0, meaning we
                // need to block ready
                Loader.checkReady();
            }

            if (Loader.syncModeEnabled) {
                // Class may have been just loaded or was already loaded
                if (numClasses === 1) {
                    return Manager.get(classNames[0]);
                }
            }

            return Loader;
        },
/**
         * This is an internal method that delegate content loading to the
         * bootstrap layer.
         * @private
         * @param params
         */
        loadScripts: function(params) {
            var manifest = Ext.manifest,
                loadOrder = manifest && manifest.loadOrder,
                loadOrderMap = manifest && manifest.loadOrderMap,
                options;

            ++Loader.scriptsLoading;

            // if the load order map hasn‘t been created, create it now
            // and cache on the manifest
            if (loadOrder && !loadOrderMap) {
                manifest.loadOrderMap = loadOrderMap = Boot.createLoadOrderMap(loadOrder);
            }

            // verify the loading state, as this may have transitioned us from
            // not loading to loading
            Loader.checkReady();

            options = Ext.apply({
                loadOrder: loadOrder,
                loadOrderMap: loadOrderMap,
                charset: _config.scriptCharset,
                success: Loader.onLoadSuccess,
                failure: Loader.onLoadFailure,
                sync: Loader.syncModeEnabled,
                _classNames: []
            }, params);

            options.userScope = options.scope;
            options.scope = options;

            Boot.load(options);
        },

在Boot.js中

load: function (request) {
                //<debug>
//                 _debug("Boot.load called");
                //</debug>
                var request = new Request(request);

                if (request.sync || Boot.syncMode) {
                    return Boot.loadSync(request);
                }

                // If there is a request in progress, we must
                // queue this new request to be fired  when the current request completes.
                if (Boot.currentRequest) {
                    //<debug>
//                     _debug("current active request, suspending this request");
                    //</debug>
                    // trigger assignment of entries now to ensure that overlapping
                    // entries with currently running requests will synchronize state
                    // with this pending one as they complete
                    request.getEntries();
                    Boot.suspendedQueue.push(request);
                } else {
                    Boot.currentRequest = request;
                    Boot.processRequest(request, false);
                }
                return Boot;
            },
 loadSync: function() {
            var me = this;
            me.fetch({
                async: false,
                complete: function (response) {
                    me.onContentLoaded(response);
                }
            });
            me.evaluate();
            me.notifyRequests();
        },
        fetch: function (req) {
            var url = this.getLoadUrl(),
                async = !!req.async,
                complete = req.complete;

            Boot.fetch(url, complete, this, async);
        },

最终网络通讯在这

fetch: function(url, complete, scope, async) {
                async = (async === undefined) ? !!complete : async;

                var xhr = new XMLHttpRequest(),
                    result, status, content, exception = false,
                    readyStateChange = function () {
                        if (xhr && xhr.readyState == 4) {
                            status = (xhr.status === 1223) ? 204 :
                                (xhr.status === 0 && ((self.location || {}).protocol === ‘file:‘ ||
                                    (self.location || {}).protocol === ‘ionp:‘)) ? 200 : xhr.status;
                            content = xhr.responseText;
                            result = {
                                content: content,
                                status: status,
                                exception: exception
                            };
                            if (complete) {
                                complete.call(scope, result);
                            }
                            xhr.onreadystatechange = emptyFn;
                            xhr = null;
                        }
                    };

                if (async) {
                    xhr.onreadystatechange = readyStateChange;
                }

                try {
                    //<debug>
//                     _debug("fetching " + url + " " + (async ? "async" : "sync"));
                    //</debug>
                    xhr.open(‘GET‘, url, async);
                    xhr.send(null);
                } catch (err) {
                    exception = err;
                    readyStateChange();
                    return result;
                }

                if (!async) {
                    readyStateChange();
                }

                return result;
            },

            notifyAll: function(entry) {
                entry.notifyRequests();
            }
        };
complete函数定义在这
onContentLoaded: function (response) {
            var me = this,
                status = response.status,
                content = response.content,
                exception = response.exception,
                url = this.getLoadUrl();
            me.loaded = true;
            if ((exception || status === 0) && !_environment.phantom) {
                me.error =
                    //<debug>
                    ("Failed loading synchronously via XHR: ‘" + url +
                        "‘. It‘s likely that the file is either being loaded from a " +
                        "different domain or from the local file system where cross " +
                        "origin requests are not allowed for security reasons. Try " +
                        "asynchronous loading instead.") ||
                    //</debug>
                    true;
                me.evaluated = true;
            }
            else if ((status >= 200 && status < 300) || status === 304
                || _environment.phantom
                || (status === 0 && content.length > 0)
                ) {
                me.content = content;
            }
            else {
                me.error =
                    //<debug>
                    ("Failed loading synchronously via XHR: ‘" + url +
                        "‘. Please verify that the file exists. XHR status code: " +
                        status) ||
                    //</debug>
                    true;
                me.evaluated = true;
            }
        },

 
时间: 2024-10-13 22:51:19

Ext create动态加载分析的相关文章

ext combobox动态加载数据库数据

前台: var provinceStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: basePath + "/stationManage/station_getProvinceJSON.action" }), reader: new Ext.data.JsonReader( { root: "" }, ["PROVINCEID", "PROVINCENAME

Ext.Net动态加载多表头

 效果展示如下:  aspx页面代码: <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

Extjs学习----------动态加载js文件(减轻浏览器的压力)

动态加载js文件可以减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/details/38538277 具体实现步骤: (1)建立dynamic.jsp文件 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String

Ext动态加载Toolbar

在使用Ext的GridPanel时候,有时候需要面板不用重新加载而去更新Store或者Toolbar,Store的方法有很多,例如官方api给我们提供的Store.load(),Store.reLoad(),等方法都可以对数据进行重新加载,在这篇博文中,主要来阐述如何动态加载Toolbar. 实现动态的加载Toolbar,首先必须知道,Toolbar是加载在panel上的,可以根据,重新加载Panel来进行增加,但是,不管是对于性能或者是代码的维护上来说,这种方式肯定都是不可取的. 接下来进入正

动态加载框架DL分析

插件化开发,主要解决三个问题1.动态加载未安装的apk,dex,jar等文件2.activity生命周期的问题,还有service3.Android的资源调用的问题 简单说一下怎样解决这三个问题,让插件化开发成为可能1.解决未安装的apk比较简单,用DexClassLoader就可以解决(原始的jar要用dx转换一下,不能直接加载)2.activity在未安装的apk中只是一个普通的类,生命周期不会被系统管理.解决这个问题就是在宿主apk注册代理activity,这个activity只是一个壳,

Ext选项卡tabpanel切换动态加载数据

鸣人不说暗话,来张图: 代码开始:(使用Ext,ajax加载数据,如果你们有好的方法也可以多多交流)var tabxsk = new Object(); //初始化 tabxsk.init = function () { test.pageSize = Math.floor((d_right_height() - 106 - 27) / 23); tabxsk.markpageSize = Math.floor((d_right_height() - 106 - 27) / 23); tabxs

ExtJS4.2 仅需配置URL动态加载GridPanel列(带分页)

最近做ExtJS一直想做个傻瓜式的GridPanel,今天折腾了一天,从GitHub找到的老外写的解决方案, 在他的基础上做了一些改动,增加了分页,增加了columns手动配置(原本只能动态生成),大家有兴趣可以自由扩展,我做了很详细的注释 效果图如下,仅需在html页面引入ext.all,并创建自定义控件,配置url即可创建带分页效果的GirdPanel 代码: 效果图: 一.动态加载自定义控件 自定义脚本包括两部分:DynamicGrid.js和DynamicReader.js 将Ext目录

Selenium来抓取动态加载的页面

一般的爬虫都是直接使用http协议,下载指定url的html内容,并对内容进行分析和抽取.在我写的爬虫框架webmagic里也使用了HttpClient来完成这样的任务. 但是有些页面是通过js以及ajax动态加载的,例如:花瓣网.这时如果我们直接分析原始页面的html,是得不到有效的信息的.当然,因为无论怎样动态加载,基础信息总归是包含在初始页面中得,所以我们可以用爬虫代码来模拟js代码,js读取页面元素值,我们也读取页面元素值;js发送ajax,我们就拼凑参数.发送ajax并解析返回的jso

[翻译]-Linux上C++类的动态加载

摘要:本文是翻译文章,主要介绍了运行时重载C++类的技术,包括了Linux上的动态加载接口.C++类的动态加载技术点及实现.自动加载技术等.最后给出了两个应用案例及相关的源代码.   关键字:动态加载,C++类,Linux 原文链接:http://porky.linuxjournal.com:8080/LJ/073/3687.html   推荐: (原文)http://www.tldp.org/HOWTO/text/C++-dlopen (翻译)http://hi.baidu.com/clive