github地址： system.js
System.config()
var config={
"defaultSourceDir":"./",
"scriptSubDirname":"js",
"cssSubDirname":"css",
"globalScript":[{"name":"jquery-1.8.3.min.js","path":"http://code.jquery.com/jquery-1.8.3.min.js"},{"name":"test1.js"}],
"globalCss":[{"name":"test1.css"}]
};
System.config(config);
var v1=System.getReadyVersion();//get the version of the 'ready' event
//if there are global file(the globalScript and globalCss),the event 'ready' will be emitted after the files are loaded.
System.on("ready",v1,function(){
console.log("hello world!");
})
如果以前是通过在head元素里面添加标签script和link来加载相应的文件，现在只需要设置几个值就可以了。‘defaultSourceDir’是js文件和css文件所在文件夹的上层目录，scriptSubDirname是js文件所在文件夹的名字,cssSubDirname是css文件所在文件夹的名字。 ‘globalScrip’和‘globalCss’是俩个可选的参数，顾名思义，即设置全局依赖文件。一旦System.config(config)被调用，这些文件将按顺序加载，如果对某个文件设置了path属性，将从这个path加载资源，而不是从默认目录加载资源。参数设置的格式如上所示，System.config()函数只能调用一次。再次调用会覆盖之前设置的参数。
注意： 配置文件的加载和浏览器对文档的解析是异步的。可能由于网络原因，当文档解析完成后，相应的配置文件还没有加载完成,势必造成很坏 的用户体验。解决办法是在系统激发’ready’事件后再将内容加到页面中去。不禁要问，既然如此，为什么还这样做。个人认为哈，这样会让前端开发更为清晰，利于工程模块化，同时使整个项目的过程控制更加明了。 System.install() 安装配置文件
我们需要一个版本号用来标识这次的安装，在on(‘ready’）时也传入相应的版本号，使其关联起来
var v2=System.getReadyVersion();
System.install("test2.js",v2);
System.install("test2.css",v2);
System.install("test3.css",v2);
System.on("ready",v2,function(){
console.log("Resource has already been loaded!You can do your things safely now.");
])
//or
var v2=System.getReadyVersion();
var obj=[{"name":"test2.js"},{"name":"test2.css"},{"test3.css"}];
System.install(obj,v2).on("ready",v2,function(){
console.log("Resource has already been loaded! You can do your things safely now.");
});
System.uninstall() 卸载配置文件
System.uninstall("test1.js");
System.uninstall("test2.css");
//or
var obj=["test1.js","test2.css"];
System.uninstall(obj);//no callback ,the files will be uninstalled right now!
System.getReadyVersion() && System.on(“ready”,version,callback) System.getReadyVersion()将返回未注册的ready事件的版本，加版本是为了避免激发其他的回调函数. ‘ready’ 事件是一个系统特殊对待的事件，每次监听时都需要传递俩个参数，一个是版本号，一个是回调函数，而且同一个版本号只允许监听一次 System.on(eventName,callback) && System.emit(eventName,Args)
//let's do it safely :)
System.on("ready",v1,function(){
System.on("event1",function(message){
console.log(message)
});
setTimeout(function(){
System.emit("event1","hello world!");
},1000);
//we regist the event in 'v1 ready' ,we can emit it in another 'ready' event's callback with different version
System.on("event2",function(m){
console.log(m);
})
});
System.on("ready",v2,function(){
System.emit("event2","we can communicate! :)");
});
System.waterFall()
var water_fall=System.waterFall();//the first step
funciton cb(m)
{
setTimeout(function(){
console.log(m);
water_fall.next(m+1);//important!!!
},m%2*300);
};
var funcs=[];
for(var i=0;i<6;i++)
funcs.push(cb);
//the second step();
water_fall.regist(funcs,function(n){
console.log("End at :"+n);
});
water_fall.fire(0);//the last step
/*
result:
0
1
2
3
4
5
End at :6
this mean that the functions will be executed one by one.
*/
System.whenAllDone()
var all=System.whenAllDone();
function c1(task,args)
{
setTimeout(function(){
console.log(args);
task.ok();//important!!!!
},300);
};
function c2(task,args)
{
setTimeout(function(){
console.log(args);
task.ok();//important!!!
},400);
};
function c3(task,args)
{
setTimeout(function(){
console.log(args);
task.ok();//important!!!
},100);
};
all.when([c1,c2,c3]).args([1,2,3]).done(function(){
console.log("work well!");
});
//or
all.args([1,2,3]).when([c1,c2,c3]).done(function(){
console.log("work well");
});
//or
all.when(c1,c2,c3).args(1,2,3).done(function(){
console.log("work well");
};
//or
all.when(c1,c2,c3).args([1,2,3]).done(function(){
console.log("work well");
});
//.......
// 1 是c1的传入参数，2是c2的传入参数，3是c3的传入参数，c1,c2,c3中的task这个参数是all这个对象传送的，并在函数体内
//调用task.ok()表明这个函数执行结束
//the number '1' is the argument of c1. '2' is the argument of c2,'3' is the argument of c3. the 'task' is an Object
//which is the 'all' Object pass to the function. and the method "task.ok()" must be executed by yourself,which means
//the function finishs executing .when all the functions are done ,the callback will be executed.
/*
the result is:
3
1
2
work well
这样的结果表明回调函数将在c1,c2,c3都执行完之后被调用，但是c1,c2,c3的执行是同步的，不是一个接一个被执行的。
this means that the callback will be executed after the functions c1,c2,c3 are done. but c1,c2,c3 is not done one by one . this is the difference with waterFall Object.
*/
System.setKey(name,value) && System.getKey(name) &&System.removeKey(name)
System.setKey("name","Jason Zheng");
System.getKey("name");//return "Jason Zheng"
System.removeKey("name");
System.getKey("name");//undefined
/*note :
when the page was refreshed ,all the key will lost
*/
System.sessionStorage 和window.sessionStorage一样，只是做了一下兼容性 System.post(json,url,callback) && System.get(url,callback) Ajax json是JSON格式的数据，将发送到服务器端，服务器端也返回JSON格式类型数据，并传递给回调函数。（个人比较喜欢用JSON类型数据^-^）
