JavaScript + Arale        发   帅
web 术   职责
web 术   职责JavaScript语
web 术   职责JavaScript语选择      DOM
web 术   职责JavaScript语选择      DOMArale
web 术   职责
职责   MVC HTML             M  CSS        样     VJavaScript    为   C
职责   MVC HTML             M  CSS        样     VJavaScript    为   C
职责   MVC HTML             M  CSS        样     VJavaScript    为   C
web 术   职责JavaScript语选择      DOMArale
JavaScript语
语
语变   时
语    变    时                 number, string,object, boolean, null, undefined
语    变    时                 number, string,object, boolean, null, undefined
number, string, boolean             VS.    Number, String, Boolean
number, string, boolean       传递             VS.    Number, String, Boolean
number, string, boolean           传递             VS.    Number, String, Boolean   对    传递
number, string, boolean           传递             VS.    Number, String, Boolean   对    传递undefined         VS.            ...
number, string, boolean              传递             VS.    Number, String, Boolean     对        传递undefined   变   创      赋...
number, string, boolean                  传递             VS.    Number, String, Boolean     对         传递undefined   变   创  ...
var x = new Boolean(false);if (x) {    alert(hi); // Shows hi.}
var x = new Boolean(false);if (x) {    alert(hi); // Shows hi.}var x = Boolean(0);if (x) {    alert(hi); // This will neve...
function f1(x) {    var a = 1;    if(x) {        var b = 2;    }    function f2() {        var c = 3;    }    console.log(...
function f1(x) {    var a = 1;        1    if(x) {           2        var b = 2;    undefined    }    function f2() {     ...
JavaS     cript
if (x) {    function foo() {}}
if (x) {    function foo() {}}
if (x) {                if (x) {    function foo() {}       var foo = function() {}}                       }
expression & literal
expression & literal  function fn() {      console.log(f1);      var f1 = function() {          console.log("f1")      }  ...
expression & literal  function fn() {      console.log(f1);      var f1 = function() {          console.log("f1")      }  ...
expression & literal  function fn() {      console.log(f1);      var f1 = function() {          console.log("f1")         ...
达为
达为变    储
达为变    储      结   储
达为变    储      结   储
达为变    储      结   储为    结
对   prototype
对                 prototypefunction Circle(x, y, z) {    this.x = x;    this.y = y;    this.r = r;    this.getR = function...
对                      prototypefunction Circle(x, y, z) {    this.x = x;    this.y = y;                                 g...
对                                  prototypefunction Circle(x, y, z) {    this.x = x;    this.y = y;                      ...
对                                      prototypefunction Circle(x, y, z) {    this.x = x;    this.y = y;                  ...
继
继function ClassA(sColor) {    this.color = sColor;}ClassA.prototype.sayColor = function () {    alert(this.color);};functi...
继function ClassA(sColor) {    this.color = sColor;}ClassA.prototype.sayColor = function () {};    alert(this.color);      ...
继function ClassA(sColor) {    this.color = sColor;}ClassA.prototype.sayColor = function () {};    alert(this.color);      ...
继function ClassA(sColor) {    this.color = sColor;}ClassA.prototype.sayColor = function () {};    alert(this.color);      ...
继                对                +        链function ClassA(sColor) {    this.color = sColor;}ClassA.prototype.sayColor = ...
闭
闭    编   严调
闭      编     严    调闭     给 变      环      变    scope chain
闭                 var sMessage = "hello world";                  function sayHelloWorld() {                      alert(sMe...
闭                 var sMessage = "hello world";                  function sayHelloWorld() {                      alert(sMe...
闭                 var sMessage = "hello world";                   function sayHelloWorld() {                       alert(s...
驱动   编
驱动   编
驱动   编
驱动                   编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>
驱动               编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>var btn = document.getElementById...
驱动                     编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>var btn = document.getEleme...
驱动                     编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>var btn = document.getEleme...
click       submitchange      keydownload        keypressmouseover   resizemouseout    scrollblur        ......
web 术   职责JavaScript语选择       DOMArale
选择   DOM
DOM
DOMDocument Object Model
DOMDocument Object ModelHTML XML           编    规   W3C标
DOMDocument Object ModelHTML XML           编        规   W3C标 过JS      DOM对          达       页
DOM manipulation
DOM manipulation 创
DOM manipulation 创 删
DOM manipulation 创 删 获     /
DOM manipulation 创 删 获     / 访问/
DOM
DOMgetElementById                     removeChildfirstChild, lastChild,childNodes   replaceChildpreviousSibling, nextSibli...
var newP = document.createElement("p");var txt = Kilroy was here.;var newT = document.createTextNode(txt);newP.appendChild...
选择   /selector
选择       /selectorcss选择sizzle
web 术   职责JavaScript语选择      DOMArale
Arale
Arale
Arale Js     Arale
AliceArale Js     Arale
AliceArale Js     Arale                     combo
AliceArale Js               maven     Arale                     combo
Alice     Arale Js                maven           Aralestatic server                           combo
Alice     Arale Js                maven           Aralestatic server                           combo
Hello World!
Hello World!        $E.domReady(function(){            $("btn").click(function(e){                alert("Hello Arale!");  ...
Selector
Selector     id选择   : $(‘id’)
Selector     id选择   : $(‘id’)                Node
Selector     id选择   : $(‘id’)                Node      杂选择         $$(selector)
Selector     id选择   : $(‘id’)                Node      杂选择         $$(selector)                   组      组      节   为Node
Dom & Node    $D —— 态    $Node——   对   获   实
Dom & Node    $D —— 态    $Node——          对      获   实           Dom                  toDom              getPosition      ...
Dom & Node    $D —— 态    $Node——          对        获        实                            Node           Dom               ...
Event——$E
Event——$E    $E.domReady(function() {             //do something    });
Event——$E                                  connect                                disconnect    $E.domReady(function() {  ...
Event——$E                                  connect                                disconnect    $E.domReady(function() {  ...
组——$A
组——$A$A([1,2,3,4,5]).each(function(v, i) {        console.log(v);});
组——$A$A([1,2,3,4,5]).each(function(v, i) {        console.log(v);}); map & reduce
组——$A$A([1,2,3,4,5]).each(function(v, i) {        console.log(v);}); map & reduce                    each                 ...
组——$A$A([1,2,3,4,5]).each(function(v, i) {        console.log(v);}); map & reduce                           Others:       ...
颗   块设计
颗   块设计   combo   务
颗   块设计   combo   务
颗   块设计                             combo   务    Loader.use(‘arale.http’, function() {          $Ajax.get(‘url’, {        ...
A       B             Loader.use(‘C’, function() {                  //some code here             })    C    载C 块js        ...
颗       块设计    A       B                 Loader.use(‘C’, function() {                      //some code here               ...
码检
码检压缩
码检压缩编码检测
码检压缩          测试编码检测
码检压缩          测试编码检测     赖    计
码检压缩          测试编码检测     赖    计
码检压缩          测试编码检测     赖    计
码检压缩          测试编码检测           Maven     赖    计
项     码检压缩          测试编码检测           Maven     赖    计
http://arale.alipay.nethttp://arale.alipay.net:3000       发组     http://arale.alipay.net/wiki/doku.php?id=wigetdevelopment...
task       JS实现   Array#sort        (delegate)   Arale             demo
Q&A
Thanks!
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Javascrpt arale
Upcoming SlideShare
Loading in …5
×

Javascrpt arale

1,657 views

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,657
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
32
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Javascrpt arale

    1. 1. JavaScript + Arale 发 帅
    2. 2. web 术 职责
    3. 3. web 术 职责JavaScript语
    4. 4. web 术 职责JavaScript语选择 DOM
    5. 5. web 术 职责JavaScript语选择 DOMArale
    6. 6. web 术 职责
    7. 7. 职责 MVC HTML M CSS 样 VJavaScript 为 C
    8. 8. 职责 MVC HTML M CSS 样 VJavaScript 为 C
    9. 9. 职责 MVC HTML M CSS 样 VJavaScript 为 C
    10. 10. web 术 职责JavaScript语选择 DOMArale
    11. 11. JavaScript语
    12. 12.
    13. 13. 语变 时
    14. 14. 语 变 时 number, string,object, boolean, null, undefined
    15. 15. 语 变 时 number, string,object, boolean, null, undefined
    16. 16. number, string, boolean VS. Number, String, Boolean
    17. 17. number, string, boolean 传递 VS. Number, String, Boolean
    18. 18. number, string, boolean 传递 VS. Number, String, Boolean 对 传递
    19. 19. number, string, boolean 传递 VS. Number, String, Boolean 对 传递undefined VS. null
    20. 20. number, string, boolean 传递 VS. Number, String, Boolean 对 传递undefined 变 创 赋 应该 传递 VS. null
    21. 21. number, string, boolean 传递 VS. Number, String, Boolean 对 传递undefined 变 创 赋 应该 传递 VS. null 传递
    22. 22. var x = new Boolean(false);if (x) { alert(hi); // Shows hi.}
    23. 23. var x = new Boolean(false);if (x) { alert(hi); // Shows hi.}var x = Boolean(0);if (x) { alert(hi); // This will never be alerted.}typeof Boolean(0) == boolean;typeof new Boolean(0) == object;
    24. 24. function f1(x) { var a = 1; if(x) { var b = 2; } function f2() { var c = 3; } console.log(a); console.log(b); console.log(c);}f1(4);
    25. 25. function f1(x) { var a = 1; 1 if(x) { 2 var b = 2; undefined } function f2() { var c = 3; } console.log(a); console.log(b); console.log(c);}f1(4);
    26. 26. JavaS cript
    27. 27. if (x) { function foo() {}}
    28. 28. if (x) { function foo() {}}
    29. 29. if (x) { if (x) { function foo() {}     var foo = function() {}} }
    30. 30. expression & literal
    31. 31. expression & literal function fn() { console.log(f1); var f1 = function() { console.log("f1") } console.log(f1); console.log(f2); function f2() { } console.log(f2); var f2 = function() { console.log("f3"); } f2(); } fn()
    32. 32. expression & literal function fn() { console.log(f1); var f1 = function() { console.log("f1") } console.log(f1); console.log(f2); function f2() { } console.log(f2); var f2 = function() { console.log("f3"); } f2(); } fn()
    33. 33. expression & literal function fn() { console.log(f1); var f1 = function() { console.log("f1") 结 } console.log(f1); null function console.log(f2); function f2() { function } function console.log(f2); f3 var f2 = function() { console.log("f3"); } f2(); } fn()
    34. 34. 达为
    35. 35. 达为变 储
    36. 36. 达为变 储 结 储
    37. 37. 达为变 储 结 储
    38. 38. 达为变 储 结 储为 结
    39. 39. 对 prototype
    40. 40. 对 prototypefunction Circle(x, y, z) { this.x = x; this.y = y; this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { return this.r * this.r * 3.14159;}var c = new Circle(0, 0, 2);alert(c.area());
    41. 41. 对 prototypefunction Circle(x, y, z) { this.x = x; this.y = y; getR Vs. area this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { return this.r * this.r * 3.14159;}var c = new Circle(0, 0, 2);alert(c.area());
    42. 42. 对 prototypefunction Circle(x, y, z) { this.x = x; this.y = y; getR Vs. area this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { //static method return this.r * this.r * 3.14159; Circle.getClassName = function() {} return “Circle”;var c = new Circle(0, 0, 2); }alert(c.area());
    43. 43. 对 prototypefunction Circle(x, y, z) { this.x = x; this.y = y; getR Vs. area this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { //static method return this.r * this.r * 3.14159; Circle.getClassName = function() {} return “Circle”;var c = new Circle(0, 0, 2); }alert(c.area()); prototype 对 实 对 这 为 础
    44. 44.
    45. 45. 继function ClassA(sColor) { this.color = sColor;}ClassA.prototype.sayColor = function () { alert(this.color);};function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}ClassB.prototype = new ClassA();ClassB.prototype.sayName = function () { alert(this.name);};
    46. 46. 继function ClassA(sColor) { this.color = sColor;}ClassA.prototype.sayColor = function () {}; alert(this.color); 对function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}ClassB.prototype = new ClassA();ClassB.prototype.sayName = function () { alert(this.name);};
    47. 47. 继function ClassA(sColor) { this.color = sColor;}ClassA.prototype.sayColor = function () {}; alert(this.color); 对function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}ClassB.prototype = new ClassA(); 链ClassB.prototype.sayName = function () { alert(this.name);};
    48. 48. 继function ClassA(sColor) { this.color = sColor;}ClassA.prototype.sayColor = function () {}; alert(this.color); 对function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}ClassB.prototype = new ClassA(); 链ClassB.prototype.sayName = function () { alert(this.name);};
    49. 49. 继 对 + 链function ClassA(sColor) { this.color = sColor;}ClassA.prototype.sayColor = function () { alert(this.color);};function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}ClassB.prototype = new ClassA();ClassB.prototype.sayName = function () { alert(this.name);};
    50. 50.
    51. 51. 闭 编 严调
    52. 52. 闭 编 严 调闭 给 变 环 变 scope chain
    53. 53. 闭 var sMessage = "hello world"; function sayHelloWorld() { alert(sMessage); 编 严 } 调 sayHelloWorld();闭 给 变 环 变 scope chain
    54. 54. 闭 var sMessage = "hello world"; function sayHelloWorld() { alert(sMessage); 编 严 } 调 sayHelloWorld(); var iBaseNum = 10;闭 给 function addNum(iNum1, iNum2) { function doAdd() { 变 环 return iNum1 + iNum2 + iBaseNum; 变 } return doAdd(); scope chain }
    55. 55. 闭 var sMessage = "hello world"; function sayHelloWorld() { alert(sMessage); 编 严 } 调 sayHelloWorld(); var iBaseNum = 10; 闭 给 function addNum(iNum1, iNum2) { function doAdd() { 变 环 return iNum1 + iNum2 + iBaseNum; 变 } return doAdd(); scope chain }简单 说 闭 义 变
    56. 56. 驱动 编
    57. 57. 驱动 编
    58. 58. 驱动 编
    59. 59. 驱动 编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>
    60. 60. 驱动 编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>var btn = document.getElementById(‘btn’);btn.onclick = function() { alert(“button clicked”);}
    61. 61. 驱动 编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>var btn = document.getElementById(‘btn’);btn.onclick = function() { alert(“button clicked”);}var btn = document.getElementById(‘btn’);if(window.addEventListener) { btn.addEventListener(‘click’, function() {alert(1);}, false);} else { btn.attachEvent(‘onclick’, function() {alert(1);});}
    62. 62. 驱动 编<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>var btn = document.getElementById(‘btn’);btn.onclick = function() { alert(“button clicked”);}var btn = document.getElementById(‘btn’);if(window.addEventListener) { btn.addEventListener(‘click’, function() {alert(1);}, false);} else { btn.attachEvent(‘onclick’, function() {alert(1);});}
    63. 63. click submitchange keydownload keypressmouseover resizemouseout scrollblur ......
    64. 64. web 术 职责JavaScript语选择 DOMArale
    65. 65. 选择 DOM
    66. 66. DOM
    67. 67. DOMDocument Object Model
    68. 68. DOMDocument Object ModelHTML XML 编 规 W3C标
    69. 69. DOMDocument Object ModelHTML XML 编 规 W3C标 过JS DOM对 达 页
    70. 70. DOM manipulation
    71. 71. DOM manipulation 创
    72. 72. DOM manipulation 创 删
    73. 73. DOM manipulation 创 删 获 /
    74. 74. DOM manipulation 创 删 获 / 访问/
    75. 75. DOM
    76. 76. DOMgetElementById removeChildfirstChild, lastChild,childNodes replaceChildpreviousSibling, nextSibling, createElementparentNodegetElementsByTagNam createTextNodee insertBeforeappendChild innerHTML
    77. 77. var newP = document.createElement("p");var txt = Kilroy was here.;var newT = document.createTextNode(txt);newP.appendChild(newT);var p2 = document.getElementsByTagName(p)[1];p2.parentNode.replaceChild(newP,p2);
    78. 78. 选择 /selector
    79. 79. 选择 /selectorcss选择sizzle
    80. 80. web 术 职责JavaScript语选择 DOMArale
    81. 81. Arale
    82. 82. Arale
    83. 83. Arale Js Arale
    84. 84. AliceArale Js Arale
    85. 85. AliceArale Js Arale combo
    86. 86. AliceArale Js maven Arale combo
    87. 87. Alice Arale Js maven Aralestatic server combo
    88. 88. Alice Arale Js maven Aralestatic server combo
    89. 89. Hello World!
    90. 90. Hello World! $E.domReady(function(){ $("btn").click(function(e){ alert("Hello Arale!"); }); });
    91. 91. Selector
    92. 92. Selector id选择 : $(‘id’)
    93. 93. Selector id选择 : $(‘id’) Node
    94. 94. Selector id选择 : $(‘id’) Node 杂选择 $$(selector)
    95. 95. Selector id选择 : $(‘id’) Node 杂选择 $$(selector) 组 组 节 为Node
    96. 96. Dom & Node $D —— 态 $Node—— 对 获 实
    97. 97. Dom & Node $D —— 态 $Node—— 对 获 实 Dom toDom getPosition setStyle getDocumentWidth getDocumentHeight getViewportWidth getViewportHeight
    98. 98. Dom & Node $D —— 态 $Node—— 对 获 实 Node Dom addClass toDom removeClass getPosition attr setStyle inject getDocumentWidth getStyle getDocumentHeight setStyle getViewportWidth next getViewportHeight previous parent query
    99. 99. Event——$E
    100. 100. Event——$E $E.domReady(function() { //do something });
    101. 101. Event——$E connect disconnect $E.domReady(function() { //do something subscribe }); unsubscribe publish trigger delegate live
    102. 102. Event——$E connect disconnect $E.domReady(function() { //do something subscribe }); unsubscribe publish trigger delegate live
    103. 103. 组——$A
    104. 104. 组——$A$A([1,2,3,4,5]).each(function(v, i) { console.log(v);});
    105. 105. 组——$A$A([1,2,3,4,5]).each(function(v, i) { console.log(v);}); map & reduce
    106. 106. 组——$A$A([1,2,3,4,5]).each(function(v, i) { console.log(v);}); map & reduce each every some map filter
    107. 107. 组——$A$A([1,2,3,4,5]).each(function(v, i) { console.log(v);}); map & reduce Others: each clean every remove some combine map erase filter include last
    108. 108. 颗 块设计
    109. 109. 颗 块设计 combo 务
    110. 110. 颗 块设计 combo 务
    111. 111. 颗 块设计 combo 务 Loader.use(‘arale.http’, function() { $Ajax.get(‘url’, { success: function() { } }); });
    112. 112. A B Loader.use(‘C’, function() { //some code here }) C 载C 块js 时A B还 载 时载
    113. 113. 颗 块设计 A B Loader.use(‘C’, function() { //some code here }) C 载C 块js 时 A B还 载 时 载
    114. 114. 码检
    115. 115. 码检压缩
    116. 116. 码检压缩编码检测
    117. 117. 码检压缩 测试编码检测
    118. 118. 码检压缩 测试编码检测 赖 计
    119. 119. 码检压缩 测试编码检测 赖 计
    120. 120. 码检压缩 测试编码检测 赖 计
    121. 121. 码检压缩 测试编码检测 Maven 赖 计
    122. 122. 项 码检压缩 测试编码检测 Maven 赖 计
    123. 123. http://arale.alipay.nethttp://arale.alipay.net:3000 发组 http://arale.alipay.net/wiki/doku.php?id=wigetdevelopmentjsdoc规 http://arale.alipay.net/wiki/doku.php?id=jsdocstandard
    124. 124. task JS实现 Array#sort (delegate) Arale demo
    125. 125. Q&A
    126. 126. Thanks!

    ×