YUI 3：更輕，更快，易於使用

鑰匙要點

YUI的完整重寫
• YUI 3，其目標是比其前任YUI 2更輕，更快，更易於使用。重寫地址在內部機制中的不一致和隨著YUI 2的API的不一致。
YUI 3庫引入了一個新的插件體系結構，該插件構建允許用戶將自己的功能添加到節點和小部件。該庫還引入了一個新的全局對象名稱YUI，替換了舊的Yahoo全局對象。這使YUI的較舊版本可以與YUI 3並存。
• > YUI 3具有更清潔，更簡潔的編碼樣式和類的新層次結構，可以在所有YUI組件中建立一致的內部力學和API。該庫還通過將功能分為較小的子模型來解決僅用於一兩個功能的庫的重量問題。 >
庫的新版本使用節點實用程序為DOM引入了一個新的抽象層，從而簡化了DOM交互。 YUI 3還使用事件外牆的想法將事件管理歸一化，該活動會照顧所有瀏覽器的標準化。
> YUI 3為Web開發提供了一個更靈活，更有效的庫，其中包括新的事件系統，新的模塊系統和新屬性系統。它還介紹了新的實用程序和小部件，例如用於DOM操作的節點和Nodelist，io for Ajax請求以及用於創建可重複使用的UI組件的小部件。
> 2008年8月，Yahoo用戶界麵團隊發布了YUI 3的第一個預覽版本，這是從頭開始對YUI的完整重寫（第一個Beta版本將在下周某個時候發布！）。 您可能會問，
• >他們為什麼要重寫一個已經有用且成熟的庫？好吧，隨著Yui 2的成熟，建造的方式也進化了。 結果，從一開始就存在的部分YUI與以後添加的部分完全不同。結果是該庫在內部力學和API中都包含不一致之處。因此，團隊決定將圖書館帶回基礎知識並從頭開始重建。他們的計劃是運用過去三年來從事YUI的經驗，並建立一個更輕，更快且易於使用的圖書館。最後，為了使庫盡可能靈活，YUI 3引入了所有新的插件體系結構，使您可以將自己的功能添加到節點和小部件。稍後，我們會看到一個這樣的插件。首先，讓我們看看YUI 3中的新功能。

再見yahoo，你好yui

在查看YUI 3代碼示例時，您會注意到的第一個位置是它使用的新全局對象名稱。舊的Yahoo全球對像已被新的YUI全球對象替換。它的重命名是有兩個原因：用戶反饋表明，有些公司不喜歡在其代碼中使用Yahoo名稱；但更重要的是，它允許YUI的較舊版本通過具有不同的變量名稱與YUI 3共存。

>

以及被重命名的全球對象，其用法基於與2.x中的根本不同的原則。對於初學者而言，它不再是靜態對象，而是執行時返回本身實例的函數。現在，YUI的每個執行都會返回一個獨立的環境，在該環境中，庫的版本和其所有加載組件的版本都可以運行，而不會干擾頁面上的任何其他實例。通過擴展，這也意味著庫的多個版本可以通過實例化YUI對象的不同版本在同一頁面上共存。下面的示例說明了以下原則：

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

>在此執行YUI（），該YUI（）返回了執行使用方法的庫的實例。至少需要兩個參數：庫組件，然後在所有操作加載後運行的回調。在上面的示例中，傳遞的前兩個參數是要加載的庫組件的名稱。最終參數是我們的回調函數，它接收一個對象（示例中命名為y） - 這是包含所有已加載組件的庫的實例。因此，就像上面示例中的註釋一樣，可以在y.dd上找到拖放組件，並且可以在y.anim。

>清潔劑，更簡潔的編碼樣式

該團隊所遇到的主要問題之一是確保所有YUI組件的一致內部力學和一致的API。因此，Yui 3現在擁有一個新的類別的層次結構，可以允許這一點。例如，屬性類提供GET和設置方法，初始配置支持以及將更改事件屬於繼承該類的類。還有一個基類從屬性繼承並提供了一些定型對象的功能，例如所有從其繼承的類的初始化器和destructor方法。最後，他們建立了一個從基礎繼承的小部件類，並提供了通常由小部件使用的通用功能，例如渲染方法 - 一種用於管理小部件渲染的通用模型 - 視頻控制器結構，並支持對通用窗口小部件的屬性。它還提供插件註冊和激活支持。

>

> yui 3克服的另一個問題是，您的腳本需要在其中只包含一個或兩個功能的庫中加載庫的一塊庫。例如，在YUI 2中，您必須包括整個連接實用程序（重新升級時重量為38kb，12kb）才能進行一些XMLHTTPREQUEST調用。 YUI 3通過將功能分為較小的子模型來解決此問題。這樣一來，就無需僅僅以xmlhttprequest的調用來撤回整個實用程序。在YUI 3中，您只需拉下IO實用程序的io-base模塊，就可以重量為19kb（4KB縮小）來進行XMLHTTPREQUEST調用。實際上，整個IO實用程序重29KB（7KB縮小），並且比其前身更具功能豐富。例如，現在可以使用IO-XDR子模塊進行跨域或XDOMAINREQUEST。

