m3m4加载器的优化版m3m4-v1.1
m3m4加载器的优化版m3m4-v1.1
/*
//1、以$开头的模块名,表示服务,服务只会执行一次,它可以有自己的方法。比如cookie就是一个服务
//例如:console.log("root");只会执行一次
define("$root",[function(){
console.log("root");
return "root"
}])
//2、非$开头的表示普通模块,普通模块每次调用的时候都会执行
//例如:console.log("userList");每次都会执行
define("userList",["$root",function($root){
console.log($root);
console.log("userList");
return "userList"
}])
//3、存在 $callback 表示异步回调模块,$callback将返回异步的数据
define("sync1",["$root","$callback",function(a,callback){
console.log(22)
setTimeout(function(){
callback("1 sync")
},1000)
}])
require("sync1",function(sync1){
console.log(sync1);//将输出结果:1 sync
})
* */
(function($){
var baseModels={}
var baseLoaded={}
var baseCache={}
function define(name,args,base){
if(base){
baseLoaded[name]=true
baseCache[name]=args
}else{
baseModels[name]=args
}
}
function require(name,callback){
var models=Object.create(baseModels)
var curCache=Object.create(baseCache)
var curLoaded=Object.create(baseLoaded)
var self={
version:"m3m4-v1.1"
}
function curRequire(name,callback){
//从全局中返回
if(/^\$/.test(name)&&baseLoaded[name]){
callback(baseCache[name])
return
}
//返回结果
if(curLoaded[name]){
callback(curCache[name])
//设置全局
if(/^\$/.test(name)){
baseCache[name]=curCache[name]
baseLoaded[name]=curLoaded[name]
}
return
}
var next=function(){
curRequire(name,callback)
}
//获取模块长度
var args=models[name]
var func=args[args.length-1]
var len=args.length-1
var dataArr=[]
//过滤 $callback
var sync=args.indexOf("$callback")
if(sync!=-1){
dataArr[sync]=function(back){
curCache[name]=back
curLoaded[name]=true
next()
}
if(--len==0){
func.apply(self,dataArr)
return;
}
}
if(len==0){
curCache[name]=func.apply(self,dataArr)
curLoaded[name]=true
next()
}else{
for(var i=0;i<args.length-1;i++){
if(i==sync)continue;
(function(n,model){
curRequire(model,function(data){
dataArr[n]=data
if(--len==0){
if(sync!=-1){
func.apply(self,dataArr)
}else{
curCache[name]=func.apply(self,dataArr)
curLoaded[name]=true
next()
}
}
})
})(i,args[i])
}
}
}
//Api兼容写法
if(Object.prototype.toString.call(name)!="[object Array]"){
models["app"]=Array.prototype.slice.call(arguments)
}else{
models["app"]=name
}
curRequire("app",function(){})
}
$.m3m4=function(func){
func(define,require)
};
$.define=define;
$.require=require;
})(typeof window!="undefined"?window:global)
demo
m3m4(function(define,require){
//定义模块
define("user1",["req",function(req){
return req
}])
//路由1
define("req",["$callback",function($callback){
setTimeout(function(){
$callback({
url:"user1.html"
})
},1000)
}])
//执行
require("user1",function(user1){
console.log(user1)
})
//路由2
define("req",["$callback",function($callback){
setTimeout(function(){
$callback({
url:"user2.html"
})
},100)
}])
//执行
require("user1",function(user1){
console.log(user1)
})
})
m3m4加载器的优化版m3m4-v1.1的更多相关文章
- js前端模块化之加载器原理解析(一)
先来说一下前端模块化的价值:引用模块此处有详细的介绍,可以自行前往观看. 一.总结如下优点: (1)解决命名冲突(2)烦琐的文件依赖(3)模块的版本管理(4)提高可维护性(5)前端性能优化(6)跨环境 ...
- 构建服务端的AMD/CMD模块加载器
本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言: 在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS. ...
- C编译器、链接器、加载器详解
摘自http://blog.csdn.net/zzxian/article/details/16820035 C编译器.链接器.加载器详解 一.概述 C语言的编译链接过程要把我们编写的一个c程序(源代 ...
- js模块化/js模块加载器/js模块打包器
之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...
- 《你必须知道的.NET》读书实践:一个基于OO的万能加载器的实现
此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.关于万能加载器 简而言之,就是孝顺的小王想开发一个万能程序,可以一键式打开常见的计算机资料,例如: ...
- 小矮人Javascript模块加载器
https://github.com/miniflycn/webkit-dwarf 短小精悍的webkit浏览器Javascript模块加载器 Why 我们有许多仅基于webkit浏览器开发的应用 无 ...
- RequireJS 是一个JavaScript模块加载器
RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJ ...
- JS框架设计之加载器所在路径的探知一模块加载系统
1.要加载一个模块,我们需要一个URL作为加载地址,一个script作为加载媒介,但用户在require是都用ID,我们需要一个将ID转换为URL的方法,思路很简单,强加个约定,URL的合成规则是为: ...
- How Tomcat Works 读书笔记 八 加载器 上
Java的类加载器 具体资料见 http://blog.csdn.net/dlf123321/article/details/39957175 http://blog.csdn.net/dlf1233 ...
随机推荐
- Java中迭代Map的方法
Map<String, String> mapServlet = new HashMap<String, String>(); System.out.println(" ...
- 10.Execution failed with exit status: 3
错误信息: insert overwrite table t_mobile_mid_use_p_tmp4_rcf select '201411' as month_id, a.prov_id, a.c ...
- Django框架 之 form组件
Django框架 之 form组件 浏览目录 Form介绍 普通的登录 使用form组件 Form详情 常用字段 校验 进阶 使用Django Form流程 一.Form介绍 我们之前在HTML页面中 ...
- JavaScript判断是否是数组
在 ECMAScript5中定义了一个新的方法Array.isArray(). 如果参数是数组的话,就返回true eg: Array.isArray([]); // true 如果里面换一个类似数组 ...
- IE6支持兼容max-height、min-height CSS样式
1.IE6支持max-height解决方法 - TOP IE6支持最大高度解决CSS代码: .yangshi{max-height:1000px;_height:expression((doc ...
- SVG素材整理(原)
why SVG? 1.矢量的国际图形标准,以后随着浏览器的发展,相信矢量会更多的出现 2.illustartor等多数矢量绘图软件可以导出为这种格式 so SVG现状 基本介绍:http:// ...
- easyui datagrid deleteRow(删除行)的BUG
有时候想临时保存一些数据,等确定好后在批量一次提交,但EasyUI datagrid 用的时候添加可以正常,如果从中间删除那行号就全乱了.导致删除的时候有可能删除上一行数据. function ad ...
- 一套最全的JavaScript 语言基础知识点总结(思维导图10张)
1.DOM基础操作 2.数组基础 3.函数基础 4.运算符 5.流程控制语句 6.正则表达式 7.字符串函数 8.数据类型 9.变量 10.window对象
- 死磕Java之聊聊ArrayList源码(基于JDK1.8)
工作快一年了,近期打算研究一下JDK的源码,也就因此有了死磕java系列 ArrayList 是一个数组队列,相当于动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractLis ...
- javascript点击变绿色再点击变红色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...