Το Yahoo! Blog User Interface (YUIBlog)

Χρήση Loader σε Quorus

Σήμερα, θα ήθελα να μιλήσω για YUI φορτωτή και πώς εμείς, σε Quorus, Inc , χρησιμοποιήστε το για να παρέχει σε τρίτους δικτυακούς τόπους με νέα χαρακτηριστικά για τη ζήτηση.

Ο κώδικας που γράφουμε τις εξουσίες χαρακτηριστικά στις σελίδες τους άλλους λαούς », δηλαδή είμαστε στην διόλου αξιοζήλευτη θέση της ύπαρξης, όχι μόνο δεν ασκεί έλεγχο στο περιβάλλον του προγράμματος περιήγησης, αλλά βαρύ περιορισμούς στο πώς χρησιμοποιούμε το ίδιο το έγγραφο. Οι πελάτες μας βάλετε ένα Quorus σενάριο εκκίνησης στις σελίδες τους? Ό, τι άλλο απαιτείται για τη λειτουργία μας φορτώνεται δυναμικά και σε πρώτη ζήτηση. Πηγαίνουμε στην ηρωική μήκη για να βεβαιωθείτε ότι τα στοιχεία, στυλ μας, και τα σενάρια δεν μεταβάλλουν τη συμπεριφορά τίποτα δεν είμαστε υπεύθυνοι.

Ξεκινήσαμε την παρούσα βάση τον κωδικό μας πριν από δύο χρόνια, όταν YUI 3 έπαιρνε μόνο σχήμα. Ήταν μια ριψοκίνδυνη απόφαση κατά την ώρα να δεσμευτούν σε ένα κομμάτι του κώδικα που δεν θα χτυπήσει βήτα για αρκετούς μήνες. Εκ των υστέρων δεν μπορώ να φανταστώ πώς θα έχουμε καταφέρει ό, τι έχουμε χωρίς αυτό. Δεν έχω δει κανένα άλλο πλαίσιο που έχει στοιχεία που πλησιάζει την εξουσία του φορτωτή, Ιδιότητα , και CustomEvent .

Το σενάριο εκκίνησης Quorus παρέχουμε στους πελάτες μας κάνει σχεδόν τίποτα. Η δουλειά του είναι απλώς να φορτώσει τον πυρήνα της πλατφόρμας μας, χωρίς να εμποδίζει το υπόλοιπο φορτίο της σελίδας, και να περιμένω στην ουρά κάθε API κλήσεις μέχρι να έχουμε κάνει. Αυτό το script του αρχείου πυρήνα, που ονομάζεται stage2, inlines yui , loader , και oop , καθώς και αρκετά εξυπνάδα να εγκαταστήσετε επιπλέον βιβλιοθήκες να ανταποκριθούν στις κλήσεις API, ο χρήστης κάνει κλικ, και άλλες συνθήκες στο λειτουργικό περιβάλλον. Οι περισσότεροι άλλοι πόροι που εξυπηρετούνται από ένα προσαρμοσμένο σύνθετο διακομιστή που εξυπηρετεί έθιμο Quorus και το απόθεμα μονάδων YUI.

