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

第三课:JS-行为控制语言+js架构思想

on

  • 1,420 views

百度web前端课程之js

百度web前端课程之js

Statistics

Views

Total Views
1,420
Views on SlideShare
1,420
Embed Views
0

Actions

Likes
1
Downloads
109
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

第三课:JS-行为控制语言+js架构思想 第三课:JS-行为控制语言+js架构思想 Presentation Transcript

  • berg
  • !!"#$%&$()(*+*,#-*".)/,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 !"##$%$%&&
  • ?#$%/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#:
  • 8M30)/O%*"$##$!=/+/01"3-%)4/031P)QR;SMT!8M*)(*035$)U)/"1M3%*1%9"*)#O)8/$5"/: QV;SMT
  • JavascriptJavascript basic+
  • E9%,3$*!E+*"+3*H!=/+/01"3-%)O#")H*4)4"#H0*" !=/+/01"3-% !?,3*$%&@3(*)=/+/@1"3-%!W(+/$1*()01"3-%3$5
  • Overview
  • NM2)=/+/01"3-%)X
  • B/$59/5*)#O)%M*)N*4 O#":)VYYZ;R
  • ()*+,&-./)&00123&4*5$66&7&85&*9)9:+//
  • =/+/@1"3-%)30)"*/,,2)5##( 7%)30),35M%H*35M%)/$()*D-"*003+*
  • !C"#%#%2-/,)EEC!!9$1%3#$/,)![2$/:31
  • F9%)%M*)*$+3"#$:*$%)30) $#%)0#)5##( A/I*)90)1#$O90*()/$()/$5"2
  • A/$2)4"#H0*"0!7)Q))+*"03#$0T.)]"*O#D.)1M"#:*.)0/O/"3.) #-*"/!?M3$/ !^ZS !A/D%M#$
  • [3c*"*$%)3:-,*:*$%!=/+/01"3-%)*$53$*0 !?M/I"/)&)7 !=_5*"A#$I*2)&)!3"*O#D !`a)&)?M"#:* !?/"/I/$)&)E-*"/) !b3%"#)&)0/O/"3
  • [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-*"/)
  • Javascript
  • 9 function hello(to){10 to = to || world;11 alert("Hello " + to);12 return true;13 }14 var to = everyone;15 hello(to);
  • !B*D31/,)@%"91%9"*![/%/%2-*)/$()`/,9*0!`/"3/4,*0!D-"*003#$0)/$()E-*"/%#"0!@%/%*:*$%0!;;;
  • E9%,3$*!@#:*)(3c*"*$1*!E4G*1%!!9$1%3#$!C"#%#%2-*)EEC
  • @#:*)(3c*"*$1*0
  • `/"3/4,*0 <$%2-*(
  • 43 var i = 1;44 i = something else;4546 alert(i + 1);
  • 49 var a = [1, 2, 3];50 var b = a;51 a[0] = 99;52 alert(b);
  • !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$(*]$*(
  • `/"3/4,*)@1#-* b#)4,#1I)01#-*
  • 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);
  • 34 function f() {35 alert(scope);36 if (!scope) {37 var scope = local;38 }39 alert(scope);40 }41 f();
  • E-%3#$/,)@*:31#,#$0 [E)bE8)O#"5*%)2#9")@*:31#,#$0
  • 54 var a = 1;55 alert(a);5657 return58 {59 a: 160 };
  • @9::/"3L*{ !<$%2-*()`/"3/4,*0 !`/"3/4,*)@1#-* !E-%3#$/,)@*:31#,#$0
  • E4G*1%
  • }! W""/20! !9$1%3#$0! e*59,/")*D-"*003#$0 Object! E4G*1% }! b9:4*"0! @%"3$50 Object-like! F##,*/$
  • ?,/00&O"**62 var info = {63 first: Berg,64 last: Lei,65 address: {66 city: Beijing,67 street: Shangdi 10th street68 }69 };
  • 71 info[first];72 info.first;7374 var key = first;75 info[key];
  • 77 for (i in info) {78 alert(info[i]);79 }
  • C"#%#%2-*82 function clone(o) {83 var F = function() {};84 F.prototype = o;85 return new F();86 }
  • 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]);
  • C"#%#%2-*)1M/3$ null someone student Object name : john university: CAS toString : fnsomeone[key]
  • @9::/"3L*{ !?,/00&O"** !C"#%#%2-* !C"#%#%2-*)1M/3$
  • !9$1%3#$
  • 7$+#1/%3#$0
  • !9$1%3#$)3$+#1/%3#$103 function add(a, b) {104 return a + b;105 }106 add();
  • 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());
  • NM/%f0)g%M30g
  • g%M30g)/,H/20)"*O*"0)%#)%M*)#H$*")#4G*1%)#O)%M*)O9$1%3#$)
  • 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);
  • !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
  • ?#$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
  • ?,#09"*
  • var Counter = function() { var value = 0; return { increment: function(inc) { return value += inc || 1; }, getValue: function() { return value; } };}();
  • ?,#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,-;)
  • for (var i = 0; i < count; i++) { nodes[i].onclick = function() { alert(i); };}
  • for (var i = 0; i < count; i++) { nodes[i].onclick = function(i) { return function() { alert(i); }; }(i);}
  • !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 }
  • 187 function inc(value) {188 return value + 1;189 }190 var multInc = multize(inc);191192 multInc([1, 2, 3]);
  • W+#3(0%/%*)/$():9%/4,*)(/%/
  • 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 }
  • 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 }
  • 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 }();
  • ?/01/(*231 T.e(#header).232 children().233 on(click, function() {234 alert(clicked);235 });
  • A/I3$5)[@B Q[#:/3$)0-*13]1),/$59/5*0T
  • @9::/"3L*{ !7$+#1/%3#$0 !!9$1%3#$ !A*%M#( !1#$0%"91%#" !/--,2
  • @9::/"3L* !?,#09"*{ !!9$1%3#$/,)-"#5"/::3$5 !A*:#3L/%3#$ !?/01/(*
  • C"#%#%2-/,)EEC
  • ?,/0031)-/%%*"$ H3%M-"#%#%2-/,)-/%%*"$
  • C0*9(#1,/0031/,
  • 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
  • 243 var Person = function(name) {244 this.name = name;245 };246 Person.prototype.getName = function() {247 return this.name;248 };
  • 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 };
  • 238 function extend(subClass, superClass) {239 var F = function() {};240 F.prototype = superClass.prototype;241 subClass.prototype = new F();242 }
  • W)4*%%*")g*D%*$(g
  • 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 };
  • C"#%#%2-/,)-/%%*"$
  • 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);
  • 82 function clone(o) {83 var F = function() {};84 F.prototype = o;85 return new F();86 }
  • ?,/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*$%;
  • 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##(;
  • @9::/"3L*
  • !=/+/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)
  • QA
  • Client-Side JavaScript
  • D/:-,*0)2#9f+*)0**$)0#)O/".M/+*)$#)-/"%319,/")1#$%*D%
  • E9%,3$*!N*4)F"#H0*")$+3"#$:*$%!,*:*$%0 !?/01/(3$5)@%2,*)@M**%0!+*$%0!E%M*")O*/%9"*0
  • N*4)F"#H0*")$+3"#$:*$%
  • N3$(#H)/0)d,#4/,)D*19%3#$)?#$%*D%309 var answer = 42;310 alert(window.answer === answer);
  • N3$(#H) E4G*1%0 01"**$ O"/:*0jk 8M* O#":0jk19""*$% M30%#"2H3$(#H /$1M#"0jk (#19:*$% 3:/5*0jk ,#1/%3#$ ;;; ;;;
  • +*$%)("3+*$ O#":)d<7
  • =/+/@1"3-%)/((0)&,"(2#3))%#)%M*)1#$%*$%)/$()3%0)-"*0*$%/%3#$
  • !?"*/%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*"+*"
  • ,*:*$%
  • 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>
  • [EA)%"** Document <html> <head> <body> <title> <h1> <p>"Sample Document" "Title" "This is a " <i> document simple
  • 8"/+*"03$5),*:*$%0
  • 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));
  • !$#(*;$#(*82-*!$#(*;1M3,(b#(*0 ![2$/:31)/""/2!$#(*;%/5b/:*!$#(*;3$$*"68AB!$#(*;-/"*$%b#(*
  • !3$(3$5),*:*$%0
  • 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 }
  • !,+,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
  • A#(3O2),*:*$%0
  • 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));
  • 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 }
  • !,+,4,1!5/--*$(?M3,(Q,+,T!-3804,1!51"*/%*,*:*$%Q!(*7(4,T/!,+,4,1!50*%W%%"349%*Q(!!)9/2(+0,T
  • ?/01/(3$5)@%2,*)@M**%0
  • 370 var nodes = document.getElementsByTagName(p);371 for (var i = 0; i < nodes.length; i++) {372 nodes[i].style.display = none;373 }
  • !7$)?@@K !:/"53$&,*O%K)V-D!7$)=/+/01"3-% !*,*:*$%;0%2,*;:/"53$B*O%)l)gV-Dgh
  • 24 .dark{25 color: #333;26 }27 .highlight{28 color: red;29 }376 node.className = dark;
  • @9::/"3L*![EA)%"**!8"/+*"03$5),*:*$%0!!3$(3$5),*:*$%0!A#(3O2),*:*$%0!?/01/(3$5)@%2,*)@M**%0
  • +*$%
  • +*$%)%2-*! A#90*)+*$% ! 1,31I>:#90*(#H$);;;! I*24#/"()+*$% ! I*2(#H$>I*29-);;;! C/5*>,*:*$%)+*$% ! ,#/(>9$,#/();;; ! #$4,9">#$094:3%);;;
  • +*$%)6/$(,3$5
  • 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 }
  • W0)W%%"349%*0387 document.body.onclick = function(e) {388 e = window.event || e;389 toggleHighlight(e.target || e.srcElement);390 };
  • 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 });
  • +*$%)C"#-/5/%3#$
  • 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 };
  • E%M*")O*/%9"*0
  • 83:*"
  • 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);
  • setTimeout(fn, 0);
  • ?#(*)30$f%)3$+#I*()"35M%)/H/2)49%)30)"9$)g/0)0##$)/0)-#0034,*;g
  • ?##I3*0
  • W)833:#,)30)/)0:/,,)/:#9$%)#O)$/:*()(/%/)0%#"*()42)%M*)H*4)4"#H0*"
  • 446 document.cookie = username=berg;447448 var nextYear = new Date();449 nextYear.setFullYear(nextYear.getFullYear() + 1);450 document.cookie = username=berg; expires= +nextYear.toGMTString();
  • 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);
  • Advanced scripting
  • ?#::9$31/%*)H3%M)/)H*4)0*"+*")H3%M#9%)1/903$5)%M*)H*4)4"#H0*")"*,#/(
  • !WG/D !mAB6%%-e*n9*0%)#")W1%3+*mE4G*1%!F"#H0*)M30%#"2)1#$%"#,!C/5*)"*$(*"
  • @*"+*"&03(*)=/+/01"3-%
  • 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/);
  • 68ABo)O*/%9"*0
  • 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
  • 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#$
  • QA
  • !anks
  • 8M*)(*035$)U)/"1M3%*1%9"*)#O) 8/$5"/: =/+/01"3-%)4/031P Javascript basic+ berg
  • ?
  • A library is like a toolkit
  • 0.5sdelay
  • 20%
  • Changing Every Day
  • • Prototype• jQuery• mootools• sencha (EXT)
  • ••••
  • Tangram
  • [ˈtæŋɡrəm]TangGram
  • [ˈtæŋɡrəm]TangGram
  • M%%-K>>%/$5"/:;4/3(9;1#:
  • button plugin Mobile dialog fx behaviors other menubar base ... Editor UI Componentextra DOM event ajax ...core Base
  • tangram base
  • ••••
  • •••
  • ••
  • •••
  • coreextra
  • codesearch• http://fe/stable/tangram/codesearch.html••• url
  • 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
  • DOM••••• ready
  • Event on once un get fire
  • browser•• isSome
  • • array• object • url• number • swf• date • cookie• string • json • trim/format
  • ajax get postrequest form
  • lang Class inherits Event module isXXX
  • lang dispatchEvent instance addEventListener decontrolremoveEventListener guid
  • getScrollLeft page getScrollTopcreateStyleSheet getViewHeightgetMousePosition getViewWidth loadJsFile getWidth loadCssFile getHeight
  • ?/01/(*231 T.e(#header).232 children().233 on(click, function() {234 alert(clicked);235 });
  • tangram UI
  • •••
  • •••
  • •• DOM••
  • constructor ... ...prototype ...
  • constructorprototype
  • constructoraddon constructorprototypeaddon prototype
  • ui.some.create({ });ui.some.options = { };ui.Some.extend({ });
  • UIBase
  • UIBasebutton dialog table ...
  • UIBasebutton dialog table ... alert confirm modal keyboard ...
  • UIBase button dialog table ... alertdraggable confirmstateable modal keyboard ... ...
  • 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
  • tangram mobile (beta)
  • •••
  • • • 2K••• UI
  • 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*
  • Tangram
  • mp3 IMTangram hao123
  • Tangramhttp://github.com/BaiduFE
  • QA
  • Thanks!berg