YUI معاينة النسخة 3.4.0 3 متوفر الآن على كندي

28 يوليو 2011 في الساعة 12:39 من قبل جورج بوكيت | في التنمية | 4 تعليقات

أكمل فريق YUI مجرد سباق التطوير النهائي لإطلاق سراح 3.4.0. في هذا الوقت ونحن نعتبر رمز كاملة وظيفيا. نحن نخطط لقضاء السباق القادم مع التركيز على الدور النهائي لدينا من التجارب وخلق مزيد من الأمثلة والوثائق. وقد سجلت لدينا خبير FC (كاملة الوظيفية) بناء على كندي للتنقيب عن المجتمع وردود الفعل. يمكنك الوصول إلى هذا الإصدار في http://yui.yahooapis.com/3.4.0pr3/build/yui/yui-min.js .

هناك بعض مناطق معينة من المكتبة حيث كنا نحب أن لديك ملاحظات المجتمع :

  • وكان رافعة مهمة لعملية تحديث 3.4.0. إذا كنت تفعل المواصفات تحميل دليل عبر use("*") أو الاستفادة من تكوينات submodule ، لكنا نقدر لكم تحاول مشاركاتك مع محمل جديدة للتأكد من أننا نتعامل مع جميع حالات الاستخدام بشكل صحيح. للحصول على معلومات أكثر تفصيلا عن التغييرات محمل في هذا الإصدار ، راجع إلى آخر بلوق تصف التغيرات محمل 3.4.0 .
  • وتقويم لوحة وظيفية بالكامل وجاهزة للاستخدام مطور.
  • وكانت هناك تغييرات API القليلة التي سوف تؤثر على أي رمز التجريبية مكتوبة على API الرسومات وزعت في الافراج PR2 : الرسومات. getShape() تمت إعادة تسمية addShape() . كانت هناك أيضا عدة بدائل السمة.
  • المرحلة الانتقالية : الآن معتمدة التحولات الأصلية في فايرفوكس.
  • لقد تم الافراج عن WidgetButtons باعتباره امتدادا القطعة الجديدة التي تسمح لك بوضع المغلق ، على غرار الأزرار في رأس وتذييل أي القطعة التي تطبق معيار دعم الوحدة.
  • وقد تم تحويل القطعة ، طريقة والقطعة AutoHide - الإضافات إلى الملحقات.
  • القطعة : إضافة دعم لتدمير (صحيح) والتي سيتم إزالة وتدمير كل طفل العقد (وليس فقط boundingBox وcontentBox) الواردة في القطعة التي boundingBox. تدمر () ستحافظ على سلوكها الحالي نظرا لارتفاع كلفة التشغيل الأوان المحتملة لتدمير كل العقد التابعة. إذا كنت تدمير القطع في التطبيق الخاص بك أو مطورا القطعة مخصصة ، ستكون موضع تقدير مساعدتكم في اختبار هذا التغيير.
  • ScrollView الآن تؤيد ترحيل العمودي ، ويشمل البرنامج المساعد scrollview - القائمة لإضافة classnames CSS لعناصر القائمة فورا ، وكذلك عديد من الأخطاء وإعادة بيع ديون
  • التطبيق الإطار : إننا نريد أن نمد خالص الشكر لكم جميعا للمطورين في المجتمع الذين أخذوا الوقت لاختبار محرك إطار التطبيق الجديد. تلقينا ردود فعل ممتازة بعد اطلاق سراح PR2. يرجى مواصلة استكشاف هذه المكونات وأرسل لنا ملاحظاتك واقتراحاتك.

يمكنك الحصول على معلومات اضافية حول مضمون هذا البيان من خلال مراجعة التاريخ التراكمية و قائمة كاملة من تذاكر تناولها في PR3 . يرجى تقديم أي طلبات التعزيز ، والبق والانحدارات في قاعدة بيانات على تذكرة YUILibrary.com .

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

YUI : افتح ساعات خميس 28 يوليو

25 يوليو 2011 في الساعة 10:56 من قبل سميث لوقا | في التنمية ، ساعات فتح | 2 تعليقات

Y.Calendar قادم إلى 3.4.0

