javascript 异步加载 AMD 实现

最新推荐文章于 2024-06-04 09:02:59 发布

陆康永

最新推荐文章于 2024-06-04 09:02:59 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：设计模式

本文链接：https://blog.youkuaiyun.com/xiaomogg/article/details/52606342

设计模式专栏收录该内容

7 篇文章

订阅专栏

demo.html

lib----

event.js

dom.js

dom.js：

//DOM模块
F.module("lib/dom",function(){
	return {
		//获取元素方法
		g:function(id){
			 return document.getElementById(id);
		},
		html:function(id,html){
			if(html){
				this.g(id).innerHTML=html;
			}
			else{
				return this.g(id).innerHTML;
			}

		}
	}
})

event.js

//EVENT模块,依赖dom模块
F.module("lib/event",["lib/dom"],function(dom){
	var events={
		on:function(id,type,fn){
			dom.g(id)["on"+type]=fn;
		}
	}
	return events;
})

demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>AMD</title>
</head>

<body>
 <button id="demo">点击我</button>
    <script src="lib/AMD.JS"></script>
    <script>
        F.module(["lib/event","lib/dom"],function(events,dom){
            events.on("demo","click",function(){
                dom.html("demo","success");
            })
        })
    </script>
</body>

</html>

AMD.js

 ~(function(F) {
     //模块缓存器，储蓄已创建模块
     var moduleCache = {},
         /*
                设置模块并执行模块构造函数
                @param moduleName 模块ID
                @param params 依赖模块
                @param callback  模块构造函数

            */
         setModule = function(moduleName, params, callback) {
             var _module, fn;
             //如果模块被调用过
             if (moduleCache[moduleName]) {
                //获取模块
                 _module = moduleCache[moduleName];
                 //修改模块状态
                 _module.status = "loaded";
                 //矫正接口
                 _module.exports = callback ? callback.apply(_module, params) : null;
                 //执行模块文件加载完成的回调函数
                 while (fn = _module.onload.shift()) {
                     fn(_module.exports);
                 }
             } else {
                //模块不存在(匿名函数)，就直接执行构造函数
                 callback && callback.apply(null, params);
             }
         },
         /*
            异步加载依赖模块所在的文件
            @param moduleName     模块路径(id)
            @parm callback        模块加载回调函数

         */
         loadModule = function(moduleName, callback) {
             var _module;
             //已经加载完毕某个模块
             if (moduleCache[moduleName]) {
                //获取该模块信息
                 _module = moduleCache[moduleName];
                 if (_module.status === "loaded") {
                     setTimeout(callback(_module.exports), 0);
                 } else {
                     _module.onload.push(callback);
                 }
             }
             //模块第一次被调用 
             else {
                //初始化某模块状态
                 moduleCache[moduleName] = {
                     moduleName: moduleName,  //模块ID
                     status: "loading",//模块文件对呀的加载状态
                     exports: null,//模块接口
                     onload: [callback]//模块对呀文件加载完成函数缓冲器
                 };
                 //加载模块对应文件
                 loadScript(getUrl(moduleName));
             }

         },
         //获取文件路径
         getUrl = function(moduleName) {
             return String(moduleName).replace(/\.js$/g, "") + '.js';
         },
         loadScript = function(src) {
             //创建script元素
             var _script = document.createElement("script");
             _script.type = "text/Javascript";
             _script.charset = "UTF-8";
             _script.async = "true"; //异步加载
             _script.src = src; //文件路径
             document.getElementsByTagName("head")[0].appendChild(_script); //插入页面中
         };
     //创建与调度模块

     /*
         @param url   参数为模块的url
         @param deps 参数为依赖模块
         @param callback 参数为模块主函数

     */

     F.module = function(url, modDeps, modCallback) {
         //将参数转换为数组
         var args = [].slice.call(arguments),
             //获取模块构造函数(参数中的第一个成员);
             callback = args.pop(),
             //获取依赖模块(回调函数参数，切数据类型为数组)
             deps = (args.length && args[args.length - 1] instanceof Array) ? args.pop() : [],
             //改模块url(模块id)
             url = args.length ? args.pop() : null,
             //依赖模块序列
             params = [],
             //未加载的模块数量统计
             depsCount = 0,
             //依赖模块序列中的索引值
             i = 0,
             //依赖模块序列的长度
             len;

         //获取依赖模块的长度
         if (len = deps.length) {
             while (i < len) {
                 (function(i) {
                     //增加为依赖模块的统计
                     depsCount++;
                     //异步加载依赖模块
                     loadModule(deps[i], function(mod) {
                         //依赖模块序列中添加依赖模块接口引用
                         params[i] = mod;
                         //依赖模块加载完成，依赖模块数量统一-1
                         depsCount--;
                         //如果依赖模块全部加载
                         if (depsCount === 0) {
                             //在模块缓存中矫正模块，并且执行构造函数
                             setModule(url, params, callback)
                         }
                     })
                 })(i);
                 //遍历下一依赖模块
                 i++;
             }
         }
         //无依赖模块，直接执行回调
         else {

             setModule(url, [], callback);
         }

     }

 })((function() {
     return window.F = {};
 })());

关于异步和线程参考：http://blog.youkuaiyun.com/xiaomogg/article/details/56512856