選擇和鏈接

YUI 2引入了選擇引擎，但在圖書館的一生中確實有點了。結果，整個庫是圍繞老式元素獲取技術構建的。換句話說，每當需要參考時，您要么通過元素的ID，要么通過元素本身，就這樣。但是，使用YUI 3，選擇器引擎就會直接構建到庫的核心中。它滲透到其中的每個部分，因此您幾乎可以在需要元素參考的任何地方傳遞CSS選擇器字符串。除了構造函數外，還包括設置活動處理程序和與公用事業合作。這是一個示例，它使第一個元素與班級作者拖動：

>
var dd = new y.dd.drag（{
>    節點：'.author'
}）; 每當yui 3沒有邏輯值返回時，它都會試圖使方法可鏈。這是一個在行動中的示例：

>在這裡，我們引用了第一個元素，其中class name作者並在其上設置了一個光標樣式。

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

>節點和事件faã§ades

YUI 3帶有節點實用程序為DOM引入了一個新的抽象層。 YUI 3沒有返回對DOM元素的引用，而是返回節點和節點，這極大地簡化了DOM相互作用。這是因為節點包括與它們互動所需的所有功能，而不必去分開功能。此外，在需要的情況下，節點暴露的方法會照顧瀏覽器歸一化，因此與它們一起工作的經驗盡可能無痛。這是您必須在YUI 2中寫的，才能將類名稱添加到一個元素：>

在yui 3中，這變成了：

>

Y.get('.author').setStyle('cursor', 'move');

實際上，如果該節點已經在手中，則在一個名為navproducts的變量中說，那麼您只能做到這一點：

>

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

YUI 3簡化了與DOM的交互，並且還使用事件fa§ade的想法進行了標準化事件管理。每個事件聽眾都會收到一個事件faã§ade，該事件照顧所有瀏覽器的歸一化。因此，例如，在YUI 2中，您需要以下代碼才能“防止默認”：>

Y.get('.author').setStyle('cursor', 'move');

>現在您需要做的就是：

YAHOO.util.Dom.addClass("navProducts", "selected");

更重要的是，這種行為也延伸到純自定義事件，因此即使這些事件也可以接收事件，從而使它們可以防止默認情況並停止傳播。

>

下一步：讓我們將其中一些新方法付諸實踐。

>

給我看錢！

>

>我已經構建了一個簡單的示例頁面，演示了要使用的YUI 3多麼容易和強大。要在文章中節省空間，我將避免向您展示所有標記和代碼，但是您可以在示例頁面上查看完整源。

我要做的第一個任務是加載一個YUI的實例，其中包括動畫實用程序，slider窗口小部件，Menunav節點插件和拖放＆Drop＆Drop Utilities。 Yui去並從Yahoo服務器中獲取必要的文件及其依賴關係。然後，它返回帶有已加載組件的YUI實例為回調函數，該函數將其接收到名為y的變量：

>

Y.get("#navProducts").addClass("selected");

接下來，我創建一個簡單的動畫，以將頁面的內容反彈到視圖中。為此，我實例化了一個新的動畫對象。我將其傳遞給具有ID主體的元素的引用，並告訴它將最高值從當前所在的位置為0（現在為-1000px，如示例頁面的標記中指定）。我還指定動畫應花費三秒鐘，並且應該使用Elasticout放鬆方法。一旦對象實例化，這只是使用運行方法運行它的簡單情況：>

接下來，我設置了一個滑塊對象，以便用戶調整頁面的基本字體大小。 YUI的字體CSS（示例頁面中包含）將頁面的基本字體大小設置為13像素。它通過在體元元素上設置字體大小值來實現此操作，從中計算所有其他字體大小。這是我們要操縱的目的，以更改整個頁面的字體尺寸。

navProducts.addClass("selected");

>

我抓住一個節點引用，用於身體元素，該引用將與滑塊一起使用。然後，我創建一個滑塊小部件。我將最小值設置為13，最大值將最大值設置為28，因為我希望字體大小保持在這些值之內。然後，我確保滑塊的導軌尺寸為100像素寬。最後，我設置了滑塊的拇指圖像（直接從Yahoo的託管服務器上加載）：

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

>一旦滑塊實例化，這只是呈現它的簡單問題。我通過調用Slider的渲染方法使用我想要呈現的元素的類名來調用Slider的渲染方法。 Slider Widget將在與該類名稱匹配的DOM中的第一個元素中呈現

Y.get('.author').setStyle('cursor', 'move');

