Posts Tagged ‘dom’

DocumentFragment

16/07/2009

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

ال documentFragment عباره عن حاويه خفيفه الوزن و غير مرئيه من مواصفات DOM 1 و موجوده فى جميع المتصفحات ، يمكنك انشائها من خلال document.createDocumentFragment و يمكنك حقن عناصر ال DOM بداخلها طبيعى عن طريق appendChild ، لكن المثير فى الموضوع انه عندما تقوم بحق ال documentFragment نفسها إلى الصفحه  فإن ال documentFragment تختفى و يتم حقن مابداخلها مباشرا إلى الصفحه و عمل reflow واحد فقط و ينتج عن ذلك زياده كفاءه التطبيق و سرعته ، كيف هذا ؟

بدون documentFragment

لنفرض انك تريد حقن 100 عنصر فى الصفحه ، فإنك ستقوم بإنشاء كل عنصر و حقنه فى الصفحه مباشرا ، هذا سيؤدى إلى عمل reflow للصفحه 100 مره و سيؤثر على كفائه التطبيق كما يوضح المثال البسيط التالى :

var body = document.body;
for(var i=0; i<100; i+=1){
    var div = document.createElement("div");
    var text = document.createTextNode("number " + i );
    div.appendChild(text);
    body.appendChild(div);
}

بإستخدام documentFragment

عند إستخدام documentFragment فإنك ستقوم بحقن جميع العناصر المراد حقنها فى الصفحه داخل ال documentFragment اولا ، ثم تحقن ال documentFragment نفسها إلى الصفحه ، حيث ستختفى ال documentFragment و سيحقن ما بداخلها إلى الصفحه دفعه واحده و بالتى سيحدث reflow واحد فقط بدلا من 100 reflow كما يوضح الكود التالى :

var body = document.body;
var fragment = document.createDocumentFragment();
for(var i=0; i<100; i+=1){
    var div = document.createElement("div");
    var text = document.createTextNode("number " + i );
    div.appendChild(text);
    fragment.appendChild(div);
}

body.appendChild(fragment);

إستخدم جون ريسج مطور jQuery هذه الميزه فى jQuery 1.3 لرفع كفائه العديد من الوظائف التى تضمن append .
للمزيد
:
DOM DocumentFragments
Opera efficient JS > repaint and reflow

خارج النص : يمكنك التصويت ل keepondev للفوز بمسابقه هديل للتودين من هنا .

محاضره speed up your JavaScript

20/06/2009

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

أعطى Nicholas c.zakas مؤلف كتاب Pro JavaScript for web developers محاضره بعنوان Speed up your JavaScript بجوجل ، ناقش فيها العديد من التكنيكات لزياده كفاءه تطبيقات الجافاسكربت من واقع عمله ك front end engineer بشركه ياهو ، يمكنكم مشاهده و تحميل المحاضره من هنا ، و يمكنكم تحميل الشرائح من هنا ، اتمنى لكم و لنفسى مشاهده ممتعه :D .

E4X

09/05/2009

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

قد ذكرت فى موضوع المصفوفه فى جافاسكربت 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

محاضره Performance improvement in Javascript من john resig

08/02/2009

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

أعطى john resig محاضره فى google بعنوان Performance improvements in browsers و قد تناول اداء المتصفحات الجديده و ال api الموجود فيها و محركات ترجمه JavaScript و الجديد فى css api ، يمكنكم مشاهده المحاضره من هنا ، و تحميل الشرائح من هنا ، اتمنى لكم مشاهده ممتعه :D

محاضره DOM is a Mess من john resig

03/02/2009

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

اعطى john resig مطور اطار عمل jQuery الاسبوع الماضى محاضره بعنوان DOM is a mess فى مقر YAHOO ، يمكنك مشاهده المحاضره من هنا ، و يمكنك تحميلها من هنا ، و تحميل الشرائح من هنا ، اتمنى لكم مشاهده ممتعه :) .

هل إدعاء المتصفح صحيح

01/10/2008

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

كل متصفح يدعى أنه على سبيل المثال يدعم DOM level 1 كاملا و كذلك DOM level 2 كاملا و لكن DOM level 3 ليس كاملا ، حتى تتأكد من مثل هذه الإدعائات و إذا كنت تريد معرفه قدرات المتصفح او محرك الترجمه الذى انت قائم بالعمل عليه قم بزياره هذه الصفحه لمعرفه ماذا يدعم و ماذا لا يدعم .

تطبيق ال style على العناصر الغير معروفه

28/09/2008

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

العناصر الغير معروفه فى المتصفح – مثلا عناصر html5 فى IE5 – لا يمكن تطبيق عليها style مثل العنصر الافتراضى <keepondev> لايمكنك تغير خصائصه عن طريق ال CSS ، لكن العبقرى john resig و جد حلا جزئيا للمشكله و هو كالتالى : قم بعمل عنصر جديد بنفس الإسم عن طريق ال DOM بطريقه createElements و لا تضعه فى الصفحه و إنما قم بإعطائه ال style كما يوضح الكود التالى :

<style>
keepondev { color : #C00; }
</style>
<script>
document.createElement(“keepondev“);
</script>
<body>
<keepondev> iam strange element </keepondev>
</body>

بهذه الطريقه يمكنك إعطاء style لأى عناصر غريبه على متصفح قديم و مألوفه على المتصفحات الحديثه ، عيب هذه الطريقه ان بها مشاكل عندما تود تطبيق style على nested elements العناصر التى بها عناصر أخرى ، و لكن هناك بديل هو إستخدام microsoft custom tags على سبيل المثال – للمزيد من التفاصيل هنا

س و ج – ما أهميه تحميل ملفات جافاسكربت عند الطلب ؟

22/07/2008

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

التحميل عند الطلب معناه تحميل الملف فقط عند الإحتياج إليه مما يؤدى إلى زياده الكفاءه ، فعلى سبيل المثال لو لديك تطبيق يستخدم خمس 5 ملفات جافاسكربت ، بعضها مهم لبدايه التطبيق و عمل واجهه المستخدم و البعض الاخر مهم فقط عند قيام المستخدم بأحداث معينه و حينها تأتى أهميه التحميل عند الطلب ، و يمكنك عمل ميكانيكه التحميل عند الطلب بطرق عده منها التالى :

إستخدم document.write

document.write(“<script type=’text/javascript’ src=’another.js’></scr”+”ipt>”);

إستخدام DOM

var script = document.createElement(“script”);

script.setAtrribute(“src”,”another.js”);

document.getElementsByTagName(“head”)[0].appendChild(script);

إستخدام حقن الكود عن طريق AJAX

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if(xhr.readystate==4){

document.getElementById(“myScript”).innerText=xhr.responseText;

}

}

xhr.open(“get”,”another.js”,false);

xhr.send(null)

قم بإختيار أى من هذه الطرق و قم بوضعها فى function و قم بتمرير مسار ملف الجافاسكربت إليها

require(“another.js”);


تابع

Get every new post delivered to your Inbox.