شرح مفصل لطرق الكتابة البديلة لجافا سكريبت

JavaScript هي لغة برمجة تابعة للشبكة!

يتم استخدام JavaScript من قبل ملايين صفحات الويب لتحسين التصميم ، والتحقق من النماذج ، واكتشاف المتصفحات ، وإنشاء ملفات تعريف الارتباط ، والمزيد.

JavaScript هي لغة البرمجة النصية الأكثر شعبية على الإنترنت.

جافا سكريبت سهل الاستخدام! سوف تحبها!

JavaScript هي لغة برمجة تفسر مع بناء جملة مرنة ، مما يسمح لأشخاص مختلفين بكتابة وظائف مختلفة بعدة طرق مختلفة. كيفية تنظيم رمز JavaScript حتى يتمكن الآخرون من رؤية لمحة أنك لست بسيطًا؟ هل تتطلع إلى تنهد شخص آخر بعد قراءة الكود الخاص بك ، "اتضح أنه يمكنك الكتابة بهذه الطريقة"؟

ن طرق لكتابة وظائف مجهولة

وظيفة JS 'المجهولة هي وظيفة تنفيذ الذات مع اسم الوظيفة غير المعلنة ، والتنسيق كما يلي:

 (وظيفة(){})()؛

في الواقع ، نضع في كثير من الأحيان "؛" أمام المشروع:

 ؛وظيفة(){}()؛

نظرًا لأن بناء جملة JS يمكن أن يحذف المنقصين ، ولكن هذه الآلية يمكن أن تؤدي أيضًا إلى أخطاء غير متوقعة. لتجنب أخطاء بناء الجملة الناتجة عن دمج الرمز وضغطه في ملف بعد إطلاقه ، مضيفًا "؛" ؛ يمكن تجنب أخطاء غير معروفة.

لكن في بعض الأحيان نرى أن مكتبات الآخرين أو المكونات الإضافية تكتب وظائف مجهولة مثل هذا:

 +function () {} () ؛

"+" هو مشغل هنا ، ويمتلك المشغل أولوية عالية للغاية ، وبالتالي يتم تنفيذ جزء من إعلان الوظيفة على اليمين مع أقواس (في الواقع طريقة لتنفيذ الوظيفة) مباشرة. في الواقع ، لا يمكن أن يكون فقط علامة "+" في المقدمة ، ولكن المشغلات مثل "-" ، "!" ، "~" ، و "++" يمكن استخدامها. نحن هنا مجرد مقدمة للتمديد. تعتمد طريقة الكتابة المحددة على المعايير الموحدة للفريق.

التخلي عن Math.ceil () و Math.Floor Rounding

ربما رأيت هذين الرموبين ~~ و | 0 في رموز أخرى ، وننظر إلى نتائج التشغيل مباشرة:

 >> var a1 = 1.23 >> ~~ a11 >> var a2 = 2.345 >> a2 | 02 >> var a3 = -3.45 >> ~~ a3-3 >> var a4 = -4.5 >> a4 | 0-4

لاحظ أن طريقة الكتابة هذه ليست أصلية ، ولكن يتم نقلها فقط لتحليل وشرح طريقة الكتابة البديلة هذه. التفسير البسيط هو أن ~ هو عامل عكسي قليلاً ، والذي يمكنه تحويل أرقام النقاط العائمة إلى أعداد صحيحة عن طريق التخلص من جميع البتات بعد النقطة العشرية. يمكن تحويل الأعداد الصحيحة الإيجابية إلى قيم سداسية غير موقعة. ثم عكسي (~~) سلبي وسلبي مرة أخرى للحصول على إيجابية ، والحصول على عدد صحيح أصلي. إنه مجرد أنه متعمد وغير مقيد. هل تعتقد أنه تحسين؟

ملاحظة: إذا كنت بحاجة إلى إجراء عمليات تقريبية صارمة ، فيجب عليك استخدام هذه الطريقة بحذر ، فلا يزال يتعين عليك استخدام وظيفة الرياضيات.

إذا لم تكن الوحيدة وآخر

