【轉(zhuǎn)】Yui 3.x 基礎(chǔ)

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

    一直以來(lái)都在學(xué)習(xí)底層的js，這兩天趁著放假看了看最新版本的Yui，現(xiàn)在雅虎還沒有發(fā)布Yui 3的正式版本，聽說(shuō)快要發(fā)布了。據(jù)我所知，Yui在中國(guó)使用他的人和網(wǎng)站很少，除了阿里巴巴旗下網(wǎng)站外，在外面使用的更少，那么不使用他的原因從道聽途說(shuō)得知有二：

 

1、Yui在過(guò)于龐大，影響加載速度;

產(chǎn)品嘛，講究的是用戶體驗(yàn)嘛，以前讀書的時(shí)候，我們老師就告訴我們，如果是你們自己的網(wǎng)站，注意主頁(yè)一定要控制他的內(nèi)容，千萬(wàn)不要像新浪這樣的門戶網(wǎng)站，需要滾動(dòng)幾屏，原因是用戶一般不想拖動(dòng)滾動(dòng)條，還有就是內(nèi)容過(guò)多會(huì)影響加載速度，其實(shí)他這里說(shuō)的內(nèi)容過(guò)多，最重要的那時(shí)候還是表格，這是其一，其二是文件太大，加載起來(lái)慢，那時(shí)候上網(wǎng)還是163撥號(hào)。

其實(shí)這一直是大家對(duì)Yui的一個(gè)誤會(huì)，我覺得這也是Yui的推廣方式有關(guān)系吧！看看現(xiàn)在的Jquery的官方的下載地址，明確標(biāo)明他們的完整版，壓縮版的大小，而在Yui的網(wǎng)站上呢？下載包的大小單位直接是M，和JQ的k比起來(lái)，當(dāng)然有很大區(qū)別了，故而對(duì)Yui有這樣的誤會(huì)，其實(shí)Yui的最基礎(chǔ)的版本，像Jq這樣用來(lái)使用的Yui3的是22.8 KB，還是比較小的。

他位于下載下來(lái)以后解壓后：yui_3.0.0pr2\yui\build\yui文件夾下，yui-min.js這才是我們?cè)诰W(wǎng)站中要使用的js庫(kù)文件，至于其他的，也是像JQ的一樣，比如實(shí)現(xiàn)一個(gè)拖拽什么的，需要一個(gè)單獨(dú)的js功能文件。

 

2、Yui的中文資料太少

由于大家已經(jīng)在第一點(diǎn)對(duì)Yui有所誤會(huì)，故而對(duì)他就近而遠(yuǎn)知，而有少部分是在使用，但是他們一心只是為了自己，身怕別人比他強(qiáng)，那么還有第二種人，就是他們會(huì)了，但是由于工作太忙，沒有時(shí)間寫出中文文檔與大家分享，故而造成了今天大家對(duì)Yui的印象不好，使用率的原因。

 

當(dāng)我們對(duì)Yui有了一個(gè)真正而簡(jiǎn)單的認(rèn)識(shí)以后，我們下面就來(lái)看看Yui 3的簡(jiǎn)單用法：

一、調(diào)用方法：

既然我們是使用的Yui這個(gè)js庫(kù)，那么肯定第一步就是引用這個(gè)文件，剛才在上面已經(jīng)說(shuō)了我們要使用的是yui-min.js這個(gè)文件，當(dāng)然你可以對(duì)他進(jìn)行改名，你只需要到你下載的yui庫(kù)的文件中找到他，將其拷到你需要的目錄就OK啦，那么掉用方法的是：

在之間插入以下代碼：

<script src=”yui-min.js” type=”text/javascript”></script>注意：src后面的地址請(qǐng)根據(jù)實(shí)際情況填寫，當(dāng)然你也可以使用官方提供的地址，請(qǐng)看： <script src=”http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js” type=”text/javascript”></script>

我個(gè)人覺得如果你僅僅想試一下yui的功能，可以用用官方的地址，免得自己下載啦，嘿嘿！

 

二、實(shí)現(xiàn)我們的功能

當(dāng)我們已經(jīng)調(diào)用好Yui這個(gè)js庫(kù)以后，接下來(lái)就得看我們自己的了，如何通過(guò)Yui來(lái)實(shí)現(xiàn)我們想要的功能呢，嘿嘿，請(qǐng)看：

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

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

