المدونة ياهو واجهة المستخدم (YUIBlog)

تحديث: إن "MakeNode" تمديد القطعة

ملاحظة المحرر: هل كانت هذه المقالة نشرت أصلا في وقت سابق من هذا العام . منذ ذلك الحين، تم نشر وحدة MakeNode إلى معرض YUI وتلقى بعض التحسينات. مقال اليوم يعكس كل التغييرات الأخيرة إلى MakeNode.

في مقالتي السابقة، وصفة لتطبيق 3 YUI ، وأظهر لي وسيلة لاستخدام Y.substitute مثل معالج قالب أساسية جدا. أخذت فكرة الحياة من هناك، مع اقتراحات من الناس في القناة # IRC YUI، وأنا جعلت من امتداد القطعة التي تتوفر على معرض 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, وسوف يقرأ من خصائص ثابتة عدة، إذا وجدت .

جميع أعضاء هذا التمديد هي محمية أو خاصة منذ ما هو مطلوب منهم لاستخدامها من قبل المطور مكون وليس عن طريق المنفذ باستخدام تلك المكونات، الذي لا ينبغي أن تكون ازعجت معها. تذكر للتحقق من "عرض المحمي" الخيار عند عرض مستندات 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}"> </ زر>'
 ]. انضمام ('\ ن')، 

وعادة ما القالب الافتراضي الكشف عن اسمه _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 } يشبه إلى حد كبير ?: مشغل جافا سكريبت، ويقيم على valueIfTrue اذا كان الشرط هو truish، valueIfFalse خلاف ذلك.

• {1 condition valueIfOne valueIfMore } تستخدم لإنتاج صيغة المفرد / الجمع الكلمات على أساس قيمة الشرط.

• {} وسيتم التعامل مع أية قيمة أخرى مثل Y.substitute يفعل.

على سبيل المثال، {@ value} سوف تترجم إلى this.get('value') في حين {p value} يترجم إلى this['value'] .

عندما يكون النائبة الحجج، مثل {m} ، {?} و {1} ، لا بد من إحاطتها السلاسل في علامات اقتباس مزدوجة. الأرقام والقيم المنطقية و null وسيتم تحليل (جميع غير مسعرة) لأنواع بياناتها سليمة. يمكن أن تتداخل العناصر النائبة. و {?} و {1} النائبة سوف عادة ما تحتوي على عنصر نائب المتداخلة لهذه الحالة، وربما الى حد بعيد لقيمهم، على سبيل المثال:

  {ع الكمية} {1} {ع الكمية "وحدة" "وحدات"} 

إذا كانت الخاصية qty هو 1، وسوف تقيم على "1 unit" ، لمدة 2 أو أكثر فإنه سيعود "2 units" وهلم جرا. وهناك نسخة أكثر تفصيلا التعامل مع صفر على النحو التالي:

  {؟  {ع} الكمية "{ع الكمية} {1} {ع الكمية" وحدة "" وحدات "}" "لا شيء"} 

لاحظ أن نتيجة تجهيز العناصر النائبة الداخلية، وإذا سلسلة، يجب وضع في مجموعتها الخاصة من علامات الاقتباس.

لتشمل اقتباس مزدوجة داخل سلسلة نقلت، استخدم \\" ، ومائل مزدوجة يجري المطلوبة نظرا لأن جافا سكريبت وتفسير واحد واحد ويتجاهل ذلك قبل أن يحصل على MakeNode يسمح يقتبس فقط مزدوجة؛. MakeNode لا تستخدم eval() لذلك محلل غير محدودة، ولكن آمنة. أي شيء ولكن أرقام، null ، القيم المنطقية وضعف سلاسل نقلت وسيتم تجاهلها.

و {?} النائب هو مفيد أيضا لاستخدامها مع خانات الاختيار وأزرار الراديو. ويمكن استخدامه لانتاج سلسلة "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" مفتاح، والثاني تحت "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 السمة يحتوي على التجزئة حيث يقع كل نص الفردية مفتاحه. المكون سبينر لديه سلاسل التالية، والتي يمكن أن نرى استخدمت في القالب أعلاه.

  الجمل: {
     القيمة: {
         المدخلات: "اضغط على زر السهم لأعلى / أسفل مفاتيح لزيادات طفيفة، صفحة لأعلى / أسفل لزيادات كبيرة."،
         يصل: "طريقة"،
         أسفل: "التناقص"
     }
 }، 

