JS2 JS2 = JavaScript*JeffSu
<ul><li>我们遇到的问题 </li></ul><ul><ul><li>复杂的 javascript 应用,需要可靠的架构 </li></ul></ul><ul><ul><li>大量 javascript 代码,需要良好的组织性 </li>...
<ul><li>我们的解决方案 </li></ul><ul><ul><li>JS2 </li></ul></ul><ul><ul><ul><li>javascript 伪代码 </li></ul></ul></ul><ul><ul><ul><l...
使用 JS2 <ul><li>gem install js2 </li></ul><ul><li>js2 public/javascripts app/js2 </li></ul><ul><li>js2 -d public/javascript...
Javascript 的类定义 <ul><li>通过定义 prototype  </li></ul><ul><ul><li>var MyClass = function () { }; </li></ul></ul><ul><ul><li>My...
Javascript 的类定义 <ul><li>通过一些 javascript 框架 </li></ul><ul><ul><li>var MyClass = Class.create({ </li></ul></ul><ul><ul><li>m...
JS2 类定义语法 class MyClass { var member1 = &quot;member1”; function method1 () { alert(&quot;method1 called&quot;); } }
JS2 的类继承 <ul><li>class Vehicle { </li></ul><ul><li>function drive () { </li></ul><ul><li>alert('drive'); </li></ul><ul><li...
Getters and Setters <ul><li>Javascript 实现 </li></ul><ul><ul><li>Duck.prototype = { </li></ul></ul><ul><ul><li>setColor: fu...
糅合( Mixins ) module Flyable { function fly () { alert('Flying!'); } } class Bird { include Flyable; } class Duck { include...
静态方法 用于解决类似于唯一实例等问题 class Human { static function getCount () { return this.count; } static function create () { if (this....
闭包 <ul><li>var nonScoped = [ ... lots of data .. ]; </li></ul><ul><li>var submitBtn = new Button(); </li></ul><ul><li>无闭包的...
foreach 语法 <ul><li>Javascript 数组循环 </li></ul><ul><ul><li>for(var i=0,len=array.length,item; (item=array[i]) || i<len; i++)...
HTML Cache //--- in uiBuilder.js2.haml UIBuilder button(name) %div.button= &quot;#name#&quot; //--- in uiBuilder.js2 class...
更多特性 <ul><li>对 Selenium 测试的支持 </li></ul><ul><li>可嵌入 HAML </li></ul><ul><li>不断升级添加中 </li></ul>
JS2 Wiki http://code.google.com/p/js2lang/
<ul><li>谢谢 </li></ul>
Upcoming SlideShare
Loading in …5
×

JS2

1,874 views

Published on

An introduction to js2 framework of Factual Inc. made by Jeff Su, presented by Leon Chen.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,874
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JS2

  1. 1. JS2 JS2 = JavaScript*JeffSu
  2. 2. <ul><li>我们遇到的问题 </li></ul><ul><ul><li>复杂的 javascript 应用,需要可靠的架构 </li></ul></ul><ul><ul><li>大量 javascript 代码,需要良好的组织性 </li></ul></ul><ul><ul><li>大量应用与 DOM 紧密结合 </li></ul></ul><ul><ul><li>需要更加容易使用的继承和引用的实现 </li></ul></ul><ul><ul><li>需要快速高效的 javascript 开发平台 </li></ul></ul><ul><ul><li>易读的代码 </li></ul></ul>
  3. 3. <ul><li>我们的解决方案 </li></ul><ul><ul><li>JS2 </li></ul></ul><ul><ul><ul><li>javascript 伪代码 </li></ul></ul></ul><ul><ul><ul><li>更加类似 Ruby , Java 的 OO 语法 </li></ul></ul></ul><ul><ul><ul><li>可通过编译实现多重继承等更多特性 </li></ul></ul></ul><ul><ul><ul><li>基于 HAML 的 htmlCache </li></ul></ul></ul><ul><ul><ul><li>可自定义的 javascript 语法实现 </li></ul></ul></ul>
  4. 4. 使用 JS2 <ul><li>gem install js2 </li></ul><ul><li>js2 public/javascripts app/js2 </li></ul><ul><li>js2 -d public/javascripts app/js2 </li></ul>
  5. 5. Javascript 的类定义 <ul><li>通过定义 prototype </li></ul><ul><ul><li>var MyClass = function () { }; </li></ul></ul><ul><ul><li>MyClass.prototype = { </li></ul></ul><ul><ul><li>member1: &quot;member1&quot;, </li></ul></ul><ul><ul><li>method1: function () { alert(&quot;method1 called&quot;); } </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>直接定义函数体 </li></ul><ul><ul><li>var MyClass = function () { </li></ul></ul><ul><ul><li>this.member1 = “member1”; </li></ul></ul><ul><ul><li>this.method1 = function () { </li></ul></ul><ul><ul><li>alert(“method1 called”); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>} </li></ul></ul>
  6. 6. Javascript 的类定义 <ul><li>通过一些 javascript 框架 </li></ul><ul><ul><li>var MyClass = Class.create({ </li></ul></ul><ul><ul><li>member1: &quot;member1&quot;, </li></ul></ul><ul><ul><li>method1: function () { alert(&quot;method1 called&quot;); } </li></ul></ul><ul><ul><li>}); </li></ul></ul>
  7. 7. JS2 类定义语法 class MyClass { var member1 = &quot;member1”; function method1 () { alert(&quot;method1 called&quot;); } }
  8. 8. JS2 的类继承 <ul><li>class Vehicle { </li></ul><ul><li>function drive () { </li></ul><ul><li>alert('drive'); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>class Car extends Vehicle { </li></ul><ul><li>function drive () { </li></ul><ul><li>_super(this); </li></ul><ul><li>alert('with car'); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>优点 </li></ul><ul><ul><li>简洁的语法 </li></ul></ul><ul><ul><li>实现了 super </li></ul></ul>
  9. 9. Getters and Setters <ul><li>Javascript 实现 </li></ul><ul><ul><li>Duck.prototype = { </li></ul></ul><ul><ul><li>setColor: function (color) { this.color = color; }, </li></ul></ul><ul><ul><li>getColor: function () { return this.color; } </li></ul></ul><ul><ul><li>} ; </li></ul></ul><ul><li>JS2 实现 </li></ul><ul><ul><li>class Duck { </li></ul></ul><ul><ul><li>property color; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  10. 10. 糅合( Mixins ) module Flyable { function fly () { alert('Flying!'); } } class Bird { include Flyable; } class Duck { include Flyable; }
  11. 11. 静态方法 用于解决类似于唯一实例等问题 class Human { static function getCount () { return this.count; } static function create () { if (this.count) { this.count++; } else { this.count = 1; } return new this(); } }
  12. 12. 闭包 <ul><li>var nonScoped = [ ... lots of data .. ]; </li></ul><ul><li>var submitBtn = new Button(); </li></ul><ul><li>无闭包的 javascript </li></ul><ul><ul><li>Document.getElementById(‘submitBtn’).onClick = function () { </li></ul></ul><ul><ul><li>submitBtn.click(); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Javascript 闭包 </li></ul><ul><ul><li>Document.getElementById(‘submitBtn’).onClick = function (submitBtn) { </li></ul></ul><ul><ul><li>return function (e) { submitBtn.click();}; </li></ul></ul><ul><ul><li>}(submitBtn); </li></ul></ul><ul><li>JS2 闭包 </li></ul><ul><ul><li>Document.getElementById(‘submitBtn’).onClick = curry (e) with (submitBtn) { </li></ul></ul><ul><ul><li>submitBtn.click(); </li></ul></ul><ul><ul><li>}; </li></ul></ul>
  13. 13. foreach 语法 <ul><li>Javascript 数组循环 </li></ul><ul><ul><li>for(var i=0,len=array.length,item; (item=array[i]) || i<len; i++) { </li></ul></ul><ul><ul><li>…… </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>JS2 foreach </li></ul><ul><ul><li>foreach (var item in array) {} </li></ul></ul><ul><ul><li>foreach (var item:i in array) {} </li></ul></ul>
  14. 14. HTML Cache //--- in uiBuilder.js2.haml UIBuilder button(name) %div.button= &quot;#name#&quot; //--- in uiBuilder.js2 class UIBuilder { function getButton (name) { this.htmlCache.button(name); } } //-- in uiBuilder.js UIBuilder.prototype = { htmlCache: {&quot;button&quot;: function(name){return &quot;<div class='button'>&quot;+name+&quot;</div>&quot;}} };
  15. 15. 更多特性 <ul><li>对 Selenium 测试的支持 </li></ul><ul><li>可嵌入 HAML </li></ul><ul><li>不断升级添加中 </li></ul>
  16. 16. JS2 Wiki http://code.google.com/p/js2lang/
  17. 17. <ul><li>谢谢 </li></ul>

×