针对开发的前端技能培训之YUI篇

1. YUI Simple Introduction

2. 前端工程师 Front-end Engineer

3. 什么是前端工程师？

5. 前端流程

6. 做前端很简单？

7. 非也 !

16. 国际化、 可用性 、本地化、视觉设计、 易用性 、信息架构、 安全 、流程化、 性能 、标准、设备、可移植性 ... ...

18. YUI

19. YUI 是一把彪悍的军刀 http://developer.yahoo.com/yui

20. 怎样自学成才 Examples: http://developer.yahoo.com/yui/examples/ API Docs: http://developer.yahoo.com/yui/docs/ Team Blog: http://yuiblog.com/

23. YAHOO.lang YAHOO.lang.trim() // 去除字符串两端的空格 <script type =&quot; text/javascript &quot;> var str = &quot; Tao Bao &quot; ; YAHOO.lang.trim(str); //return &quot;Tao Bao&quot; </script>

24. YAHOO.lang YAHOO.lang.trim() // 去除字符串两端的空格 <script type =&quot; text/javascript &quot;> var str = &quot; Tao Bao &quot; ; YAHOO.lang.trim(str); //return &quot;Tao Bao&quot; </script> <script type =&quot; text/javascript &quot;> var str = [&quot; Tao Bao &quot;] ; YAHOO.lang.trim(str); //return [&quot; Tao Bao &quot;] </script>

25. YAHOO.lang YAHOO.lang.merge() // 属性合并 <script type =&quot; text/javascript &quot;> var p1 = {name: null ,age:0,sex:&quot; -> &quot;} ; var p2 = {name:&quot; ada &quot;,age:18} ; var p3 = YAHOO.lang.merge(p1,p2); //p3 = {name:&quot;ada&quot;,age:18,sex:&quot;->&quot;} </script>

26. YAHOO.lang 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.lang.html

28. YAHOO.util.Dom YAHOO.util.Dom.get() // 根据 ID 获取 Dom 对象 <script type =&quot; text/javascript &quot;> YAHOO.util.Dom.get(&quot; J_Id &quot;) ; // return HTMLElement </script>

29. YAHOO.util.Dom YAHOO.util.Dom.get() // 根据 ID 获取 Dom 对象 <script type =&quot; text/javascript &quot;> YAHOO.util.Dom.get(&quot; J_Id &quot;) ; // return HTMLElement </script> <script type =&quot; text/javascript &quot;> var ids = [&quot; J_Id1 &quot;,&quot; J_Id2 &quot;,&quot; J_Id3 &quot;] ; YAHOO.util.Dom.get(ids) ; // return HTMLElement[] </script>

30. YAHOO.util.Dom YAHOO.util.Dom.getElemetsByClassName() // 根据 Class 获取 Dom 对象 <script type =&quot; text/javascript &quot;> var Dom = YAHOO.util.Dom ; Dom.getElementsByClassName(&quot; J_Class &quot;, &quot;LI&quot; , &quot;J_Root&quot; ) ; // return HTMLElement[] </script>

31. YAHOO.util.Dom YAHOO.util.Dom.getAncestorByClassName() // 获取匹配 Class 的最近父 Dom 对象 <script type =&quot; text/javascript &quot;> var Dom = YAHOO.util.Dom ; Dom.getAncestorByClassName(&quot; J_Child &quot;,&quot; J_Parent &quot;) ; // return HTMLElement </script>

32. YAHOO.util.Dom YAHOO.util.Dom.getAncestorByClassName() // 获取匹配 Class 的最近父 Dom 对象 <script type =&quot; text/javascript &quot;> var Dom = YAHOO.util.Dom ; Dom.getAncestorByClassName(&quot; J_Child &quot;,&quot; J_Parent &quot;) ; // return HTMLElement </script> // 获取匹配 TagName 的最近父 Dom 对象 <script type =&quot; text/javascript &quot;> var Dom = YAHOO.util.Dom ; Dom.getAncestorByTagName(&quot; J_Child &quot;,&quot; UL &quot;) ; // return HTMLElement(UL) </script>

33. YAHOO.util.Dom YAHOO.util.Dom.add [remove] Class() // 方便的操作元素的 class <style type =&quot; text/css &quot;> .hidden { display :none;} </style> <script type =&quot; text/javascript &quot;> var Dom = YAHOO.util.Dom ; Dom.addClass(&quot; J_Id &quot;,&quot; hidden &quot;) ; // 将元素隐藏 </script>