أفضل جزء من ذلك هو أنه يمكن ترجمة المكون الخاص بك إلى لغات أخرى بسهولة جدا من قبل المطورين باستخدام المكون الخاص بك. عند إنشاء مثيل سبينر، قد تفعل:

  فار mySpinner = جديد سبينر ({سلاسل: Y.Intl.get ('الدوار')})؛ 

تحديد السمة تكوين strings بهذه الطريقة يستبدل الافتراضي strings القيم مع تلك اللغة من ملف المورد باستخدام اللغة المحددة سابقا. في {s} نائب يصل إلى سلاسل المخزنة في strings السمة، سواء منها الافتراضية أو تلك المترجمة، إذا مجموعة. في {s xxxx} النائب هو تقريبا مثل استخدام {@ strings.xxxx} إلا أن سلاسل الاستبدال محلية يمكن أن يكون لها النائبة التي سيتم تجهيزها أيضا. وهذا أمر مهم للترجمة منذ أمر بنائي يختلف من لغة إلى لغة، وهذا يتيح إعادة صياغة النص، بما في ذلك العناصر النائبة لتتناسب مع أي لغة. ويمكن أيضا أن السلاسل يمكن الوصول إليها باستخدام {@ strings.xxxx.yyyy.zzzz} ، والتي سوف تسمح بالوصول إلى سلاسل متداخلة أعمق الأعماق، وسوف منع بدائل أخرى. يمكن تضمين الأقواس المتعرجة في النص باستخدام {LBRACE} و {RBRACE} كعناصر نائبة.

باستخدام _makeNode في renderUI

نحن نستخدم قالب لإنشاء توصيف لعنصر لدينا. للقيام بذلك، يمكن أن نسميه MakeNode في _makeNode طريقة، مثل هذا:

  renderUI: وظيفة () {
     . this.get ('contentBox') إلحاق (this._makeNode ())؛
 }، 

وهذا في ملء contentBox من القطعة لدينا مع العلامات من تجهيز القالب. و _makeNode الأسلوب بإرجاع مثيل Y.Node التي يمكن إدراجها في أي مكان أو إلحاق أو مجرد عقد لاستخدامها لاحقا. فإنه لا يرجع سلسلة، وتنتج Node سبيل المثال. (إذا كنت لا تحتاج إلى سلسلة وليس عقدة، يمكنك استخدام _substitute الأسلوب، الذي يتطلب منك أن تمر في قالب).

