Yahoo! User Interface Blog (YUIBlog)

Mit YUI 2 auf der DuckDuckGo Search Engine

19. August 2010 um 05.41 Uhr von Gabriel Weinberg | In YUI Implementierungen | 2 Kommentare

DuckDuckGo ist eine Suchmaschine, die YUI nutzt ausgiebig. Hier ist, was sie insbesondere verwendet:

• ImageLoader. Matt Mlinac ist YUI 2 ImageLoader war die erste Sache, die ich umgesetzt und was ursprünglich süchtig mich auf YUI für dieses Projekt. DuckDuckGo hat Favicons neben den Suchergebnissen und hat oft "Zero-Klick Info" über Ergebnisse, die in der Regel enthält ein Bild . Ich wollte nicht diese Bilder mit den Ergebnissen konkurrieren beim Laden, als das Erzielen von Ergebnissen so schnell wie möglich ist das ultimative Ziel.

  Die ImageLoader Dienstprogramm übernimmt diese auch durch das Laden der Bilder nach dem Laden der Seite. DDG auch auto-Belastungen der nächsten Seite der Ergebnisse, wenn Sie nach unten scrollen. Manchmal sind die Favicons Icons sind deshalb verborgen, und mit ImageLoader ihre Last verzögert wird (manchmal auf unbestimmte Zeit) bis notwendig. Um dies zu erreichen, gibt es ein anderes Bild Gruppe pro (intern) Seite, jedes mit seinem eigenen auslösen.

    div.event = new YAHOO.util.CustomEvent ('it');
       var IG1 = new YAHOO.util.ImageLoader.group (div, 'click');
       ig1.addCustomTrigger (div.event);
       div.ig = IG1;
  

• Cookie. DuckDuckGo hat eine Menge von Einstellungen , die über Cookies und abwechselnd über gespeicherte URL params . Wenn Cookies verwendet werden, benutze ich Nicholas Zakas ist YUI 2 Cookie-Dienstprogramm , um problemlos und die Werte.

    YAHOO.util.Cookie.set (Cookie, den Wert {gültig bis: new Date ("12. Januar 2025"));}
     x = ki | | YAHOO.util.Cookie.get ("i"); 

• StyleSheet. Einige DDG ändern das Aussehen und Verhalten der Website. Diese Änderungen sind tatsächlich nach Laden der Seite über Luke Smith erreicht YUI StyleSheet Utility-2 . Einige dieser Änderungen sind unkompliziert und ich kann einfach die setStyle Dom-Funktion .

    YAHOO.util.Dom.setStyle ("b2", "Display", "Block"); 

  Andere erfordern eigentliche Klasse Veränderungen, die ich mit dem Dienstprogramm zu tun.

    . YAHOO.util.StyleSheet ('DDG') set ('ci.' {Display: "block"}).
               set (, {display: "block"} 'cid.').
               set (, {display: "block"} 'CI2.').
               enable (); 

• Dom. Ich benutze auch einige Funktionen in Matt Sweeney Basis YUI 2 Dom Komponente . I verwiesen setStyle oben, und ich auch den Zusammenhang getStyle , addClass und removeClass Funktionen. Darüber hinaus finde ich die getViewportHeight , getViewportWidth , getX und getY Funktionen unglaublich nützlich sein, um die Dinge funktionieren Cross-Browser, und jetzt auf mobilen Bildschirmen sowie.

• KeyListener. DDG hat eine Reihe von Tastenkombinationen , die Sie navigieren Ergebnisse ohne die Maus zu lassen. Ich benutze den YUI 2 KeyListener Komponente, um diese Verknüpfungen zu ermöglichen.

    kl14 = new YAHOO.util.KeyListener (Dokument {Tasten: [70]}, {fn: nicht}); kl14.enable (); 

• AutoVervollständigen. Im Moment arbeite ich über das Hinzufügen Suchvorschläge an die Suchmaschine, und wird mit Jenny Donnelly ist YUI 2 AutoComplete Komponente für die Front-End. Ich verstehe, dass AutoComplete immer in YUI 3 eingeführt bald. Alles andere benutze ich bereits in YUI 3 eingeführt, obwohl ich immer noch YUI 2. Allerdings werde ich die Erkundung der Migration auf YUI 3 bald.

Über den Autor: Gabriel Weinberg ist der Gründer der DuckDuckGo Suchmaschine, von Valley Forge, PA basiert. Gabriel hat ein Startup-Gründer seit über zehn Jahren, und seine letzte Firma wurde 2006 verkauft. Gabriel studierte an der MIT in Physik und der Technologie-und Policy Program.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!