التقويم هو واحد من الحاجيات لدينا أكثر شعبية في الأسرة 2 YUI ، وانه من صنع بدايتها على بنية 3 YUI في 3.4.0. ألن رابينوفيتش هو صاحب البلاغ والعنصر وسيتم على الدعوة لنا لإعادة تقديم هذه المفضلة القديمة ، تظهر بعض مقاربات جديدة للمشاكل التي تواجهها التقويم الإصدار 2.x. ابن jazzed بصفة خاصة حول الدعم للتدويل ، ولكن القواعد الجديدة أيضا تقديم رائعة جدا.

هيا في ، واهتمامكم منتقي التاريخ ، حدث تقويم ، من استيراد وكال ، والفطائر ، تكوين الأسئلة وطلبات جديدة معكم ونحن الآن خارج الجسد والمستقبل Y.Calendar . (لا ، انها لن استيراد كال ، ولكن إذا كان شخص ما يريد أن يخلق وحدة معرض لترويض الوحش الذي ، وهناك يقين من أن تكون تذكرة YUIConf في ذلك بالنسبة لك ؛))

ونعود الى وقتنا المعتاد هذا الاسبوع ، لذلك سنرى لك في الاتصال في 10:00 PDT.

الوقت وتفاصيل

سنكون على الانترنت 10:00 حتي 11:00 PDT الخميس. تفاصيل الاتصال هي نفسها كالمعتاد.

  1. الطلب إلى 1-888-371-8922 (سكايب يعمل كبيرة بالنسبة لغير المشاركين في الولايات المتحدة *)
  2. أدخل رمز الحضور 47188953 #
  3. الانضمام إلى جلسة المشاركة الشاشة (وهذا سيطالبك لتثبيت البرنامج المساعد أدوبي الاتصال إذا كانت هذه هي المرة الأولى التي تستخدم عليه)

ملاحظة : نظرا لأنه على خط مؤتمر مفتوح ، ونحن نطلب من المتصلين كتم خطوطهم إلا إذا كانوا يشاركون في مناقشة نشطة.

* -- إذا سكايب ليس خيارا ، أو البريد الالكتروني لي اللحاق لي (ls_n) في قناة IRC # YUI على freenode لعدد المحليين.

تسجيل

شكرا للجميع لاستدعاء! في تسجيل على الانترنت للدورة متاحة الآن.

الجودة العالية ، اي فون / آي باد المتوافقة ، وتسجيل للتحميل من هنا .

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

YUI : افتح ساعات خميس 21 يوليو

19 يوليو 2011 في 2:16 سميث لوقا | في التنمية ، ساعات فتح | 12 تعليقات

عملية تحديث DataTable وعرض معرض

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

نحن نعلم أن DataTable هو القطعة مهم للغاية بالنسبة للكثير من العملاء ، لذلك نحن نفهم تكلفة تأخير التنمية تركيزا. هذا وسيتم فتح ساعات تحديثا على ما هو العمل هو الحصول على القيام به ل3.4.0 ، ما الذي تخطط له ل3.5.0 ، ومدخلا إلى العمل العظيم الذي بدأ في الربيع حتى في معرض لإضافة ميزات وإصلاح الخلل لDataTable (و في عائلة من دعم الطبقات).

