(function(){         //存储已经创建的模块     var moduleMap = {};     //判断是否已经加载过     var fileMap   = {};     //空函数     var noop = function(){};             /*注册为全局变量*/     window.thin = {        //在这里定义的模块,都被注册到了moduleMap里面                   /*define :主要作用moduleMap中注册模块         *name           模块的名称         *dependencies   模块的依赖项         *factory        模块的函数体         */                 define:function(name,dependencies,factory){             if(!moduleMap[name]){                 //模块的结构                 var module = {                     name:name,                     dependencies:dependencies,                     factory:factory                 };                 moduleMap[name] = module;             }             return moduleMap[name]         },         /*use: 主要作用得到模块的使用权         *name   模块的名称         *         */         use:function(name){             //module 需要使用的模块的引用             var module = moduleMap[name];                         if(!module.entity){                 //用来存储依赖项引用,用于传入factory,方便函数调用                 var args = [];                 //遍历module的依赖项数组                 for(var i=0;i<module.dependencies.length;i++){                     //检测依赖项数组的entity属性,如果已经使用,获取引用                     if(moduleMap[module.dependencies[i].entity]){                         args.push(moduleMap[module.dependencies[i]].entity)                     }                     //如果没有使用,则获取这个模块的使用权                     else{                         args.push(this.use(module.dependencies[i]))                     }                 }                                 module.entity = module.factory.apply(noop,args) //noop 空函数             }             return module.entity;         },         /*实现按需加载模块,而不是一次性加载所有模块         *实现原理:动态创建script标签,设置src,添加到document.head,监听完成的事件         *fileMap 记录已经加载的文件的路径,防止重复加载,当所有加载完,执行回调         */         require:function(pathArr,callback){             for(var i = 0;i<pathArr.length;i++){                 var path = pathArr[i];                 //如果还没有加载                 if(!fileMap[path]){                     var head = document.getElementByTagName("head")[0];                     var node = document.createElement("script");                     node.type= "text/javascript";                     node.async="true";                     node.src = path+".js";                     //当加载完成后,                     node.onload = function(){                         fileMap[path] = true;                         head.removeChild(node);                         checkAllFiles();                     };                     head.appendChild(node);                                     }             }             function checkAllFiles(){                 var allLoaded = true;                 //变量fileMap,如果有没有加载的,继续加载,加载完成以后,执行回调                 for(var i=0;i<pathArr.length;i++){                     if(!fileMap[pathArr[i]]){                         allLoaded = false;                         break;                     }                 }                 if(allLoaded){                     callback();                 }             }         }     }         })();

js常用框架原理的更多相关文章

  1. js常用工具类.

    一些js的工具类 复制代码 /** * Created by sevennight on 15-1-31. * js常用工具类 */ /** * 方法作用:[格式化时间] * 使用方法 * 示例: * ...

  2. Js常用技巧

    摘录:http://crasywind.blog.163.com/blog/static/7820316920091011643149/ js 常用技巧 1. on contextmenu=" ...

  3. JS常用的标准函数

    原文:JS常用的标准函数 1.Array类型函数 array.concat(item...) 函数功能:关联数组,实现数组相加功能,但并不影响原先数组,concat返回新数组. array.join( ...

  4. JS 常用功能收集

    JS 常用效果收集 1. 回到顶部>>    爱词霸

  5. JS常用校验方法(判断输入框是否为空,数字,电话,邮件,四舍五入等)

    JS常用校验方法: 1.判断输入框是否为空,为空时弹出提示框 2.关闭窗口 3.检查输入字符串是否为数字 4.强制把大写转换成小写 5.手机号码校验,长度为11位数字. 6.电子邮件校验 7.电话号码 ...

  6. Node.js 常用工具

    Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.inherits util.inherit ...

  7. JS常用正则表达式备忘录

    摘要: 玩转正则表达式. 原文:JS常用正则表达式备忘录 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正则表达式或"regex"用于匹配字符串的各个部分 下面是 ...

  8. js常用数据类型(Number,String,undefined,boolean) 引用类型( function,object,null ),其他数据类型( 数组Array,时间Date,正则RegExp ),数组与对象的使用

    js常用数据类型 数字类型 | 字符串类型 | 未定义类型 | 布尔类型 typeof()函数查看变量类型 数字类型  Number var a1 = 10; var a2 = 3.66; conso ...

  9. js常用身份校验规则

    js常用身份校验规则 var Validator = { extractBirth: function(id) { // 身份证提取出生年月 var re = null, split, year, m ...

随机推荐

  1. 切换阿里巴巴开源镜像站镜像——Kali镜像

    参考链接: 阿里巴巴开源镜像站 镜像切换参考链接:阿里云Kali镜像源 安装Kali Linux系统参考链接:使用VMware虚拟机安装kali Linux 一.打开终端命令窗口 二.进入source ...

  2. 4月17日 python学习总结 反射、object内置方法、元类

    一.反射 下述四个函数是专门用来操作类与对象属性的,如何操作? 通过字符串来操作类与对象的属性,这种操作称为反射 class People: country="China" def ...

  3. 计算机网络:套接字(Socket)| Python socket实现服务器端与客户端通信,使用TCP socket阿里云ECS服务器与本机通信

    所谓套接字(Socket),就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象.一个套接字就是网络上进程通信的一端,提供了应用层进程利用网络协议交换数据的机制.从所处的地位来讲,套接字上联应 ...

  4. 【推理引擎】从源码看ONNXRuntime的执行流程

    目录 前言 准备工作 构造 InferenceSession 对象 & 初始化 让模型 Run 总结 前言 在上一篇博客中:[推理引擎]ONNXRuntime 的架构设计,主要从文档上对ONN ...

  5. java concurrent 并发多线程

    Concurrent 包结构 ■ Concurrent 包整体类图 ■ Concurrent包实现机制 综述: 在整个并发包设计上,Doug Lea大师采用了3.1 Concurrent包整体架构的三 ...

  6. Spring Bean生命周期回调方法

    参阅官方文档:https://docs.spring.io/spring/docs/current/spring-framework-reference/core.html#beans-factory ...

  7. 单片,SOA 和微服务架构有什么区别?

    单片架构类似于大容器,其中应用程序的所有软件组件组装在一起并紧密 封装.第一个面向服务的架构是一种相互通信服务的集合.通信可以涉及简单的数 据传递,也可以涉及两个或多个协调某些活动的服务.微服务架构是 ...

  8. mysql8.0时区问题

    今天在mysql新增一条数据的时候,发现时间类型的字段比起现在少了8个小时,查了资料才发现,这个是MySQL8.0出现的问题,讲下解决方法. 1.在java项目中application.yml文件中的 ...

  9. HMS Core定位服务在生活服务类App中可以自动填写收货地址啦

    在涉及团购.外卖.快递.家政.物流.搬家等生活服务类的App.小程序中,填写收货地址是用户高频使用的功能.这一功能通常采取让用户手动填写的解决方案,例如上下拉动选择浙江省-->杭州市--> ...

  10. ACM - 图论 - P3385 负环

    P3385 负环 题目描述 给定一个 \(n\) 个点的有向图,请求出图中是否存在从顶点 \(1\) 出发能到达的负环. 负环的定义是:一条边权之和为负数的回路. 输入格式 本题单测试点有多组测试数据 ...