يحكم JavaScript الساحة التكنولوجية منذ أكثر من عقدين ويساعد المطورين على تبسيط المهام المعقدة. يسمح للمطورين بتنفيذ صفحات الويب المهمة المعقدة بطريقة أكثر بساطة. بالنسبة لمعظم المطورين ، يعد ملف JavaScript المصغر هو الظواهر الشائعة بينما قد يكون عدد قليل جدًا من المطورين على دراية برمز JavaScript المحسّن. أثناء لقائي بالعديد من مطوري جافا سكريبت ، تعرفت على أن شفرة جافا سكريبت المحسّنة هي أمر يربك المطورين ، وقد يفعل بعضهم منهم ، لكنهم لا يدركون ذلك.
ما هو كود جافا سكريبت الأمثل
عندما يتم دمج مجموعات من المنطق المبرمج بشكل فريد إلى جانب الاختراقات الصغيرة المستخدمة لتحسين الأداء والسرعة برمز JavaScript المحسّن. لا يعمل التحسين على تحسين الأداء والسرعة فحسب ، بل يوفر أيضًا وقت التطوير الأقصى. عند توفير الوقت ، يمكنك توفير بعض الدولارات أيضًا.
لذلك ، أنا هنا مع بعض الاختراقات المفيدة والمثمرة لمساعدة المطورين على تحسين الأداء وتحسين السرعة وتوفير الوقت. آمل أن تعجبك المقالة وبعد أن تمر بها ، يمكنك الاستفادة من أفضل شفرة جافا سكريبت المحسنة.
1. جعل JS code Leaner مع الجمع بين وحدات جافا سكريبت وتقليل ملفات JS
يقوم رمز Leaner بإنشاء تنسيق رمز موحد ، مما يساعد المطورين والتطبيقات على حد سواء عن طريق إعطاء المزيد من إمكانية القراءة. يكون ذلك ممكنًا عند دمج وحدات JavaScript وتقليل ملفات JS. على الرغم من أن إصدارًا مصغرًا من الكود قد يصعب قراءته وفهمه في بعض الأحيان ، إلا أنك ستحصل على ترميز أصغر وأكثر دقة بالتأكيد. عندما يكون لديك مصدر مصغر ، فهذا يساعدك بطرق عديدة. على سبيل المثال ، يمكن أن يقلل وقت تحميل الصفحة ، ويزيل فواصل الأسطر ، والمسافات الإضافية ، والتعليقات ، وأكثر من ذلك بكثير. هذه الفوائد ممكنة لأن المصدر المصغر يتقلص أحجام الملفات.
يعد التحسين أيضًا نوعًا من تصغير JavaScript ، والذي يلعب دورًا بالغ الأهمية ليس فقط في إزالة وحذف الأشياء غير الضرورية مثل المسافات والفواصل وما إلى ذلك. ولكن أيضًا يساعد المطورين على التخلص من كتل التعليمات البرمجية غير الضرورية. فيما يلي بعض الأدوات المهمة والمكتبة التي تساعدك على تقليل الكود ؛
- مترجم إغلاق جوجل
- UglifyJS
- مايكروسوفت اجاكس
عندما يكون لديك ملف JavaScript أكبر ، فإن ذلك يؤثر على أداء الصفحة مثل الوقت الذي يستغرقه تحميل الصفحة والتأثير على السرعة بينما يؤدي ضغط أو تصغير الرمز إلى حل المشكلة بذكاء.
2. استخدام النطاق في JavaScript يعد خطوة جيدة للأمام
يعد تقليل الاعتماد على المتغيرات والإغلاقات العالمية طريقة أخرى لتحسين أداء التطبيقات وسرعتها ، وهو أمر ممكن باستخدام نطاق جافا سكريبت المسمى "هذا". نعم ، "هذا" يساعد المطورين على كتابة تعليمات برمجية غير متزامنة مع عمليات الاسترجاعات. ومع ذلك ، يجب تجنب نطاق آخر مثل "مع" لأنه يسحب أداء التطبيق عن طريق تعديل سلسلة النطاق.
init: function(name) { this.name = name; }, do: function(callback) { callback.apply(this); } }); var bob = new Car('Aventador'); bob.do(function() { alert(this.name); // 'Aventador' is alerted because 'this' was rewired });
3. الاستفادة من صفيف تصفية
استخدام مرشح Array يساعد المطورين على تصفية جميع العناصر من مجموعة الصفيف. إنها طريقة تزيل العناصر التي تمر عبر الاختبار. باختصار ، تنشئ الطريقة صفيفًا ينشئ دالة رد اتصال للعناصر غير المطلوبة.
دعونا نفهم كيف يعمل من خلال هذا المثال.
schema = schema.filter(function(n) { return n }); Output: ["hi","ilove javascript", "goodbye"]
4. استبدال سلسلة وظيفة لاستبدال القيم
هناك وظيفة 'String.replace () تساعد المطورين على استبدال السلاسل باستخدام الوظائف. على سبيل المثال
- لاستبدال السلسلة ، استخدم "String" و "Regex"
- لاستبدال جميع السلاسل ، استخدم الدالة 'replaceAll ()' للدالة
- استخدم / g في النهاية إذا كنت تستخدم "Regex"
دعنا نفهم هذا من المثال الوارد أدناه ؛
var string = "login login"; console.log(string.replace("in", "out")); // "logout login" console.log(string.replace(/in/g, "out")); //"logout logout"
5. تصحيح الأخطاء باستخدام Breakpoints و Console
باستخدام نقاط التوقف ونقاط التصحيح ، يمكنك تصفية الاستعانة بمصادر خارجية للخطأ عن طريق تعيين حواجز متعددة. إليك كيف يمكنك القيام بذلك ؛
يمكنك استدعاء الوظيفة التالية باستخدام F11 واستئناف تنفيذ البرنامج النصي باستخدام F8 .
باستخدام وحدة التحكم ، يمكن للمطورين التحقق بسهولة من القيم الديناميكية التي تم إنشاؤها بواسطة الوظيفة وما هو الإخراج.
6. افعل المكونات غير المستخدمة من مكتبة JavaScript
أثناء التطوير ، قد تحتاج إلى مكتبات مثل jQuery UI أو jQuery Mobile ، والتي تأتي مع الكثير من المكونات. لذلك ، تحتاج إلى تحديد المكونات التي تريد تحميلها. يمكنك القيام بذلك أثناء تنزيل المكتبات.
7. باستخدام HTTP / 2 يمكن أن تحدث فرقا
باستخدام أحدث إصدار من بروتوكول HTTP يمكن أن يحدث فرقًا كبيرًا ويوفر يد المساعدة في تحسين أداء JavaScript. حاليًا ، يستخدم بروتوكول HTTP HTTP / 2 كإصداره الأخير ويستخدم تعدد الإرسال الذي يتيح طلبات متعددة واستجابات يمكن أن تعمل في نفس الوقت. يحتوي HTTPS على جميع ميزات HTTP / 2 ، وبالتالي ، يمكن أن يكون أيضًا خيارًا رائعًا للتنقل معه.
8. حذف / إفراغ في صفيف باستخدام "الطول"
باستخدام "الطول" ، يمكنك تغيير حجم الملف عن طريق حذف وإفراغ العناصر في الصفيف. تحتاج إلى استخدام الكلمة الأساسية التالية ، "array.length".
دعنا نلقي نظرة على المثال هنا ؛
array.length = n
مثل ؛
var array = [1, 2, 3, 4, 5, 6]; console.log(array.length); // 6 array.length = 3;</strong> console.log(array.length); // 3 console.log(array); // [1,2,3]
وبالمثل ، إذا كنت تريد تفريغ الصفيف ، فأنت بحاجة إلى استخدام ؛
Array.length = 0;.
ألقِ نظرة على المثال هنا ؛
var array = [1, 2, 3, 4, 5, 6]; array.length = 0; console.log(array.length); // 0 console.log(array); // []
هذه التقنية مفيدة للغاية في تغيير حجم الملف وتحسين أداء JavaScript.
9. تطبيق حالة التبديل على إذا / آخر
باستخدام حالة التبديل على / if تمكن المطورين من تقصير وقت التنفيذ. باستخدام إذا / آخر يجعل اختبار أطول. لذلك ، تحتاج إلى تقييمه.
10. التخزين المؤقت كائن DOM
باستخدام البرنامج النصي بشكل متكرر يصل إلى كائنات DOM معينة. على سبيل المثال ، سيتم البحث عن الكائن "document.images" مرتين لكل حلقة وإذا كان لديك 10 صور من هذا القبيل ، فسيكون هناك 20 مكالمة. دعنا ننظر إلى المثال هنا.
<script type”text/javascript”> for (var i = 0; i <document.images.length; i++) { document.images[i].src=”image.gif”; } <script>
ومع ذلك ، يمكنك البحث عن البديل الذي يعمل على تحسين أداء التطبيق عن طريق تقليل وقت تحميل المتصفح. إليك كيف يحدث ذلك ؛
<script type=”text/javascript”> Var domImages = document.images; For (var i=0; i<domImages.length' i++) domImages[i].src = “image.gif”; <script>
استنتاج
هذه هي أفضل 10 اختراقات جافا سكريبت ، والتي سوف تساعدك على تحسين أداء التطبيق. ومع ذلك ، إذا كنت تعتقد أن عدد النصائح التي شرحتها هنا يكمل القائمة ، فأنت مخطئ. هناك الكثير من الاختراقات المتشابهة هناك التي تطبقها للحصول على أقصى قدر من الفوائد من حيث الأداء والسرعة والوقت. علاوة على ذلك ، يعتمد على الأطر التي استخدمتها. فيما يلي قائمة بأطر Javascript Framework التي سيتم استخدامها كتطوير الواجهة الأمامية الحديثة
علاوة على ذلك ، أحب أن أتعلم منك. إذا صادفتك مثل هذه الاختراقات ، فلا تتردد أبدًا في مراسلتنا عبر البريد الإلكتروني. يمكنك القيام بذلك عن طريق إرسال رسالتك ومعرفتك عبر قنوات الاتصال المختلفة مثل Skype أو WhatsApp أو اتصل بنا.