论坛首页 Web前端技术论坛

Ext 2.0动态加载JS工具类

浏览 3613 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-01-20   最后修改:2009-01-20
ScriptLoader = function() {
    this.timeout = 30;
    this.scripts = [];
    this.disableCaching = false;
    this.loadMask = null;
  };

  ScriptLoader.prototype = {
    showMask: function() {
      if (!this.loadMask) {
        this.loadMask = new Ext.LoadMask(Ext.getBody());
        this.loadMask.show();
      }
    },

    hideMask: function() {
      if (this.loadMask) {
        this.loadMask.hide();
        this.loadMask = null;
      }
    },

    processSuccess: function(response) {
      this.scripts[response.argument.url] = true;
      window.execScript ? window.execScript(response.responseText) : window.eval(response.responseText);
      if (response.argument.options.scripts.length == 0) {
        this.hideMask();
      }
      if (typeof response.argument.callback == 'function') {
        response.argument.callback.call(response.argument.scope);
      }
    },

    processFailure: function(response) {
      this.hideMask();
      Ext.MessageBox.show({title: 'Application Error', msg: 'Script library could not be loaded.', closable: false, icon: Ext.MessageBox.ERROR, minWidth: 200});
      setTimeout(function() { Ext.MessageBox.hide(); }, 3000);
    },

    load: function(url, callback) {
      var cfg, callerScope;
      if (typeof url == 'object') { // must be config object
          cfg = url;
          url = cfg.url;
          callback = callback || cfg.callback;
          callerScope = cfg.scope;
          if (typeof cfg.timeout != 'undefined') {
            this.timeout = cfg.timeout;
          }
          if (typeof cfg.disableCaching != 'undefined') {
            this.disableCaching = cfg.disableCaching;
          }
      }

      if (this.scripts[url]) {
        if (typeof callback == 'function') {
          callback.call(callerScope || window);
        }
        return null;
      }

      this.showMask();

      Ext.Ajax.request({
          url: url,
          success: this.processSuccess,
          failure: this.processFailure,
          scope: this,
          timeout: (this.timeout*1000),
          disableCaching: this.disableCaching,
          argument: {
            'url': url,
            'scope': callerScope || window,
            'callback': callback,
            'options': cfg
          }
      });
    }
  };

  ScriptLoaderMgr = function() {
    this.loader = new ScriptLoader();

    this.load = function(o) {
      if (!Ext.isArray(o.scripts)) {
        o.scripts = [o.scripts];
      }

      o.url = o.scripts.shift();

      if (o.scripts.length == 0) {
        this.loader.load(o);
      } else {
        o.scope = this;
        this.loader.load(o, function() {
          this.load(o);
        });
      }
    };
  };

  ScriptMgr = new ScriptLoaderMgr(); 

 构建一个one page one application的应用,动态的加载js组件是关键,虽然看到了5,6种解决方案,可是还是没办法做的很通用,作为一个项目组件。突然发现ExtJs的官方论坛确实是个好地方,由很多好用的资源,可是E文还是没有母语看这舒服,把最好的方案记录下。原文地址:http://extjs.com/forum/showthread.php?t=37897

 

使用示例:

ScriptMgr.load({
  scripts: ['/js/other-prerequisite.js', '/js/other.js'],
  callback: function() {
    var other = new OtherObject();
    alert(other); //just loaded
  }
}); 
 
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics