第三课:JS-行为控制语言+js架构思想
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,448
On Slideshare
1,448
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
109
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. berg
  • 2. !!"#$%&$()(*+*,#-*".)/,0#)121,30%.) 4,#55*".)678)/,9:$90;!<03$5)=/+/01"3-%>?@@>68AB>C6C>B3$9D> A/1>3E@;! B3+*)3$)F*3G3$5.)H#"IJF/3(9; berg !"##$%$%&&
  • 3. ?#$%/1%):*&:/3,K),*3LM3D3$5J4/3(9;1#:8H3%%*"K)J1$4*"5N*34#K)J4*"5F,#5K)M%%-K>>HHH;1$4*"5;1#:
  • 4. 8M30)/O%*"$##$!=/+/01"3-%)4/031P)QR;SMT!8M*)(*035$)U)/"1M3%*1%9"*)#O)8/$5"/: QV;SMT
  • 5. JavascriptJavascript basic+
  • 6. E9%,3$*!E+*"+3*H!=/+/01"3-%)O#")H*4)4"#H0*" !=/+/01"3-% !?,3*$%&@3(*)=/+/@1"3-%!W(+/$1*()01"3-%3$5
  • 7. Overview
  • 8. NM2)=/+/01"3-%)X
  • 9. B/$59/5*)#O)%M*)N*4 O#":)VYYZ;R
  • 10. ()*+,&-./)&00123&4*5$66&7&85&*9)9:+//
  • 11. =/+/@1"3-%)30)"*/,,2)5##( 7%)30),35M%H*35M%)/$()*D-"*003+*
  • 12. !C"#%#%2-/,)EEC!!9$1%3#$/,)![2$/:31
  • 13. F9%)%M*)*$+3"#$:*$%)30) $#%)0#)5##( A/I*)90)1#$O90*()/$()/$5"2
  • 14. A/$2)4"#H0*"0!7)Q))+*"03#$0T.)]"*O#D.)1M"#:*.)0/O/"3.) #-*"/!?M3$/ !^ZS !A/D%M#$
  • 15. [3c*"*$%)3:-,*:*$%!=/+/01"3-%)*$53$*0 !?M/I"/)&)7 !=_5*"A#$I*2)&)!3"*O#D !`a)&)?M"#:* !?/"/I/$)&)E-*"/) !b3%"#)&)0/O/"3
  • 16. [3c*"*$%)3:-,*:*$%!N*4)4"#H0*")*$53$*0 !8"3(*$%)&)7 !d*1I#)&)!3"*O#D !N*4I3%)&)?M"#:*)U)@/O/"3 !C"*0%#)&)E-*"/)
  • 17. Javascript
  • 18. 9 function hello(to){10 to = to || world;11 alert("Hello " + to);12 return true;13 }14 var to = everyone;15 hello(to);
  • 19. !B*D31/,)@%"91%9"*![/%/%2-*)/$()`/,9*0!`/"3/4,*0!D-"*003#$0)/$()E-*"/%#"0!@%/%*:*$%0!;;;
  • 20. E9%,3$*!@#:*)(3c*"*$1*!E4G*1%!!9$1%3#$!C"#%#%2-*)EEC
  • 21. @#:*)(3c*"*$1*0
  • 22. `/"3/4,*0 <$%2-*(
  • 23. 43 var i = 1;44 i = something else;4546 alert(i + 1);
  • 24. 49 var a = [1, 2, 3];50 var b = a;51 a[0] = 99;52 alert(b);
  • 25. !C"3:3%3+*)%2-*0) !e*O*"*$1*)%2-*0 !b9:4*"0 !E4G*1%0 !F##,*/$ !W""/20 !@%"3$5 !!9$1%3#$0 !$9,, !9$(*]$*(
  • 26. `/"3/4,*)@1#-* b#)4,#1I)01#-*
  • 27. 22 scope = global;23 function checkscope() {24 scope = local;25 alert(scope);26 myscope = local;27 alert(myscope);28 }29 checkscope();30 alert(scope);31 alert(myscope);
  • 28. 34 function f() {35 alert(scope);36 if (!scope) {37 var scope = local;38 }39 alert(scope);40 }41 f();
  • 29. E-%3#$/,)@*:31#,#$0 [E)bE8)O#"5*%)2#9")@*:31#,#$0
  • 30. 54 var a = 1;55 alert(a);5657 return58 {59 a: 160 };
  • 31. @9::/"3L*{ !<$%2-*()`/"3/4,*0 !`/"3/4,*)@1#-* !E-%3#$/,)@*:31#,#$0
  • 32. E4G*1%
  • 33. }! W""/20! !9$1%3#$0! e*59,/")*D-"*003#$0 Object! E4G*1% }! b9:4*"0! @%"3$50 Object-like! F##,*/$
  • 34. ?,/00&O"**62 var info = {63 first: Berg,64 last: Lei,65 address: {66 city: Beijing,67 street: Shangdi 10th street68 }69 };
  • 35. 71 info[first];72 info.first;7374 var key = first;75 info[key];
  • 36. 77 for (i in info) {78 alert(info[i]);79 }
  • 37. C"#%#%2-*82 function clone(o) {83 var F = function() {};84 F.prototype = o;85 return new F();86 }
  • 38. 89 var student = {90 university: CAS91 };92 var someone = clone(student);9394 alert(someone[university]);9596 someone[name] = john;97 student[university] = HIT;9899 alert(someone[university]);
  • 39. C"#%#%2-*)1M/3$ null someone student Object name : john university: CAS toString : fnsomeone[key]
  • 40. @9::/"3L*{ !?,/00&O"** !C"#%#%2-* !C"#%#%2-*)1M/3$
  • 41. !9$1%3#$
  • 42. 7$+#1/%3#$0
  • 43. !9$1%3#$)3$+#1/%3#$103 function add(a, b) {104 return a + b;105 }106 add();
  • 44. A*%M#()3$+#1/%3#$108 var counter = {109 value: 0,110 increment: function(count) {111 return this.value += count || 1;112 }113 };114 alert(counter.increment());
  • 45. NM/%f0)g%M30g
  • 46. g%M30g)/,H/20)"*O*"0)%#)%M*)#H$*")#4G*1%)#O)%M*)O9$1%3#$)
  • 47. W--,2)3$+#1/%3#$118 function sum() {119 var i, len = arguments.length, sum = 0;120 for (i = 0; i < len; i++) {121 sum += arguments[i];122 }123 return sum;124 }125126127 var arr = [1, 2, 3, 5];128 sum.apply(this, arr);
  • 48. !O9$1%3#$;/--,2Q!"#$%&.)()*$Th !!"#$%&)K)3$+#I*0)%M*)O9$1%3#$)/0)3O)3%) H*"*)/):*%M#()#O)!"#$%& !()*$)K)-/003$5)3%)%M*)/"59:*$%0) 1#$%/3$*()3$)%M*)()*$)/""/2!O9$1%3#$;1/,,Q!"#$%&.)()*+,---T
  • 49. ?#$0%"91%#")3$+#1/%3#$132 var Counter = function(init) {133 this.value = init || 0;134 };135 var myCounter = new Counter(5); return a new object link to the functions prototype member
  • 50. ?,#09"*
  • 51. var Counter = function() { var value = 0; return { increment: function(inc) { return value += inc || 1; }, getValue: function() { return value; } };}();
  • 52. ?,#09"*!9$1%3#$)1/$)/11*00)%#)%M*)1#$%*D%)3$)HM31M)3%)H/0)1"*/%*().)+*$)%M#95M)%M30)O9$1%3#$)M/0)(+),(-./),!0)1,-;)
  • 53. for (var i = 0; i < count; i++) { nodes[i].onclick = function() { alert(i); };}
  • 54. for (var i = 0; i < count; i++) { nodes[i].onclick = function(i) { return function() { alert(i); }; }(i);}
  • 55. !9$1%3#$/,)-"#5"/::3$5173 function multize(func) {174 return function() {175 var list = arguments[0],176 ret = [],177 more = [].slice.call(arguments, 0);178179 for (i = 0; i < list.length; i++) {180 more[0] = list[i];181 ret.push(func.apply(this, more));182 }183 return ret;184 }185 }
  • 56. 187 function inc(value) {188 return value + 1;189 }190 var multInc = multize(inc);191192 multInc([1, 2, 3]);
  • 57. W+#3(0%/%*)/$():9%/4,*)(/%/
  • 58. A*:#3L/%3#$195 function fibonacci(n) {196 return n < 2 ? n : fibonacci(n - 1) +fibonacci(n - 2);197 }198199 for (var i = 0; i <= 10; i++) {200 document.write(i + : + fibonacci(i)+ <br />);201 }
  • 59. 203 var i = 1,204 startTime = (new Date()).getTime();205 while (i++) {206 fibonacci(i);207208 if ((new Date()).getTime() - startTime> 1000) {209 alert(i);210 break;211 }212 }
  • 60. 214 var fibonacci = function() {215 var cache = [0, 1];216217 var _fib = function(n) {218 var result = cache[n];219 if (typeof result == undefined) {220 result = _fib(n-1) + _fib(n-2);221 cache[n] = result;222 }223 return result;224 };225 return _fib;226 }();
  • 61. ?/01/(*231 T.e(#header).232 children().233 on(click, function() {234 alert(clicked);235 });
  • 62. A/I3$5)[@B Q[#:/3$)0-*13]1),/$59/5*0T
  • 63. @9::/"3L*{ !7$+#1/%3#$0 !!9$1%3#$ !A*%M#( !1#$0%"91%#" !/--,2
  • 64. @9::/"3L* !?,#09"*{ !!9$1%3#$/,)-"#5"/::3$5 !A*:#3L/%3#$ !?/01/(*
  • 65. C"#%#%2-/,)EEC
  • 66. ?,/0031)-/%%*"$ H3%M-"#%#%2-/,)-/%%*"$
  • 67. C0*9(#1,/0031/,
  • 68. 132 var Counter = function(init) {133 this.value = init || 0;134 };135 var myCounter = new Counter(5); return a new object link to the functions prototype member
  • 69. 243 var Person = function(name) {244 this.name = name;245 };246 Person.prototype.getName = function() {247 return this.name;248 };
  • 70. 243 var Person = function(name) {244 this.name = name;245 };246 Person.prototype.getName = function() {247 return this.name;248 };250 var Student = function(name, university) {251 this.name = name;252 this.university = university;253 };254 extend(Student, Person);255 Student.prototype.getUniversity = function() {256 return this.university;257 };
  • 71. 238 function extend(subClass, superClass) {239 var F = function() {};240 F.prototype = superClass.prototype;241 subClass.prototype = new F();242 }
  • 72. W)4*%%*")g*D%*$(g
  • 73. 266 function extend(subClass, superClass) {267 var F = function() {};268 F.prototype = superClass.prototype;269 subClass.prototype = new F();270 subClass.prototype.constructor = subClass;271 subClass.superClass = superClass.prototype;272 if (superClass.prototype.constructor !=Object.prototype.constructor) {273 superClass.prototype.constructor = superClass;274 }275 }276277 var Student = function(name, university) {278 Student.superClass.constructor.call(this, name);279 this.university = university;280 };
  • 74. C"#%#%2-/,)-/%%*"$
  • 75. 285 var Person = {286 name: unnamed,287 getName: function() {288 return this.name;289 }290 };291...298 var student = clone(Person);299 student.name = John;300 student.study = function() {301 alert("Im studying.");302 };303 alert(student.name);304 student.name = Tom;305 alert(student.name);
  • 76. 82 function clone(o) {83 var F = function() {};84 F.prototype = o;85 return new F();86 }
  • 77. ?,/0031/,)3$M*"3%/$1*!?"*/%3$5)/$)WC7)O#")H3(*0-"*/()90*;!E%M*")-"#5"/::*"0)$#%)O/:3,3/")H3%M) -"#%#%2-/,)3$M*"3%/$1*;!b#%):*:#"2&*i13*$%;
  • 78. C"#%#%2-/,)3$M*"3%/$1*!`*"2):*:#"2&*i13*$%;!7%0)-#H*"),3*0)3$)3%0)03:-,313%2;!63(3$5)%M30)O/1%)(#*0):#"*)M/":)%M/$) 5##(;
  • 79. @9::/"3L*
  • 80. !=/+/01"3-%)30)"*/,,2)5##()/$()3:-#"%/$% !6/+*)035$3]1/$%)(3c*"*$1*0)O"#:)%M*) @EA)E86e)BWbd<Wd![2$/:31!C"#%#%2-/,)EEC!!9$1%3#$/, !!9$1%3#$0)/"*)]"0%)1,/00)#4G*1%0)
  • 81. QA
  • 82. Client-Side JavaScript
  • 83. D/:-,*0)2#9f+*)0**$)0#)O/".M/+*)$#)-/"%319,/")1#$%*D%
  • 84. E9%,3$*!N*4)F"#H0*")$+3"#$:*$%!,*:*$%0 !?/01/(3$5)@%2,*)@M**%0!+*$%0!E%M*")O*/%9"*0
  • 85. N*4)F"#H0*")$+3"#$:*$%
  • 86. N3$(#H)/0)d,#4/,)D*19%3#$)?#$%*D%309 var answer = 42;310 alert(window.answer === answer);
  • 87. N3$(#H) E4G*1%0 01"**$ O"/:*0jk 8M* O#":0jk19""*$% M30%#"2H3$(#H /$1M#"0jk (#19:*$% 3:/5*0jk ,#1/%3#$ ;;; ;;;
  • 88. +*$%)("3+*$ O#":)d<7
  • 89. =/+/@1"3-%)/((0)&,"(2#3))%#)%M*)1#$%*$%)/$()3%0)-"*0*$%/%3#$
  • 90. !?"*/%3$5)+309/,)*c*1%0)!@#"%3$5)%M*)1#,9:$0)#O)/)%/4,*)!63(3$5)1*"%/3$)1#$%*$%)/$()"*+*/,3$5) (*%/3,0)0*,*1%3+*,2)/0)%M*)90*")g("3,,0) (#H$g)3$%#)%M/%)1#$%*$%!@%"*/:,3$3$5)%M*)4"#H03$5)*D-*"3*$1*)42) 1#::9$31/%3$5)(3"*1%,2)H3%M)/)H*4)0*"+*"
  • 91. ,*:*$%
  • 92. 1 <html>2 <head>3 <title>Sample Document</title>4 </head>5 <body>6 <h1></h1>7 <p>This is a <i>simple</i> document.8 </body>9 </html>
  • 93. [EA)%"** Document <html> <head> <body> <title> <h1> <p>"Sample Document" "Title" "This is a " <i> document simple
  • 94. 8"/+*"03$5),*:*$%0
  • 95. 314 function countNode(node) {315 var numtags = 0;316 if (node.nodeType == 1 /*Node.ELEMENT_NODE*/)317 numtags++;318 var children = node.childNodes;319 for (var i = 0; i < children.length; i++) {320 numtags += countNode(children[i]);321 }322 return numtags;323 }324 alert(countNode(document.body));
  • 96. !$#(*;$#(*82-*!$#(*;1M3,(b#(*0 ![2$/:31)/""/2!$#(*;%/5b/:*!$#(*;3$$*"68AB!$#(*;-/"*$%b#(*
  • 97. !3$(3$5),*:*$%0
  • 98. 16 <ul id="my-ul">17 <li>line1</li>18 <li>line2</li>19 <li>line3</li>20 <li>line4</li>21 </ul>327 var myElement = document.getElementById(my-id);328329 var myList = document.getElementById(my-ul);330 var myListItem = myList.getElementsByTagName(LI);331 for (var i = 0; i < myListItem.length; i++) {332 alert(myListItem[i].innerHTML);333 }
  • 99. !,+,4,1!55*%,*:*$%F27(Q#-6!)#1*T!,+,4,1!55*%,*:*$%0F28/5b/:* Q!(*7(4,T/!,+,4,1!55*%,*:*$%0F2b/:* Q1(4,6!)#1*T
  • 100. A#(3O2),*:*$%0
  • 101. 337 function sortChildren(e) {338 var children = [];339 for (var x = e.firstChild; x != null; x = x.nextSibling) {340 if (x.nodeType == 1 /* Node.ELEMENT_NODE */) {341 children.push(x);342 }343 }344345 children.sort(function(n, m) {346 var s = n.firstChild.data;347 var t = m.firstChild.data;348 if (s < t) return -1;349 else if (s > t) return 1;350 else return 0;351 });352 for (var i = 0; i < children.length; i++) {353 e.appendChild(children[i]);354 }355 }356 sortChildren(document.getElementById(my-ul));
  • 102. 359 var iNode = document.getElementsByTagName(i);360 for (var i = 0; i < iNode.length; i++) {361 var b = document.createElement(input);362 var html = iNode[i].innerHTML;363 b.type = button;364 iNode[i].appendChild(b);365 b.value = html;366 b.setAttribute(disabled, disabled);367 }
  • 103. !,+,4,1!5/--*$(?M3,(Q,+,T!-3804,1!51"*/%*,*:*$%Q!(*7(4,T/!,+,4,1!50*%W%%"349%*Q(!!)9/2(+0,T
  • 104. ?/01/(3$5)@%2,*)@M**%0
  • 105. 370 var nodes = document.getElementsByTagName(p);371 for (var i = 0; i < nodes.length; i++) {372 nodes[i].style.display = none;373 }
  • 106. !7$)?@@K !:/"53$&,*O%K)V-D!7$)=/+/01"3-% !*,*:*$%;0%2,*;:/"53$B*O%)l)gV-Dgh
  • 107. 24 .dark{25 color: #333;26 }27 .highlight{28 color: red;29 }376 node.className = dark;
  • 108. @9::/"3L*![EA)%"**!8"/+*"03$5),*:*$%0!!3$(3$5),*:*$%0!A#(3O2),*:*$%0!?/01/(3$5)@%2,*)@M**%0
  • 109. +*$%
  • 110. +*$%)%2-*! A#90*)+*$% ! 1,31I>:#90*(#H$);;;! I*24#/"()+*$% ! I*2(#H$>I*29-);;;! C/5*>,*:*$%)+*$% ! ,#/(>9$,#/();;; ! #$4,9">#$094:3%);;;
  • 111. +*$%)6/$(,3$5
  • 112. W0)C"#-*"%3*032 <input type="button" onclick="toggleHighlight(this)"value="click me!"/>378 function toggleHighlight(element) {379 if (element.className == highlight) {380 element.className = dark;381 }else {382 element.className = highlight;383 }384 }
  • 113. W0)W%%"349%*0387 document.body.onclick = function(e) {388 e = window.event || e;389 toggleHighlight(e.target || e.srcElement);390 };
  • 114. e*530%"/%3#$393 function bindEvent(element, type, listener) {394 if (element.addEventListener) {395 element.addEventListener(type, listener, false);396 } else if (element.attachEvent) {397 element.attachEvent(on + type, listener);398 }399 }400401 bindEvent(document.body, click, function(e) {402 e = window.event || e;403 toggleHighlight(e.target || e.srcElement);404 });
  • 115. +*$%)C"#-/5/%3#$
  • 116. 408 bindEvent(document.body, click, function(e) {409 e = window.event || e;410 toggleHighlight(e.target || e.srcElement);411 });412413 bindEvent(document.getElementById(my-id), click, function(e) {414 e = window.event || e;415 stopPropagation(e);416 });417418419 stopPropagation = function(event) {420 if (event.stopPropagation) {421 event.stopPropagation();422 } else {423 event.cancelBubble = true;424 }425 };
  • 117. E%M*")O*/%9"*0
  • 118. 83:*"
  • 119. 431 setTimeout(function() {432 alert(1);433 }, 1000);434435 var count = 1;436 var timer = setInterval(function() {437 if (count == 10) {438 clearTimeout(timer);439 }440 document.body.innerHTML += Adding<br />;441 count++;442443 }, 1000);
  • 120. setTimeout(fn, 0);
  • 121. ?#(*)30$f%)3$+#I*()"35M%)/H/2)49%)30)"9$)g/0)0##$)/0)-#0034,*;g
  • 122. ?##I3*0
  • 123. W)833:#,)30)/)0:/,,)/:#9$%)#O)$/:*()(/%/)0%#"*()42)%M*)H*4)4"#H0*"
  • 124. 446 document.cookie = username=berg;447448 var nextYear = new Date();449 nextYear.setFullYear(nextYear.getFullYear() + 1);450 document.cookie = username=berg; expires= +nextYear.toGMTString();
  • 125. 452 function getCookie(key) {453 var reg = new RegExp((^| ) + key + =([^;]*)(;|x24)),454 result = reg.exec(document.cookie);455456 if (result) {457 return result[2] || null;458 }459460 return null;461 }462 getCookie(username);
  • 126. Advanced scripting
  • 127. ?#::9$31/%*)H3%M)/)H*4)0*"+*")H3%M#9%)1/903$5)%M*)H*4)4"#H0*")"*,#/(
  • 128. !WG/D !mAB6%%-e*n9*0%)#")W1%3+*mE4G*1%!F"#H0*)M30%#"2)1#$%"#,!C/5*)"*$(*"
  • 129. @*"+*"&03(*)=/+/01"3-%
  • 130. 466 var http = require(http);467 http.createServer(function(req, res) {468 res.writeHead(200, {Content-Type: text/plain});469 res.end(Hello Worldn);470 }).listen(1337, 127.0.0.1);471 console.log(Server running at http://127.0.0.1:1337/);
  • 131. 68ABo)O*/%9"*0
  • 132. e*O*"*$1*)&)4##I0!=/+/@1"3-%K)8M*)[*]$3%3+*)d93(*)&) [/+3()!,/$/5/$!!"#"$%&()*+,-.+/001+2"&)$+3+40567"$+ 8&0%9:0&1!C"#)=/+/01"3-%)[*035$)C/%%*"$0)&)e#00) 6/":*0.)[90%3$)[3/L!--I)#$)=/+/01"3-%)&)C*%*"&C/9,)p#1M
  • 133. e*O*"*$1*)&)H*403%*0!;5&9$<01.*+-))(*== >>>?@5&9$A01.?0&6=!=/+/01"3-%)1,#09"*0K)M%%-K>>G344*"3$5;1#:> O/n>$#%*0>1,#09"*0>!!3"0%&1,/00)O9$1%3#$K)M%%-K>> *$;H3I3-*(3/;#"5>H3I3>!3"0%&1,/00qO9$1%3#$
  • 134. QA
  • 135. !anks
  • 136. 8M*)(*035$)U)/"1M3%*1%9"*)#O) 8/$5"/: =/+/01"3-%)4/031P Javascript basic+ berg
  • 137. ?
  • 138. A library is like a toolkit
  • 139. 0.5sdelay
  • 140. 20%
  • 141. Changing Every Day
  • 142. • Prototype• jQuery• mootools• sencha (EXT)
  • 143. ••••
  • 144. Tangram
  • 145. [ˈtæŋɡrəm]TangGram
  • 146. [ˈtæŋɡrəm]TangGram
  • 147. M%%-K>>%/$5"/:;4/3(9;1#:
  • 148. button plugin Mobile dialog fx behaviors other menubar base ... Editor UI Componentextra DOM event ajax ...core Base
  • 149. tangram base
  • 150. ••••
  • 151. •••
  • 152. ••
  • 153. •••
  • 154. coreextra
  • 155. codesearch• http://fe/stable/tangram/codesearch.html••• url
  • 156. CDN!r01"3-%)%2-*lg%*D%>G/+/01"3-%g)0"1lgM%%-K>> 3:5;4/3(9;1#:>G0>%/$5"/:&4/0*& 1#"*&V;^;Y;G0gsr>01"3-%s!r01"3-%)%2-*lg%*D%>G/+/01"3-%g)0"1lgM%%-K>> 3:5;4/3(9;1#:>G0>%/$5"/:&4/0*&V;^;Y;G0gsr> 01"3-%s
  • 157. DOM••••• ready
  • 158. Event on once un get fire
  • 159. browser•• isSome
  • 160. • array• object • url• number • swf• date • cookie• string • json • trim/format
  • 161. ajax get postrequest form
  • 162. lang Class inherits Event module isXXX
  • 163. lang dispatchEvent instance addEventListener decontrolremoveEventListener guid
  • 164. getScrollLeft page getScrollTopcreateStyleSheet getViewHeightgetMousePosition getViewWidth loadJsFile getWidth loadCssFile getHeight
  • 165. ?/01/(*231 T.e(#header).232 children().233 on(click, function() {234 alert(clicked);235 });
  • 166. tangram UI
  • 167. •••
  • 168. •••
  • 169. •• DOM••
  • 170. constructor ... ...prototype ...
  • 171. constructorprototype
  • 172. constructoraddon constructorprototypeaddon prototype
  • 173. ui.some.create({ });ui.some.options = { };ui.Some.extend({ });
  • 174. UIBase
  • 175. UIBasebutton dialog table ...
  • 176. UIBasebutton dialog table ... alert confirm modal keyboard ...
  • 177. UIBase button dialog table ... alertdraggable confirmstateable modal keyboard ... ...
  • 178. ui ui dialog tab button carsourel suggestion draggable popup tooltip table droppable input progressbar accordion stateable itemset pager menubar decorator modal combox starRate posable datepicker slider ColorPalette Login
  • 179. tangram mobile (beta)
  • 180. •••
  • 181. • • 2K••• UI
  • 182. F9%%#$ C/5* 8/4?/"0#9"*, C#-9- 8##,4/" W((#$0B30%`3*H @1"#,,*" `3(*#A/0I @,3(*" <74/0* <7194* "#%/%* (4%/- %/-O/(* 01/,* -3$1M %/-6#,(u3- 0,3(* 0H3-* %9"$-#- !D +*$% F/0* tF/0*
  • 183. Tangram
  • 184. mp3 IMTangram hao123
  • 185. Tangramhttp://github.com/BaiduFE
  • 186. QA
  • 187. Thanks!berg