百度地图模块动态加载方式(附源码)

最近研究了一下百度地图的模块动态加载,发现他的实现方式还蛮不错的!

特贴出他的代码,供以后参考研究。

Module = {
	Request: {//模块请求的状态
		INITIAL: -1,
		WAITING: 0,
		COMPLETED: 1
	},
	Dependency: {//模块依赖情况
		control: [],
		marker: [],
		poly: ["marker"],
		infowindow: ["marker"],
		hotspot: ["poly"],
		menu: [],
		tools: ["marker", "poly"],
		oppc: [],
		opmb: [],
		"3dmap": ["hotspot"]
	},
	preLoaded: {},
	Config: {
		_baseUrl: "http://map.baidu.com/?qt=getmodules&v=1.1&",
		_timeout: 5000
	},
	delayFlag: false,
	Module: {
		_modules: {},
		_arrMdls: []
	},

	jsRequest:function(url,cbk){
		var _nodeObj = document.createElement('script');
		_nodeObj.type = 'text/javascript';
		_nodeObj.src = url;
		if (_nodeObj.addEventListener) {
			_nodeObj.addEventListener("load",function(node) {
				if(cbk&&typeof cbk == 'function')cbk();
				var _target = node.target;
				_target.parentNode.removeChild(_target);
			},false);
		} else {
			if (_nodeObj.attachEvent) {
				_nodeObj.attachEvent("onreadystatechange",function(node) {
					if(cbk&&typeof cbk == 'function')cbk();
					var _target = window.event.srcElement;
					if (_target && (_target.readyState == "loaded" || _target.readyState == "complete")) {
						_target.parentNode.removeChild(_target);
					}
				});
			}
		}
		setTimeout(function() {
			document.getElementsByTagName("head")[0].appendChild(_nodeObj);
			_nodeObj = null;
		},1);

	},

	//加载模块
	load: function(name, cbk) {
		var _module = this.current(name);
		if (_module._status == this.Request.COMPLETED) {//如果已经加载完毕,则返回
			return;
		} else {
			if (_module._status == this.Request.INITIAL) {
				this.combine(name);
				this.pushUniqueMdl(name);
				var _this = this;
				if (_this.delayFlag == false) {
					_this.delayFlag = true;
					window.setTimeout(function() {
						var _mdlsUrl = _this.Config._baseUrl + "&mod=" + _this.Module._arrMdls.join(",");
						_this.request(_mdlsUrl);
						_this.Module._arrMdls.length = 0;
						_this.delayFlag = false;
					},1);
				}

				_module._status = this.Request.WAITING;
			}
			_module._callbacks.push(cbk);
		}
	},
	combine: function(name) {//组合模块
		if (name && this.Dependency[name]) {
			var _depname = this.Dependency[name];
			for (var i = 0; i < _depname.length; i++) {
				this.combine(_depname[i]);
				if (!this.Module._modules[_depname[i]]) {
					this.pushUniqueMdl(_depname[i]);
				}
			}
		}
	},
	pushUniqueMdl: function(depname) {//将所要加载的模块压入数组中
		for (var i = 0; i < this.Module._arrMdls.length; i++) {
			if (this.Module._arrMdls[i] == depname) {
				return;
			}
		}
		this.Module._arrMdls.push(depname);
	},

	//_jsload
	run: function(name, text) {
		var _name = this.current(name);
		try {
			eval(text);
		} catch(aZ) {
			return;
		}
		_name._status = this.Request.COMPLETED;
		for (var aX = 0, aU = _name._callbacks.length; aX < aU; aX++) {
			_name._callbacks[aX]();
		}
		_name._callbacks.length = 0;
	},
	check: function(i, aU) {
		var _this = this;
		_this.timeout = setTimeout(function() {
			var _status = _this.Module._modules[i]._status;
			if (_status != _this.Request.COMPLETED) {
				_this.remove(i);
				_this.load(i, aU);
			} else {
				clearTimeout(_this.timeout);
			}
		},_this.Config._timeout);
	},
	current: function(name) {
		var _module;
		if (!this.Module._modules[name]) {
			this.Module._modules[name] = {};
			this.Module._modules[name]._status = this.Request.INITIAL;
			this.Module._modules[name]._callbacks = [];
		}
		_module = this.Module._modules[name];
		return _module;
	},
	remove: function(i) {
		var _module = this.current(i);
		delete _module;
	}
};

模块加载方式:

if(加载control){
    Module.load('control',function(){});
}
if(加载marker){
   Module.load('marker',function(){});
}
......

这篇文章目前有5条评论。

  1. zwwooooo Mozilla Windows 2011-05-17 22:54

    木有用这类,我是来沙发

    沙发王 !
  2. admin CHINA Mozilla Firefox Windows 2011-05-18 09:25

    欢迎z大叔来做沙发!

    板凳党 !
  3. Louis Han CHINA Mozilla Firefox Windows 2011-05-21 22:11

    这些代码都被你扒出来了

    地板砖 !
  4. Nan CHINA Mozilla Firefox Windows 2011-05-27 16:40

    这种动态加载是很容易做到的,但难点在于如何“按需加载”!按需加载的难点又在于实例化拦截与还原调用场景上。多研究研究google的代码

    4 #
    • admin CHINA Google Chrome Linux 2011-05-29 16:02

      实例化拦截与还原调用场景上? (鸭梨)

回复

(必填项)

(必填项)

(可选)