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

עודכן: "MakeNode" יישומון Extension

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

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

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

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

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

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

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

הגדרת תבנית

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

  _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 ….} ערך ההחזרה של השיטה נתון. קוד עיבוד מלווה שם את השיטה כל מספר של ארגומנטים מופרדים ברווחים.

• {c classNameKey} CSS classname שנוצר _CLASS_NAMES רכוש קבוע (ראה _CLASS_NAMES נכס בסעיף להלן)

• {s key} מחרוזת מ strings תכונה, באמצעות key כמו תכונה המשנה.

• {? condition valueIfTrue valueIfFalse } כמו ?: מפעיל JavaScript, מוערך valueIfTrue אם המצב הוא די נכון, valueIfFalse אחרת.

• {1 condition valueIfOne valueIfMore } המשמש לייצור יחיד / רבים מילים המבוססות על הערך של המצב.

• {} ערך אחר יטופל בדיוק כמו Y.substitute עושה.

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

כאשר מצייני יש ויכוחים, כמו {m} , {?} ו {1} , מחרוזות חייב להיות מוקף במרכאות כפולות. מספרים, Booleans ו null (כל סחירים) יהיה לנתח את סוגי הנתונים שלהם מתאימים. מצייני מיקום יכולות להיות מקוננות. {?} ו {1} מצייני המיקום בדרך כלל מכילות מציין מיקום מקונן על מצבו וייתכן מאוד על הערכים שלהם, למשל:

  {פ} {1 כמות {פ} כמות "יחידה" "יחידות"} 

אם המאפיין qty הוא 1, זה יהיה להעריך את "1 unit" , על 2 או יותר הוא יחזור "2 units" וכן הלאה. גרסה משוכללת יותר להתמודד עם אפס תהיה:

  {?  {פ} כמות "{פ} {1 כמות {פ}" כמות "יחידה" יחידות "}" "אף אחד"} 

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

כדי לכלול מרכאות כפולות בתוך מחרוזת ציטט, השתמש \\" , קו נטוי הפוך כפול נדרשים מכיוון ש-JavaScript יפרש 1 אחת מוחק את זה לפני שהוא מגיע MakeNode רק במרכאות כפולות מותר;. MakeNode אינו משתמש eval() כך מנתח מוגבל אבל בטוח. הכול, רק לא מספרים, null , Booleans ומחרוזות שצוטטו כפולים תתעלם.

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

עבור {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 , כגון 'input' , את "מפתחות classname", שכן הם יכולים לשמש כמפתח להתייחס classname בפועל או את המרכיבים המכילים את classNames, כפי שנראה בהמשך.

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

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

אם הרכיב הוא בכמה רמות הרחק יישומון, כמו 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} אלא בחוטים החלפת מקומיים יכולים להיות מצייני מיקום אשר יהיה עיבוד נוסף. זה חשוב עבור תרגומים מאז הסדר התחבירי משתנה משפה לשפה, וזה מאפשר לנסח מחדש את הטקסט, כולל מצייני המיקום שלה שיתאימו לכל שפה. מחרוזות ניתן לגשת באמצעות {@ strings.xxxx.yyyy.zzzz} , אשר יאפשר גישה מחרוזות מקוננות עמוק יותר למטה וימנע החלפות נוספות. סוגריים מסולסלים ניתן לכלול טקסט באמצעות {LBRACE} ו {RBRACE} כמצייני מיקום.

שימוש ב _makeNode renderUI

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

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

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

_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: {
     הקלט: "שינוי", / / ​​this._afterInputChange שיחות
     boundingBox: [
         {
             סוג: "המפתח",
             לחוץ Fn: "_onDirectionKey ', / / ​​שיחות this._onDirectionKey
             ארגומנטים: ((Y.UA.opera) "למטה:": "העיתונות:") + "38, 40, 33, 34"
         },
         "Mousedown" / / שיחות this._afterBoundingBoxMousedown
     ]
     מסמך: "mouseup ', / / ​​this._afterDocumentMouseup שיחות,
     Y: "broadcastingObject: someEvent" / / קורא ["_afterYBroadcastingObject: someEvent"]
 }, 

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

• "boundingBox" אתייחס תיבת תוחמת עצמה.

• "document" מתייחס המסמך המכיל את יישומון.

• "THIS" מתייחס widget עצמו

• "Y" מתייחס Y למשל.

אם יישומון הוארך עם WidgetStdMod גם מפתחות HEADER , BODY ו FOOTER אתייחס לאותם חלקים שכן הם יהיו זמינים _classNames חשיש. JavaScript לא צריך את המפתחות להזדהות אם הם מזהים תקפים ולכן אף האמור לעיל צריך להיות מצוטט.

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

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

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

MakeNode ישתמשו Node.delegate להקשיב אירועים על גורמים בתוך boundingBox , בעוד הוא ישתמש Node.after להקשיב אירועים מ boundingBox לגוף המסמך. הוא ישתמש this.after להקשיב אירועים תחת THIS המפתח Y.after עבור המאזינים הרשומים תחת Y המפתח. כל האירועים הם הקשיבו שימוש לאחר המאזינים האירוע שכן הם נועדו להפוך את יישומון להגיב לאירועים, לא לסנן את ההתנהגות של אובייקט זה יורה אותם כך בשום מקרה אין אירועים אלה ניתן למנוע או תופסק. (הערה: האזנה 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 מסומנים ובכך ולאחר מכן לבדוק את אותו הדגל, כדי למנוע לולאות. אל תשתמש מזהה src בעת הגדרת הערך של התכונה, לא source אשר לא יוכרו.

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

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

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

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

התכונות המפורטות BIND יהיה שלהם _uiSet Xxxx שיטות הנקראים בכל סדר שהוא, כמו תכונות ניתן להגדיר בכל סדר. התכונות המפורטות SYNC ייקרא פעם לפי הסדר שבו הם מופיעים עם אלה של אבותיהם לפני היורשים שלהם, כך שאם אחד לא תלויה אחרת (שהם לא צריכים), סדר יכול להיות חשוב.

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

נכס _PUBLISH

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

מסקנה

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

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

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

אודות המחבר: דניאל Barreiro (הכינוי סאטיאם) קיימת כבר די הרבה זמן. ENIAC היה כבוי יום לפני שהוא נולד, אז הוא החמיץ את זה אבל הוא לא החמיץ הרבה מאז. הוא הספיק כרטיסי ניקוב, תוכנית 6502 צ 'יפס (זוכרים את השני אפל?), משל TRS-80 ולראות כמה חתיכות פנטסטי של ציוד ההפעלה בארגנטינה מולדתו, שהיו עשויים להיות במוזיאונים ובמקומות אחרים. כאשר הגלובליזציה פתחו את הדלתות לעולם, אנגלית אז שמיש בקושי שלו (ועוד תואר בהנדסת חשמל) לשים אותו על מסלול הקריירה שהסתיימה העבודה ל -5 שנים מאחורי אזור המפרץ בימי משה NCSA. מסוקרן לחלוטין על ידי שרבוטים משעשעים חבר שלו כתב עורך טקסט רגיל שלו, מלא <וה> 's, הוא בסופו של דבר ללמוד לא מעט על העולם להנדסה הקדמי. זה היה מסע ארוך מאז COBOL ו Fortran. עכשיו הוא חי בשמחה למחצה בדימוס קרוב חוף הים התיכון בברצלונה, ספרד.

מצא את שיחות: Bloglines | technorati

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