مساعدة في تحسين كود JS DOM
- بالنسبة للتكرار , دائماً اذا حسيت ان فيه كود يتكرر انقله الى فنكشن لوحده واستدعي الفنكشن بدل ماتكتب كامل الكود كذا مره !
- طريقتك سليمه ومافيها شي في اخفاء النتايج .. لان العناصر اللي بالدوم كلها string والجافاسكربت بيتعامل معها كلها ك string انت اللي تغير نوعها الى اي اوبجكت ثاني.
الملاحظات :
- تحتاج تركز على موضوع التحقق من القيم Validations قبل انك تعمل معالجة لها. مثلاً تتحقق انها مش فاضية او null .. الخ. بحسب نوع القيمة المتوقع معالجتها. مثلاً (x) في الفنكشن myf انت تتوقع ان قيمة x بتكون رقم.. فتحتاج الى انك تعمل تحقق منها قبل تعمل لها بيرس parseFloat .
- التحقق دائماً يجي اول الشغل .. قبل حتى تعدل اي قيمة او تعمل اي اكشن ثاني .. وانت عملت parse اول بعدين عملت الكونديشن ! والصحيح العكس ! تعمل التحقق بعدين تعمل parse
- لما تبي تعمل parse لرقم integer دائماً احفظه في متغير جديد variable واستخدم هذا المتغير في باقي شغلك .. والمتغير الاساسي (السورس) اتركه كما هو .. وهذا بيعطيك دائماً الافضلية بانك تقدر ترجع للسورس (الغير معدل) فيما لو احتجت لذلك.
- لما يكون عندك قيم ثابته .. ادخل القيمة مباشرة ولا تعملها كعملية حسابية .. مثل الضريبة .. هي قيمتها ثابته ( 15%) المفترض انك تدخل 0.15 في الحساب .. بدل (15/100) ..
- في العناصر اللي تستخدمها لعرض النتائج .. دائماً استخدم عنصر واحد .. ولا تعمل عنصر جديد لكل عملية .. مثل انت الان عامل Wrong-ans و result .. استخدم فقط result واللعب فيه مثل ماتبي .. بيكون كذا افضل حتى للتحكم فيه وفي النتائج ..
- ال callback functions مايحتاج تعطيها تسمية .. تقدر تكتبها بدون مسمى مثل function() بشكل مباشر .. او تمرر اسم فنكشن مستقلة فيها ككول باك لها ..
- التسمية مهمة في البرمجة عموماً .. فانت دائماً احرص على انك تختار تسمية تبين مضمون الاوبجكت نفسه .. وعود نفسك على انك تمشي على نمط معين بالتسمية .. فيه انماط مشهورة ومتعارف عليها بين المبرمجين وهذا يسمونه Name Convention وهي عدد من اساليب التسمية ستاندرد في لغة برمجة .. لازم واحد من الاساليب هذي بالتسمية بتاخذها ..
- لما تبي تحفظ عنصر بالصفحة على متغير .. لاتستخدم var معه .. وانما استخدم const وهذا افضل .. حتى تمنع التغييرات عليه ..
عموماً هذا الكود نفسه معدلك عليه :
كود:
function myf(x) {
Reset();
if(!x)
{
ourLab.style.border = "1px solid red";
theWrong.innerText = "Enter a number!";
}
else
{
var inputNumber = parseFloat(x);
var oNNe = (inputNumber * 0.15) + inputNumber;
ourRes.innerText = "Total = " + oNNe;
}
}
function Reset()
{
ourRes.innerText = "";
ourLab.value = "";
ourLab.style.border = "";
theWrong.innerText ="";
}
ourBut.addEventListener("click", Reset);
وبرضوه عملت لك الصفحة واضفت عليها موضوع الانتر وبرضوه غيرت نوع الحقل من Number الى text ووخليته فقط يقبل الارقام من الجافاسكربت .. .. بهالطريقة راح يقبل الاعداد العشرية .. وفصلت ال VAT خليته لوحده (تعاملت معها مثل الفاتورة) ... راح تلاقيها كلها على هالرابط ... ان شاء الله تستفيد منها ..
