Threfuture of JavaScript
http://www.youtube.com/watch?v=u4IdoBU1uKE
Dhrman@littlecalculist
Tier 1 awesomeness
Modules
Block scoping
Generators
Proxies
Binary data
Destructuring
Rest-args&defaults
Tier 2 awesomeness
Name objects
Custom iteration
Comprehensions
String templates
Hash tables&weak maps
Great languages deservegreat libraries
YUI
CommonJS
Friction:摩擦力
Clay:泥土
Simple module
Var collecions=(function(){
FunctionDict(){....}
Return{
Dict:Dict
};
};
})();
Module Collections{
Export function(){......}
}
Import{$} from “jquery.js”;
Import{map,each}from “underscore.js”;
Let is the new var
For(i=0;i<a.length;i++){
Varx=a[i];
x.onclich=function(){x.toggle()};
}
Generator functions
Functon* counter(){
Yield1;
Yield 2;
Yield 3;
}
Var g=conter();
Alert(g.next()); //1
Alert(g.next()); //2
Alert(g.next()); //3
Mucky:脏的
It can be hard to read,it can be hard towork with.it can be hard to change.
XHR(“foo.txt”,function(foo){
XHR(“bar.txt”,function(bar){
XHR(“baz.txt”,function(baz){
setTimeout(function(){
status.innerHTML=
foo+bar+baz;
},1000);
};
});
});
How can generator to do this
Spaw(function*(){
Var foo=yield read(“foo.txt”),
Bar=yield read(“bar.txt”),
Baz=yield read(“baz.txt”);
Yield sleep(1000);
Status.innerHTML=foo+bar+baz;
});
Promise
Proxies
A proxy basically lets you take someexisting boject and create a wrapper object that can monitor anything thathappens to that object.you can intercept get operations,set operations,deleteoperations,just about anything you can ever do with an object.
Var p=new Proxy(obj,{
Get:function(....){...}
Set:function(....){...}
Delete::function(....){...}
....
});
Bits ,bytes and blobs
Var Point2D=new StructType({
X:uint32,
Y:unit32
});
Varcolor=new StructType({
R:uint8,g:uint:8,b:uint8
});
HTML file API,WebGL.
New Triangle([
{point:{x:0,y:0},
Color:{r:255,g:255,b:255}},
{ point:{x:5,y:5,
Color:{r:128,g:0,b:0}},
{ point:{x:10,y:0},
Color:{r:0,g:0,b:128}}
])
Destructuring
Var {r,g,b}=thing.color;
Var[x,y]=circle.center;
[a,b]=[b,a];
You do the same thing with arrays
Function div({width,height,border}){
}defaults
Rest-args and defaults
Function f(i,j,..........rest){
Return rest.slice(i,j);
}
Array.push(thing1,thing2,........marThings);
Var shpe=new shape(....points);
Function img(src,width=320,height=240){
}
Functionimg({src,
Width=310,
Height})
Name objects
Information hiding
Function Container(){
Varsecret=3;
This.service=function(){
If(secret...){
....
}
};
}
Var key=Name.create(“scret”);
Function Contaioner(){this[key]=3}
Contaion.prototype={
Service:function(){
If(this[key]....){
.........
}
}
};
Custom object iteration
For(x in [3,4,5]); //0,1,2
For(x of [3,4,5]); //3,4,5
For(x of keys(0)); //keys in 0
For(x ofvalues(0));
For([k,v] ofitem(0))
Import iterate from “...”
Obj[iterate]=funcion(){
Return{
Next:function(){.....}
}
}
For (x of obj){....}
Comprehensions
You can use comprehension or map,
[x*y for (x of obj1) for (y of obj2)]
(x*y for (x of obj1) for (y of obj2)]
String templetes
Enbedded in HTML
<p>
Dfad,${firstName}${lastName}
</p>
Splice:联合
Aspect:方面
Potential:潜力
Object-keyedtables
This is hard,
Var scores=newMap();
Var player1={...};
Scores.set(player1,0);
Scores.get(player1) //0
Subtle:微妙的
Var markers=newWeakMap();
Var tile=newTile(...);
Var results=[...];
Title.set(tile,results);
Grab bag
Be a better language for :
a. complex apps
b. libraries
c. code generators
motiveated by use cases.
Solve withsimple ,general,composable features.
Composable:组成的
Pieces have tofit together in a cohesive whole
Cohesive:紧密结合的
Wike.ecmascript.org