Bootstrap ουρές μέχρι API κλήσεις που έγιναν στον κώδικα του δικτυακού τόπου υποδοχής από τη στιγμή που φορτώνει και όταν είμαστε έτοιμοι να προχωρήσουμε σε μια σειρά σχετικά με την παγκόσμια αντικείμενο μας, QUORUS:

 QUORUS._callbacks = []; QUORUS.use = function () { // turn the arguments object into a regular array, // so that it can be stored safely var args = Array.prototype.slice.call(arguments, 0); QUORUS._callbacks.push(args); }; 

Μόλις είμαστε έτοιμοι να επεξεργάζονται τα δεδομένα API κλήσεις, stage2 τρέχει ένα προς ένα σε χρονικά όρια. Αυτό εξασφαλίζει ότι αποφέρει τον έλεγχο τακτικά πίσω στο πρόγραμμα περιήγησης, η οποία καθιστά την εμπειρία του χρήστη ανταποκρίνεται περισσότερο. Η συμπεριφορά είναι πολλά όπως Y.AsyncQueue, αλλά απλή και δεν απαιτεί YUI να φορτωθεί:

 // Put the real 'use' function in place for any subsequent calls: QUORUS.use = function (feature, callback) { YUI.use('module-that-provides-the-feature', function (Y) { // find the API for the requested feature, and pass it to the callback callback(Y.APIs[feature]); // process another pending API call, if any: setTimeout(processAPICall, 0); }); }; // Play catch-up, running each callback in sequence: function processAPICall () { var callback = QUORUS._callbacks.shift(); if (callback) { QUORUS.use.apply(QUORUS, callback); } } // Start processing the queue: processAPICall(); 

Η bootstrap αρχείο είναι, από αυτό το σημείο, ως επί το πλείστον αμετάβλητο: είναι κάτι που το χέρι μακριά σε έναν πελάτη, ο οποίος μπορεί να απαιτήσει ένα μήνα ή περισσότερο για την ανάπτυξη κάθε νέα έκδοση τους δώσαμε-μια απίστευτα μεγάλο χρονικό διάστημα για μια ευέλικτη εταιρεία εκκίνησης. Το stage2 αρχείο, εν τω μεταξύ, είναι μικρό, τα φορτία από τη δική τους διακομιστές μας, και έχει μια σύντομη διάρκεια ζωής cache. Αυτό εξασφαλίζει ότι κανένας χρήστης δεν θα έχει τέλος μια παλιά έκδοση για περισσότερο από μερικά λεπτά. Σχεδόν όλοι οι άλλοι πόροι που χρειαζόμαστε είναι μόνιμα cacheable βιβλιοθήκες JavaScript και CSS αρχεία.

Όταν κυκλοφορήσει μια νέα έκδοση του κώδικα μας, stage2 κατευθύνει αυτόματα προγράμματα περιήγησης για να ξεκινήσει η λήψη από μια νέα θέση, εξασφαλίζοντας ότι θα χρησιμοποιεί μόνο το νεότερο κώδικα. Αυτή η ρύθμιση μας επιτρέπει να αναπτύξετε γρήγορα τις αλλαγές χωρίς να εξυπηρετούν τα περιουσιακά πιο συχνά από ό, τι είναι απαραίτητο. Όχι μόνο αυτό διατηρηθεί το κόστος χαμηλό εύρος ζώνης μας, αλλά παρέχει μια καλύτερη εμπειρία χρήστη: οι πόροι αποθηκευμένο φορτώνονται πολύ γρήγορα, ενώ η φόρτωση της σελίδας.

Αν ξεκινούσαμε codebase μας σήμερα, με το όφελος της Γκαλερί YUI , υπάρχουν μια σειρά από παράγοντες που θα μπορούσαν να χρησιμοποιήσουν για να κάνουν τη ζωή μας ευκολότερη. Ένας από αυτούς είναι ο Eric Ferraiuolo της βάσης Διευθυντής συνιστωσών , που βοηθά με τα εξαρτήματα των καλωδίων (τυπικά widgets) για τη ζήτηση. Ένας άλλος μπορεί να είναι Lite αποθήκευσης , για να μας βοηθήσει να διατηρήσει την κατάσταση εφαρμογών σε ολόκληρη την φόρτωση της σελίδας.

Πολλές ευχαριστίες στην ομάδα YUI για το σπουδαίο έργο τους, και στην κοινότητα για τη συμβολή τους. Αν θέλετε να διαβάσετε για τις προσεγγίσεις μας να Sandboxing ή να φορτωθεί το συντονισμό ασύγχρονα στοιχεία, παρακαλώ επιτρέψτε μου να ξέρω στα σχόλια!

Περίπου ο συντάκτης: Peter Abrahamsen γράφει Ρουμπίνι και JavaScript, διαχειρίζεται υποδομή server, καθώς και μελέτες με επίκεντρο τον χρήστη σχεδιασμός στο Σιάτλ, Ουάσιγκτον, ΗΠΑ. Μπορεί να βρεθούν στο IRC ως Rainhead.

Βρείτε συζητήσεις: Bloglines | Technorati

Μοιραστείτε και κατ 'επέκταση: Del.icio.us Σελιδοδείκτης με | Digg it! | Reddit!