2011 »יולי» ממשק המשתמש Yahoo! בלוג (YUIBlog)

Yui 3.4.0 שחרור תצוגה מקדימה 3 זמינה כעת על CDN

28 ביולי, 2011 בשעה 12:39 על ידי ג'ורג' Puckett | ב פיתוח | 4 תגובות

צוות Yui השלימה רק ספרינט הפיתוח הסופי לשחרור 3.4.0. בשלב זה אנו רואים את הקוד המלא תפקודית. אנחנו מתכננים להוציא ספרינט הבא שלנו מתמקדים בסיבוב הסופי של בדיקות ויצירת דוגמאות נוספות ותיעוד. אנחנו פרסמו FC (תפקודית מלאה) כדי לבנות CDN לחקר הקהילה משוב. אתה יכול לגשת שחרור על http://yui.yahooapis.com/3.4.0pr3/build/yui/yui-min.js .

יש כמה אזורים מסוימים של הספרייה שבה נשמח לקבל משוב הקהילה:

מטעין יש לו עדכון משמעותי עבור 3.4.0. אם אתה עושה מפרטים לטעון ידנית דרך use("*") או לעשות שימוש תצורות submodule, היינו מאוד מעריך את זה שאתה מנסה את הקוד שלך עם Loader חדשה כדי להיות בטוחים שאנחנו כראוי לטיפול בכל המקרים השימוש. לקבלת מידע מפורט יותר על השינויים מטעין במהדורה זו, עיין לכתוב בלוג המתאר 3.4.0 שינויים מטעין .
לוח שנה לוח פועלים באופן תקין לחלוטין ומוכן לשימוש מפתח.
גרפיקה:. כבר כמה שינויים ב-API כמה שישפיעו על כל קוד ניסיוני כתוב על ה-API גרפיקה מופץ במהדורה PR2 getShape() השתנה addShape() . היו גם תחליפים תכונות שונות.
המעבר: מעברים הילידים נתמכים כעת ב-Firefox.
WidgetButtons כבר פורסמו כהמשך יישומון חדש המאפשר לך למקם css-מנוסח כפתורים בכותרת העליונה והתחתונה של כל יישומון המיישמת תמיכה מודול רגיל.
יישומון-plugins לערוץ ו-Widget AutoHide הומרו לשלוחות.
יישומון: תמיכה נוסף עבור להרוס (נכון) אשר תסיר ולהרוס את כל בלוטות הילד (לא רק boundingBox ו contentBox) הכלולים boundingBox של ווידג'טים. להרוס () תשמור על התנהגות הנוכחי בשל העלות זמן ריצה גבוהה פוטנציאל להרוס את כל בלוטות הילד. אם להרוס יישומונים ביישום או מפתח ווידג'ט מותאם אישית, את עזרתך בבדיקת שינוי זה יהיה מוערך.
ScrollView תומך כעת ההחלפה אנכי, כולל תוסף scrollview-list להוסיף classnames CSS על רשימת המרכיבים המיידיים, כמו גם תיקוני באגים כמה refactoring
יישום המסגרת: אנחנו רוצים להרחיב את כנה תודה לכל היזמים בקהילה אשר לקחו את הזמן כדי לבדוק כונן המסגרת App חדש. קיבלנו משוב מצוין לאחר שחרורו PR2. נא להמשיך לחקור רכיבים אלה ושלח לנו תצפיות והצעות.

אתה יכול לקבל מידע נוסף על התוכן של גרסה זו על ידי עיון באוסף היסטוריה ו רשימה מלאה של הכרטיסים הנידונות PR3 . נא להגיש בקשות שיפור, באגים ב רגרסיות באתר כרטיס YUILibrary.com .

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

Yui: שעות פתיחה ה 'יולי 28

25 ביולי 2011 בשעה 10:56 על ידי לוק סמית | ב פיתוח , שעות פתיחה | 2 תגובות

`Y.Calendar` מגיע 3.4.0

לוח השנה הוא אחד יישומונים יותר הפופולריים שלנו במשפחה Yui 2, וזה מה שהופך את הופעת הבכורה שלו על ארכיטקטורה Yui 3 ב 3.4.0. אלן רבינוביץ הוא בעל מרכיב ומחבר ויהיו בכוננות שאציג לפניה לנו האהוב ישנה זו, מראה כמה גישות חדשות לבעיות העומדות בפני 2.x לוח שנה. אני מתלהב במיוחד על תמיכה לבינאום, אבל את הכללים החדשים גם עיבוד מרתק למדי.

תיכנס, ולהביא שאלות תאריך בורר, אירועים בלוח השנה, ייבוא מ-iCal-and-איפור פנקייק שלך ובקשות תכונה איתך כמו שאנחנו בשר עכשיו ובעתיד Y.Calendar . (לא, זה לא יהיה לייבא iCal, אבל אם מישהו רוצה ליצור מודול גלריה לאלף את החיה, יש בטוח יהיה כרטיס YUIConf יצא לך מזה ;))

חזרנו לזמן הרגיל שלנו השבוע, אז נראה לך חבר ב 10:00 PDT.

זמן & פרטים

אנחנו נהיה באינטרנט 10:00-11:00 PDT יום חמישי. את פרטי החיבור כרגיל.