34. YAHOO.util.Dom YAHOO.util.Dom.add [remove] Class() // 方便的操作元素的 class <style type =&quot; text/css &quot;> .hidden { display :none;} </style> <script type =&quot; text/javascript &quot;> var Dom = YAHOO.util.Dom ; Dom.addClass(&quot; J_Id &quot;,&quot; hidden &quot;) ; // 将元素隐藏 </script> <script type =&quot; text/javascript &quot;> var Dom = YAHOO.util.Dom ; var lists = Dom.getElementsByClassName(&quot; J_List &quot;) ; // 将所有 class 中包含 J_List 的元素隐藏 Dom.addClass(lists ,&quot; hidden &quot;) ; </script>

35. YAHOO.util.Dom 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html

37. YAHOO.util.Dom YAHOO.util.Dom.onDOMReady() // 页面载入完成后执行 <script type =&quot; text/javascript &quot;> var Event = YAHOO.util.Event ; Event.onDomReady(init) ; function init(){ //init code } </script>

38. YAHOO.util.Event YAHOO.util.Dom.on() // 优雅地绑定事件 <script type =&quot; text/javascript &quot;> var Event = YAHOO.util.Event ; Event.on(&quot; J_Btn &quot;,&quot; click &quot;,foo) ; function foo(e){ alert(&quot; 别摸我 &quot;) ; } </script>

39. YAHOO.util.Event YAHOO.util.Dom.on() // 优雅地绑定事件 <button id =&quot; J_Btn1 &quot; class =&quot; J_Btn &quot;> 按钮 1</button> <button id =&quot; J_Btn2 &quot; class =&quot; J_Btn &quot;> 按钮 2</button> <button id =&quot; J_Btn3 &quot; class =&quot; J_Btn &quot;> 按钮 3</button>

40. YAHOO.util.Event YAHOO.util.Dom.on() // 优雅地绑定事件 <button id =&quot; J_Btn1 &quot; class =&quot; J_Btn &quot;> 按钮 1</button> <button id =&quot; J_Btn2 &quot; class =&quot; J_Btn &quot;> 按钮 2</button> <button id =&quot; J_Btn3 &quot; class =&quot; J_Btn &quot;> 按钮 3</button> <script type =&quot; text/javascript &quot;> var Event = YAHOO.util.Event ,Dom = YAHOO.util.Dom ; var btns = [&quot; J_Btn1 &quot;,&quot; J_Btn2 &quot;,&quot; J_Btn3 &quot;] ; //var btns = Dom.getElementsByClassName(&quot;J_Btn&quot;) ; Event.on(btns,&quot; click &quot;,foo) ; function foo(e){ alert(this.id) ; } </script> Demo http://zhuhj.googlecode.com/svn/trunk/YUIPPTDEMO/YUI-Event-array.html

41. YAHOO.util.Event YAHOO.util.Dom.preventDefault() // 取消默认事件 <a href =&quot; http://.../XX.html &quot; id =&quot; J_Expand &quot;> 展开 </a> <script type =&quot; text/javascript &quot;> var Event = YAHOO.util.Event ; Event.on(&quot; J_Expand &quot;,&quot; click &quot;,handleExpand) ; function handleExpand(e){ Event.preventDefault(e); // other code } </script>

42. YAHOO.util.Event YAHOO.util.Dom.getTarget() // 获取事件目标元素 <div id =&quot; J_Box &quot; style =&quot; width:100px;height:100px;baground-color:#ff0000; &quot;> <a href =&quot; http://.../XX.html &quot; id =&quot; J_Expand &quot;> 展开 </a> <div> <script type =&quot; text/javascript &quot;> var Event = YAHOO.util.Event ; Event.on(&quot; J_Expand &quot;,&quot; click &quot;,foo) ; function foo(e){ alert(Event.getTarget(e).tagName) ; } </script>

43. YAHOO.util.Event 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html

