«
»

E4X

By mostafa farghaly

السلام عليكم و رحمه الله تعالى و بركاته

قد ذكرت فى موضوع المصفوفه فى جافاسكربت 1.6 انه تم اضافه مواصفات E4X للجافاسكربت ، ال E4x -اختصار ECMA for XML- هو امتداد للغه جافاسكربت يمكننها من برمجه ال XML بطريقه ابسط بكثيرررر من ال DOM ، متاحه حاليا -وقت كتابه التدوينه- فى فايرفوكس فقط ، تم معايره مواصفات E4X بناءا على مواصفات ECMA-357 standard .

قدمت E4x كائن جديد من نوع XML يمكنك من كتابه  xml literals داخل كود جافاسكربت و برمجتها بمنتهى السهوله ، عليك اولا احاطه كود جافاسكربت بتاج <script> لكن مع تغير الخاصيه type إلى text/javascript;e4x=1 كما يلى :

<script type="text/javascript;e4x=1">
    /* JavaScript code here */
</script>

إنشاء كائنات XML

يمكنك انشاء كائنات XML عن طريق E4X بطريقتين ، الطريقه الاولى عن طريق ال XML constructor كما يوضح الكود البسيط التالى :

var languages= new XML('<languages type="dynamic">\
<lang>JavaScript</lang><lang>Python</lang></languages>');

ملحوظه : ال \ التى فى اخر السطر الاول لأنى قسمت النص إلى سطرين حتى يستوعبه عرض المدونه و لا يخرج عن الاطار .
و الطريقه التانيه فى انشاء كائن XML هى استخدام XML literal كما يوضح الكود البسيط التالى :

var languages = <languages type="dynamic">
<lang>JavaScript</lang>
<lang>Python</lang>
</languages>;

فى كلتا الحالتين ينتج كائن من نوع XML كما يلى :

alert(typeof languages); //XML

إذا كان ال XML المكتوب غير صحيح -كأن تنسى غلق تاج- فسينتج عنه error .

التعامل مع المتغيرات

ال XML literal يتميز عن ال XML constructor فى انه يمكنك وضع متيغرات الجافاسكربت داخل كائن ال XML اثناء انشاءه من خلال وضع اسم المتغير داخل {  } كما يوضح الكود البسيط التالى :

var h = "html";
var text = "some text ya nas";
var doc = <{h}><body>{text}</body></{h}>;
alert(doc.toString());
// <html><body>here's some text ya nas</body></html>

يمكنك عمل attributes ديناميكا بنفس الطريقه كما يوضح الكود التالى :

var a = 2;
var b = <foo bar={a} ></foo>; //<foo bar="2" ></foo>

يتم استبدال علامات التنصيص “و’ و علامه الاصغر من < و علامه & بال entity المقابل لهم كما يوضح الكود التالى :

var b = 'he said " don\'t leave " ';
var el = <foo a={b} />;
alert(el.toString());
// <foo a="he said &quot; don't leave &quot; ">

يمكن ايضا استخدام متغيرات الجافاسكربت لعمل اسم ال attribute كما يلى :

var a = "att";
var el = <foo {a}="b" />;
alert(el.toString()); //<foo att="b">

لا يمكنك عمل التعبير كاملا عن طريق {} كما يلى :

var a = 'a="b"';
var el = <foo {a}/>;

التعامل مع ال atrributes

يمكنك تغير ال attributes و الحصول على قيمها عن طريق وضع @ قبل إسم ال attribute كما يوضح المثال البسيط التالى :

alert(languages.@type); // Alerts "dynamic"
languages.@type = "agile";
alert(languages.@type); // Alerts "agile"
alert(languages.toString());
<languages type="agile">
    <lang>JavaScript</lang>
    <lang>Python</lang>
</languages>

عليك ملاحظه انه لابد من تحويل قيمه ال attribute إلى نص عن طريق toString قبل مقارنته بنص اخر كما يلى :

if(languages.@type.toString() == "agile"){
    // do something
}

التعامل مع الكائن XML

الكائن XML الذى يتم انشاءه عن طريق E4X يحتوى على العديد من الوظائف التى تمكنك من التعامل معه و الحصول على المعلومات منه و تحديث قيمه ، هيا بنا ننشأ كائن XML جديد كما يوضح الكود التالى :

var person = <person>
    <name>Mostafa Farghaly</name>
    <likes>
        <os>Windows Vista</os>
        <browser>FireFox</browser>
        <language>JavaScript</language>
        <language>PHP</language>
    </likes>
</person>

يمكنك الحصول على معلومات الكائنات التى يحتويها الكائن person عن طريق dot notation و عن طريق معامله الكائنات كأنها داخل associative array كما يوضح الكود البسيط التالى :

alert(person.name); //Mostafa Farghaly
alert(person["name"]); //Mostafa Farghaly
alert(person.likes.browser); //FireFox
alert(person["likes"].browser); //FireFox

الكائن الذى يتكرر اكثر من مره يدخل داخل كائن من نوع XMLList يحتوى على مجموعه مرتبه من هذه الكائنات المتشابهه و له الوظيفه length التى تبلغ عن عدد تلك الكائنات كما يلى :

alert(person.likes.language);
<language>JavaScript</language>
<language>PHP</language>
alert(person.likes.length()); //2

عليك ملاحظه ان length وظيفه و ليست خاصيه كما فى حاله المصفوفه .

