YUI学习笔记学习笔记学习笔记学习笔记
学习目的学习目的学习目的学习目的：：：：
这次学习的目的是让大家对YUI用户界面开发工具包有个轮廓上的清晰认识，能应用
YUI编写简单js程序。
什么是什么是什么是什么是YUI?
YUI全拼为YahooUserInterface，是雅虎开发人员用javascript编写的一个“用户界
面开发工具包”。
它的用途是创建交互性丰富的web页面，比如dom操作，DHtml,Ajax.它里面所有的
组件都是开源的。
你可以到http://developer.yahoo.com/yui/下载最新版本，同时也提供全面YUI介
绍。
YUI组件及其构成组件及其构成组件及其构成组件及其构成。。。。
学习YUI第一步就是大体了解YUI里各种各样则组件是做什么的,然后根据需要再学习
组件里的类，类里面会有属性和方法。
以dom组件为例说明YUI组件的组成结构：
现在知道了YUI组件的一般结构，那么YUI目前有多少组件呢？各个组件的用途大体又
是什么呢？看图，这是YUI的所有组件列表，红线部分是初学者必须掌握的组件。
YUI的的的的编程风格编程风格编程风格编程风格及及及及dom组件组件组件组件。。。。
YUI编程风格是模块化的，YUI所有代码组件都是通过命名空间的方式来组织的，它提
倡代码的模块化封装。
下面通过综合使用yohoo组件，dom组件，event组件来演示“如何使用命名空间封
装你的js代码？”：
先描述用YUI要实现的功能：
输出一句话；
设置指定层的背景色为红色；
获取class类，输出html中有多少个类。
以上这三个功能都是封装在一个命名空间中，并且通过event组件驱动事件。
第一步先把用到的组件引用到html中:
第二步编写相应html和css:
Html:
输出一句话|
设置层背景色为红色|
输出类的数量
Css:
#eg2{height:200px;width:200px;background:#999999;}
.eg3{height:20px;background:#FF9933;margin:5px;}
第三部编写js:命名空间取名为“YUIBaseEg”；基于这个空间创建三个类eg1，eg2，
eg3。
YAHOO.namespace(''YUIBaseEg'');
YAHOO.YUIBaseEg.eg1=function(id,eg1Msg){
functionoutMsg(){
returnalert(eg1Msg);
}
YAHOO.util.Event.on(id,''click'',outMsg);
}
YAHOO.YUIBaseEg.eg2=function(id){
functionsetBgColor(){
returnYAHOO.util.Dom.setStyle(''eg2'',''background'',''red'');
}
YAHOO.util.Event.on(id,''click'',setBgColor);
}
YAHOO.YUIBaseEg.eg3=function(id){
functionclassNum(){
returnalert(YAHOO.util.Dom.getElementsByClassName(''eg3'',
''div'').length);
}
YAHOO.util.Event.on(id,''click'',classNum);
}
YAHOO.util.Event.onDOMReady(function(){
newYAHOO.YUIBaseEg.eg1(''aEg1'',''欢迎学习使用YUI!'');
newYAHOO.YUIBaseEg.eg2(''aEg2'');
newYAHOO.YUIBaseEg.eg3(''aEg3'');
});
怎么样怎么样怎么样怎么样学习学习学习学习好好好好YUI延伸思考延伸思考延伸思考延伸思考。。。。
通过刚才的演示大家已经对YUI有了初步的编码认识，但是离学好YUI还有很大的差距。
这里只有涉及到基本组件的使用，对很多组件的类，类的属性和类的方法都没有练习使
用过。当不断接触到不同的组件时，你会发现所用到的js知识会有所欠缺，这时最好还
是去补习javascript语言基础。
分享结束分享结束分享结束分享结束！！！！
谢谢大家，希望能知道大家对YUI新的想法。
|
|