לחייג אל 1-888-371-8922 (סקייפ עובד נהדר מחוץ לארה"ב המשתתפים *)
הקש את הקוד משתתף 47188953 #
הצטרפות שיתוף מסך הפעלה (זה יבקש ממך להתקין את תוסף Adobe להתחבר אם זו הפעם הראשונה שבה אתה משתמש בו)

הערה: כי זה קו הכנס פתוח, אנו מבקשים המתקשרים להשתיק הקווים שלהם אלא אם כן הם משתתפים בדיון פעיל.

* - אם סקייפ היא לא אופציה, שלח לי או לתפוס אותי (ls_n) ב Yui # ערוץ IRC על FreeNode למספר מקומי.

הקלטה

תודה לכולם על קורא! ההקלטה של הפגישה המקוונת זמין כעת.

איכות גבוהה, iPhone / iPad תואם, ההקלטה להורדה כאן .

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

Yui: שעות פתיחה יום חמישי 21 ביולי

19 יולי 2011 בשעה 2:16 בבוקר על ידי לוק סמית | ב פיתוח , שעות פתיחה | 12 תגובות

DataTable עדכון וגלריה ראווה

מחזור 3.4.0 שחרורו מגיע קרוב ויהיה ארוז עם כל מיני תכונות נהדרות, אבל מדבר בפשטות, DataTable לא קיבל כמוקד פיתוח כמה שהיא צריכה. היו כמה תיקוני באגים, אם כי, כמות נכבדה של תכנון השינויים ממוקדים 3.5.0 ו ההתחלה רבה במעורבות בקהילה עם התפתחותו.

אנו יודעים כי DataTable הוא יישומון חשוב מאוד עבור הרבה לקוחות, כך אנו מבינים את עלות עיכוב פיתוח ממוקד. שעות פתיחה זה יהיה עדכון על מה העבודה המתבצעת על 3.4.0, מה מתוכנן 3.5.0, ו מבוא עבודה מדהימה שנמצאת החלו לצוץ בגלריה להוסיף תכונות ולתקן באגים עבור DataTable (ו המשפחה שלה לתמוך כיתות).

אנחנו נהיה מקוון שעה מוקדם יותר השבוע לטובת אימון ברוסנן (aka, mosen מ # Yui), מי סיפק מספר התיקונים גלריה נהיה מבט על. אחרת, נצטרך # other תושבים Yui ותורמים גלריה המציגה את מרכולתם. אם יש לך פתרון DataTable או עבודה בתהליך תרצה לשתף, בבקשה ליידע אותי כדי שאוכל לחסום את לוח הזמנים כדי להתאים את הכל (ls_n ב # Yui או בטוויטר ).

זמן & פרטים

אנחנו נהיה באינטרנט 09:00-10:00 PDT יום חמישי. את פרטי החיבור כרגיל.

לחייג אל 1-888-371-8922 (סקייפ עובד נהדר מחוץ לארה"ב המשתתפים *)
הקש את הקוד משתתף 47188953 #
הצטרפות שיתוף מסך הפעלה (זה יבקש ממך להתקין את תוסף Adobe להתחבר אם זו הפעם הראשונה שבה אתה משתמש בו)

הערה: כי זה קו הכנס פתוח, אנו מבקשים המתקשרים להשתיק הקווים שלהם אלא אם כן הם משתתפים בדיון פעיל.

* - אם סקייפ היא לא אופציה, שלח לי או לתפוס אותי (ls_n) ב Yui # ערוץ IRC על FreeNode למספר מקומי.

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

Next-Gen YSlow מופעל על ידי Yui

18 יולי 2011 בשעה 09:17 על ידי מרסל דוראן | ב פיתוח , ביצועים | 4 תגובות

לפני כשבועיים, הודיעה יאהו על YSlow נייד על מהירות 2011 , מביא את הכוח של ניתוח ביצועים YSlow לעולם הנייד.

YSlow עבור ניידים יצירות כמו הסימניה , כך שניתן להפעיל על דפדפנים שאינם פיירפוקס (כמו add-on) או כרום (כשלוחה) .

ארכיטקטורת YSlow תוכנן מחדש באופן חלקי לעבוד בפלטפורמות ו Yui היה גורם חיוני לעשות, sandboxing לדפדפנים הפשטה גישה YQL פשוט אפשרי.

Sandboxing

על מנת להיות מוטבע על הדף מבלי להפריע ניתוח ביצועים בלי להתעסק עם הדף עצמו, YSlow הוא הסימניה כי מזריק JavaScript ו-CSS לתוך כל דף על ידי מינוף העוצמה של Yui sandboxing:

הסימניה כתובת האתר:

 javascript: (הפונקציה (y, p, o) {
     p = y.body.appendChild (y.createElement ("iframe"));
     p.id = 'YSlow-bookmarklet';
     p.style.cssText = "display: none";
     מ = p.contentWindow.document;
     o.open (). לכתוב ("
         <head>
         <הגוף onload = "
             YUI_config = {
                 win: window.parent,
                 דוק: window.parent.document
             };
             var d = המסמך;
             d.getElementsByTagName (\ 'ראש \') [0]
                 . AppendChild (
                     d.createElement (\ "תסריט \")
                 ). Src = \ "http://d.yimg.com/jc/yslow-bookmarklet.js \ '"
         >
     ');
     o.close ()
 } (מסמך))

הקוד הנ"ל:

יוצר iframe ריק;
מצרף אותו לגוף העמוד;
מסתיר * iframe;
המטפל מקבל חלון שלה;
כותב אל תוכנו את הגוף של iframe;
הגוף הזה הוא ריק אבל יש onload האירוע
onload האירוע מגדיר כיצד להזריק YSlow JS:
- מגדיר YUI_config , אז win ו doc נקודות לדף להיות מנותח window ואת document בהתאמה
- באופן דינמי מזריק URL YSlow ידי יצירת script אלמנט לתוך iframe של head

* Iframe מוצג כאשר כל הנכסים מצגת YSlow נטענים

זה יהיה מקום iframe אל עמוד להיות מנותח. Iframe זה ישמש סביבת sandboxed ו YSlow יהיה להתגורר בו. מאז iframe נוצר באופן דינמי בלי src התכונה, היא תהיה גישה האם שלה (עמוד להיות מנותח) כי אין מוצא אותה מדיניות הפרה קורה שם.

YUI_config אובייקט נוח משום שהוא קובע win ו doc להורה של iframe (עמוד להיות מנותח), ובכך מקרה חדש Yui יהיו מחויבים למסמך האב על ידי חיווט מחדל, כל קריאה Y.all ו Y.one באמצעות Y.config.win או Y.config.doc מ Yui use התקשרות.

מצגת של YSlow מתבצע על ידי iframe window ואת document הפניות, המאפשר את התסריט העיקרי YSlow כדי להבהיר סימון, כמו גם להביא את ה-CSS חיצוני בתוך iframe זה בלי להתנגש עם סגנונות דפים של ההורה. YSlow סורק את דף האב על מנת לקבל את כל המרכיבים (תמונות, סקריפטים, קישורים, תמונות רקע, פלאש, וכו ') הדרושים לניתוח ביצועים לאחר מכן. הדבר נעשה על ידי גישה Y.config.win ו Y.config.doc , שכן הם מתייחסים לדף האב.

לדפדפנים הפשטה

להיות הסימניה, YSlow לנייד אמור לעבוד על כל דפדפן *. Yui תקציר ניתן לדפדפנים נושאים על ידי נרמול הבדלים הדפדפן, וכתוצאה מכך codebase נקי וקל לקרוא לתחזוקה.

YSlow לא מועבר באופן מלא Yui 3 - רק את השכבה בקר (מרכיב App הקרובה) לעת עתה - אבל עדיין, כל מניפולציה DOM וטיפול באירועים נעשים על ידי node ואת event מודולים. לפרסומים עתידיים אנו מתכננים לנמל תכונות YSlow יותר Yui 3.

* לא כל הדפדפנים הנתמכים כרגע

YQL

YSlow מנתח את הדפים על ידי סימון את כותרות HTTP עבור הרכיבים שנמצאו על הדף. כותרות HTTP התגובה אינם זמינים בדף, ומכאן רכיבים אלו צריך לבקש שוב על מנת לקבל את המידע YSlow בכותרת התגובה. זו יכולה להיות מושגת על ידי המבקשת את רשימת כתובות רכיב דרך XMLHttpRequest (AJAX) אך למרבה הצער, בשל ההגבלה מוצא אותה מדיניות , הדבר אינו אפשרי אלא אם כן כל הרכיבים נמצאים בדומיין של הדף שהוא מאוד לא סביר.

פתרון משותף הגבלה מוצא אותה מדיניות היא באמצעות JSONP, שם שרת חיצוני עובד כמו פרוקסי מבקשים את רשימת כתובות רכיבים ואחזור כותרות HTTP שלהם תגובה מטעם YSlow. בשל הפופולריות של YSlow ואת המאמצים האחרונים ניידים ניתוח ביצועים, אנו מצפים תנועה כבדה למדי עבור YSlow על הסימניה נייד. על מנת לתמוך בתנועה כזו, YQL היה פתרון מדרגי שאומצה על ידי YSlow באמצעות טבלת נתונים פתוח בשם data.headers , אשר מאחזר את כותרות התגובה ותוכן עבור רשימה נתונה של כתובות URL תוך התחזות למשתמש סוכן על מנת להבטיח את התוכן הצפוי הוא אחזור.

שאילתה YQL מרכיב עושה את כל העבודה של ניהול שאילתות YQL תוך ניהול בקשות JSONP מתחת למכסה המנוע, מה שהופך את הקוד בקר YSlow הרבה יותר פשוט וקל לתחזוקה.

שיפורים עתידיים: YSlow חדשות לממשק ידידותי נייד

נכון לעכשיו YSlow על חוויית המשתמש נייד זהה חוויית שולחן העבודה. התמודדות עם שורה ארוכה של נתונים וניתוח ביצועים לא את החוויה הטובה ביותר על טלפון חכם במסכים קטנים. מאז Yui גם תקציר ניתן לחצות המכשיר מחוות , YSlow לנייד תקבל המותג החדש סלולרי ממשק ידידותי לפרסומים עתידיים.

הביצועים של הכלי ביצועים

YSlow לפריסה נייד נעשתה בקפידה בהתחשב השפעת הביצועים שלו על זמן הטעינה של הדף להיות מנותח. 3 מודולים Yui בשימוש YSlow נבחנו לכלול רק את המודולים הדרושים כדי לטעון YSlow מהר ככל האפשר. קובץ זרע Yui ו Loader לא נכללו מאז כל המודולים הדרושים submodules שולבו יחד בעקבות ביצועים זן ריאן גרוב טיפים, מה שגרם ניתן לטעון את הכל ביחד לתוך בקשה אחת קטנה אחת: YSlow-bookmarklet.js: 204KB, 66KB ( gzip) שם:

Yui: 75KB, 27KB (gzip)
YSlow: 129KB, 39KB (gzip)

נוסף על YSlow

לשמור על עדכני, עם ההכרזות האחרונות של YSlow:

ביקור בדף YSlow מחדש על getyslow.com
YSlow לאהוב בפייסבוק: facebook.com / getyslow
YSlow אחרי בטוויטר: twitter.com / getyslow

אודות המחבר: מרסל דוראן היא עופרת החלק הקדמי של הקבוצה יאהו ביצועים יוצאי דופן. הוא כבר לתוך אופטימיזציה של ביצועי הרשת באתרים תעבורה גבוהה של עמוד Yahoo! החזית צוותי חיפוש שם הוא מיושם וחקר ביצועים אינטרנט שיטות העבודה המומלצות קבלת דפי אפילו מהר יותר. הוא מוקדש כעת YSlow ופיתוח כלים אחרים הביצועים, חוקר תורת הנצרות. מטרתו היא להפוך את האינטרנט אפילו יותר מהר ממה שהיא יכולה להיות, מאמין שאין דבר כזה "רק כמה אלפיות לא יזיק".

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

דפדפן מדורג תמיכה Update

12 ביולי 2011 בשעה 8:55 על ידי ג'ני דונלי ומאט סוויני | ב פיתוח , תומכים בדפדפן מדורג | 24 תגובות

GBS שינויים

שינויים ספציפיים עבור עדכון זה כולל:

עוד להקצות כיתות ניסיון
הופסק מרשם מערכות הפעלה מסוימות (למעט נייד)
כיסוי נוסף ל-Internet Explorer 9
הוסיף כיסוי עבור פיירפוקס 4. †
הוסיף כיסוי עבור פיירפוקס 5. †

מבחן הדפדפן Baseline

Internet Explorer	6.0	7.0	8.0	9.0
פיירפוקס	3. †		4. †	5. †
Chrome †	היציבה האחרונה
ספארי	5. †	iOS 3. †		iOS 4. †
WebKit	אנדרואיד 2. †

הערות:

סמל הפגיון (כמו "פיירפוקס 4. †") עולה כי רוב זרם בלתי גרסת ברמה זו הסניף מקבל תמיכה.
הדרכה לא ניתנת על iOS או אנדרואיד מערכת ההפעלה השימוש במכשיר. ההמלצה היא שתבחר את המכשירים שהם נציג ביותר של בסיס המשתמשים שלך עבור כל מערכת הפעלה.

הסרת ציונים מנקודת ההתחלה מבחן הדפדפן

מהדורה זו של עדכון GBS מהווה סטייה עדכונים קודמים שלנו כי אנו מתרחקים הדפדפנים מיפוי ישירות ציונים ניסיון (למשל, "כיתה" ו - "C-grade"). במקום לקבוע מה חווית המשתמש הוא המתאים עבורו הדפדפנים, אנחנו מתמקדים בהגדרת הבסיס יעיל מבחן אסטרטגיה למיקסום כיסוי הבדיקות וממזער את פני השטח בדיקות. כך, למשל, עדיין משמעותיים של IE6 כתבי בנתח השוק העולמי המשיך בדיקות; GBS עם זאת של היום מאפשר חוויית המשתמש IE6 להיות שונה מהניסיון IE9.

הסרת מערכות הפעלה מנקודת ההתחלה מבחן הדפדפן

על מנת לייעל את הבדיקה לצמצם דרישות משאבים, אנחנו כבר לא לציין איזו מערכת הפעלה יש לבדוק הלאה. היוצא מן הכלל היחיד הוא כאשר הדפדפן יחד באופן הדוק עם גרסת מערכת ההפעלה, ובמקרה זה אנו מתייחסים לגרסה של מערכת ההפעלה ולא גרסת דפדפן (למשל "ספארי iOS 4"). זה מאפשר לנו למקד את כיסוי הבדיקות על גרסאות הדפדפן, ולמזער בדיקות redudant על פני פלטפורמות. בעיות עם הדפדפן זהים בכל הגרסאות זניחים, הקשורים בדרך כלל ברמה גבוהה יותר הבדלים מערכת ההפעלה, כגון טיפול מפתח הגופנים הזמינים. קוד ידוע לגעת חוצה פלטפורמה בעיות יש לבדוק על פלטפורמות כמו רבים ככל האפשר, אבל זה בדרך כלל בדיקות ניתן לבודד בעיות ספציפיות ולא לרוץ מבחן רגרסיה מלא בכל התכונות. אנו ממליצים יישור מערכת ההפעלה עדיפות בדיקות עם בסיס המשתמשים שלך.

מדוע IE6 עדיין ברשימה?

IE6 עדיין יש נתח משמעותי מספיק בשוק העולמי כדי להצדיק ניסיון לאמת את המשתמש מקובל. טעות נפוצה עם האסטרטגיה שיפור מתקדמת הייתה שברגע הדפדפן נכנס "C-כיתה", כי הוא הופך להיות "לא נתמך", כאשר למעשה זה באמת אומר שזה צריך להיות מועברת חוויה HTML בלבד. עכשיו, כשאנחנו כבר לא רושמים אילו דפדפנים לקבל מה הניסיון, זה נשאר לפרויקטים להחליט על בסיס המשתמשים שלהם ומשאבים. GBS מתמקד לציין אילו דפדפנים צריך ניסיון שמיש לאמת בהתבסס על גורמים כגון נתח שוק והשפעה. להגדיר מה היא "שימושי" ו specifiying רמות מקובלות של השפלה נותרו לקבוצות להחליט. אנחנו עדיין לקדם פשוטה שיפור מתקדמת המודל, להרתיע מפני יצירת שכבות פרויקטים חדשים ללא החשבונאי בעלויות נוספות פיתוח, בדיקות, תחזוקה ומשאבים.

תחזית GBS

אנו מצפים להפוך את השינויים הבאים העדכון הבא:

יש להפסיק את הכיסוי עבור Safari על iOS 3.
הוסף סיקור על Webkit על אנדרואיד 3.
הוסף סיקור עבור Firefox 6.
הוסף סיקור עבור ספארי iOS 5.

GBS ארכיון

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

"MakeNode" יישומון Extension

8 ביולי, 2011 בשעה 2:11 על ידי לסאטיאם | ב פיתוח | 6 תגובות

הערת העורך: מאז מאמר זה פורסם לראשונה, מודול MakeNode פורסמו לגלריה Yui וקיבל כמה שיפורים. אנא עיין במאמר המעודכן, עודכן: "MakeNode" הרחבה יישומון .

במאמר הקודם שלי, מתכון יישום Yui 3 , הראיתי דרך להשתמש Y.substitute כמעבד תבנית בסיסית מאוד. הרעיון התאבד משם, עם הצעות של החבר 'ה Yui # ערוץ IRC, ועשיתי את זה סיומת יישומון הזמין באתר שלי, שנקרא MakeNode . MakeNode אינו מעבד תבנית כללית וזה לא נועד כאחד. מצד שני, היא משולבת עם Yui יישומון מעמד הקרן, כולל העוזרים classname ואת האירוע בינאום. במאמר זה, אני אקח ספינר לדוגמא ולשנות אותו כדי לעקוב אחר ההנחיות מן המאמר הקודם שלי להשתמש MakeNode. מרכיב ספינר שונה ( JS , CSS , שדונים ), כמו גם למשל זמינים באתר שלי. קישורים למקורות מידע נוספים ניתן למצוא בסוף מאמר זה.

הרחבת המרכיב שלך

לאחר MakeNode נטען, אתה צריך לכלול מודל שלך YUI().use() משפט תוך שימוש בשם 'makenode' . לאחר מכן, כדי להרחיב את היישומונים, אתם מוסיפים אותו בטיעון השלישי Y.Base.create() , כך:

  Y.Spinner Y.Base.create = (
      "ספינר",
      Y.Widget,
      [Y.MakeNode]
      {
         / / למשל חברי ...
      },
      {
          / / חברי סטטיים
      }
 );

ניתן להוסיף MakeNode לאורך כל מספר של הרחבות מתאימים יישומון, כגון WidgetParent, WidgetChild, WidgetStdMode וכו 'MakeNode מוסיף שתי שיטות מוגנים, _makeNode ו _locateNodes, וזה יהיה לקרוא כמה מאפיינים סטטיים, אם נמצא.

כל חברי ההרחבה זה הם מוגן או פרטית כי הם נועדו לשמש את היזם מרכיב ולא מגשים באמצעות רכיבים אלו, שלא צריך להטריד אותם.

הגדרת תבנית

הדבר הראשון שאתה עושה בדרך כלל הוא להגדיר את התבנית עבור הרכיב שלך. עבור ספינר, התבנית שלנו יהיה:

  _TEMPLATE: [
     "<input Type="text" title="{s input}" class="{c input}">",
     "<button Type="button" title="{s up}" class="{c up}"> </ כפתור>",
     "<button Type="button" title="{s down}" class="{c down}"> </ כפתור>"
 ]. להצטרף ('\ n'),

תבנית ברירת המחדל בדרך כלל להיות שם _TEMPLATE והצהיר לאורך מאפיינים סטטיים אחרים של מעמד, כגון ATTRS . MakeNode נשתמש בתבנית זו אם לא אחר מסופק במפורש. תבנית עשוי HTML רגיל בתוספת שורה של מצייני מיקום בסוגריים מסולסלים, כל אחד עשוי תו בודד (קוד עיבוד) ואחריו ארגומנט אחד או יותר. את מצייני המיקום ומה שהם מייצרים הם:

{@ attributeName} תצורת התכונה ערך
{p propertyName} נכס ערך למשל
{m methodName arg1 arg2 ….} ערך ההחזרה של השיטה נתון. קוד עיבוד מלווה שם את השיטה כל מספר של ארגומנטים מופרדים ברווחים. מיתרים חייב להיות מוקף במרכאות כפולות. מספרים, Booleans ו null יומרו ממחרוזת לסוגים הנכון שלהם נתונים
{c classNameKey} CSS classname שנוצר _CLASS_NAMES נכס סטטי
{s key} מחרוזת מ strings תכונה, באמצעות key כמו תכונה המשנה.
{? other placeholder } מייצרת מחרוזת checked כאשר תוצאה של עיבוד יתר מציין הוא הנכון.
{} ערך אחר יטופל בדיוק כמו Y.substitute עושה.

לדוגמה, {@ value} יהיה לתרגם this.get('value') בעוד {p value} המתרגמת this['value'] .

{m} מציין המיקום הוא קצת יותר מורכב. הטענה הראשונה אחרי m הקוד עיבוד הוא שמה של השיטה ואת שאר הטיעונים, מופרדים על ידי כל שטח לבן, זה יהיה עברו לשיטה נתון. טיעונים אלה יכולים להיות מספרים, null , true , false או מחרוזות בין מרכאות כפולות. MakeNode יהיה לנתח אותם ולהמיר אותם סוגי הנכון שלהם, ולכן {m myMethod 123.45 true “this is a string”} תגרום קורא this.myMethod(123.45, true, “this is a string”) , כך את שני הטיעונים מומרים סוגי הנתונים שלהם נכונים מחרוזת יכול להכיל רווחים. כדי לכלול מרכאות כפולות, השתמש \\" , קו נטוי הפוך כפול נדרשים מכיוון ש-JavaScript יפרש 1 אחת מוחק את זה לפני שהוא מגיע MakeNode. רק במרכאות כפולות מותר, MakeNode אינו משתמש eval() כך מנתח מוגבל אבל כל דבר בטוח. אבל מספרים, null , Booleans ומחרוזות שצוטטו כפולים תתעלם.

{?} מציין מיקום נוח לשימוש עם תיבות סימון וכפתורי רדיו. זה יהיה לייצר מחרוזת “checked” בהתאם לערך האמת של הקוד עיבוד הוראה הבא. לכן, <input type=”checkbox” {? m getLength}/> <input type=”checkbox” {? m getLength}/> יפיק תיבת הבחירה המסומנת אם getLength השיטה מחזירה שום דבר מלבד אפס. {?} יקבלו את כל המשתנים האחרים, אם כי זה רק הגיוני עם 3 1.

עבור {c} מציין המיקום, אנחנו צריכים להיות _CLASS_NAMES נכס מוגדר.

מצייני מיקום נוספים ניתן להוסיף MakeNode ידי הוספת אותם _templateHandlers חשיש.

נכס _CLASS_NAMES

יחד עם ATTRS ו _TEMPLATE תכונות סטטיות, אנו יכולים להגדיר _CLASS_NAMES נכס אשר מצביע על מערך של מחרוזות. כל אחד המיתרים הללו ישמשו ליצירת classname. כך _CLASS_NAMES: ['input'] תפיק את classname “yui3-spinner-input” . ClassNames אלה מאוחסנים נכס מופע this._classNames . {c input} מציין מיקום בתבנית מעל יוחלף “yui3-spinner-input” .

ניתן להשתמש _CLASS_NAMES נכס כדי ליצור כל מספר של classNames, בין אם אתה משתמש בהם בתבנית או לא. אתה עדיין יכול להגיע אלה classNames נוספות מתוך this._classNames . ClassName מופק באמצעות yui3 קידומת ואחריו הערך של NAME נכס סטטי הפך קטנות, ולאחר מכן את המחרוזת שניתנה _CLASS_NAMES (זה האחרון לא יופעל קטנות), כל מופרדים במקפים. _classNames חשיש יכיל גם את classNames עבור boundingBox ו contentBox , הראשונה תחת "." המפתח השני תחת “content” המפתח. יישומון מקצה boundingBox את classNames הנגזרות ערכי NAME נכס של כל המעמדות בשרשרת הירושה, החל yui3-widget . חנויות MakeNode לתוך this._classNames רק classname העליונה ביותר boundingBox .

אם הרכיב הוא בכמה רמות הרחק יישומון, כמו SuperSpecialSpinner לרשת מ SuperSpinner אשר יורשת מ Spinner אשר יורשת מ Widget, ואם או לכולם יש _CLASS_NAMES מאפיינים מוגדרים, MakeNode יפיק classNames לכולם ולאחסן את this._classNames . אתה לא צריך לכלול בכל רמה השמות כבר הכריז ברמות הקודמות. למעשה, עדיף שלא מאז classNames המיוצרים בכל רמה יהיה להשתמש בערך של NAME נכס של הרמה. כך, SuperSpecialSpinner , {c input} ימשיך להוביל “yui3-spinner-input” ולא “yui3-superspecialspinner-input” ולכן היא תמשיך קובץ CSS שלך עדיין בתוקף.

{ס} מציין מיקום

יישומון יש strings תכונה הגדרה מוגדרות, אם כי זה לא מאותחל עם ערך כלשהו. תכונה זו אמורה להחזיק מחרוזות הנראים למשתמש (או, באמצעות קוראי מסך, לקרוא). חשוב כי אתה אף פעם לא כוללים מחרוזות גלויים ישירות בתבנית. זו לא דרישה של MakeNode - זה מעולם לא היה רעיון טוב בכלל. כל המיתרים כי הם כדי לצפות או לקרוא למשתמש תמיד צריך להיות ממוקם בתוך strings התכונה. strings תכונה מכיל חשיש שבו כל הטקסט היחיד נמצא על ידי המפתח שלה. מרכיב ספינר יש בחוטים הבאים, שאפשר לראות בשימוש תבנית לעיל.

  מחרוזות: {
     ערך: {
         הקלט: "לחץ על החץ למעלה / למטה מקשי עבור בהפרשים קלים, עמוד כלפי מעלה / מטה עבור במרווחים גדולים."
         עד: "תוספת",
         למטה: "מפחית"
     }
 },

החלק הטוב ביותר לעשות זאת היא מרכיב יכול להיות מקומי כדי שפות אחרות בקלות רבה על ידי מפתחים באמצעות רכיב שלך. בעת יצירת מופע של ספינר, אתה יכול לעשות:

  var mySpinner = חדש ספינר ({מחרוזות: Y.Intl.get ("טווה")});

הגדרת תצורה של תכונות strings בדרך זו מחליפה את ברירת המחדל של strings עם אלו ערכים מתוך קובץ השפה משאבים באמצעות השפה שהוגדרו קודם לכן. {s} מציין ניגש בחוטים המאוחסנים strings תכונה, בין אם אלה ברירת המחדל או את אלו מתורגמים, אם הוגדר. {s xxxx} מציין הוא, למעשה, לא יותר מאשר קיצור דרך אל {@ strings.xxxx} מציין מיקום. עם זאת, 1 יכול לגשת רק מחרוזות ברמה העליונה כאשר, למשל, {@ strings.xxxx.yyyy.zzzz} יאפשר לך לגשת מחרוזת עמוק יותר למטה.

שימוש ב _makeNode renderUI

אנו משתמשים בתבנית כדי ליצור את הסימון עבור הרכיב שלנו. לשם כך, אנו יכולים להתקשר של MakeNode _makeNode השיטה, כך:

  renderUI: function () {
     . this.get ("contentBox ') הוספה (this._makeNode ());
 },

זה ימלא contentBox של יישומון שלנו עם סימון מעיבוד את התבנית. _makeNode השיטה מחזירה מופע של Y.Node שיכול להיות מצורף או מוכנס בכל מקום או רק החזיק לשימוש מאוחר יותר. זה לא מחזיר מחרוזת, היא מייצרת Node למשל.

_makeNode השיטה לוקח שני ארגומנטים אופציונליים: הפניה התבנית ואת האובייקט למלא את מצייני מיקום, כמו Y.substitute עושה. בדוגמה פשוטה ספינר שלנו יש תבנית אחת עבור כל יישומון יישומונים אבל אחרים עשויים לחייב פיסות שנעשו מתוך תבניות מספר. במקרה כזה, היית בדרך כלל קוראים _makeNode ללא טיעונים בחלק המרכזי ולקרוא את זה שוב עם תבניות שונות כדי למלא את חלקי נוספות. למשל שתכלול את renderUI השיטה:

  renderUI: function () {
     var fieldset = this._makeNode ();
     this.each (פונקציה (פריט) {
         fieldset.appendChild (this._makeNode (MultipleTemplates.RADIO_TEMPLATE, פריט));
     }, זה);
     this.get ("contentBox ') הוספה (fieldset).
 }

הקריאה הראשונה _makeNode חוזר Node למשל מאוחסנים משתנה fieldset . רכיב מדגם מורחב גם Y.ArrayList כך RADIO_TEMPLATE יהיה מלא ערכים הלקוחים את הפריטים המאוחסנים ברשימה מערך עם בלוטות כתוצאה שצורפו fieldset לפני שהוא צירף לבסוף contentBox . את מצייני המיקום מיוחדים כגון {@} או {p} עדיין מתייחסים תכונות או מאפיינים של האובייקט הראשי. הפריטים מקוננות יעובדו בדיוק כפי Y.substitute יהיה.

שיטת _locateNodes

MakeNode יותר מספק _locateNodes שיטה אשר מנסה לאתר את כל המרכיבים עם classNames המוצהרות ב _CLASS_NAMES . כדי לאתר גורמים ספציפיים תוכל להעביר כל מספר של מפתחות ClassName, שאם לא כן, _locateNodes מנסה את כולם. עבור כל רכיב נמצא classname של כל _locateNodes תייצר נכס למשל פרטית באמצעות קידומת תחתון ואחריו שם את המפתח “Node” סיומת. כך, למשל ספינר שלנו, _locateNodes יפיק את מאפייני _inputNode , _upNode ו _downNode . אם יש מספר גורמים classname זאת, _locateNodes יחזור התייחסות 1 מהם. אם רכיב לא נמצא, המשתנה לא תיווצר.

ברכיב ספינר אנו משתמשים _locateNodes לאחר יצירת סימון:

  renderUI: function () {
     . this.get (CBX) הוספה (this._makeNode ());
     this._locateNodes ();
 },

נכס _EVENTS סטטי

תכונה אחת נוספת יכולה להיות מוגדרת בנוסח _TEMPLATE ו _CLASS_NAMES וזה _EVENTS . _EVENTS יכיל חשיש מורכב שם מפתחות מעמד, כל אחד המכיל חשיש של סוגי אירועים ושיטות לטפל בהם. זה מוסבר טוב יותר עם דוגמא:

  _EVENTS: {
     ".": {
         המפתח: {
             Fn: "_onDirectionKey",
             ארגומנטים: ((Y.UA.opera) "למטה:": "העיתונות:") + "38, 40, 33, 34"
         },
         mousedown: "_onMouseDown"
     },
     "..": {
         mouseup: "_onDocMouseUp"
     },
     הזנה: {
         שינוי: "_onInputChange"
     }
 },

_EVENTS הוא אובייקט (חשיש) עם כל מספר של תכונות. שמות מאפיינים, כלומר, את המפתחות של חשיש, לזהות את המרכיבים אשר האירועים אנו מקשיבים. הם מזהים אותו בשימוש _CLASS_NAMES . ישנם שני מפתחות מיוחדים נוספים "." ו ".." . בעוד את המפתחות classname מתייחסים אלמנטים מקוננים contentBox , "." המפתח מתייחס boundingBox עצמו תוך ".." מתייחס המסמך המכיל את יישומון. לחשוב עליהם כעל עושה chdir הפקודה כאשר הממוקם boundingBox ברמה. _EVENTS נכס מעובד לאחר renderUI , bindUI ו syncUI שיטות נקראו כך יישומון צפוי להיות מוכנס כבר בתוך הגוף את המסמך, שאם לא כן ".." תיכשל.

כל הערכים _EVENTS הוא אובייקט נוסף העושה שימוש בסוג האירוע המפתח שלה ואת השם של השיטה למשל להתמודד עם זה. _EVENTS , להיות משתנה סטטי, אין גישה this ולכן אינו יכול לקחת את הפניות תפקוד בפועל, רק את השם של השיטה המאזין האירוע. סוגים מסוימים האירוע צריך טיעונים נוספים, כגון key האירוע. במקרה כזה, במקום לספק את שמו של המטפל באירועים תוכל לספק אובייקט בעל תכונות fn ו args להחזיק את שם הפונקציה ואת טענות נוספות, בעת הצורך.

MakeNode ישתמשו Node.delegate להקשיב אירועי אלמנטים מקוננים, בעוד הוא ישתמש Y.on להקשיב אירועים מ boundingBox לגוף המסמך. (הערה: האזנה key האירוע על כל אלמנט מקונן עובד רק עם 3.4.0pr1 גירסה הנ"ל, שכן משלחת של key .. האירוע לא היה זמין לפני כל שאר התכונות לעבוד עם גירסאות קודמות גם)

את _EVENTS הצהרות הן מצטברות כאשר רכיבים לרשת זה את זה. כל הכיתה בשרשרת הירושה תהיה משלה _EVENTS הצהרת מעובד בנפרד.

נכס _ATTRS_2_UI סטטי

אירועים ללכת לשני הכיוונים, החל ממשק המשתמש לרכיב ו ממרכיב ל UI. 1 מטופלות על ידי _EVENTS רכוש. ואז יש את אירועי שירה ערך שינויים בתכונה, כי צריך לבוא לידי ביטוי בממשק המשתמש. כפי שציינתי במאמר הקודם, כאשר יש תופעות משניות של שינוי תצורת התכונה, הם צריכים להיות מטופלים על ידי המאזינים האירוע שינוי, לא על ידי רשות setter בשיטה של התכונה, אשר צריך רק להתמודד עם נרמול הערך להיות מוגדר. ממשק המשתמש צריך לשקף את מצב תכונות תצורה, תחילה syncUI , כאשר להיות לאתחל ולאחר מכן על כל אירוע שינוי התכונה. באפשרות השנייה, אנחנו צריכים לצרף המאזין האירוע, אשר אנו עושים bindUI . יישומון כבר מספק מנגנון כדי כך פשוט, מה שתיארתי את התגובות למאמר הקודם.

יישומון משתמשת במאפיין מופע _UI_ATTRS המכיל אובייקט עם שתי תכונות נוספות SYNC ו BIND . כל אחד מהם הוא מערך רישום שמות תכונות תצורה להיות synched בתחילה ולאחר מכן האזינו כדי לשמור על ממשק משתמש המשקף בערכים ריאליים. יישומון מצפה כל אחד הערכים הללו יש שיטה הקשור אליו, על שמו שם את התכונה התחילית _uiSet עם התו הראשון של שם התכונה המרה לאותיות גדולות יש שם שיטה במקרה הגמל הנכונה. לכן, אם "value" היה רשום באף אחד _UI_ATTRS מערכים (באחת SYNC או BIND ), יישומון מצפה למצוא _uiSetValue השיטה. שיטה זו יקבל שתי טענות, value להיות להגדיר src השינוי. זהו הקוד שלנו ספינר _uiSetValue השיטה:

  _uiSetValue: הפונקציה (ערך, src) {
     if (src === UI) {
         לחזור;
     }
     this._inputNode.set (ערך, this.get (מעצב) (ערך));
 },

כל מזהים רישיות שאתה רואה ביצירה זו של קוד מתאימות קבועי מחרוזת הכריז במקום אחר, כדי לאפשר מדחס Yui לעשות את העבודה טוב יותר. השיטה, בעצם, קובע את value תכונת ה-HTML <input> התיבה כדי להגדיר את הערך החדש, לאחר מעוצב. התייחסות אל הטקסט סופק על ידי _locateNodes . src הטענה נבדקת תחילה כדי לראות אם מוגדר ערך מחרוזת 'ui' . אם זה כך, הפעולה לא יינקטו. זאת על מנת למנוע לולאות אינסופיות. אם המשתמש מזין משהו בתיבת הקלט, הערך שלו היה נכנס value התכונה תצורה אשר לאחר מכן יירו valueChange האירוע, אשר היה מקבל _uiSetValue בשם אשר, אם לא בדוק, היה אז ללכת ולשנות את הערך של תיבת הקלט, אשר יפעילו את כל התהליך שוב. כך, _uiSetValue , אם אנו יודעים שהשינוי מגיע ממשק משתמש, לא נעשה דבר וכך לשבור את הלולאה. עם זאת, זה דורש עוד חתיכת קוד במקום אחר. אצל המאזין לאירוע DOM, כאשר אנו להגדיר את התכונה תצורה, אנו משתמשים בטיעון אופציונלי 3 לקבוע, באופן הבא:

  _afterValueChange: הפונקציה (EV) {
     this.set (ערך, ev.newVal, {src: UI});
 }

זה תלוי בנו, כדי להבטיח כי השינויים המגיעים UI מסומנים ובכך ולאחר מכן לבדוק את אותו הדגל, כדי למנוע לולאות.

עם כל זה אמר, לא הזכרתי עדיין את נכס סטטי _ATTRS_2_UI המוזכר בכותרת של סעיף זה. כמו ההערות הקודמות שלי מראה המאמר (דרך טעויות שעשיתי להם), כדי לוודא שכל תכונות המשפיעות על ממשק משתמש רשומים כמו שצריך הוא קצת מבולגן. אתה לא צריך לאתחל _UI_ATTRS מאפס מאז יישומון כבר מונה המון תכונות ואלה יהיה אבוד. אתה צריך לשרשר שמות תכונה חדשה על אלה הקיימים, וזה קצת קשה לזכור איך לעשות את זה נכון. כדי לעשות את זה פשוט, MakeNode יהיה לקרוא נכס סטטי _ATTRS_2_UI ולעשות את זה שרשור בשבילך. זה יהיה לשרשר את כל רשימות כאלה ממעמד כל בשרשרת הירושה כך בכל רמה כל שיעור יכול להתמודד עם מאפיינים משלה. ב ספינר, יש לנו:

  _ATTRS_2_UI: {
     BIND: ערך,
     סינכרון: VALUE
 },

MakeNode יקבלו גם מערך של שמות או שם תכונה אחת, כמו במקרה זה.

השאלה מתעוררת באופן טבעי, למה שתי רשימות, האחת מחייב אחר סינכרון? לעתים קרובות למדי SYNC יש מערך ערכים פחות מאשר BIND הרשימה וזה בגלל תבנית עבור רכיב אולי כבר יש את ערך ברירת המחדל בדיוק כמו תכונה תצורה ואין צורך לעשות syncing הראשונית. לכן, אם ערך ברירת המחדל עבור value התכונה התצורה היא מחרוזת ריקה <input> אלמנט בתבנית אין כל value תכונה, אז אין צורך לסנכרן אותם על אתחול.

MakeNode יבדוק ערכים כפולים בכל אחד מערכים אלה. אם בכלל מופיע, המשמעות היא מרכיב הכיתה שלנו יורשת מ כבר מטפל תכונה זו וכל הצהרה חדשה היה חרגה כנראה _uiSetXxxx המטפל על כך. אגב, MakeNode גם בודק ערכים כפולים ב _CLASS_NAMES , אשר יכול גם לגרום סכסוך כלשהו, אם כי לא כולם, נסיבות. MakeNode יכתוב הודעה ביומן על כל טעות כזאת.

מסקנה

MakeNode מספק מעבד תבנית פשוטה מאוד, עם פונקציונליות פשוטה כי הוא מאוד משולב עם הכיתה קרן יישומון. הוא גם מספק שיטות עוזר ליצירת classNames לשמש תבנית ולהשתמש בשמות אלה כדי לאתר את הצמתים שנוצרו. הוא גם מספק את האמצעים להתחבר אל האירועים שנוצרו הן על ידי ממשק המשתמש ואת הרכיב עצמו ולשייך כל אחד עם השיטה. היא עושה את כל הדברים האלה, בעוד הטיפול לכבד את שרשרת הירושה ישר יישומון וכל רמת השיעורים ניתן להגדיר.

זה אינו מספק עבור הפנסיון כל האפשרויות, אבל מכסה מגוון טוב מהם. עם זאת, זה לא מונע ממך להוסיף פונקציונליות נוספת. אתה כמעט יכול לכתוב bindUI או syncUI בשיטה זו אם אתה משתמש בדבק מסופק על ידי MakeNode, אבל אתה יכול לעשות זאת, שכן MakeNode לא להשתמש בהם.

בתור בונוס למי היה סבלנות לקרוא סט לחצן עד כאן, אני שונה גם אנתוני כדון רכיבים הגלריה:

Docs API ניתן למצוא כאן .

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

Yui ו Loader שינויים 3.4.0

1 יולי 2011 בשעה 06:34 בבוקר על ידי DAV זכוכית | ב פיתוח , ביצועים | 10 תגובות

ב 3.4.0 התחלנו את התהליך של העברת חלק מן ההיגיון של Loader מסביב, כדי לא רק להפוך אותו performant יותר, אבל כדי לעשות את זה חזק יותר וקלים יותר לשימוש במקומות אחרים (כמו בשרת). אנחנו נהיה מתגלגל החוצה שינויים נוספים גרסאות עתידיות, אבל רציתי לקחת קצת זמן להסביר מה השתנה, למה זה שונה ואיך זה יכול להשפיע על מפתחים. עבור רוב השימוש המקרים, מפתחים ישימו לב שום דבר שונה, אלא המצב קצת מהר יותר הורדות הדרישה שלהם הם קצת יותר קטן.

קובץ זרע

הדבר הראשון שאני רוצה להתייחס אליו הוא קובץ זרע Yui. בגירסאות קודמות של Yui, קובץ הזרע שלנו היה קטן מאוד ולא מכילים Loader או כל נתוני העל שלה. מצאנו כי במקרה לשימוש 90% זה לא היה כמו performant כפי שקיווינו. משתמש רגיל כולל את הקובץ זרע מכן מבקשת המודולים שלהם, אשר בתורו כלומר הזרע צריך להביא 1 Loader, ואז לחשב את כל התלויות שלה, ולאחר מכן להביא את כולם. כעת אנו חשים כי זו בקשה נוספת http הוא הדבר הלא נכון לעשות, אז את הקובץ החדש מכיל זרע רגילה מטעין שלה meta-data. כן, זה יעשה את הבקשה הראשונית קצת יותר גדול, אבל הוא מקשה על טעינה של מודולים הרבה יותר מהר כי כל הדרישות meta-data שלה הם עכשיו כבר בדף.

אם ברצונך להשתמש בו בדרך הישנה, אתה יכול פשוט כוללים את קובץ Yui בסיס זרע במקום. הוא מכיל כל מה שדרוש כדי להפוך Yui לפעול במצב עצמאי ובנוסף מכיל את היכולת להביא Loader על פי דרישה. אם דרושה תלות אפילו מעודנים יותר, יצרנו קובץ Yui ליבות זרע זה בדיוק מה זרע בן Yui הבסיס היה.

     / Build / Yui / Yui-min.js / / זרע Yui + Loader
     / Build / Yui בסיס / Yui-בסיס min.js / / ישן זרע Yui עם Loader להביא תמיכה
     / Build / Yui ליבות / ליבות Yui-min.js / / ישן Yui בסיס בלי Loader להביא תמיכה

יש לציין כי כתובות האתרים הללו הם שונים מאשר כתובות הקודם. כל אחד שהיה משתמש yui/yui-base.js קבצים צריך repoint להם yui-core/yui-core.js . אם אתה רוצה את הדרך הישנה של טעינת הזרע להביא Loader, תשתמש yui-base/yui-base.js קובץ הזרע.

חשיבה אחרת לשינוי זה הוא מפת הדרכים שלנו להכנת Yui לרוץ כמו במקומות רבים ככל האפשר. קובץ זרע Loader הישן פלוס בקשה אחת משולבת שרת הכל טוב ויפה אם יש לך שרת משולבת זמין היישום. אבל מה בשרת? או יישום מקוון במכשיר נייד? מקומות אלה צריכים למזער גישה לקובץ ועדיין לקבל את המידע הדרוש להם.

אוספי

הדבר הבא שינינו היה הסרת אוספי מהמערכת ו פירעון allowRollup שווא בטען config. מה זה אומר לך? טוב, בתקווה כלום. לפני שאני מסביר את ההשפעה של שינוי, הרשו לי להסביר את ההיגיון מאחורי זה. הסיבה העיקרית היא, שוב, ביצועים, יחד עם מסירת המטען. קח את זה לדוגמה:

      מודול: דורש אירוע, אירועים ב
      מודול ב ': דורש אירוע ג, האירוע-D

כאשר אתה מבקש את שניהם, את ההיגיון אוסף שימוש לפני 3.4.0 לקבוע כי אתה צריך לקבל את אוסף האירועים. אשר למעשה פירושו של דבר שאתה מקבל:

      event.a, event.b, event.c, event.d, event.e, event.f, event.g, event.h

אתה בסופו של דבר עם יותר בדף שלך יותר ממה שאתה צריך באמת. ידי כיבוי תמיכה אוסף, Yui כעת לבקש רק את מה שביקשת בעצם ותו לא. ברוב המקרים, אתה לא שם לב זה. מפתחים מודול, עלול להיתקל במצב בו הדברים שעבדו בעבר לא יפעלו עכשיו. הסיבה לכך היא שהם ממש עבד במקרה לפני. הרשו לי להשתמש בדוגמה העולם האמיתי: חיוג.

ב 3.3.0, נדרש חיוג זה:

     דורש: [
         "יישומון",
         "DD-דראג",
         "תחליף",
         "אירוע mouseenter", 
         "המעבר",
         "בינ"ל"
     ]

על פי רוב, חיוג עבד 3.4.0 עם זאת התמיכה במקלדת לא עבד. לאחר ביצוע כמה חוקרים פשוט, התברר כי התמיכה אוסף ממש מבקש את אוסף האירוע כולו (הכולל אירועים מהלך האירוע מפתח). ללא היגיון אוסף מושך בכל מקרה, 3.4.0 חיוג כבר לא היה כל הדרישות שלה. ביצוע הדרישות של חיוג ספציפי יותר והגדרת כל תלות בפועל שלה עושה את זה כמו שצריך לעבוד כצפוי.

     דורש: [
         "יישומון",
         "DD-דראג",
         "תחליף",
         "אירוע mouseenter",
         "אירוע בתנועה",
         "אירוע המפתח",
         "המעבר",
         "בינ"ל"
     ]

עבור מפתחים מודול, יש שיטות עבודה מומלצות כדי לוודא מודול שלך דורש בדיוק מה שהוא צריך כדי לתפקד. אין להניח כי הדרישה מודול הזרם הוא שם. תמיד עדיף לוודא כי אתה שואל על מה שאתה צריך.

זה גם אומר דרישות מודול מוגדרים יותר טוב. לדוגמה, datatype-date יש תמיכה בינ"ל מובנים בגירסאות קודמות היית גישה בינ"ל כך:

     Y.Intl.getAvailableLangs ("סוג הנתונים המעודכן ');

אבל מאז מודול זה לא באמת יש שפה ( datatype-date-format מודול עושה), זה ייכשל. זה צריך להיות יותר ספציפי וממש לבקש שפות עבור מודול הנכון:

     Y.Intl.getAvailableLangs ("סוג הנתונים מעודכנים פורמט ');

בנה פיצוץ קובץ להסרת Submodule

לאחר ביצוע שינוי זה, השינוי הבא שעשינו היה מתפוצץ מדריך לבנות והסרה submodules ממערכת הליבה. ההיגיון Submodule לא הוסרה, רק מבנה העל הנתונים שלנו שונה. זה יספק תאימות לאחור עבור התקנות הנוכחיות.

Submodules במערכת הליבה גרם כמה בעיות שאנחנו צריכים לפתור. הסיבה הראשונה היא הביצועים. כל Loader הזמן הדרוש כדי לחשב תלות, היא צריכה ללכת מבנה submodule / תוסף של כל מודול. עושים את זה אלפי פעמים כאב הביצועים שלנו במהלך Loader לחשב שגרתית. על ידי הסרת תמיכה submodules במערכת הליבה הצלנו עשרות אלפי קריאות לפונקציות ו חזרות.

Loader שונה, כך שאם use הרכוש נתונים העל של מודול מוגדר מודולים נוספים, הוא ישתמש באותם מודולים במקום לנסות לטעון את המודול המקורי. לכן, אם ביקש " dd "Loader יבדוק" dd "של" meta-data ולראות נכס לשימוש זה נראה בערך כך:

     "DD-DDM בסיס, DD-DDM, DD-DDM-drop, DD-גרירה, DD-proxy, DD-להגביל, DD-drop, DD-הגלילה, DD-drop-plugin"

בקובץ זרע הליבה Yui, אנחנו גם כולל את מה שאנחנו קוראים אוספי וירטואליים או כינויים. אלה הגדרות מודול הם בדיוק כמו נתונים מטא ב Loader. בדרך זו ניתן לכלול את כל הקבצים המיוצאים מתלות Configurator שלנו עדיין משתמשים אלו אוספי מבלי הנוכחי Loader בדף. לפרסומים עתידיים, אנחנו נהיה הזיקוק גישה זו עוד יותר.

לאחר ביצוע שינוי זה, לאחר מכן preceeded להתפוצץ קבצים לבנות שלנו. במהדורות קודמות, submodules קבעו את הנתיב מודולים הקובץ. לדוגמה:

     "DD": {
         "Submodules": {
             "Dd גרירה": 
             / / מודול נתונים
         }
     }

ב 3.3.0 כאשר נבנה "dd", מבנה הקובץ נראה בערך כך:

     / Build / DD / DD-drag.js
     / Build / DD / DD-ddm.js
     / Build / DD / DD-drop.js

עם מערכת 'בנייה התפוצץ 3.4.0, "dd" של לבנות קבצים עכשיו נראה כך:

     / Build / DD גרירה / DD-drag.js
     / Build / DD-DDM / DD-ddm.js
     / Build / DD-ירידה / DD-drop.js

זה מאפשר לנו להסיר את המאפיין "נתיב" מכל מודול נתונים מטא שלנו, כמו גם, שמירת גודל הקובץ והפחתת ההיגיון נדרש להרכיב את מודולי נתיבי URL.

אם אתה כולל כתובת האתר מוגדר מראש משולבת, עליך לחשב מחדש את כתובת האתר שלך בעת שדרוג.

החיסרון של שינוי זה היא כי אם אתה כולל כתובת משולבת של מודולים ל "Prep" הדף שלך אתה לא יכול פשוט לשנות את מספר הגירסה ולשדרג. תצטרך לבקר שוב תלות Configurator וליצור כתובת האתר החדש עם מבנה מודול חדש.

העתיד

I will be continuing to refine, refactor and maximize every aspect of our Loader and Seed strategy. These first steps were needed to aid in future changes that need to be made for not only our client-side strategy but also our server, command-line and mobile device strategies as well.

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

מופעל על ידי וורדפרס על יאהו! אירוח אתרים .

Y.Calendar מגיע 3.4.0

זמן & פרטים

הקלטה

DataTable עדכון וגלריה ראווה

זמן & פרטים

Sandboxing

לדפדפנים הפשטה

YQL

שיפורים עתידיים: YSlow חדשות לממשק ידידותי נייד

הביצועים של הכלי ביצועים

נוסף על YSlow

GBS שינויים

מבחן הדפדפן Baseline

הסרת ציונים מנקודת ההתחלה מבחן הדפדפן

הסרת מערכות הפעלה מנקודת ההתחלה מבחן הדפדפן

מדוע IE6 עדיין ברשימה?

תחזית GBS

GBS ארכיון

הרחבת המרכיב שלך

הגדרת תבנית

נכס _CLASS_NAMES

{ס} מציין מיקום

שימוש ב _makeNode renderUI

שיטת _locateNodes

נכס _EVENTS סטטי

נכס _ATTRS_2_UI סטטי

מסקנה

קובץ זרע

אוספי

בנה פיצוץ קובץ להסרת Submodule

העתיד

Yui ספריית בטוויטר

לתרגם

סינדיקט

הודעות אחרונות

Yui הספריה

ארכיון:

הבלוגים

תגובה מדיניות

להיות יאהו

מטה:

`Y.Calendar` מגיע 3.4.0