11/13/2019

settings_overscan print announcement
في هذه العارضة الخاصة بالمطورين سنتعرف في كل مرة عن كيفية إستخدام الصيغ الإفتراضية في كود جافا سكريبت  مثل إستدعاء عنصر عنوان الصفحة   blog.title أو عنصر علامة شرطية view.isSingleItem .
بل ويمكننا تطبيق أكثر من ذلك بخلاف إسترجاع البيانات وذلك فقط حين نصل إلى مستند مدير القطعة الإفتراضي Widget Manager والذي تستطيع أن تسميه الملف المصدر لخصائص وبيانات مدونتك.


مضمون الوثيقة


الاستعلام عن مستند JSON المستهدف أو استخراج البيانات أو تحديد أقسام فرعية أو اختبار استعلام بسرعة ستشرح هذه المقالة كيفية القيام بذلك باستخدام أدوات Chrome Developer
أي ما سنقوم به كخطوة أولية في هذه التدوينة هو كيف نقوم بإستدعاء وفحص ملف JSON كائن المستند WidgetManager لنصل بعدها إلى الكائنات المتداخلة والمصفوفات وإستكشاف القيم كالحالة والوصف والبيانات..لتوضيفها مستقبلا في مشاريعنا البرمجية

سجل وحدة التحكم

في مخرجات سجل وحدة التحكم حين نستدعي مدير القطعة الافتراضي لمدونتك أقصر تفسير ممكن هو حين نقوم بتحليل ملف الـ XML سيتم طبع تمثيل JSON للكائن المحدد و تقديم الإخراج كقائمة منسدلة ومتسلسلة هرميا مع مثلثات الكشف التي تتيح لك رؤية وإستكشاف محتويات الكائنات التابعة والتي هي عبارة عن صفيف يحوي القيم المخزنة القابلة للقراءة ..أنظر الصورة التالية.


الخطوات

عمليا من خلال الـ _WidgetManager نقوم باخذ نسخه مخزنة كاملة من ملف Widget Manager عن طريق الداله _GetAllData التى تقوم بانشاء كائن من ملف الـ XML الذى يمكننا من الوصول إلى عنصر واجهة المستخدم في المصانع.


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى - واجهة المستخدم

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية - إستيراد Widget Manager

  • لكي نستطيع الوصول للبيانات يجب إستيراد كامل لمستند Widget Manager بالطريقة الآتية
  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع   كود.js
  • 
    <script type='text/javascript'>
    //<![CDATA[
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof _WidgetManager === "undefined") return;
        var data = _WidgetManager._GetAllData();
    //Do something with `data` here
    }, false);
    //]]>
    </script>
    
  • تستطيع كذلك إستخدام فقط سطر المتغير ونضعه في بداية الشفرة الخاصة بنا

  • 
    <script type='text/javascript'>
    //<![CDATA[
    var data = _WidgetManager._GetAllData();
    //]]>
    </script>
    
    توضيح
    طريقة إستيراد مستند WidgetManager مهمة جدا بحيث ستساعدك في إستخدام صيغ البيانات الخاصة ببلوجر على جافا سكريبت والتي سنشرح في تدوينات أخرى طريقة الوصول إلى كل عنصر واجهة مستخدم مخصص..والآن بعد تثبيت النص البرمجي يمكنك الإطلاع على الهدف في مخرجات سجل وحدة التحكم بالشكل الآتي..

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالثة - مخرجات Console

  • من خلال إضافة console.log(data); للنص البرمجي الخاص بنا سيتم طبع تمثيل JSON للكائن WidgetManager
  • 
    <script type='text/javascript'>
    //<![CDATA[
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof _WidgetManager === "undefined") return;
        var data = _WidgetManager._GetAllData();
        console.log(data);
    //Do something with `data` here
    }, false);
    //]]>
    </script>
    
  • أخيرا قم بحفظ القالب ثم قم بعرض مدونتك ثم إضغط باليمين الماوس وإختر فحص العنصر inspect ثم إنتقل إلى تبويب Console

  • إستخدم إختصارات أدوات مطوري Chrome
  • Alt +Ctrl +النقر على السهم لتوسيع العقدة وجميع محتوياتها
    F +Ctrl لفتح مربع البحث ، أدخل المصطلح للبحث في JSON

  • إستخدم خيارات أدوات مطوري Chrome
  • خيار Store as Global Variable
    انقر بزر الماوس الأيمن على كائن JSON وحدد الخيار " Store as Global Variable " الذي سينشأ tempX متغير حيث X سيكون عددًا صحيحًا (temp1 و temp2 وما إلى ذلك).


    خيار Copy property path
    انقر بزر الماوس الأيمن على الخاصية وانقر فوق " Copy property path " ثم للتحقق ، فتح وحدة التحكم ، اكتب متغير temp ولصق مسار الخاصية ، يجب أن تحصل على النتيجة المتوقعة.
    افترض أن المتغير العام هو "temp1" وأن مسار الخاصية المنسوخة هو "name" ، نكتب temp1.name ليُرجع النتيجة المتوقعة .
    
    temp1[0].name
    


    رمز لاستخراج البيانات في وحدة التحكم
    تدعم أدوات المطور في Chrome وظائف سهم ES6 ، لذا سنستخدمها مع وظيفة خريطة الصفيف للحصول على قائمة بجميع الأسماء

    
    temp1.map(function(i) {return i.name; })
    

     أو نستخدم
    
    temp1.map((i) => { return i.name})
    

     أو نستخدم
    
    temp1.map(i => i.name)
    

      لاحظ كيف تم إخراج نفس النتيجة المطلوب من كل عنصر.
    رمز لعرض البيانات في جدول
    دعونا نختار مثالين إسم ووصف أو إستخراج جميع البيانات ونجعلهم في جدول بإستخدام الرمز
    
    console.table(temp1.map((i) => { return { name : i.name, Message : i.shareMessage}}))
    

     أو نكتبه بهذه الطريقة لإستخراج المزيد من البيانات
    
    console.table(temp1.map((i) => { return { name : i.name, key : i.key, Message : i.shareMessage, target : i.target}}))
    





add_commentإرسال تعليق

  1. مقال جدا رائعة شكرا لك :D

    ردحذف
    الردود
    1. العفو أخي الكريم..أتمنى أنك تستفيد أكثر من شروحاتنا.

      حذف
  2. للأسف لم أفهم هذه التدوينة

    ردحذف