【转】Yui 3.x 基础

【原文链接】: http://www.webchina110.cn/?p=130&cpage=1#comment-1025    

    一直以来都在学习底层的js,这两天趁着放假看了看最新版本的Yui,现在雅虎还没有发布Yui 3的正式版本,听说快要发布了。据我所知,Yui在中国使用他的人和网站很少,除了阿里巴巴旗下网站外,在外面使用的更少,那么不使用他的原因从道听途说得知有二:

1、Yui在过于庞大,影响加载速度;

产品嘛,讲究的是用户体验嘛,以前读书的时候,我们老师就告诉我们,如果是你们自己的网站,注意主页一定要控制他的内容,千万不要像新浪这样的门户网站,需要滚动几屏,原因是用户一般不想拖动滚动条,还有就是内容过多会影响加载速度,其实他这里说的内容过多,最重要的那时候还是表格,这是其一,其二是文件太大,加载起来慢,那时候上网还是163拨号。

其实这一直是大家对Yui的一个误会,我觉得这也是Yui的推广方式有关系吧!看看现在的Jquery的官方的下载地址,明确标明他们的完整版,压缩版的大小,而在Yui的网站上呢?下载包的大小单位直接是M,和JQ的k比起来,当然有很大区别了,故而对Yui有这样的误会,其实Yui的最基础的版本,像Jq这样用来使用的Yui3的是22.8 KB,还是比较小的。

他位于下载下来以后解压后:yui_3.0.0pr2\yui\build\yui文件夹下,yui-min.js这才是我们在网站中要使用的js库文件,至于其他的,也是像JQ的一样,比如实现一个拖拽什么的,需要一个单独的js功能文件。

2、Yui的中文资料太少

由于大家已经在第一点对Yui有所误会,故而对他就近而远知,而有少部分是在使用,但是他们一心只是为了自己,身怕别人比他强,那么还有第二种人,就是他们会了,但是由于工作太忙,没有时间写出中文文档与大家分享,故而造成了今天大家对Yui的印象不好,使用率的原因。

当我们对Yui有了一个真正而简单的认识以后,我们下面就来看看Yui 3的简单用法:

一、调用方法:

既然我们是使用的Yui这个js库,那么肯定第一步就是引用这个文件,刚才在上面已经说了我们要使用的是yui-min.js这个文件,当然你可以对他进行改名,你只需要到你下载的yui库的文件中找到他,将其拷到你需要的目录就OK啦,那么掉用方法的是:

在之间插入以下代码:

<script src=”yui-min.js” type=”text/javascript”></script>注意:src后面的地址请根据实际情况填写,当然你也可以使用官方提供的地址,请看: <script src=”http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js” type=”text/javascript”></script>

我个人觉得如果你仅仅想试一下yui的功能,可以用用官方的地址,免得自己下载啦,嘿嘿!

二、实现我们的功能

当我们已经调用好Yui这个js库以后,接下来就得看我们自己的了,如何通过Yui来实现我们想要的功能呢,嘿嘿,请看:

1、Yui 3最基本的使用格式:

YUI().use(”node”, function(Y) {

// 书写你的js代码

});

就是要使用Yui 3提供的方法,就必须得将他们写在上面这个大括号之内,不然无法使用。

2、Yui 3获取对象的方法:她获取对象的方法有很多种,下面我们来看看常用的几种方法:(在使用这些方法的时候都需要在方法前加Y)

a、get()方法

get方法获取id和class对象的方法:Y.get(”#id”);Y.get(”.class”);

注意,在括号中必须用引号将他们引起来,看看,如果你对CSS很熟悉的话,就应该知道,我们在为id书写样式的时候前面用的是#,为class书写样式的时候前面使用的是.号。在Yui 3的get方法中也是这样的。那么get方法获取到的都是单个对象,还有就是如果你又想获取一个对象,他又有Id又有class的呢,那也可以使用get方法:Y.get(”#id”).get(”.class”);这样就可以啦。

b、all()方法

刚才我们看了get方法获取的都是单个对象,那如果我们想获取所有据有相同class的属性的对象怎么办,哈哈,不要急,Yui想到了,他提供了很多种方法,但是我觉得最简单的一种方法就是:Y.all(”.calss”);这样就可以获取到了所有据有class名称的class的对象,注意,这里得到是一个数据。

3、addClass()

这个一看,就应该明白了吧,我们经常在js中都可能用到的为一个对象增加class,哈哈,在这里我们可以使用它啦,使用方法就是:myNode.addClass(’foo’);

4、styles()

光有了设置class还不行,因为有时候我们还需要设置对象的style值,故而引入了styles()方法,使用方法:myNode.setStyle(’opacity’, 0.5);

5、Yui事件监听函数:

Y.on(事件,函数,对象);

如果你对js比较熟悉的话,你应该清楚,js中有事件监听函数,但是IE和DOM是有区别的,注意,Opera支持IE和DOM的两种监听函数,以前为了兼容多个浏览器,我们需要单独写一个兼容的函数,而在Yui3不需要,如果你想使用的话,可以直接使用Y.on(事件,函数,对象);

事件分为多种,一般我们经常用到的是鼠标与键盘:

鼠标:click,dblclick,mouseover,mousedown,mousemove,mouseup

我们只需要将相应的事件用引号包起来填入事件的值就行了。还有就是这里的对象可以接受单个的对象,他还可以接受数组,比如单个的id,我们可以使用#id,也可以设置id下的标签,#id li,还可以使用为多个对象设置,就是上面说到的是数组方式["#id","#id1"]依次类推。

好了,今天就说到这里,当然啦,yui不仅仅只有这几个方法的,还有很多,比如set,get,appendChild,test,removeClass,getXY,getX,gety还有很多很多,如果你通过我写的这个文章感兴趣的话,可以给我留言,我会继续将yui的其他方法介绍给大家。

如果你的英文很棒,也可以去看看官方的相关资料,我上面的一些代码有些是直接复制了官方上的相关代码进行解释。

yui 3官方地址:http://developer.yahoo.com/yui/3

当然注意拉,我今天说的是全是yui3的一些方法,因为前面还有YUI2,我对此也一点不了解,直接进入了3的学习,谢谢!

原文地址:https://www.cnblogs.com/feinian/p/1799379.html