js常用框架原理
(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常用框架原理的更多相关文章
- js常用工具类.
一些js的工具类 复制代码 /** * Created by sevennight on 15-1-31. * js常用工具类 */ /** * 方法作用:[格式化时间] * 使用方法 * 示例: * ...
- Js常用技巧
摘录:http://crasywind.blog.163.com/blog/static/7820316920091011643149/ js 常用技巧 1. on contextmenu=" ...
- JS常用的标准函数
原文:JS常用的标准函数 1.Array类型函数 array.concat(item...) 函数功能:关联数组,实现数组相加功能,但并不影响原先数组,concat返回新数组. array.join( ...
- JS 常用功能收集
JS 常用效果收集 1. 回到顶部>> 爱词霸
- JS常用校验方法(判断输入框是否为空,数字,电话,邮件,四舍五入等)
JS常用校验方法: 1.判断输入框是否为空,为空时弹出提示框 2.关闭窗口 3.检查输入字符串是否为数字 4.强制把大写转换成小写 5.手机号码校验,长度为11位数字. 6.电子邮件校验 7.电话号码 ...
- Node.js 常用工具
Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.inherits util.inherit ...
- JS常用正则表达式备忘录
摘要: 玩转正则表达式. 原文:JS常用正则表达式备忘录 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正则表达式或"regex"用于匹配字符串的各个部分 下面是 ...
- js常用数据类型(Number,String,undefined,boolean) 引用类型( function,object,null ),其他数据类型( 数组Array,时间Date,正则RegExp ),数组与对象的使用
js常用数据类型 数字类型 | 字符串类型 | 未定义类型 | 布尔类型 typeof()函数查看变量类型 数字类型 Number var a1 = 10; var a2 = 3.66; conso ...
- js常用身份校验规则
js常用身份校验规则 var Validator = { extractBirth: function(id) { // 身份证提取出生年月 var re = null, split, year, m ...
随机推荐
- ClickHouse镜像在阿里云镜像站首发上线
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 简介 ClickHouse是开源.高性能的列式OLAP的数据库管理系统(DBMS).使用SQL进行实时分析. ClickHouse可以做用户行为分析 ...
- Debian与Ubuntu到底有什么不同,应该如何选择?
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 在CentOS转向CentOS Stream之后,这意味着它将变得不可靠. 但是幸好,仍然有非常优秀的Linux发行版本在等我们.其中比较有知名度 ...
- ctf之POST
题目信息如下 可知该题考察post请求知识 直接将what=flag以post传参格式进行传参即可获得flag
- bzoj3144 [HNOI2013]切糕(最小割)
bzoj3144 [HNOI2013]切糕(最小割) bzoj Luogu 题面描述见上 题解时间 一开始我真就把这玩意所说的切面当成了平面来做的 事实上只是说相邻的切点高度差都不超过 $ d $ 对 ...
- 分库分表之后分布式如何保证ID全局唯一性
分库分表之后分布式如何保证ID全局唯一性 韩师学子--小倪 2018-07-21 23:35:38 8139 收藏 3分类专栏: Mysql版权 分库分 ...
- 什么是BASH?
BASH是Bourne Again SHell的缩写.它由Steve Bourne编写,作为原始Bourne Shell(由/ bin / sh表示)的替代品.它结合了原始版本的Bourne Shel ...
- 创建一个简单的Eureka注册中心
微服务和分布式已经成了一种极其普遍的技术,为了跟上时代的步伐,最近开始着手学习SpringCloud,就从Eureka开始.他们俩就不做介绍了,网上的说明一堆,随便打开一个搜索引擎输入关键字都足够了解 ...
- JDBC中大数据量的分页解决方法?
最好的办法是利用sql语句进行分页,这样每次查询出的结果集中就只包含某页的数据内容. sql语句分页,不同的数据库下的分页方案各不一样,下面是主流的三种数据库的分页sql: oracle: selec ...
- pg数据库排序和limit同时使用遇到的奇怪问题
这两天由于一位实习生同事回学校答辩,因此我来跟进他之前开发的功能进行测试,测试反馈上来这么一个问题: 也就是说下面这两条sql查询出来的数据前10条的数据不一样. select * from tabl ...
- awk 详解?
awk '{pattern + action}' {filenames} #cat /etc/passwd |awk -F ':' '{print 1"\t"7}' //-F 的意 ...