最近研究了一下百度地图的模块动态加载,发现他的实现方式还蛮不错的!
特贴出他的代码,供以后参考研究。
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(){}); } ......
木有用这类,我是来沙发
欢迎z大叔来做沙发!
这些代码都被你扒出来了
这种动态加载是很容易做到的,但难点在于如何“按需加载”!按需加载的难点又在于实例化拦截与还原调用场景上。多研究研究google的代码
实例化拦截与还原调用场景上? (鸭梨)