45. YAHOO.util.Connection YAHOO.util.Connection.asyncRequest() // 发起 ajax 请求 //Get 请求 <script type =&quot; text/javascript &quot;> var Con = YAHOO.util.Connection ; var callback = { timeout: 30000, success: function(r){ alert(r.responseText) ; }, failure: function(r){ alert(r.status) ; // 0: 表示通讯错误 1: 表示用户取消 } } Con.asyncRequest(&quot; get &quot;,&quot; url &quot;,callback) ; </script>

46. YAHOO.util.Connection YAHOO.util.Connection.asyncRequest() // 发起 ajax 请求 //Get 请求 <script type =&quot; text/javascript &quot;> var Con = YAHOO.util.Connection ; var callback = { timeout: 30000, success: function (r){ alert(r.responseText) ; }, failure: function (r){ alert(r.status) ; // 0: 表示通讯错误 1: 表示用户取消 } } Con.asyncRequest(&quot; get &quot;,&quot; url &quot;,callback) ; </script>

47. YAHOO.util.Connection YAHOO.util.Connection.asyncRequest() // 发起 ajax 请求 //Post 请求 <script type =&quot; text/javascript &quot;> var Con = YAHOO.util.Connection ; var callback = { timeout: 30000, success: function (r){ alert(r.responseText) ; }, failure: function (r){ alert(r.status) ; // 0: 表示通讯错误 1: 表示用户取消 } } Con.asyncRequest(&quot; post &quot;,&quot; url &quot;,callback,&quot; name=ada&age=18 &quot;) ; </script>

48. YAHOO.util.Connection YAHOO.util.Connection.setForm() // 设置提交表单 <script type =&quot; text/javascript &quot;> var Con = YAHOO.util.Connection ; var callback = { timeout: 30000, success: function (r){ alert(r.responseText) ; }, failure: function (r){ alert(r.status) ; // 0: 表示通讯错误 1: 表示用户取消 } } Con.setForm(&quot;J_FormId&quot;) ; Con.asyncRequest(&quot; post &quot;,&quot; url &quot;,callback) ; </script>

49. YAHOO.util.Connection YAHOO.util.Connection.abort() // 终止请求 <script type =&quot; text/javascript &quot;> var Con = YAHOO.util.Connection ;Event = YAHOO.util.Event; var callback = { timeout: 30000, success: function (r){ alert(r.responseText) ; }, failure: function (r){ if(r.status !== 1){alert(&quot; 请求失败 &quot;) ;} } } Con.asyncRequest(&quot; get &quot;,&quot; url &quot;,callback) ; Event.on(&quot; J_Cancel &quot;,&quot; click &quot;, function (){Con.abort() ;}) ; </script>

50. YAHOO.util.Connection 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Connect.html

52. YAHOO.util.Get YAHOO.util.Get.script() // 动态加载一个 js <script type =&quot; text/javascript &quot;> var Get = YAHOO.util.Get ; var opts = { timeout: 30000, chartset: &quot;GBK&quot;, onSuccess: function (o){}, onFailure: function(o){}, onTimeout: function(o){} } Get.script(&quot; http://... .../***.js &quot;,opts) ; </script>

53. YAHOO.util.Get YAHOO.util.Get.script() // 动态载入一个 js 文件 // 用全局变量来实现跨域获取数据 //data.js var __DATA__ = &quot; Great Wall &quot; ; <script type =&quot; text/javascript &quot;> var Get = YAHOO.util.Get ; var opts = { ... ... onSuccess: function (o){ try {alert(window.__DATA__) ;} catch (e){} } ... ... } Get.script(&quot; http://... .../data.js &quot;,opts) ; </script>

54. YAHOO.util.Get YAHOO.util.Get.script() // 动态载入一个 js 文件 // 用 JSONP 来实现跨域获取数据 //data.js foo (&quot; Great Wall &quot;) ; <script type =&quot; text/javascript &quot;> var Get = YAHOO.util.Get ; var opts = { timeout: 30000, chartset: &quot;GBK&quot;, onFailure: function(o){}, onTimeout: function(o){} } Get.script(&quot; http://... .../data.js?jsonp=foo &quot;,opts) ; </script>

55. YAHOO.util.Get 更多 >> http://developer.yahoo.com/yui/docs/YAHOO.util.Get.html

56. YUI 文档中文化项目 http://code.google.com/p/yui-doc-zh/

57. 总结

59. 综合练习

60. Q&A

61. 谢谢 !