`

AMD研究，组件的动态加载。

 
阅读更多
研究了一下dojo的ADM。明白组件的加载机制了。 
(function(){
	var w = window, d = document;
	if(w.fu) return;

	var _Class = {
			create : function(){
				return function(){
					this.init.apply(this, arguments);
				}
			}
		},

		_each = function(arr, fn){
			for(var i = 0; i < arr.length; i++){
				if(fn(arr[i], i) === false) break;
			}
		},

		_Map = _Class.create();

	_Map.prototype = {
		init : function(){
			this._array = [];
		},
		set : function(key, value){
			var _exist = false;
			_each(this._array, function(item){
				if(item.key == key){
					_exit = true;
					return false;
				}
			});
			if(!_exist) this._array.push({"key":key, "value":value});
		},
		get : function(key){
			var _val;
			_each(this._array, function(item){
				if(item.key == key){
					_val = item.value;
					return false;
				}
			});
			return _val;
		}
	};

	var _eval = new Function("return eval(arguments[0]);"),

		_ajaxGet = function(url, callback){
			var _xhr = w.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
			_xhr.open("GET", url, false);
			_xhr.setRequestHeader("Accpet", "text/pain");
			_xhr.send(null);
			if(_xhr.status == 200 || (!location.host && !_xhr.status)){
				if(callback) callback(_xhr.responseText);
			}else{
				console.log("xhrFailed", _xhr.status);
			}
			return _xhr.resposeText;
		},

		_getBaseUrl = function(){
			var _scripts = d.getElementsByTagName("script"), i = 0, _baseUrl = "./";
			while(i < _scripts.length){
				var _script = _scripts[i++];
					_src = _script.src;
				if(_src){
					var _match = _src.match(/(((.*)\/)|^)fu\.js(\W|$)/i);
					if(_match){
						_baseUrl = _match[3];
						break;
					}
				}
			}
			return _baseUrl;
		},

		_baseUrl = _getBaseUrl(),

		_completeUrl = function(url){
			return _baseUrl+"/"+url+".js";
		};

		w.fu = {
			getBaseUrl : function(){
				return _baseUrl;
			},

			loadFiles : new _Map(),

			require : function(loadList, fn){
				var _self = this;
				if(!loadList || loadList.length == 0) return fn();
				_each(loadList, function(url){
					var _url = _completeUrl(url);
					_ajaxGet(_url, function(jsText){
						var module = _self.eval(jsText, _url);
						_self.loadFiles.set(url, module);
					});
				});
				var _loadListArgs = [];
				_each(loadList, function(url){
					_loadListArgs.push(_self.loadFiles.get(url));
				});
				return fn.apply(this, _loadListArgs);
			},

			define :  function(loadList, fn){
				return this.require(loadList, fn);
			},

			eval : function(text, hint){
				return _eval(text + "\r\n////@ sourceURL=" + hint);
			}
		}
})();

dom.js 
fu.define([], function(){
	return {dom:"dom"};
});

string.js 
fu.define([], function(){
	return {"string" : "string"};
});

on.js 
fu.define([], function(){
	return {on:"on"};
});



<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset='utf-8'>
		<script src='fu/fu.js'></script>

		<script type="text/javascript">
			fu.require([
				"_base/dom",
				"_base/string",
				"_base/on"
			], function(dom, string, on){
				console.log(dom.dom);
				console.log(string.string);
				console.log(on.on);
			});
	
		</script>
	</head>
	<body>

	</body>
</html>
分享到：
代码分行
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    详解webpack import()动态加载模块踩坑

    比如在构建动态路由时，我们可能希望根据用户操作来决定加载哪个页面组件。以下是一个使用 `react-loadable` 进行懒加载的例子： ```javascript function lazyLoad(path) { return Loadable({ loader: () =&gt; ...

    单页面的js文件动态加载组件

    本文将深入探讨如何利用JavaScript实现动态加载组件，并介绍如何确保在加载过程中使程序“悬挂”，直到所需文件完全加载。 一、js文件动态加载 js文件动态加载是通过JavaScript代码在需要时按需加载外部JavaScript...

    Extjs3动态加载js源码

    动态加载JS（Dynamic JavaScript Loading）是现代Web开发中的一个重要技术，它可以提高页面的加载速度，减少初始加载的数据量，并在需要时按需加载资源，从而优化用户体验。 在ExtJS 3中，虽然没有像ExtJS 4那样...

    ESL浏览器端的模块加载器支持延迟定义和AMD

    - **大型Web应用**：对于拥有大量模块和组件的Web应用程序，ESL的延迟加载和AMD特性可以显著提升性能。 - **单页应用（SPA）**：在单页应用中，由于需要动态加载不同的视图和功能，ESL的模块管理能力尤为重要。 - **...

    一个基于AMD规范的组件库，内含简洁SPA框架，便于快速构建单页面应用系统.zip

    【标题】中的“一个基于AMD规范的组件库，内含简洁SPA框架，便于快速构建单页面应用系统”指的是一个软件开发资源，它采用AMD（Asynchronous Module Definition）模块定义规范来组织代码，同时包含了一个简单易用的...

    knockout-amd-helpers

    总结来说，knockout-amd-helpers是Knockout.js和AMD模式结合的利器，它简化了模块管理和组件加载的过程，使得开发者能够更专注于业务逻辑，同时享受到模块化带来的好处。通过合理地利用knockout-amd-helpers，我们...

    vue文件经过编译使其满足AMDCMD的模式

    以Gulp为例，`gulp-vue-module-new-master`可能是一个Gulp任务或者项目，用于转换Vue组件，使其符合AMD或CMD的加载方式。在Gulp中，我们可以使用插件如`vueify`（基于Browserify）或`@vue/cli-service`来处理Vue组件...

    backbone-amd-seed:以amd的方式启动backbone，根据路由动态加载controller

    标题"backbone-amd-seed:以amd的方式启动backbone，根据路由动态加载controller"表明这是一个项目，它展示了如何使用Asynchronous Module Definition (AMD)规范来初始化Backbone.js，并且实现了一个功能，即根据路由...

    angular-amd-seed:以amd的方式启动angular，根据路由动态加载controller

    在`angular-amd-seed`中，我们可以看到每个AngularJS的组件（如控制器、服务、指令等）都被封装为一个AMD模块，然后在需要时通过`require`函数进行异步加载，这极大地提高了页面加载速度和资源利用率。 2. **...

    vue+webpack实现异步组件加载的方法

    Vue.js和Webpack 结合使用可以实现异步组件加载，这是一种优化前端应用性能的重要技术。Vue文档中推荐使用`Vue.component`方法，通过传递一个函数给`resolve`参数，该函数在Ajax请求成功后被调用，加载组件的定义。...

    angular按需加载js

    RequireJS是一个流行的AMD（Asynchronous Module Definition）加载器，它允许我们定义和异步加载JavaScript模块，从而提高页面性能。在Angular应用中，我们通常将每个Angular模块或者服务作为一个单独的RequireJS...

    华硕AMD主板Raid驱动

    华硕AMD主板的Raid驱动程序是为了解决在基于AMD芯片组的华硕主板上配置RAID（Redundant Array of Independent Disks）阵列时的重要组件。RAID是一种数据存储虚拟化技术，通过将多个硬盘组合成一个逻辑单元，以提供...

    前端模块加载解决方案modJS.zip

    modJS 是一套的前端模块加载解决方案。与传统的模块加载相比，modJS 会根据产品实际使用场景，自动选择一种相应的方案，使最终的实现非常轻量简洁。 使用 模块的定义 modJS是一个精简版的AMD/CMD规范，并不完全...

    linux下的AMDGPU驱动源码

    在Linux操作系统中，AMDGPU驱动源码是用于支持AMD（Advanced Micro Devices）显卡的核心组件。这个驱动程序允许系统与AMD的图形处理器进行交互，从而实现图形加速、视频播放、3D渲染等功能。AMDGPU驱动源码的编译和...

    Requirejs异步加载Dojo1.6

    AMD规范是一种在浏览器环境中异步加载和定义JavaScript模块的方式。它允许模块和其依赖项并行加载，提高页面加载速度。Requirejs是AMD规范的主要实现者之一。 ### 使用Requirejs加载Dojo 1. **配置Requirejs**：...

    AMD SATA驱动文件

    总的来说，AMD SATA驱动文件是确保在Windows XP系统中正确识别和使用AMD SATA硬盘的关键组件，通过安装此驱动，用户可以避免安装过程中的兼容性问题，充分利用SATA硬盘的高性能。在处理老式AMD平台的电脑系统时，这...

    AMD官方双核CPU驱动+优化补丁

    在使用AMD双核CPU驱动和优化补丁时，需要注意的是，修改系统关键组件如注册表需谨慎操作。注册表是Windows操作系统存储配置信息的地方，错误的修改可能导致系统不稳定甚至无法启动。因此，除非具备一定的电脑知识和...

    amdpcnet.rar

    AMD PCNet驱动程序是为这些网络适配器提供连接到网络功能的关键软件组件。本文将深入探讨AMD PCNet的相关知识点，包括其历史、功能、适用场景以及如何在DOS虚拟机中配置和使用。 1. **AMD PCNet的历史**： AMD ...

    generator-amd-ng:AMD AngularJS 组件项目的自耕农生成器

    **AMD AngularJS组件项目自耕农生成器详解** 在JavaScript开发领域，AngularJS与Asynchronous Module Definition (AMD) 结合可以构建出强大的组件化应用。`generator-amd-ng` 正是这样一个工具，它帮助开发者快速...

Magicbox
Global site tag (gtag.js) - Google Analytics