>現在剩下的唯一要做的任務是將滑塊連接起來，以便實際調整頁面的字體大小。我是通過掛在事件後來做到的。 YUI 3具有標準的事件後，您可以與先前版本相比，可以使事件處理變得容易得多。現在，每當射擊ValueChange事件時，我們的身體元素的FontStyle值就會更改：

YAHOO.util.Dom.addClass("navProducts", "selected");

>我還設置了一個導航菜單。該頁面的內容準備就緒後，我將Menunav節點插件插入NAV節點。然後，它會根據發現的標記自動設置導航菜單 - 就像那樣簡單！這是代碼：

Y.get("#navProducts").addClass("selected");

>最後，我通過簡單地實例化新的拖放對象並將其引用對我的圖片的班級名稱來使您的圖片真正可拖動。 一旦創建對象，圖像就可以拖動。作為額外的觸摸，當鼠標懸停在圖像上時，我會更改光標，以便顯然圖像是可拖動的：

navProducts.addClass("selected");

摘要

因此，如您所見，Yui 3與其前身完全不同。除了新的語法外，您還可以獲得更快，更輕鬆，更輕鬆，更靈活的庫 - 準備好進行您最雄心勃勃的網絡項目。

>

看到這是一個底漆，我們幾乎沒有刮過YUI 3的表面。有關更多閱讀，請查看YUI 3.x預覽版2頁，Satyen Desai在YUI 3上的演示和YUI 3 Forum。

經常詢問有關YUI 3

的問題

> YUI 3中的新功能是什麼？其中包括一個新的事件系統，該系統允許更靈活的事件處理，一個新的模塊系統，簡化了加載和使用模塊的過程，以及一個新屬性系統，該系統為使用對象屬性提供了一致的API。此外，YUI 3還包括許多新的實用程序和小部件，例如用於DOM操作的節點和節點符，用於AJAX請求的IO和用於創建可重複使用的UI組件的小部件。

>

>如何創建YUI 3模塊？模塊的依賴項，然後實現模塊的功能。模塊的依賴項被指定為模塊名稱的數組，並且將模塊的功能實現為接收YUI實例作為參數的函數。此功能是定義模塊的方法和屬性的地方。

>

> YUI 3中的新事件系統如何工作？

> YUI 3中的新事件系統基於事件目標和事件處理程序的概念。事件目標是一個可以發出事件的對象，事件處理程序是對這些事件做出響應的函數。您可以通過擴展EventTarget類來創建事件目標，並且可以使用ON（）方法將事件處理程序附加到事件目標。該系統允許在如何處理事件的方式上具有高度的靈活性。

>

> YUI 3中的屬性系統的目的是什麼？它允許您定義具有特定特徵集的屬性，例如它們是僅讀取還是僅寫入，它們是否具有默認值，以及在修改其值時是否應該觸發更改事件。該系統使使用定義明確的接口創建對像變得更加容易。

如何將YUI 3中的io實用程序用於AJAX請求？

>

YUI 3中的IO實用程序提供了一個簡單且一致的API來製作AJAX請求。您可以使用io（）方法發送請求，指定URL，請求方法（獲取或發布）以及隨附請求發送的任何數據。 io（）方法返回一個事務對象，您可以使用該對象來處理響應。

如何使用YUI 3中的節點和節點級實用程序進行DOM操作？

YUI 3中的節點和節點UTITIS在Yui 3中提供了一個簡單且一致的API進行操作。您可以使用y.one（）方法獲取對單個DOM元素的引用，而y.all（）方法可以獲取代表元素集合的節點符。這些方法返回節點和結節式實例，這些實例提供了許多方法來操縱它們所代表的元素。

>如何使用YUI 3中的窗口小工具來創建可重複使用的UI組件？

YUI 3中的窗口基準提供了創建可重用UI的框架。小部件本質上是封裝特定功能的視覺組件。您可以通過擴展小部件類並實現定義小部件的行為和外觀的方法和屬性來創建小部件。 >>如何加載和使用YUI 3？ 加載以及使用YUI 3中的模塊加載和使用模塊。此方法將其作為參數為加載的模塊的名稱，並在加載模塊後執行回調函數。回調函數接收一個YUI實例作為參數，該參數提供對加載模塊的訪問。 >>我如何使用y.Error（）方法完成YUI 3中的錯誤處理中的錯誤。此方法使用指定的消息拋出錯誤，並選擇記錄錯誤並停止執行當前代碼塊。您可以使用try/catch塊抓住並處理Y.Error（）丟棄的錯誤。 >

我如何使用y.extend（）方法在yui 3中擴展YUI 3？該方法將要創建的類的構造函數，類的構造函數以及包含用於添加到新類的方法和屬性的對象。新類繼承了其擴展的類的所有方法和屬性，並用第三個參數中指定的方法和屬性添加或覆蓋它們。 >>>>>。

以上是YUI 3：更輕，更快，易於使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！