JS2

JS2 JS2 = JavaScript*JeffSu

我们遇到的问题
复杂的 javascript 应用，需要可靠的架构
大量 javascript 代码，需要良好的组织性
大量应用与 DOM 紧密结合
需要更加容易使用的继承和引用的实现
需要快速高效的 javascript 开发平台
易读的代码

我们的解决方案
JS2
javascript 伪代码
更加类似 Ruby ， Java 的 OO 语法
可通过编译实现多重继承等更多特性
基于 HAML 的 htmlCache
可自定义的 javascript 语法实现

使用 JS2
gem install js2
js2 public/javascripts app/js2
js2 -d public/javascripts app/js2

Javascript 的类定义
通过定义 prototype
var MyClass = function () { };
MyClass.prototype = {
member1: "member1",
method1: function () { alert("method1 called"); }
}
直接定义函数体
var MyClass = function () {
this.member1 = “member1”;
this.method1 = function () {
alert(“method1 called”);
}
}

Javascript 的类定义
通过一些 javascript 框架
var MyClass = Class.create({
member1: "member1",
method1: function () { alert("method1 called"); }
});

JS2 类定义语法 class MyClass { var member1 = "member1”; function method1 () { alert("method1 called"); } }

JS2 的类继承
class Vehicle {
function drive () {
alert('drive');
}
}
class Car extends Vehicle {
function drive () {
_super(this);
alert('with car');
}
}
优点
简洁的语法
实现了 super

Getters and Setters
Javascript 实现
Duck.prototype = {
setColor: function (color) { this.color = color; },
getColor: function () { return this.color; }
} ;
JS2 实现
class Duck {
property color;
}

糅合（ Mixins ） module Flyable { function fly () { alert('Flying!'); } } class Bird { include Flyable; } class Duck { include Flyable; }

静态方法用于解决类似于唯一实例等问题 class Human { static function getCount () { return this.count; } static function create () { if (this.count) { this.count++; } else { this.count = 1; } return new this(); } }

闭包
var nonScoped = [ ... lots of data .. ];
var submitBtn = new Button();
无闭包的 javascript
Document.getElementById(‘submitBtn’).onClick = function () {
submitBtn.click();
}
Javascript 闭包
Document.getElementById(‘submitBtn’).onClick = function (submitBtn) {
return function (e) { submitBtn.click();};
}(submitBtn);
JS2 闭包
Document.getElementById(‘submitBtn’).onClick = curry (e) with (submitBtn) {
submitBtn.click();
};

foreach 语法
Javascript 数组循环
for(var i=0,len=array.length,item; (item=array[i]) || i<len; i++) {
……
}
JS2 foreach
foreach (var item in array) {}
foreach (var item:i in array) {}

HTML Cache //--- in uiBuilder.js2.haml UIBuilder button(name) %div.button= "#name#" //--- in uiBuilder.js2 class UIBuilder { function getButton (name) { this.htmlCache.button(name); } } //-- in uiBuilder.js UIBuilder.prototype = { htmlCache: {"button": function(name){return "<div class='button'>"+name+"</div>"}} };

更多特性
对 Selenium 测试的支持
可嵌入 HAML
不断升级添加中

JS2 Wiki http://code.google.com/p/js2lang/

谢谢

JS2

by Jiang Wu on Mar 22, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

JS2 — Presentation Transcript