سنكون على الإنترنت ساعة واحدة في وقت سابق من هذا الاسبوع لصالح ايمون بروسنان (الملقب ، mosen من YUI #) ، الذي وفرت عددا من البقع معرض سنكون يبحث أكثر. خلاف ذلك ، سيكون لدينا غيرها # المقيمون YUI والمساهمين معرض عرض بضاعتهم. إذا كان لديك حل DataTable أو التقدم في العمل الذي ترغب في المشاركة ، واسمحوا لي أن أعرف حتى أتمكن من حجب للجدول الزمني لتناسب كل شيء (في ls_n YUI # أو تويتر ).

الوقت وتفاصيل

سنكون على الانترنت من 9:00 إلى 10:00 PDT الخميس. تفاصيل الاتصال هي نفسها كالمعتاد.

  1. الطلب إلى 1-888-371-8922 (سكايب يعمل كبيرة بالنسبة لغير المشاركين في الولايات المتحدة *)
  2. أدخل رمز الحضور 47188953 #
  3. الانضمام إلى جلسة المشاركة الشاشة (وهذا سيطالبك لتثبيت البرنامج المساعد أدوبي الاتصال إذا كانت هذه هي المرة الأولى التي تستخدم عليه)

ملاحظة : نظرا لأنه على خط مؤتمر مفتوح ، ونحن نطلب من المتصلين كتم خطوطهم إلا إذا كانوا يشاركون في مناقشة نشطة.

* -- إذا سكايب ليس خيارا ، أو البريد الالكتروني لي اللحاق لي (ls_n) في قناة IRC # YUI على freenode لعدد المحليين.

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

YSlow المقبل جنرال مدعوم من YUI

18 يوليو 2011 في 9:17 بواسطة مارسيل دوران | في التنمية ، الأداء | 4 تعليقات

وقبل بضعة أسابيع ، أعلنت ياهو YSlow للجوال في سرعة 2011 ، وبذلك يصبح قوة تحليل أداء YSlow للعالم المحمول.

YSlow للجوال يعمل بووكمركلت ، مما يجعل من الممكن أن تعمل على متصفحات أخرى غير فايرفوكس (بوصفها الإضافة) أو الكروم (امتدادا) .

وأعيد تصميم الهيكل YSlow جزئيا للعمل عبر منصة وYUI كان عاملا أساسيا في جعل sandboxing ، عبر متصفح التجريد والوصول YQL بسيطة ممكن.

Sandboxing

من أجل أن تكون جزءا لا يتجزأ من على صفحة ودون التدخل في تحليل الأداء وبدون العبث مع الصفحة نفسها ، YSlow هو بووكمركلت أن يقحم جافا سكريبت والمغلق في أي صفحة من خلال الاستفادة من قوة sandboxing YUI :

بووكمركلت URL :

 جافا سكريبت : (وظيفة (ص ، ع ، س) {
     ع = y.body.appendChild (y.createElement ('IFRAME')) ؛
     p.id = 'YSLOW - بووكمركلت' ؛
     "عرض : لا شيء' p.style.cssText = ؛
     س = p.contentWindow.document ؛
     o.open (). الكتابة ('
         <HEAD>
         <الجسم onload = "
             YUI_config = {
                 فوز : window.parent ،
                 ثيقة : window.parent.document
             } ؛
             فار د = الوثيقة ؛
             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 الخارجية ضمن هذا الإطار من دون أن يتعارض ذلك مع الأنماط في الصفحة الأصل. YSlow بمسح الصفحة الأصل من أجل الحصول على جميع العناصر (الصور والنصوص والروابط ، الصور الخلفية ، ومضة ، الخ) اللازمة لتحليل الأداء لاحقا. يتم ذلك عن طريق الوصول Y.config.win و Y.config.doc ، إذ أنها تشير إلى الصفحة الأصل.

عبر متصفح التجريد

كونه بووكمركلت ، يفترض YSlow للجوال للعمل في أي متصفح *. YUI الخلاصات عبر متصفح القضايا تطبيع الخلافات المستعرض ، مما أدى إلى نظيفة ، سهلة القراءة ومصدر برنامج للصيانة.

لم يكن YSlow استدار تماما YUI 3 -- طبقة تحكم فقط (من المكون تطبيق المقبلة) في الوقت الراهن -- ولكن لا تزال ، هي فعلت كل تلاعب DOM والتعامل مع الحدث و node و event وحدات. في الإصدارات المستقبلية التي نخطط لميناء المزيد من الميزات لYSlow YUI 3.

* معتمدة حاليا ليست كل المتصفحات

YQL

YSlow تحليلات صفحات عن طريق فحص رؤوس HTTP للمكونات الموجودة على الصفحة. رؤوس استجابة HTTP غير متوفرة في صفحة ، وبالتالي هذه المكونات تحتاج إلى أن يطلب مرة أخرى من أجل الحصول على المعلومات YSlow رأس استجابة. ويمكن تحقيق هذا عن طريق طلب قائمة عناوين المكون من خلال مدعوم (اياكس) ولكن للأسف بسبب سياسة تقييد نفس الأصل ، وهذا غير ممكن ما لم يكن جميع المكونات في نفس المجال مثل الصفحة التي من غير المرجح للغاية.

والحل المشترك لنفس الأصل تقييد السياسة باستخدام JSONP ، حيث خادم خارجي يعمل كوكيل الطالبة قائمة عناوين مكوناتها واسترداد رؤوس HTTP على الاستجابة باسم YSlow. نظرا لشعبية YSlow وتحليل الأداء الجهود الاخيرة المتنقلة ، ونحن نتوقع تماما حركة المرور الكثيفة للYSlow لبووكمركلت المحمول. من أجل دعم حركة من هذا القبيل ، YQL هو الحل الذي اعتمدته YSlow للتحجيم من خلال بيانات الجدول فتح يدعى data.headers التي باسترداد رؤوس استجابة والمضمون للحصول على قائمة معينة من عناوين المواقع في حين ينتحل صفة وكيل المستخدم لضمان المحتوى المتوقع استردادها.

و الاستعلام YQL مكون يفعل كل أعمال إدارة الاستعلامات YQL بينما تطلب إدارة JSONP تحت غطاء محرك السيارة ، مما يجعل رمز تحكم YSlow أبسط من ذلك بكثير وسهلة للحفاظ.

المستقبل التعزيزات : YSlow جديد لواجهة ودية موبايل

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

أداء أداة الأداء

وقدم للنشر YSlow موبايل تدرس بعناية تأثيره على أداء وقت تحميل الصفحة التي يجري تحليلها. تم التدقيق في 3 وحدات YUI المستخدمة في YSlow لتشمل وحدات فقط تحتاج إلى تحميل YSlow بأسرع وقت ممكن. الملف YUI البذور ومحمل لم تكن مدرجة منذ تم دمج جميع الوحدات الضرورية والوحدات الفرعية التالية معا لأداء ريان جروف زن نصائح ، والتي جعلت من الممكن لتحميل كل شيء معا في طلب واحد واحد صغير : yslow - bookmarklet.js : 204KB ، 66KB ( غزيب) حيث :

  • YUI : 75KB ، 27KB (غزيب)
  • YSlow : 129KB ، 39KB (غزيب)

المزيد حول YSlow

ابق على اطلاع دائم على موعد مع أحدث إعلانات YSlow من قبل :

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

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

تحديث متدرج دعم المتصفح

12 يوليو 2011 في الساعة 08:55 من قبل دونيلي جيني ومات سويني | في التنمية ، مدرج دعم المتصفح | 21 تعليقات

التغييرات GBS

تغييرات محددة لهذا التحديث ما يلي :

متصفح اختبار خط الأساس

إنترنت إكسبلورر 6.0 7.0 8.0 9.0
فايرفوكس 3. † 4. † 5. †
الكروم † أحدث مستقرة
رحلات السفاري 5. † 3 دائرة الرقابة الداخلية. † دائرة الرقابة الداخلية 4. †
بكت الروبوت 2. †

ملاحظات :

  • الرمز خنجر (كما في "فايرفوكس 4. †") يشير إلى أن معظم المتداولة غير إصدار بيتا على هذا المستوى فرع يتلقى الدعم.
  • لا يرد على توجيهات دائرة الرقابة الداخلية أو استخدام الجهاز الروبوت نظام التشغيل. هذه التوصية هي أن تختار الأجهزة التي هي الأكثر تمثيلا للقاعدة المستخدمين للحصول على كل نظام التشغيل.

إزالة الصفوف من متصفح الأساس اختبار

هذه الطبعة من التحديث GBS تمثل خروجا عن التحديثات السابقة لدينا في أننا نتحرك بعيدا عن متصفحات الخرائط مباشرة إلى درجات الخبرة (على سبيل المثال "A - الصف" و "جيم الصف"). بدلا من أن تفرض ما هي تجربة المستخدم المناسبة التي المتصفحات ، فإننا سوف تركز على تحديد خط الأساس لاختبار كفاءة الاستراتيجية التي يزيد اختبار التغطية ، ويقلل من السطح الاختبار. على سبيل المثال ، واصلت IE6 الذي ما زال كبيرا أوامر من سوق عالمية الاختبار ، ولكن في اليوم GBS يسمح للمستخدم تجربة IE6 أن تكون مختلفة عن تجربة IE9.

إزالة أنظمة التشغيل من متصفح الأساس اختبار

من أجل تبسيط الاختبار وتقليل الاحتياجات من الموارد ، ونحن لم تعد تحدد ينبغي اختبار نظام التشغيل. الاستثناء الوحيد هو عندما يقترن بإحكام المستعرض مع إصدار نظام التشغيل ، في هذه الحالة نشير إلى إصدار نظام التشغيل بدلا من إصدار متصفح (مثل "دائرة الرقابة الداخلية سفاري 4"). هذا يتيح لنا التركيز على التغطية اختبار إصدارات المتصفح ، والتقليل من التجارب redudant عبر منصات. مشاكل مع المتصفح نفسه عبر إصدارات تكاد لا تذكر ، والمتصلة عموما OS الاختلافات على مستوى أعلى ، مثل التعامل مع الرئيسية والخطوط المتوفرة. وينبغي اختبار التعليمات البرمجية التي من المعروف أن أتطرق عبر منصة القضايا على النحو عدد ممكن من المنصات ، ولكن هذا الاختبار عموما يمكن أن تكون معزولة لقضايا محددة بدلا من تشغيل اختبار الانحدار الكامل من جميع الميزات. نوصي مواءمة الأولوية اختبار نظام التشغيل مع قاعدة المستخدم الخاص بك.

لماذا لا يزال IE6 في القائمة؟

IE6 لا يزال لديه ما يكفي كبيرة حصتها في السوق العالمية لتبرير التحقق منها تجربة المستخدم مقبولة. كان واحدا خطأ شائع مع استراتيجية تعزيز التقدمي أنه بمجرد أن يدخل متصفح "C - الصف" الذي يصبح "غير معتمد" ، في حين أنه يعني في الحقيقة أنه ينبغي تسليمها تجربة HTML فقط. والآن ونحن لم تعد تفرض المتصفحات التي تتلقى ما التجربة ، ترك هذا للمشاريع التي تقرر بناء على مستخدميها والموارد. ويركز على تحديد GBS المتصفحات التي تحتاج إلى خبرة التحقق قابلة للاستخدام على أساس عوامل مثل حصتها في السوق والنفوذ. يتم ترك تحديد ما هو "قابلة للاستخدام" وspecifiying مستويات مقبولة من تدهور للفرق للبت فيها. علينا أن نعزز ما زالت بسيطة تعزيز التقدمي النموذج ، وعدم تشجيع المشاريع من خلق مستويات جديدة من دون حساب تكاليف إضافية في مجال تطوير واختبار وصيانة الموارد.

GBS التوقعات

نتوقع لإجراء التغييرات التالية في التحديث التالي :

  • التوقف عن تغطية لدائرة الرقابة الداخلية على سفاري 3.
  • إضافة لتغطية بكت على الروبوت 3.
  • إضافة لتغطية فايرفوكس 6.
  • إضافة تغطية لدائرة الرقابة الداخلية سفاري 5.

وGBS الأرشيف

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

في "MakeNode" تمديد القطعه

8 يوليو 2011 في 2:11 قبل ساتيام | في التنمية | 6 تعليقات

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

في مقالتي السابقة ، وصفة لتطبيق 3 YUI ، وأظهر لي وسيلة لاستخدام Y.substitute بمثابة قالب المعالج الأساسي للغاية. أخذت فكرة الحياة من هناك ، مع اقتراحات من الناس في قناة IRC # YUI ، وأنا جعلت من امتداد القطعة التي تتوفر على موقعي ، ودعا MakeNode . MakeNode ليس قالب المعالج عامة وليس القصد بأنها واحدة. من ناحية أخرى ، تتكامل مع انها YUI القطعة الطبقة الأساس ، بما في ذلك المساعدين className والحدث والتدويل. في هذا المقال ، سوف أتناول سبينر سبيل المثال وتعديله لمتابعة المبادئ التوجيهية من مقالتي السابقة ، واستخدام MakeNode. المكون سبينر المحورة ( شبيبة ، CSS ، العفاريت ) ، فضلا عن المثال المتوفرة من موقعي. يمكن العثور على ارتباطات لمزيد من الموارد في نهاية هذه المقالة.

تمديد المكون الخاص بك

بمجرد أن يتم تحميل MakeNode ، تحتاج إلى تضمين وحدة في الخاص YUI().use() العبارة باستخدام اسم 'makenode' . ثم ، لتوسيع نطاق مصغر الخاص بك ، فإنك في قائمة الوسيطة الثالثة إلى Y.Base.create() ، مثل هذه :

  Y. سبينر Y.Base.create = (
      'سبينر ،
      Y. القطعة ،
      [يوسف MakeNode]
      {
         / أعضاء مثيل /...
      } ،
      {
          / / أعضاء ثابت
      }
 ؛) 

يمكنك إضافة MakeNode على طول أي عدد من ملحقات مناسبة للالقطعة ، مثل WidgetParent ، WidgetChild ، WidgetStdMode ، الخ MakeNode يضيف طريقتين المحمية ، _makeNode و _locateNodes, وانها سوف تقرأ من خصائص ثابتة عدة ، إذا وجدت.

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

تحديد قالب

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

  _TEMPLATE : [
     '<inputtype="text" title="{s input}" class="{c input}">' ،
     '<buttontype="button" title="{s up}" class="{c up}"> </ الزر>' ،
     '<buttontype="button" title="{s down}" class="{c down}"> </ الزر>'
 ]. انضمام ('\ ن') ، 

وعادة ما يكون القالب الافتراضي المسمى _TEMPLATE وأعلن على طول خصائص ثابتة أخرى من فئة ، مثل ATTRS . سوف MakeNode استخدام هذا القالب إذا قدم بشكل صريح دون غيره. يتكون القالب من HTML عادي ، بالإضافة إلى سلسلة من العناصر النائبة بين أقواس متعرجة ، كل مصنوع من حرف واحد (رمز تجهيز) ، وتليها واحدة أو أكثر من الوسائط. العناصر النائبة وما ينتجونه هي :

  • {@ attributeName} تكوين قيمة السمة

  • {p propertyName} سبيل المثال قيمة العقار

  • {m methodName arg1 arg2 ….} قيمة الإرجاع للأسلوب معين. يتبع رمز تجهيز بالاسم طريقة وبأي عدد من الحجج مفصولة بيضاء. يجب وضع السلاسل في علامات اقتباس مزدوجة. الأرقام والقيم المنطقية و null وسيتم تحويلها إلى سلسلة من أنواع بياناتها سليمة

  • {c classNameKey} className CSS المتولدة من _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”) حتى أن أول حجتان يتم تحويلها إلى أنواع من البيانات الصحيحة والسلسلة يمكن أن تحتوي على مسافات. لتشمل اقتباس مزدوجة ، استخدم \\" ، ومائل مزدوجة يجري المطلوبة لأن جافا سكريبت وتفسير واحد ويتجاهل أنه قبل أن يحصل على MakeNode ويسمح فقط يقتبس مزدوجة ، MakeNode لا يستخدم eval() بحيث يقتصر محلل لكن آمنة ، أي شيء ولكن الأرقام ، null سيتم تجاهلها ، وضعف القيم المنطقية ونقلت سلاسل.

و {?} النائب مفيد لاستخدامه مع مربعات وأزرار الراديو. سوف تنتج سلسلة “checked” اعتمادا على القيمة الحقيقة للمعالجة التعليمات البرمجية الذي يلي. وهكذا ، <input type=”checkbox” {? m getLength}/> <input type=”checkbox” {? m getLength}/> سوف ينتج مربع ملحوظ إذا 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 الملكية لإنشاء أي عدد من 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 السمة يحتوي على التجزئة حيث يقع كل نص الفردية مفتاحه. المكون سبينر والسلاسل التالية ، والتي يمكن أن نرى استخدمت في القالب أعلاه.

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

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

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

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

_makeNode به في renderUI

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

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

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

و _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 يتيح مواصلة وضع _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 : {
     '' : {
         مفتاح : {
             الجبهة الوطنية : "_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 ثابت

الأحداث تذهب في كلا الاتجاهين ، من واجهة المستخدم إلى المكون والمكون من واجهة المستخدم. يتم معالجتها هي الاولى ل _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 ، {ضمني : UI}) ؛
 } 

الأمر متروك لنا لضمان أن التغييرات قادمة من واجهة المستخدم وبالتالي يتم وضع علامة الاختيار ثم أن العلم نفسه لتجنب التكرار.

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

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

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

السؤال الذي يطرح نفسه بطبيعة الحال ، لماذا قائمتين ، واحدة لأخرى ملزمة للمزامنة؟ غالبا ما يكون SYNC مجموعة تضم عددا أقل من الإدخالات BIND القائمة ، وذلك لأن القالب لمكون قد يكون بالفعل القيمة الافتراضية نفسها باعتبارها السمة التكوين وليس هناك حاجة للقيام المزامنة الأولي. لذا ، إذا كانت القيمة الافتراضية ل value السمة التكوين هو سلسلة فارغة و <input> عنصر في قالب ليس لديه value السمة ، ثم ليست هناك حاجة لمزامنة لهم على التهيئة.

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

اختتام

MakeNode يوفر المعالج قالب بسيط جدا ، مع وظائف بسيطة للغاية أن يكون متكاملا مع الطبقة أساس القطعة. كما يوفر وسائل لخلق classNames المساعد لاستخدامه في القالب واستخدام تلك الأسماء لتحديد العقد بإنشائه. كما يوفر وسيلة لربط الأحداث التي تم إنشاؤها في كل من واجهة المستخدم والمكون نفسه والمنتسبين مع كل أسلوب. انها تفعل كل هذه الأشياء ، مع الحرص على احترام سلسلة الميراث تصل مباشرة إلى القطعة وأي مستوى من مستويات الصفوف التي قد تحدد.

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

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

يمكن العثور على مستندات API هنا .

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

YUI والتغييرات لودر 3.4.0

1 يوليو 2011 في 6:34 بواسطة زجاج DAV | في التنمية ، الأداء | 10 التعليقات

في 3.4.0 بدأنا عملية تحويل بعض المنطق في محمل حولها ، حتى لا يؤدي إلا إلى مزيد من performant ، ولكن لجعله أكثر متانة وأسهل للاستخدام في أماكن أخرى (مثل على الملقم). سنكون المتداول خارج مزيد من التغييرات في المراجعات المستقبلية ، ولكني أردت أن تأخذ بعض الوقت ، وشرح ما تم تغييره ، لماذا تم تغييره وكيف أنها قد تؤثر على المطورين. بالنسبة لغالبية حالات الاستخدام ، وسوف تلاحظ شيئا مختلفا للمطورين ، إلا أن الأمور أسرع قليلا والتنزيلات المطلب هم أصغر قليلا.

ملف البذور

أول شيء أريد أن العنوان هو ملف YUI البذور. في الإصدارات السابقة من YUI ، كان لدينا ملف البذور صغيرة جدا ولا تحتوي محمل أو أي من البيانات الفوقية والخمسين. لقد وجدنا أنه في حالة استخدام 90 ٪ هذا لم يكن كما performant كما كنا نأمل. للمستخدم العادي يتضمن ملف البذور ثم يطلب وحداتهم ، وهذا بدوره يعني أن البذور تحتاج الى جلب first تحميل ، ثم حساب كافة التبعيات الخاصة به ، ثم جلب لهم جميعا. نحن نشعر الآن بأن هذا الطلب الاضافي المتشعب هو الشيء الخطأ القيام به ، وبالتالي فإن ملف جديد يحتوي على محمل البذور القياسية والتعريف به للبيانات. نعم ، وهذا سيجعل الطلب الأولي أكبر قليلا ، ولكنه سيجعل من تحميل الوحدات النمطية التي أسرع بكثير لأن جميع متطلبات بيانات التعريف به الآن بالفعل على الصفحة.

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

     / بناء / YUI / YUI - min.js / / YUI البذور + اللودرات
     / بناء / YUI القاعدة / YUI - min.js القاعدة / / القديم مع البذور YUI محمل جلب الدعم
     / بناء / YUI الأساسية / YUI الأساسية min.js - / / قديم YUI قاعدة دون محمل جلب الدعم

تجدر الإشارة إلى أن هذه هي عناوين مختلفة من عناوين المواقع السابقة. أي شخص كان يستخدم yui/yui-base.js الملفات تحتاج إلى repoint لهم yui-core/yui-core.js . إذا أردت أن أقدم وسيلة لتحميل جلب البذور وتحميل ، ويمكنك استخدام yui-base/yui-base.js ملف البذور.

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

التراكمية

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

      وحدة نمطية : يتطلب الحدث أ ، ب الحدث
      الوحدة (ب) : يتطلب الحدث ج ، د الحدث

عند طلب على حد سواء ، ومنطق تراكمي قبل 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 ، ولكن الدعم لوحة المفاتيح لا تعمل. بعد القيام ببعض التحقيق بسيطة ، وتبين أن الدعم تراكمي كانت الطالبة فعلا تراكمي الحدث بأكمله (والذي يتضمن نقل الحدث والحدث الرئيسي). Without the rollup logic pulling in all of event, 3.4.0 Dial no longer had all of its requirements. Making Dial's requirements more specific and defining all of its actual dependencies properly makes it work as expected.

    requires: [
        'widget',
        'dd-drag',
        'substitute',
        'event-mouseenter',
        'event-move',
        'event-key',
        'transition',
        'intl'
     ]

For module developers, it is a best practice to make sure that your module requires exactly what it needs to function. Do not assume that an upstream module requirement is there. It's always better to make sure that you ask for what you need.

This also means that module requirements are more well defined. For example, datatype-date has Intl support built in. In previous versions you would access the Intl like this:

    Y.Intl.getAvailableLangs('datatype-date');

But since this module doesn't actually have a language (the datatype-date-format module does), this will fail. It needs to be more specific and actually ask for languages for the correct module:

    Y.Intl.getAvailableLangs('datatype-date-format');

Build File Explosion and Submodule Removal

After making this change, the next change we made was exploding the build directory and removing submodules from the core system. Submodule logic was not removed, only our meta-data structure was changed. This will provide backward compatibility for current installations.

Submodules in the core system caused a couple of issues that we needed to resolve. The first reason was performance. Each time Loader needed to calculate dependencies, it needed to walk the submodule/plugin structure of each module. Doing this thousands of times was hurting our performance during the Loader calculate routine. By removing support for submodules in the core system we saved tens of thousands of function calls and iterations.

Loader was changed so that if a use property in a module's meta-data defined more modules, it will use those modules instead of trying to load the original module. So, if you requested “ dd ” Loader would inspect “ dd “'s meta-data and see a use property that looks something like this:

    "dd-ddm-base,dd-ddm,dd-ddm-drop,dd-drag,dd-proxy,dd-constrain,dd-drop,dd-scroll,dd-drop-plugin"

In the core YUI seed file, we are also including what we are calling virtual rollups or aliases . These module definitions are exactly the same as the meta-data in Loader. This way you can include all the files exported from our Dependency Configurator and still use these rollups without having Loader present on the page. In future releases, we will be refining this approach even more.

After making this change, we then preceeded to explode our build files. In previous releases, the submodules determined the modules file path. على سبيل المثال :

    "dd": {
        "submodules": {
            "dd-drag": 
            // Module data
         }
     }

In 3.3.0 when you built “dd”, the file structure looked something like this:

    /build/dd/dd-drag.js
    /build/dd/dd-ddm.js
    /build/dd/dd-drop.js

With the build system exploded in 3.4.0, “dd”'s build files now look like this:

    /build/dd-drag/dd-drag.js
    /build/dd-ddm/dd-ddm.js
    /build/dd-drop/dd-drop.js

This allowed us to remove the “path” property from all of our module meta-data as well, saving file size and reducing the logic required to assemble the modules url paths.

If you are including a pre-configured combo URL, you must recalculate your URL when you upgrade.

The downside to this change is that if you are including a combo URL of modules to “prep” your page you can not just change the version number and upgrade. You will need to revisit the Dependency Configurator and generate a new URL with new module structure.

المستقبل

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.

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

استضافته ياهو

حقوق الطبع © 2006-2011 شركة ياهو جميع الحقوق محفوظة سياسة الخصوصية -- شروط الخدمة

مدعوم من وورد على ياهو! استضافة المواقع .