Posts Tagged ‘جاوا اسکریپت’
اندازهگیری زمان اجرای توابع جاوا اسکریپت
مرداد ۲۳م, ۱۳۸۸
بعضی اوقات پیش اومده که ما یک تابع یا کلا” انجام یک کاری توسط جاوا اسکریپت رو به چندین حالت مختلف برنامه نویسی میتونیم بنویسیم یا انجام بدیم. برای سایت های کوچک و سایتی که استفاده خیلی کمی از جاوا اسکریپت استفاده میکنند شاید مورد مهمی به نظر نیاید اما برای سایت های وب ۲ و سایت هایی که استفادی زیادی از تکنولوژی های جدید جاوا اسکریپت مثل آژاکس (Ajax) میکنند در نظر گرفتن زمان اجرا میتواند عامل بسیار مهمی باشد. البته باید در نظر داشت که کاربران امروزه از تب ها برای استفاده از سایت های مختلف اسفاده میکنند نه از پنجره های متعدد. و این عامل را حتما” باید در نظر داشت که وقتی شما موتور یک مرورگر را مثلا” برای اجرای جاوا اسکریپت در اختیار میگیرید، مسلما” برای تب های دیگر درصد کمتری اختصاص می یابد. بنابراین درصورتی که سایت شما کدهای سنگینی داشته باشد، علاوه بر سایت شما، باعث کند شدن مرورگر هم شده و کاربر را بشدت ناراضی میکند.
و این ها دلایلی است که باعث میشود که زمان اجرای توابع جاوا اسکریپت برای ما اهمیت پیدا کند.
در فایرباگ (Firebug) در قسمت Console تبی با نام Profile وجود دارد که این کار را انجام میدهد! برای مثال شما تابعی نوشتهاید و میخواهید زمان اجرای آن را اندازه گیری کنید. برای این کار کافیست ابتدا یک بار دکمه Profile را بزنید و سپس آن تابع را اجرا کنید. حال دوباره دکمه Profile را بزنید تا زمان اجرای آن را با تمام جزئیات ببینید.
اگر قصد دارید چندین تابع را با هم مقایسه کنید، تمام توابع را بعد از زدن دکمه Profile اجرا کنید و اگر میخواهید کل اسکریپت(script) های سایت را بررسی کنید، بعد از زدن دکمه Profile صفحه را رفرش کنید و دوباره Profile را بزنید.
برای مثال به عکس زیر توجه کنید.
من برای یک درخواست Ajax و اجرای یک تابع بعد از آن، کدی نوشتم (البته با استفاده از کتابخانه jQuery) و آنرا اجرا کردم که نتیجه آنرا میبینید.
توابعی که نام آنها بصورت (?)() است، توابع داخلی هستند که نام خاصی ندارند. برای مثال:
(function(){
// Do something;
})();
ستون Calls تعداد دفعات اجرای هرکدام از توابع در مدت زمانی است که شما Profile را نگه میدارید. برای مثال تابع success یکبار اجرا شده است.
ستون Percentage درصد زمان سپری شده نسبت به کل توابع مورد بررسی قرار گرفته برای این تابع را نمایش میدهد.
ستون Own Time مدت زمان اختصاصی هر تابع را نمایش میدهد. این زمان شامل مدت زمان سپری شده برای توابعی که از داخل این تابع فراخوانی شده اند، نمی باشد.
ستون Time زمان کل هر تابع، با در نظر گرفتن تمام توابع فراخوانی شده از داخل آن میباشد.
ستون های Avg,Minو Max هم بترتیب میانگین، حداقل و حداکثر زمانها را برای هر تابع نمایش می دهد.
در نهایت هم File، لینکی به آدرس فایلی که این تابع در آن قرار دارد برای دسترسی سریع تر برقرار کرده است.
Tags: firebug, javascript, run time, جاوا اسکریپت, فایرباگ
Posted in Mozilla FireFox, javascript, مرتبط با وب 2 | Comments (۳)
getElementsByClassName
بهمن ۲۷م, ۱۳۸۷
تاحالا شده بخواهید یکی از elementهای DOM رو از طریق نام کلاس آن انتخاب کنید؟! البته این کار درصورتی که از یکی از کتابخانه های جاوا اسکریپت مثل jQuery استفاده میکنید خیلی راحت خواهد بود.
اما باید بدونید که در فایرفاکس هم ( که من پیشنهادش میکنم! ) یک تابعی تعریف شده که عینا” همین کار رو انجام میده.
( document.getElementsByClassName(”targetClass”) ) و بعد از فراخوانی آرایه ای از element هایی رو که دارای کلاس targetClass برمیگردونه!
اما طبق معمول برای ie و همچنین opera هنوز این تابع وچود ندارد که در زیر آنرا بطور دستی اضافه میکنیم:
document.getElementsByClassName = function(class_name) {
var docList = this.all || this.getElementsByTagName('*');
var matchArray = new Array();
var re = new RegExp("(?:^|\\s)"+class_name+"(?:\\s|$)");
for (var i=0, n=docList.length; i<n; i++) {
if (re.test(docList[i].className) ) {
matchArray.push(docList[i]);
}
}
return matchArray;
}
متغیر doList شامل تمام elementهای داخل DOM هست. درصورتی که all برای Document تعریف شده باشد (در فایرفاکس تعریف نشده است) all و در غیر اینصورت توسط تابع getElementsByTagName انتخاب شده و در docList قرار میگیرد.
حالا یک سوال پیش میاد و اون اینکه چرا all اول نوشته شده با اینکه تابع getElementsByTagName در هر سه مرورگر شناخته شده است؟! جواب اینه که در موارد خاصی تعداد element های select شده در این دو مورد فرق داره و البته که all کامل تره.(در Opera)
درباره عبارت منظم استفاده شده هم این رو بگم که قسمت اول یعنی (?:^|\\s)
از اول رشته ی نام کلاس یا از اولین کلمه بعد از فاصله رو تست میکنه و قسمت دوم هم تا فاصله یا تا آخر رشته رو تست میکنه.
در ضمن استفاده از ?: در این عبارت ها هم ضرورتی نداره اما باعث میشه که سرعت تست کردن این عبارات بالا بره (به عبارات منظمی که شامل “?:” باشه “Non-capturing groups” گفته میشه چون وقت صرف ساختن backreferenceها نمیشه)
فکر نکنم نکته خاص دیگه ای داشته باشه!
فعلا”
Tags: Damn ie, ff, firefox, getElementsByClassName, internet explorer, javascript, js, opera, regular expression, اینترنت اکسپلورر, جاوا اسکریپت, عبارات منظم, فایرفاکس
Posted in Damn ie, Mozilla FireFox, javascript | Comments (۰)
تگهای script اضافی!
دی ۹م, ۱۳۸۷
چندوقت پیش John Resig نویسنده jQuery توی وبلاگش چیز جالبی نوشته بود که منم خودم به این مورد برخورده بودم. برای همین خیلی برام جالب و مفید بود. متن زیر خلاصه ای نوشته های John و کامنت های وبلاگش هست:
اگه دقت کرده باشین هنگامی که ما با استفاده از صفت منبع (source attribute) یک کد جاوا اسکریپت (javascript) رو به صفحه خودمون اضافه میکنیم، قادر نیستیم که کدهای دیگه ای رو در بدنه تگ بنویسیم. منظورم اینه:
<script src="some-lib.js"></script> <script> var foo = use_some_lib(); foo.do.stuff(); </script>
یعنی واقعا” چرا برای نوشتن ادامه کدها مجبوریم یک تگ دیگه باز کنیم وقتی کد زیر خیلی جذاب تر و تر و تمیز تره؟!
<script src="some-lib.js"> var foo = use_some_lib(); foo.do.stuff(); </script>
خب برای اینکه بتونیم این کار رو انجام بدیم، John دست به کار شده و دو خط کد نوشته!
اول اینکه تگ script مربوطه رو انتخاب میکنیم بعد هم محتویات آنها را با استفاده از دستور eval اجرا میکنیم! بهمین سادگی!
var scripts = document.getElementsByTagName("script");
eval( scripts[ scripts.length - 1 ].innerHTML );
خب کافیه که این کد رو به فایل منبع (src) اضافه کنید و حالشو ببرید.
اما خب شاید همین دو خط کافی نباشه. چرا؟ خب فرض کنید مثلا” شما چندتا فایل اسکریپت توی صفحه دارین که حالا یا بطور عادی نوشته شدن یا قراره بارگذاری (load) بشن.
حالا اگه کد شما وابسته به اونها باشه چی؟ بهرحال john پیشنهادهایی داده و کد خودش رو کامل کرده که من تکه کد نهایی رو توضیح میدم.
(function(){
var scripts = document.getElementsByTagName("script");
var curScript = scripts[ scripts.length - 1 ];
if ( curScript.executed )
return;
// ... jQuery ...
curScript.executed = true;
var script = curScript.innerHTML;
if ( script ) {
jQuery(document).ready(function(){
jQuery.globalEval( script );
});
}
})();
// if you don't use jQuery :
// if ( script )
// eval ( script );
اولین چیزی که توی این کد به چشم میخوره اینکه که ما چک میکنیم که کد قبلا” اجرا شده یا نه و دومین هم طبق چیزی که گفتم کد رو بعد از اینکه DOM آماده شد کد اجرا میکنیم.
حالا جذابیت نوشته های John یک طرف، کامنت هایی هم که گذاشته میشه حاوی نکات خیلی جالبیه!
مثلا یکی نوشته که چطوره اصلا” همه تک های script رو خلاصه کنیم و منابع اونهارو بصورت آرایه ای مثل مثال زیر بنویسیم !؟
<script src="myScript.js,myNextScript.js,myFinalScript.js"> var hello = "world"; </script>
یا حتی یکی کد زیر رو نوشته و کد خودش رو احمقانه خونده! درصورتی که من فکر نمی کنم نتیجه متفاوتی داشته باشه و احمقانه هم نیست! بالاخره برای خودش یک راهکاره!
<script src="..." onload="eval(innerHTML)"> //code <script>
Tags: html, javascript, jQuery, جاوا اسکریپت
Posted in jQuery, javascript | Comments (۱)
Firebug
دی ۶م, ۱۳۸۷
بعید میدونم که شما طراح و برنامه نویس وب باشین اما با Firebug آشنا نباشید. در واقع FireBug علاوه بر مزیت هایی که در کار با کدهای HTML و CSS داره دارای خط فرمان جاوا اسکریپت نیز هست. وجود خط فرمان javascript در firebug به شما این امکان رو میده که کدهای خودتون رو به صفحه جاری الصاق کنید. انگار که اونها از اول توی صفحه جاری نوشته شده بودند!!
شاید در نگاه اول این چیز خیلی جالبی نباشه اما وقتی یکم دقیق بشین متوجه میشین که چی میگم. بذارین یک مثال بزنم. اگه شما Ajax کار کرده باشید باید بدونید که آژاکس Cross-Domain نیست. یعنی اینکه شما نمیتونید درخواست (request) هایی رو از دامین های دیگه داشته باشین. (البته حالت های خاصی داره ازجمله JSON و CSSHTTPREQUEST) اما مهم اینه که در حالت معمولی چنین امکانی وجود ندارد. خب حالا به شما از طریق FireBug این امکان داده شده که وارد یک سایت بشید و کدهای جاوا اسکریپت خودتون و خصوصا” آژاکستون رو اجرا کنید. شاید بهتر باشه یک مثال بزنم. چند وقت پیش یکی از دوستام یک آدرسی به من داد که اجازه میداد sms رایگان بفرستین. بدون هیچ محدودیتی. البته من نیدونم اون صفحه شخصی بود یا هرچیز دیگه ای! مهم فارسی بودنش بود که خیلی تعجب برانگیزناک آلود بود!
خب بر طبق طبع من چندتا اس ام اس تست ارسال کردم و بعد از ایکه صحتش برام معلوم شد، جرقه ای در سرم زده شد! اومدم کد ساده ای مثل زیر نوشتم :
var xmlhttp= new XMLHttpRequest();
var msg = 'My message will be here!';
var sms = function(){
xmlhttp.open("POST", 'send.php');
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
sms();
}
};
i = Math.round( Math.random()*10000 );
xmlhttp.send('phone=98913333'+i+'&message='+escape(msg));
}
و این کد رو اجرا توی فایرباگ مرورگرم اجرا کردم!! جالبه بدونین که تقریبا” ثانیه ای ۲تا sms ارسال میشد و این بود که من در هزینه تبلیغاتم کمی صرفهجویی کردم! بگذریم که این فقط یک روز جواب داد و اون سایت چندروزی میشه که از کار افتاده!!!
مثال دیگه این هم بزنم اینکه یک دایرکتوری بود که من یکی از سایت هام رو بهش اضافه کرده بودم. این دایرکتوری یک rank فرضی بر اساس ورودی هایی که از سایت من به اون دایرکتوری باضافه خروجی های اون دایرکتوری به سایت من ایجاد میکرد و جلو اسم هر سایت نمایش میداد. خب سایت من rank بالایی نداشت. تقریبا” جز ۴۰-۵۰ تا سایت اولش بود که خوب با اجرای کدی شبیه کد بالا هم به سایت خودم ورودی دادم هم خروجی!! و این بود که سایتم از حدود ۵۰ام در یک روز به ۳ام ارتقاء یافت!!!
در واقع از سایت هایی که باگ دارند میتونین به خوبی استفاده کنید. فقط باید یکم حواستون جمع باشه!!! :D
راستی اگر نمیدونید که Firebug چیه، فقط این رو بگم که میتونید با استفاده از گزینه Add-ons در منوی Tools در مرورگر فایرفاکس (Firefox) آنرا به مرورگر خود اضافه کنید.
موفق تر باشید.
Tags: ajax, firebug, firefox, javascript, آژاکس, جاوا اسکریپت, فایرباگ, فایرفاکس
Posted in Mozilla FireFox, javascript | Comments (۰)