// 書寫你的js代碼

});

 

就是要使用Yui 3提供的方法，就必須得將他們寫在上面這個(gè)大括號(hào)之內(nèi)，不然無(wú)法使用。

2、Yui 3獲取對(duì)象的方法：她獲取對(duì)象的方法有很多種，下面我們來(lái)看看常用的幾種方法：（在使用這些方法的時(shí)候都需要在方法前加Y）

a、get()方法

get方法獲取id和class對(duì)象的方法：Y.get(”#id”);Y.get(”.class”);

注意，在括號(hào)中必須用引號(hào)將他們引起來(lái)，看看，如果你對(duì)CSS很熟悉的話，就應(yīng)該知道，我們?cè)跒閕d書寫樣式的時(shí)候前面用的是#，為class書寫樣式的時(shí)候前面使用的是.號(hào)。在Yui 3的get方法中也是這樣的。那么get方法獲取到的都是單個(gè)對(duì)象，還有就是如果你又想獲取一個(gè)對(duì)象，他又有Id又有class的呢，那也可以使用get方法：Y.get(”#id”).get(”.class”);這樣就可以啦。

b、all()方法

剛才我們看了get方法獲取的都是單個(gè)對(duì)象，那如果我們想獲取所有據(jù)有相同class的屬性的對(duì)象怎么辦，哈哈，不要急，Yui想到了，他提供了很多種方法，但是我覺得最簡(jiǎn)單的一種方法就是：Y.all(”.calss”);這樣就可以獲取到了所有據(jù)有class名稱的class的對(duì)象，注意，這里得到是一個(gè)數(shù)據(jù)。

 

3、addClass()

這個(gè)一看，就應(yīng)該明白了吧，我們經(jīng)常在js中都可能用到的為一個(gè)對(duì)象增加class，哈哈，在這里我們可以使用它啦，使用方法就是：myNode.addClass(’foo’);

 

4、styles()

光有了設(shè)置class還不行，因?yàn)橛袝r(shí)候我們還需要設(shè)置對(duì)象的style值，故而引入了styles()方法，使用方法：myNode.setStyle(’opacity’, 0.5);

 

5、Yui事件監(jiān)聽函數(shù)：

Y.on(事件,函數(shù),對(duì)象);

如果你對(duì)js比較熟悉的話，你應(yīng)該清楚，js中有事件監(jiān)聽函數(shù)，但是IE和DOM是有區(qū)別的，注意，Opera支持IE和DOM的兩種監(jiān)聽函數(shù)，以前為了兼容多個(gè)瀏覽器，我們需要單獨(dú)寫一個(gè)兼容的函數(shù)，而在Yui3不需要，如果你想使用的話，可以直接使用Y.on(事件,函數(shù),對(duì)象);

事件分為多種，一般我們經(jīng)常用到的是鼠標(biāo)與鍵盤：

鼠標(biāo)：click，dblclick，mouseover，mousedown，mousemove，mouseup

我們只需要將相應(yīng)的事件用引號(hào)包起來(lái)填入事件的值就行了。還有就是這里的對(duì)象可以接受單個(gè)的對(duì)象，他還可以接受數(shù)組，比如單個(gè)的id,我們可以使用#id,也可以設(shè)置id下的標(biāo)簽，#id li，還可以使用為多個(gè)對(duì)象設(shè)置，就是上面說(shuō)到的是數(shù)組方式["#id","#id1"]依次類推。

 

好了，今天就說(shuō)到這里，當(dāng)然啦，yui不僅僅只有這幾個(gè)方法的，還有很多，比如set，get,appendChild,test,removeClass,getXY,getX,gety還有很多很多，如果你通過(guò)我寫的這個(gè)文章感興趣的話，可以給我留言，我會(huì)繼續(xù)將yui的其他方法介紹給大家。

如果你的英文很棒，也可以去看看官方的相關(guān)資料，我上面的一些代碼有些是直接復(fù)制了官方上的相關(guān)代碼進(jìn)行解釋。

 

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

當(dāng)然注意拉，我今天說(shuō)的是全是yui3的一些方法，因?yàn)榍懊孢€有YUI2,我對(duì)此也一點(diǎn)不了解，直接進(jìn)入了3的學(xué)習(xí)，謝謝！