يعد استخدام ظروف IF-ELSE منطقًا واضحًا للغاية ، ولا يبدو موجزًا ​​جدًا عند معالجة البيانات ليست كبيرة:

 إذا كان (A === 1) {// يوصى بشدة باستخدام الرمز المتساوي تمامًا "===" هنا ، ولن يتم تحويل النوع A = 2} آخر إذا (a === 3) {a = 4} els {a = 5}

ألق نظرة على ما يلي لاستخدام || و && لجعل الكود يفقد الوزن:

 ((a === 1) && (true ، a = 2)) || ((a === 3) && (true ، a = 4)) || (a = 5)

سيتم ذلك في سطر واحد وسوف تفقد الوزن بنجاح. || و && ، المبدأ البسيط ناهيك. ليس من السهل فهمها عند استخدام مشغل الفاصلة. يمكنك الاستمرار في تغييره إلى المشغل الثلاثية:

 (A === 1)؟ A = 2 :( (A === 3)؟ (A = 4): (A = 5))

يبدو أن طريقة الكتابة هذه مبسطة بما فيه الكفاية ، ولكن سيكون من الصعب بعض الشيء على الآخرين رؤية الكود الخاص بك.

استبدل بنية دوم DOM المزعجة مع tostring

إذا أردنا إنشاء بنية DOM ديناميكيًا ، فنحن ننفذها عمومًا مثل هذا:

 var template = "<viv>"+ "<h2> {title} </h2>"+ "<div class = 'content' yattr = '' '

إذا تمت إضافة العديد من السمات والمعلمات ، فمن السهل الإبلاغ عن الأخطاء عندما يتم الخلط بين الاقتباسات الكبيرة والصغيرة. ومع ذلك ، يوفر ES6 سلسلة قالب لمساعدتنا في حل هذه المشكلة ، يمكنك كتابتها مثل هذا:

 var template = <viv> <h2> {title} </h2> <div class = 'content' yattr = ''> {content} </viv> </viv>

لكن المشكلة هي أن ES6 لم تصل رسميًا بعد ... لا تخف ، الوظيفة. سوف يحل الإحراج عندما لا نكون متصلين:

 var rcomment = ///*([/s/s]*؟)/*/// ؛ // multiply string function ms (fn) {return fn.toString (). match (rcomment) [1]} ؛ ms (function () {/ * <viv> <h2> {title} </h2> <div class = 'content' yattr = ''> {content} </viv> </viv> */})

الإخراج هنا هو نفسه إخراج السلسلة السابق. يحتاج المبرمجون الأماميون فقط إلى الانتباه إلى بنية DOM الخاصة بهم.

أضف دعم وحدة AMD ، رمز موجه ب

أعلن مواصفات وحدة AMD (تعريف الوحدة غير المتزامنة) إلى الكود الذي كتبته ، حتى يتمكن الآخرون من تحميل الوحدة النمطية مباشرة من خلال مواصفات AMD. إذا لم يقم الآخرون بتحميل الوحدة النمطية الخاصة بك من خلال المواصفات ، فيمكنك أيضًا إرجاع كائن عالمي عادي. دعونا نلقي نظرة على طريقة الكتابة في jqueryui:

 (Function (Factory) {if (typeof define === "function" && define.amd) {// amd mode. والاعتماد على المكون الإضافي "jQuery" define (["jQuery"] ، المصنع) ؛} آخر {// Browser Global Mode Factory (jQuery) ؛

قم بتغييره إلى بنية وحدة AMD لجعل الكود الخاص بك أكثر ملاءمة لتبعيات البرنامج النصي من جانب المتصفح. اكتب رمزًا في هذا التنسيق للتأكد من أن الآخرين يعرفون أنك مطور محترف بمجرد إلقاء نظرة على الرمز.

أفضل طريقة للميراث

لدى JavaScript أكثر من عشر طرق الميراث ، على حد سواء كبيرة وصغيرة. تختلف مزايا وعيوب كل طريقة للكتابة ، وكل طريقة غير مدرجة تلو الأخرى. خذ طريقة ميراث مشتركة كمثال ، ميراث النموذج الأولي:

 دالة Parent () {} وظيفة child () {} child.prototype = parent.prototypechild.prototype.constructor = child ؛

تشير هذه الطريقة فعليًا إلى أن المؤشر الذي تم حفظه في الطفل. النمط الأصل والنمط الأصل إلى نفس الكائن ، لذلك إذا تم تمديد بعض الخصائص في النموذج الأولي للكائن الطفل بحيث يستمر النموذج الأولي للأمهات في وقت لاحق ، فسيتم إعادة كتابة النموذج الأولي للكائن الأصل. حتى لحل هذه المشكلة ، حاول استعارة طريقة كتابة مُنشئ مؤقت:

 وظيفة فارغة () {} فارغة. النموذج = parent.prototype ؛ child.prototype = new فارغ () ؛ child.prototype.constructor = child ؛

وبهذه الطريقة ، يتم حماية خصائص الكائن الأصل وطرق النموذج الأولي. "الأمثل" مبالغ فيه بعض الشيء ، ولكن بالمقارنة. أعتقد أن كل شخص لديه أسلوب الكتابة الخاص بهم ، وهناك أيضًا مزايا وعيوب الاقتراض والتقدم لتطبيق ميراث السمة. الطول محدود ولن أقدم لهم واحدًا تلو الآخر.

لخص

جميع أساليب الكتابة البديلة لـ JavaScript المذكورة أعلاه هي بناء جملة السكر من أجل سهولة الفهم أو تحسين الكفاءة. هذه الطرق هي الأفضل ، مثل ممارسة حذف If-Else كما ذكر أعلاه. تم تصميم بعضها لتحسين توافق وأداء الكود لدينا ، مثل AMD وطرق الميراث. ... أنا صاعد ، وهناك بالتأكيد بعض المحتويات غير المكتملة وغير المبررة في المحتوى أعلاه.

المحتوى أعلاه هو مقدمة ذات صلة لأساليب الكتابة البديلة لجافا سكريبت ، وآمل أن يكون مفيدًا للجميع!