JS2

我们遇到的问题复杂的 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

More Related Content

What's hot (18)

Similar to JS2 (17)

More from Jiang Wu (7)

JS2