Yahoo!用戶界面博客（YUIBlog）

實施重點：生命哲學，快速作出的事情（GTD）的Web應用程序使用YUI 2內置

關於生命哲學

生命哲學是一個強大的個人的組織工具，緊跟流行的“由大衛艾倫的方法完成的事情。 隨著生命哲學，你到DOS在線，GTD的格式，並準備從任何地方訪問或更新。

為什麼銳？

在生命哲學，我們一直在使用YUI的相當嚴重，因為圍繞版本2.2.0 - 三年左右的時間。 最初，我們最終選擇可用的JavaScript框架YUI的主要有兩個原因：文檔和代碼尺寸。 為了這一天，我覺得銳繼續導致雙方在這些領域的包裝。

隨著越來越複雜的日常的用戶界面，另一個 YUI的主要好處是可用的公用設施和部件的數量。 在生命哲學，我們正在充分利用，使用以下組件（2.8.0r4版） ：動畫，自動完成，瀏覽器歷史記錄，日曆，壓縮機，連接，餅乾，CSS的字體 ，CSS復位，數據源， DOM ， 拖放元素事件 ， JSON ， 記錄器 ， 菜單 ， 選擇 ， SWF ， 工具提示 ， 雅虎 。

痴迷的性能和響應

早在生命哲學，我們決定去上的首次訪問我們的主要應用最必要的組件和數據加載的潰敗。 這樣做有兩個原因，UI響應和方便離線安裝。 讓我們的重點放在響應。

雖然在理論上它的簡單，JavaScript的處理，基本上我們的UI一代都肯定增加了一些複雜性。 例如，附加和遍歷 DOM的速度是至關重要的。 一個根元素添加到簡單的getElementsByClassName getElementsByClassName功能顯著提高性能。 有時候我們不得不犧牲速度的綱領性方便。 雖然YUI 2選擇實用程序可以非常強大，我們最初發現getElementsByClassName的要快。 （銳2的最新版本，選擇實用性能似乎已經增加了不少，但我們仍然默認getElementsByClassName時可以提高性能-尤其是在瀏覽器原生支持，這2 YUI的DOM工具利用。 ）

銳2自動完成的生命哲學的新發布的功能，在過去一年左右的強國之一，但它也一直在響應和瀏覽器CPU使用率方面最難的實現之一。 在我們的初步嘗試，每一次，我們需要一個新的自動完成控制輸入，我們將創建一個新的實例，一旦不再需要摧毀它。 這通常發生時，從“頁”移動到“頁面”（請記住，我們的“頁面”都只是客戶端生成的屏幕）。 Internet Explorer中掙扎，經常掛在100％的CPU，並有效地使計算機停止。 這迫使我們要關閉 IE瀏覽器的自動完成支持。 兩個關鍵的變化幫助我們創建一個更高效的自動完成。 首先，我們創建短短數可自動完成從“頁”共享“頁”的通用實例。 然後只更新需要的是一個新的DataSource，在我們的實現需要較少的CPU的努力。 第二，要注意的maxResultsDisplayed屬性。 因為我們允許完整的自動完成列表中沒有顯示任何輸入（我們還增加了向下箭頭鍵來顯示列表），我們初步確定maxResultsDisplayed maxResultsDisplayed一個任意大的數字，像萬。 只需更改這個數字到我們的實際數據源導致顯著的CPU性能提升長度。

監控前端的性能，我們使用了YUI 2 Logger的控制。 當我們在調試模式下，輸出的日誌更新，詳細說明 JavaScript處理的各個步驟。 有關記錄儀的一個偉大的事情是事實，即它保留了，當它被最後更新的時間戳。 這已經時非常有用，試圖找出我們的代碼中的瓶頸。 更多的服務器端性能監控， YSlow的也非常有助於確保我們生成HTTP請求盡快。

最有趣的實施功能

就個人而言，我最開心的實施阻力和生命哲學的下降（ 使用YUI 2拖放） 。 拖放實際上，在相同拖動元素的生命哲學的兩個目的。 首先，我們使用手動重新排序列表;其次，我們使用列表之間移動任務。 而要做到這一點，兩個不同的拖放目標“區”：一是在內容列表中的元素，在左側邊欄菜單的列表元素之一。

這裡有趣的部分是兩個不同區域的功能完全不同。 在內容區域中拖動時，我們要拖動元素不斷移動徘徊的元素，並追加在新位置的阻力元素。 在菜單方面，我們不希望任何轉移，但我們想強調的菜單選擇，我們上空盤旋。 下面是一個從 onDragOver方法的代碼片斷：

如果（destElNodeName ===“李”）{
	 orig_p = srcEl.parentNode;
	 P = destEl.parentNode;
	
	 （！_D.hasClass（p.parentNode“資產淨值”））{
		 （this.goingUp）{
			 p.insertBefore（srcEl，destEl）;
		 }否則 {
			 p.insertBefore（srcEl，destEl.nextSibling）;
		 }
	 }否則 {
		 _D.removeClass（_S.query（“＃sidebar的資產淨值：不（ALT）李”），“拖”）;
		 _D.addClass（destEl，“拖”）;
	 }

	 _DDM.refreshCache（）;
 }

建築與 YUI壓縮的生命哲學組件

我們與性能的痴迷，我們創建了一個Web前端使用YUI壓縮機聯同其他一些腳本來構建整個生命哲學所使用的各種JavaScript和CSS組件。 這將確保我們保持最小的代碼的足跡，我們的網站的主要部分。 正如你可能知道，保持盡可能低的HTTP請求幫助頁面加載時間，所以結合 JavaScript和CSS文件，在可能的情況下可以幫助很大。

這裡是必要的一些背景。 生命哲學有其自己的核心JavaScript實用工具和CSS，跨所有的網站的主要部分共享設置。 每一個人的部分（如主應用程序，iPhone優化的應用程序，或營銷網站）有其特定的JavaScript和CSS。

所以構建過程基本如下：首先，全球的JavaScript和CSS文件，縮小的使用YUI壓縮。 然後，每一節，各種 JavaScript和CSS文件是縮小的，然後與全局文件結合起來，創造一個單一的文件。 此外，每節只需要某些組件的YUI的，所以每個所需的部分合併成單一的YUI文件，進一步減少了所需的文件的數量。

下一步是什麼？

未來使用YUI的生命哲學的重大項目將升級到了 YUI 3框架。 版本3.1.0的能力輕易使用傳統的2 YUI的組件，它的時間，使移動。

如果你有興趣學習更多關於生命哲學，請檢查我們的網站 ： www.vitalist.com。 此外，感覺免費電子郵件在我們support@vitalist.com的任何問題，你可能有。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us | Digg它！ | 書籤交易！