و كما فى ال DOM يمكنك استخدام ال * للحصول على كل ال Child nodes كما يوضح المثال البسيط التالى :

alert(person.likes.*.length()); //4

المعامل . يستخدم للتعامل مع الكائنات الفرعيه مباشرا من الكائن الحالى direct child nodes ، انا المعامل .. فيستخدم للتعامل مع الكائنات الفرعيه بالنسبه للكائن الحالى مهما كان عمقها او مهما كانت متفرعه من كائنات اخرى فرعيه كما يوضح المثال البسيط التالى :

alert(person..*.length()); //11

الكود السابق ارجع 11 لأنه ناتج ال element node و ال text node داخل الكائن person .

هناك ايضا وظائف اخرى للكائن XML كما يوضح الكود البسيط التالى :

alert(person.name.text()); //Mostafa Farghaly
var xml = person.name.toXMLString();
//<name><Mostafa Farghaly/name>
var personCopy = person.copy(); //new person XML object
var child1 = person.child(1); // <likes> ... </likes> element

التعامل مع الكائن XMLList

كما ذكرت من قبل الكائن XMLList الذى ينتج من الاستعلام عن العناصر المتشابهه له الوظيفه length الذى ترجع عدد هذه الكائنات ، كما يمكن عمل loop على هذه الكائنات من خلال for كما يوضح الكود البسيط التالى :

var languages = person.likes.language;
for(var i=0; i<languages.length(); i+=1){
    alert(languages[i]);
}

كما يمكنك ايضا استخدام الجمله for each in الجديده فى جافاسكربت 1.6 -و مدعومه فى فايرفوكس فقط- للإستعلام عن قيم الكائنات كما يوضح الكود البسيط التالى :

var languages = person.likes.language;
for each(var lang in languages){
    alert(lang);
}

عليك ملاحظه ان for in تقوم بالحصول على ال key -الخصائص و الوظائف- ، انا for each in تقوم بالحصول على القيم فقط value .

يمكنك عمل XMLList ببساطه بإستخدام طريقه ال XML literal عن طريق احاطه الكائنات الجديده ب <> و </> كما يوضح الكود البسيط التالى :

var xml_list = <>
<language></language>
<language></language>
</>;

و يمكنك الاضافه كائنات جديده على ال XMLList عن طريق المعامل =+ كما يوضح المثال البسيط التالى :

var languages = person.likes.language;
languages += <language>Ruby</language>;

ال XMLList الناتج يكون Static بمعنى انه اذا اضيف عليه كائنات جديده فإن الوظيفه length لن تبلغ عن زياده كائن جديد ، عليك اعاده انشاء ال XMLList كما يوضح المثال التالى :

var languages = person.likes.language;
alert(languages.length()); //2
languages += <language>Ruby</language>;
alert(languages.length()); //2
languages = person.likes.languages;
alert(languages.lenght()); //3

البحث و التنقيح

يمكنك إضافه فلتر بين قوسين () للحصول على كائن معين من بين عناصر ال XML ، يمكن اختبار ال attributes كما يوضح المثال البسيط التالى :

var html = <html>
    <p id="p1">the 1st paragraph</p>
    <p id="p2">the 2nd paragraph</p>
</html>;

alert(html.p.(@id=="p1")); // the 1st paragraph

و يمكنك عمل فلتر على العصنر كما يوضح المثال التالى :

var people = <people>
    <person>
        <name>mostafa</name>
        <age>21</age>
    </person>
    <person>
        <name>mohamed</name>
        <age>31</age>
    </person>
</people>;

alert(people.person.(name == "mohammed").age); //31

و يمكنك تمرير وظيفه للفلتر كما يوضح المثال البسيط التالى :

function overs30(age){
    return age>30;
}
alert(people.person.(over30(parseInt(age)).name); //mohammed

للمزيد :

Mozilla E4X
Mozille E4X tutorial
Mozilla Processing XML with E4X

الأوسمة: , , , , ,

تم إدخال هذه البيانات في في 09/05/2009 في 12:17 ص وهي متضمنة تحت javascript. يمكنك متابعة الردود على هذه التدوينة من خلال الخلاصات 2.0 You can leave a response, or trackback from your own site.

4 تعليقات إلى “E4X”

  1. عبدالله يقول:
    09/05/2009 عند 12:30 ص | رد

    الفـ, شكر الكـ

    سؤال :- هل من المتوقع ان يدعم الاكسبلور E4X ?
    (حتى لو كان بعد فترة طويلة )

    • mostafa farghaly يقول:
      09/05/2009 عند 10:37 ص | رد

      انا اتمنى ان تدعمها webkit حتى استطيع استخداها فى تطبيقات AIR ، كالعاده انترنت اكسبلورر لن تدعم اى شىء الا إذا تم تدعيمه فى كل المتصفحات و كان له أهميه بالغه من وجهه نظرهها

  2. ماذا تعرف عن ملحق E4X لـ Javascript ؟ - سوالف سوفت يقول:
    22/05/2009 عند 5:52 م | رد

    [...] بالجافا سكربت عن هذا الأمر تدوينة رائعة لمن يريدها E4X __________________ أتمني من الإدارة دمج عضويتي مع عضويتي [...]

  3. حائل يقول:
    04/06/2009 عند 11:57 م | رد

    الله يعطيك العافيه يالغالي

اترك رد