و _makeNode أسلوب يأخذ الوسيطتين اختياري: مرجع إلى قالب وكائن لملء النائبة، كما Y.substitute يفعل. في مثالنا سبينر بسيط هناك قالب واحد لكامل القطعة ولكن غيرها من الحاجيات قد تتطلب اجزاء وقطع مصنوعة من قوالب عدة. في هذه الحالة، وكنت عادة استدعاء _makeNode بدون وسائط للجزء الرئيسي والذي يطلق عليه مرة أخرى مع قوالب مختلفة لملء في أجزاء إضافية. على سبيل المثال تحتوي على هذه renderUI الأسلوب:

  renderUI: وظيفة () {
     فار 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 يوفر المزيد من 1 _locateNodes الطريقة التي سيحاول العثور على جميع العناصر مع classNames أعلن في _CLASS_NAMES . لتحديد عناصر محددة يمكنك تمرير أي عدد من مفاتيح className، وإلا، _locateNodes يحاول كل منهم. لكل عنصر من العثور على كل className، _locateNodes سوف تنتج عقار مثيل خاصة باستخدام بادئة تسطير متبوعا باسم مفتاح و "Node" لاحقة. وهكذا، في سبيل المثال لدينا سبينر، _locateNodes سوف تولد خصائص _inputNode ، _upNode و _downNode . إذا عدة عناصر لديها className نفسه، _locateNodes سيعود في اشارة الى الاولى منها. إذا لم يتم العثور على عنصر، سيتم إنشاء أي متغير.

في مكون سبينر نستخدم _locateNodes بعد إنشاء العلامات:

  renderUI: وظيفة () {
     . this.get (CBX) إلحاق (this._makeNode ())؛
     this._locateNodes ()؛
 }، 

الخاصية _EVENTS ثابت

ويمكن تعريف خاصية واحدة أخرى على غرار _TEMPLATE و _CLASS_NAMES وهذا هو _EVENTS . _EVENTS سوف تحتوي على تجزئة مكونة من مفاتيح اسم الفئة، التي تحتوي على كل تجزئة من أنواع الأحداث وطرق التعامل معها. ويفسر على نحو أفضل مع هذا المثال:

  _EVENTS: {
     الإدخال: 'التغيير'، / this._afterInputChange / دعوات
     boundingBox: [
         {
             نوع: 'مفتاح'،
             الجبهة الوطنية: "_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" يشير إلى القطعة نفسها

• "Y" يشير إلى Y سبيل المثال.

إذا كان قد تم تمديد القطعة مع WidgetStdMod كذلك، مفاتيح HEADER ، BODY و FOOTER سوف أشير إلى تلك الأجزاء لأنها سوف تكون متاحة في _classNames التجزئة. جافا سكريبت ليست بحاجة الى مفاتيح لتكون نقلت إذا كانت معرفات صالحة لذلك لا شيء مما سبق يجب أن يتم نقل.

و _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 ثابت

أحداث تذهب في كلا الاتجاهين، من واجهة المستخدم إلى المكون والمكون من على واجهة المستخدم. يتم التعامل مع لأول مرة من قبل _EVENTS الممتلكات. ثم هناك الأحداث التي أطلقها التغييرات قيمة السمة التي يجب أن تنعكس في واجهة المستخدم. كما ذكرت في المقال السابق، عندما تكون هناك أي آثار ثانوية من تغيير سمة التكوين، ينبغي التعامل معها من قبل المستمعين في حالة تغيير، وليس من اختياري setter طريقة السمة، التي يجب أن يتعامل فقط مع تطبيع القيمة التي يجري وضعها. وينبغي أن واجهة المستخدم يعكس حالة من سمات التكوين، الأولى في syncUI ، عندما يتم تهيئة، ثم على كل سمة حدث التغيير. لهذا الاخير، ونحن بحاجة إلى إرفاق الإصغاء الحدث، الذي كنا نفعل عادة في bindUI . القطعة يوفر بالفعل آلية لجعل هذا بسيط، والتي وصفت في تعليق على المادة السابقة.

القطعة تستخدم خاصية سبيل المثال _UI_ATTRS الذي يحتوي على كائن مع، خاصيتين مزيد SYNC و BIND . كل هذه عبارة عن صفيف سرد أسماء من سمات التكوين أن synched في البداية ومن ثم استمع الى من اجل الحفاظ على واجهة المستخدم التي تعكس القيم الحالية. القطعة وتتوقع كل من هذه الإدخالات لديها طريقة المرتبطة به، واسمه بعد اسم السمة مسبوقة من قبل _uiSet مع الحرف الأول من اسم السمة تحويلها إلى أحرف كبيرة أن يكون اسم الأسلوب في حالة الجمل الصحيحة. وهكذا، إذا "value" كانت مدرجة في أي من _UI_ATTRS صفائف (سواء في SYNC أو BIND )، والقطعة نتوقع العثور على _uiSetValue طريقة. وهذه الطريقة تلقي حجتين، و value التي يجري وضعها و src من التغيير. هذا هو رمز لدينا سبينر _uiSetValue الأسلوب:

  _uiSetValue: وظيفة (القيمة، SRC) {
     إذا (SRC = UI) {
         العودة؛
     }
     this._inputNode.set (القيمة وthis.get (المنسق) (قيمة))؛
 }، 

أعلنت كل معرفات الكبيرة التي تراها في هذه القطعة من قانون تتوافق مع ثوابت سلسلة في مكان آخر، للسماح للضاغط YUI على القيام بعملها على نحو أفضل. الأسلوب، في الأساس، يحدد value السمة HTML في <input> مربع إلى مجموعة قيمة جديدة، بعد أن تهيئتها. وقدمت الإشارة إلى نص بواسطة _locateNodes . و src محددا في البداية لمعرفة ما اذا حجة لتعيين قيمة سلسلة 'ui' . إذا كان الأمر كذلك، سوف يتم اتخاذ أي إجراء. هذا هو لتجنب حلقات لا نهاية لها. إذا قام المستخدم بإدخال شيء في مربع الإدخال، وقيمته الخوض في value السمة التي التكوين عندئذ اطلاق valueChange الحدث، والتي من شأنها أن تحصل على _uiSetValue الذي دعا، إذا لم يكبح جماحه، وسيتوجه بعد ذلك بتغيير قيمة مربع الإدخال، والتي من شأنه أن يؤدي العملية برمتها مرة أخرى. وهكذا، في _uiSetValue ، وإذا عرفنا أن التغيير يأتي من واجهة المستخدم، ونحن نفعل شيئا، وهكذا كسر الحلقة. ومع ذلك، وهذا يتطلب قطعة أخرى من رمز في مكان آخر. في المستمع لهذا الحدث DOM، ونحن عندما تعيين السمة التكوين، ونحن نستخدم الوسيطة الثالثة اختياري للتعيين، مثل هذا:

  _afterValueChange: وظيفة (EV) {
     this.set (القيمة وev.newVal، {ضمني: واجهة المستخدم})؛
 } 

والأمر متروك لنا للتأكد من أن التغييرات قادمة من واجهة المستخدم يتم وضع علامة على هذا النحو وبعد ذلك التحقق من أن العلم نفسه لتجنب التكرار. هل استخدام المعرف src عند تحديد قيمة السمة، وليس source والتي لن يتم الاعتراف بها.

مع كل هذا وقال، لم أتحدث حتى الآن عن ممتلكات ثابتة _ATTRS_2_UI المذكورة في عنوان هذا الباب. كما تظهر هذه التعليقات في مقالتي السابقة (من خلال الأخطاء التي قمت بها في منهم)، والتأكد من أن ترد بشكل صحيح جميع الصفات التي تؤثر على واجهة المستخدم هو فوضوي بعض الشيء. يجب عليك أبدا تهيئة _UI_ATTRS من الصفر منذ القطعة يسرد بالفعل مجموعة كبيرة من الصفات وسوف تضيع تلك. لديك لسلسلة أسماء سمة جديدة على القائمة، التي هي إلى حد ما من الصعب ان نتذكر كيف نفعل ذلك الحق. لجعلها بسيطة، وسوف MakeNode قراءة من ممتلكات ثابتة _ATTRS_2_UI وذلك سلسلة من أجلك. وسوف سلسلة جميع هذه القوائم من فئة كل في سلسلة وراثة ذلك في كل مستوى كل فئة يمكن التعامل مع سمات خاصة بها. في سبينر، لدينا:

  _ATTRS_2_UI: {
     BIND: VALUE،
     SYNC: VALUE
 }، 

وسوف MakeNode تقبل على حد سواء مجموعة من الأسماء أو اسم سمة واحدة، كما في هذه الحالة.

السؤال الذي يطرح نفسه بطبيعة الحال، لماذا قائمتين، واحدة للربط أخرى للمزامنة؟ SYNC يستخدم في المرة الاولى، وبعد renderUI و bindUI الأساليب، وإذا كانت موجودة، ودعا من قبل و syncUI بينما تلك المدرجة في BIND ستكون ملزمة لل سمات المقابلة لإجراء تغييرات في وقت لاحق. وغالبا ما يكون SYNC مجموعة لديها عدد أقل من القيود من BIND القائمة، وذلك لأن قالب لعنصر قد يكون بالفعل القيمة الافتراضية نفسها كسمة التكوين وليس هناك حاجة للقيام المزامنة الأولي. لذلك، إذا كانت القيمة الافتراضية ل 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، كل ما هو متاح في معرض .

وكان دانيال باريرو (شاشة ساتيام اسم) حول لبعض الوقت: نبذة عن الكاتب. تحولت ENIAC قبالة يوم قبل أن يولد، لذلك فهو غاب عن ذلك لكنه لم غاب كثيرا منذ ذلك الحين. لقد كان لديه فرصة لبطاقات لكمة، وبرنامج 6502 رقائق (تذكر أبل الثاني؟)، يملكون. TRS-80 ونرى بعض القطع الرائعة من معدات التشغيل في بلده الأرجنتين التي قد تكون في المتاحف في مكان آخر عندما فتحت الأبواب أمام العولمة في العالم، قابلة للاستخدام لغته الانجليزية ثم بالكاد (زائد على شهادة في الهندسة الكهربائية) وضعه على المسار الوظيفي الذي انتهى في وظيفة لمدة 5 سنوات في ظهره منطقة خليج سان فرانسيسكو في الأيام من فسيفساء NCSA. انتهى به مفتون تماما من قبل يتمايل مضحك صديق له وكتب له في محرر نص عادي، والكامل لل<الصورة و> الصورة، حتى تعلم الكثير عن عالم الهندسة الواجهة. لقد كانت رحلة طويلة منذ كوبول وفورتران. وهو يعيش الآن لحسن الحظ تماما شبه متقاعد في وثيقة ساحل البحر الأبيض المتوسط ​​إلى برشلونة، إسبانيا.

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!