يعد تطوير الويب أحد أبسط المجالات وبالتالي يحظى بشعبية كبيرة بين المبرمجين المبتدئين. أي شخص يكفي للعمل محرر النصوالمتصفح، ليست هناك حاجة لدراسة الخوارزميات بمستوى متقدم، فنتيجة كل مرحلة من مراحل كتابة البرنامج واضحة - بشكل عام، هناك العديد من المزايا. إحدى المهارات الأساسية في سياق تطوير الويب هي معرفة JavaScript.

في الوقت الحاضر، تتطور JavaScript بسرعة كبيرة، وبالتالي من السهل أن تصاب بالارتباك عند تعلم اللغة. نلفت انتباهكم المنهجمع هيكل مناسب يغطي كل ما هو ضروري جوانب جافا سكريبتوالتقنيات ذات الصلة.

لماذا جافا سكريبت؟

تجدر الإشارة إلى انفتاح اللغة - فالشركات التي تتنافس عادة مع بعضها البعض تتعاون لتطوير جافا سكريبت. اللغة مرنة للغاية وسوف تناسب مؤيدي كل من الأساليب الموجهة للكائنات والوظيفية. هناك عدد كبير من المكتبات والأطر التي تجعل من السهل حل أي نوع من المشاكل، و منصة الخادميجعل Node.js من الممكن استخدام اللغة ليس فقط في المتصفح، ولكن أيضًا في وحدة التحكم. يمكنك حتى الكتابة على سطح المكتب و تطبيقات الهاتف الجوال: الأول - باستخدام إطار عمل Electron، والثاني - باستخدام NativeScript أو React Native.

الأساسيات

تحتاج أولاً إلى تعلم المفاهيم الأساسية لجافا سكريبت وتطوير الويب والبرمجة بشكل عام:

• JS الموجهة للكائنات - المنشئون والمصانع، الميراث؛
• JS الوظيفية - الوظائف أعلى ترتيب، الإغلاق، العودية؛
• مواصفات اختبار الياسمين؛
• أساسيات HTML وCSS وjQuery.

شخص سخيف

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

• إنشاء ونقل الملفات في الدلائل؛
• التهيئة والالتزام في Git؛
• إعداد المستودعات في جيثب.

الخوارزميات وهياكل البيانات

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

الخلفية

Node.js

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

الخوادم، HTTP، Express.js

بعد تعلم Node، من المفيد مواصلة التعرف على تطوير الواجهة الخلفية وفهم الخوادم والتوجيه. يمكنك البدء بالمنافذ والبروتوكولات مع التركيز على HTTP، ثم الانتقال إلى Express، وهي مكتبة عقدية لمعالجة الطلبات.

جافا سكريبت غير المتزامن

قواعد البيانات والمخططات والنماذج وORMs

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

نهاية المقدمة

HTML وCSS

HTML وCSS هما أساس أي مطور ويب. ليس من الضروري أن تعرفهم بشكل كامل، ولكن يجب أن تفهمهم. يمكنك أيضًا استكشاف مكتبة شائعة (على سبيل المثال، Bootstrap) ومعالج CSS أولي مثل Sass - سيساعد ذلك في جعل CSS يبدو كرمز عادي. لتبسيط العمل مع HTML، يمكنك اختيار أحد محركات القوالب الشائعة، على سبيل المثال، Pug.

معالجة jQuery وDOM

بعد إنشاء مظهر الصفحة باستخدام مساعدة HTMLوCSS، سوف تستخدم كليهما مكتبة مسجلمعالجة DOM. يعتقد الكثير من الناس أن jQuery عديمة الفائدة وسيتم استبدالها قريبًا بـ Angular و React، لكنها تحظى بشعبية كبيرة وبالتالي تستحق المعرفة. بالإضافة إلى ذلك، في يوم من الأيام، ستجد نفسك في موقف حيث سيكون من غير الملائم أن تدق أظافرك بمجهر React، ومن ثم ستساعدك jQuery خفيفة الوزن.

أدوات مطوري كروم

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

اياكس

إذا كنت تريد ألا يقوم تطبيقك بإعادة تحميل الصفحات بعد كل عملية لقاعدة البيانات، فستحتاج بالتأكيد إلى AJAX - فهو يرسل طلبات HTTP غير متزامنة في الخلفية، ولا تؤدي الاستجابات إليها إلا إلى تحديث جزء من الشاشة. يمكنك العمل مع AJAX من خلال jQuery باستخدام طريقة .ajax.

موضوعات متقدمة

التطوير القائم على الاختبار

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

مآخذ الويب

هذا الموضوع يستحق الاهتمام انتباه خاصلأنها مفيدة جدا. يسمح بروتوكول WebSocket، على عكس HTTP، بتدفق البيانات ثنائي الاتجاه، مما يجعل هذه التقنية فريدة من نوعها. التنفيذ الأكثر شيوعًا هو مكتبة المقبس.io - سيساعدك فهمها وتطبيق المهارات المكتسبة عمليًا على إنشاء لعبة متصفح متعددة اللاعبين.

ES6، بابل، Webpack

حاليًا، المعيار الرئيسي هو ES6 (ES2015)، ولكن تم اعتماد ES2016 بالفعل، وES2017 قيد التطوير، لذلك عليك أن تكون دائمًا على دراية بالتحديثات واستخدامها. يمكن حل مشكلات التوافق باستخدام أداتين فقط:

• Babel - يجمع كود ES6 (سيتوفر دعم ES2016 قريبًا) إلى ES5، الذي تدعمه جميع المتصفحات. حتى أنه يعرف كيفية تجميع مكونات JSX/React، مما يجعله لا غنى عنه لأي مطور ويب؛
• Webpack - يجمع كل ما تبذلونه من ملفات المصدر(الصور، الخطوط، أوراق الأنماط، ملفات JS، وما إلى ذلك) في رسم بياني تبعية واحد. لن يكون مفيدًا عند إنشاء تطبيقات صغيرة، ولكن عند العمل مع React فإن مساعدته لا تقدر بثمن.

رد فعل وRedux

رد فعل - مكتبة للإنشاء واجهات المستخدم. لقد خلقت عن طريق الفيس بوكفي عام 2013 وسرعان ما أصبح شائعًا بين المطورين. يجب عليك القراءة ثم التفكيك لفهم كيفية عمل React وماذا تفعل. يعد React مفيدًا ليس فقط لتطوير الواجهة الأمامية: فقد أصدر Facebook إصدارات من إطار عمل الهاتف المحمول (React Native) وتطوير الواقع الافتراضي (React VR).

Redux عبارة عن حاوية حالة يمكن التنبؤ بها تُستخدم بشكل شائع مع React. يمكن استخدامه لتقصير التعليمات البرمجية بسبب نمطيته. مفيد بشكل خاص في التطبيقات متعددة المستخدمين في الوقت الفعلي مثل الألعاب.

المصادقة، الجلسات، ملفات تعريف الارتباط

يجب عليك أيضًا فهم كيفية تفاعل التطبيقات مع المستخدمين ومعالجة تسجيل الدخول حسابوالخروج منه، يعطون الامتيازات. تُستخدم ملفات تعريف الارتباط لتتبع هوية المستخدم أثناء الجلسة - ملفات تعريف الارتباط الصغيرة ملفات نصية، يتم إرسالها بواسطة الخادم إلى المتصفح استجابةً لطلب HTTP. ولضمان الاتصال بين قاعدة البيانات وصفحات الترخيص، يمكنك استخدام مكتبة الجلسة السريعة.

أمن الويب

وأخيرا، يجب عليك الاهتمام بالسلامة. من المهم تعلم أساليب الهجوم وطرق الدفاع ضدها.

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

لغات البرمجة هي مجرد أداة يبني بها الشخص القواعد في الأنظمة التي تم إنشاؤها.

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

معلومات عامة

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

كل ما كان مطلوبًا من صن هو الإذن باستخدام جزء من الاسم. والمثير للدهشة أن JavaScript ليست مملوكة لأي شركة على الإطلاق.

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

• اتجاه الكائن. يمثل تنفيذ البرنامج تفاعل الكائنات؛
• يتم تحويل نوع البيانات تلقائيًا؛
• الوظائف هي كائنات من الفئة الأساسية. هذه الميزة تجعل جافا سكريبت مشابهة للعديد من لغات البرمجة الوظيفية مثل Lisp وHaskell؛
• مسح الذاكرة تلقائيا. ما يسمى بجمع البيانات المهملة يجعل JavaScript مشابهًا لـ C# أو Java.

إذا تحدثنا عن جوهر استخدام JavaScript، فإن هذه اللغة تتيح لك "إحياء" صفحات موقع الويب الثابتة باستخدام التعليمات البرمجية التي يمكن تنفيذها ( ما يسمى البرامج النصية). أي أنه يمكننا تشبيه الرسوم المتحركة، حيث html وcss هما الأحرف المرسومة، وJavaScript هو ما يجعلها تتحرك.

إذا تحدث عن بناء جملة جافا سكريبت، فهو يتمتع بالميزات التالية:

• التسجيل مهم. تختلف الوظائف التي تسمى func() و Func() تمامًا؛
• يجب أن تتبع عوامل التشغيل فاصلة منقوطة؛
• الكائنات والعمليات المضمنة؛
• لا يتم احتساب المسافات. يمكنك استخدام أي عدد تريده من المسافات البادئة، بالإضافة إلى فواصل الأسطر، لتنسيق التعليمات البرمجية الخاصة بك.

أبسط كود جافا سكريبت يبدو كالتالي:

نطاق التطبيق

لكي نفهم سبب الحاجة إلى JavaScript ومدى ضرورة تعلمها، يجب علينا تسليط الضوء على بعض المجالات التي يتم استخدامها فيها لغة معينةبرمجة.

• تطوير تطبيقات الويب. هل ترغب في تثبيت عداد بسيط، أو تنظيم نقل البيانات بين النماذج، أو وضع لعبة على موقع الويب الخاص بك؟ ثم سوف يتولى جافا سكريبت المسؤولية مساعد مخلصفي هذه الحالة؛
• "المشاركة النشطة" في AJAX. أتاحت هذه التقنية تسريع تشغيل التطبيقات بشكل كبير من خلال تبادل البيانات مع الخادم في وضع "الخلفية":

• نظام التشغيل. ربما لم يكن البعض يعلم، لكن أنظمة التشغيل Windows وLinux وMac لها متصفحات منافسة خاصة بها، ونصيب الأسد منها مكتوب بلغة JavaScript؛
• تطبيقات الهاتف الجوال؛
• مجال الدراسة. أي تخصص برمجة في الجامعة يشمل دراسة جافا سكريبت إلى حد أو بآخر. هذا يرجع إلى حقيقة أن اللغة تم تطويرها في الأصل من أجل عدم وجودها مبرمجين أقوياء. يتم دمج دروس JavaScript بشكل منطقي دورة اساسية HTML، لذا فإن إتقانها أمر بسيط للغاية.

المميزات والعيوب

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

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

الآن تجدر الإشارة إلى بعض المزايا

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

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

لمن يريد الدراسة

معقدة و طريق طويللأولئك الذين قرروا دراسة JavaScript بدقة. للمبتدئين، هناك توصيات أساسية، وبعد ذلك يمكنك تبسيط عملية التعلم بشكل كبير.

• بادئ ذي بدء، HTML. لا يمكنك البدء في فعل أي شيء للإنترنت دون الأساسيات. الجداول المتتاليةستكون الأنماط (CSS) مفيدة جدًا أيضًا؛
• استخدم الأدب الجديد. البرمجة ليست فيزياء، قوانينها لا تنتهك، ولكنها قوانين جديدة وسائل تعليمية- يتم تجريد هذه القديمة. تتطور تقنيات تكنولوجيا المعلومات باستمرار، ولا ينبغي إهمال التحديثات المفيدة؛
• حاول أن تكتب جميع أقسام البرنامج بنفسك. إذا لم ينجح شيء ما على الإطلاق، فيمكنك استعارة رمز شخص آخر، ولكن فقط بعد فهم كل سطر بنفسك أولاً؛
• تصحيح الأخطاء هو أفضل صديق لك. العثور على الأخطاء بسرعة هو أحد أهم اللحظاتفي البرمجة؛
• لا تتجاهل قواعد التنسيق. بالطبع، لن يتحسن الكود أو يسوء منه كميات مختلفةالمسافات البادئة والمسافات، ولكن سهولة القراءة والفهم من قبل المبرمج هي أيضًا نقطة مهمة. الكود أدناه؟ من الصعب جدًا إدراكه، خاصة إذا لم تكن هو

• يجب أن يكون للأسماء المتغيرة معنى معجمي. في طور الكتابة برامج بسيطةلا يبدو هذا مهمًا على الإطلاق، ولكن عندما يتجاوز عدد أسطر التعليمات البرمجية الألف، تكسر أرجل الشياطين جميعها؛

Javascript هي لغة تتطور باستمرار، خاصة الآن مع وجود جدول سنوي لتحديثات مواصفات ECMAScript. وهذا يجعل معرفة جافا سكريبت خارج نطاق jQuery أمرًا متزايد الأهمية.

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

ومع أخذ هذه الجوانب في الاعتبار، فلنبدأ...

ما هو اختبار FizzBizz

فيزبيز - عادة اختبار صغير، بهدف التخلص من المطورين عديمي الخبرة. أعتقد أنك ستفاجأ بعدد مطوري JavaScript الذين لا يعرفون كيفية كتابة اختبارات كهذه.

وكقاعدة عامة، فإن مثل هذه الاختبارات لا تحمل الكثير من المعنى. ويهدف فقط إلى اختبار قدرات المرشحين المحتملين.

تذكر أن هناك احتمالًا كبيرًا جدًا أن يُطلب منك إجراء اختبار مثل هذا في المقابلة.

مثال على اختبار FizzBizz الكلاسيكي:

الخيارات لمثل هذه الاختبارات لا حصر لها. ذات مرة، أثناء المقابلة، واجهت مثل هذا الاختبار، وبعد ذلك اضطررت إلى حل خيارين آخرين.

ل(فار ط = 1؛ ط<= 100; i++) { if (i % 15 == 0) { console.log("FizzBuzz"); } if (i % 3 == 0) { console.log("Fizz"); } if (i % 5 == 0) { console.log("Buzz"); } }

الفرق بين == و ===

ربما تكون على دراية بكلا عاملي المقارنة. ومع ذلك، هل تعرف بالضبط كيف تختلف هذه العوامل؟ يتطلب Javascript Linter منك استخدام عامل التشغيل ===، هل تساءلت يومًا عن السبب؟

لا يقارن بين أنواع المعاملات، بل يلقيها على نفس النوع. هذه العملية لها سمعة سلبية.

Console.log(24 == "24"); // حقيقي

كما ترون، تم تحويل قيمة السلسلة 24 (بين علامات الاقتباس المفردة) إلى نوع عدد صحيح. بالطبع، هناك مواقف عندما يكون هذا هو ما تريده بالضبط، ولكن في أغلب الأحيان لن ترغب في أن يقوم عامل المقارنة بمعالجة أنواع البيانات. لا يُنصح بمقارنة البيانات باستخدام عامل التشغيل ==؛ ستظهر لك معظم أنظمة التحقق من نمط كود جافا سكريبت هذا الخطأ.

=== (مقارنة صارمة) تقارن أنواع البيانات دون تحويلها إلى نوع واحد، أي أنه سيتم مقارنة البيانات كما هي. وأيضًا، نظرًا لأن هذه العملية لا تتضمن صب الكتابة، فإنها تعمل بشكل أسرع. وبالتالي، لكي يعمل هذا المشغل بشكل صحيح، يلزم وجود مشغلين من نفس النوع.

نفس المثال، ولكن مع عامل التشغيل ===

Console.log(24 === "24"); // خطأ شنيع

نحصل على خطأ في الاستجابة، نظرًا لأن المعاملات من أنواع مختلفة، أحدهما من النوع الصحيح والثاني عبارة عن سلسلة.

كيفية تحديد عناصر DOM بدون مكتبات إضافية

من المؤكد أنك على دراية بكيفية تحديد العناصر باستخدام jQuery، ولكن هل يمكنك فعل الشيء نفسه، ولكن دون مساعدة هذه المكتبة؟

لا أقصد فقط تحديد عنصر بمعرف محدد أو مجموعة من الفئات، بل أتحدث عن تعبيرات البحث عن العناصر باستخدام jQuery.

هناك العديد من الطرق الأصلية للعثور على العناصر في DOM والتي تكون بنفس جودة jQuery. يمكننا أيضًا استخدام محددات مثل الطفل الأول، والطفل الأخير، وما إلى ذلك.

دعونا نلقي نظرة على بعض هذه الأساليب.

• document.getElementById هي طريقة كلاسيكية للعثور على العناصر حسب معرفها.
• document.getElementsByClassName - تحديد العناصر حسب قيمة حقل className
• document.querySelector هي طريقة رائعة تحل محل محدد $() الخاص بـ jQuery بالكامل تقريبًا، ولكنها مضمنة بالفعل في Javascript. والفرق الوحيد هو أنه يُرجع العنصر الأول الذي تم العثور عليه فقط.
• document.querySelectorAll - يشبه الطريقة السابقة، لكنه يُرجع مصفوفة من العناصر التي تم العثور عليها.
• document.getElementsByTagName - ستساعدك هذه الطريقة على تحديد العناصر حسب اسم العلامة. إذا كنت تريد العثور على جميع عناصر div، فهذه هي الطريقة التي تحتاجها.

أود أيضًا أن أشير إلى أنه يمكن استخدام أساليب querySelector وquerySelectorAll ليس فقط في المستند بأكمله، ولكن أيضًا في العناصر الفردية، أي أنه يمكنك إجراء تحديد داخل عنصر أصل واحد.

راجع وثائق موزيلا للحصول على وصف كامل لهذه الأساليب.

رفع إعلانات المتغيرات والوظائف

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

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

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

استخدام أدوات المطور في المتصفح

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

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

من خلال تعلم استخدام أدوات المطورين في متصفحات مثل Chrome وFirefox وأحدث الإصدارات من Internet Explorer، يمكنك تصحيح أخطاء البرنامج النصي الخاص بك وقياس أدائه والعثور على المجالات التي يمكنك من خلالها تحسين الخوارزمية.

لا تحاول أبدًا تصحيح التعليمات البرمجية بشكل أعمى، وقم دائمًا بتحليلها أولاً باستخدام أدوات المطورين. حل المشاكل غير الموجودة هو مضيعة للوقت.

أوامر وحدة التحكم

دعنا ننتقل إلى النقطة التالية في دراسة أدوات المطورين. كقاعدة عامة، توفر جميعها وحدة تحكم يمكنك من خلالها تنفيذ كود Javascript بشكل تفاعلي.

من المؤكد أنك على دراية بأوامر مثل console.log وconsole.error، لكن وظيفة وحدة التحكم لا تقتصر على هذا.

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

• console.log - يستخدم لتسجيل الأحداث. يدعم التنسيق.
• console.error - لتسجيل الأخطاء في الكود. أستخدم هذا الأمر عند حدوث أخطاء في طلبات AJAX وغيرها من مناطق التعليمات البرمجية التي يحتمل أن تكون خطرة. تشبه هذه الطريقة الطريقة السابقة، ولكنها تطبع قائمة باستدعاءات المكدس.
• console.dir(object) - يعرض محتويات الكائن المنسقة. في واقع الأمر، هذه الطريقة مفيدة جدًا عند تصحيح أخطاء التعليمات البرمجية.
• console.group(title) - يسمح لك بإنشاء مجموعة من الرسائل في السجل تحمل الاسم title. بهذه الطريقة يمكنك تجميع الرسائل، على سبيل المثال، حسب قسم التعليمات البرمجية الذي تم إنشاؤه فيه.
• console.groupCollpased يشبه الأمر السابق مع استثناء واحد. وهي تعرض الرسائل في شكل مطوي.
• console.groupEnd - ينهي مجموعة تم إنشاؤها مسبقًا.
• console.time(label) - يسمح لك بتتبع سرعة الموقع بالمللي ثانية. هذه الطريقة مفيدة في التقاط أقسام التعليمات البرمجية التي يحتمل أن تكون معقدة.
• يعد console.timeEnd(label)‎ نظيرًا للتابع groupEnd، لكنه يعمل فيما يتعلق بالتابع console.time().
• نسخة (سلسلة) - توجد طريقة في وحدة تحكم Chrome وFirefox تسمح لك بنسخ محتويات سلسلة إلى الحافظة. طريقة مفيدة جدا جربوها.

ما هو موجود بالضبط في هذا

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

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

إن أبسط طريقة لفهم ذلك هي التفكير فيه كمالك أو والد الطريقة. يشير هذا دائمًا إلى الأصل، إلا عند استخدام أساليب الاتصال أو التطبيق أو الربط.

في المثال التالي، يشير هذا إلى كائن النافذة:

الدالة myFunction() ( console.log(this === window); // true ) myFunction();

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

عندما تعلن دالة بهذه الطريقة، فإنها ترتبط بكائن النافذة العامة. هل تتذكر عندما قلنا أن هذا يشير إلى أصل الطريقة؟

تغيير قيمة هذا إلى تماما كائن جديد(ليس نافذة):

الدالة myFunction() ( console.log(this === window); // false ) new myFunction();

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

لماذا حصل هذا؟

أبسط تفسير هو أننا في المثال الثاني استخدمنا الكلمة الأساسية الجديدة، وبالتالي أنشأنا نطاقًا جديدًا وكائنًا جديدًا.

في المثال التالي، سنقوم بإنشاء واجهة برمجة تطبيقات وهمية لتنزيل البيانات من المكتبة من الخادم. سنقوم بإنشاء كائن API ببعض الطرق.

عند استخدام الكلمة جديد، ينتقل سياق البرنامج النصي من سياق النافذة إلى سياق واجهة برمجة التطبيقات (API).

var API = ( getData: function() ( console.log(this === window); // false console.log(this === API); // true ) ); API.getData();

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

تذكر أن قيمة هذا تتغير. يتغير اعتمادًا على كيفية استدعائه، ولكن إذا كنت تستخدم طريقة الربط، فستظل قيمة هذا كما هي.

يمكنك معرفة المزيد حول الكلمة الأساسية هذه في جافا سكريبت في مقالة Quirksmode ووثائقها من Mozilla.

"استخدام صارم"؛

كما أشرنا سابقًا، يتم استخدام المستخدم الصارم لتطبيق نسخة أكثر صرامة من لغة جافا سكريبت. يجب استخدام هذا التوجيه في كافة البرامج النصية.

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

هناك مقالة كاملة حول هذا الموضوع في وثائق موزيلا، أوصي بشدة بمراجعتها.

أنواع مختلفة من الدورات

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

قائمة الحلقات في جافا سكريبت:

• ل.. في
• for..of (أضيف في ES6)
• لكل
• بينما
• افعل اثناء

لحلقة

دورة إلزامية تمامًا تحتاج إلى معرفتها وفهمها. ينفذ جسده عند استيفاء الشرط 2.

لـ (الشرط 1؛ الشرط 2؛ الشرط 3) ( // الكود الخاص بك )

الشرط 1 - يتم استيفائه مرة واحدة قبل بدء سلسلة الدورات. في معظم الحالات، سوف تقوم بتهيئة عداد الحلقة هنا. يمكن تخطي هذا العنصر إذا كنت قد أكملت التهيئة مسبقًا.

الشرط 2 - يُستخدم هذا الشرط لتحديد ما إذا كان سيتم متابعة الحلقة أم لا. من المحتمل أن تقوم بمقارنة العداد الخاص بك بحجم المصفوفة هنا. إذا كانت قيمة المقارنة صحيحة، فستستمر الحلقة. إذا قمت بمقاطعة الحلقة الداخلية بفاصل، فيمكن تخطي هذا الشرط.

الشرط 3 - يتم استيفاء هذا القسم بعد كل تكرار، كقاعدة عامة، هذا هو المكان الذي تقوم فيه بزيادة العداد الخاص بك.

ل... في الحلقة

النوع التالي الأكثر أهمية من الدورة. بمساعدتها يمكنك تصفح جميع مجالات الفصل.

دعونا نعطي مثالا.

Var person = (الاسم الأول: "Dwayne"، الاسم الأخير: "Charrington"، العمر: 27، علامة النجمة: "Aquarius")؛ // ستخرج الحلقة أدناه: // "Dwayne" // "Charrington" // 27 // "Aquarius" for (var p in person) ( if (person.hasOwnProperty(p)) ( console.log(person[ ع])؛

حلقة ل...من

تمت إضافة نوع حلقة جديد إلى حد ما في ES6. نظرًا لحداثته، فهو غير مدعوم من قبل جميع المتصفحات. ولكن مع استخدام تقنيات معينة، يمكن استخدامها اليوم.

هذه الحلقة هي العكس تمامًا لـ for...in، فهي تتكرر من خلال قيم الحقول وتعمل فقط على أنواع البيانات التي تدعم التكرار، وهو ما لا يدعمه الكائن.

Var Fruits = ["برتقالي"، "تفاحة"، "قرع"، "كمثرى"]؛ لـ (فار ثمرة الفواكه) (console.log(fruit); )

الميزة الكبرى لهذا النوع من الحلقات هي أننا لم نعد بحاجة إلى إنشاء مؤشر وتتبع طول المصفوفة من أجل اجتياز عناصرها بالكامل.

لكل حلقة

نوع آخر من الدورات لا يختلف في عمقه عن أنواع الدورات المذكورة سابقًا.

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

ربما يكون هذا هو النوع الأكثر محدودية من الحلقات، ولكن له مجالات تطبيق خاصة به يجب أن تعرفها:

Var Fruits = ["تفاحة"، "موز"، "برتقال"، "عنب"، "كمثرى"، "فاكهة العاطفة"]؛ // القيم الثلاث في وظيفة رد الاتصال هي: // العنصر - العنصر الذي يتم اجتيازه // الفهرس - الفهرس الحالي للعنصر في المصفوفة بدءًا من 0 // المصفوفة - المصفوفة التي يتم اجتيازها (ربما تكون غير ذات صلة في الغالب) Fruits.forEach(function(element, Index, array) ( console.log(index, element); ));

في بعض الأحيان، تحتاج فقط إلى تكرار جميع عناصر المصفوفة وربما إجراء بعض التغييرات عليها. سلوكه مشابه لـ jQuery.each.

أحد عيوب هذا النوع من الدورات هو أنه لا يمكن مقاطعته. إذا كنت بحاجة إلى إنشاء حلقة وفقًا لقواعد ES5، فاستخدم طريقة Array.every، والتي يمكنك العثور عليها في وثائق mozilla.

حائط اللوب

تشبه حلقة while حلقة for، ولكنها تأخذ معلمة واحدة فقط - الشرط نفسه، والذي من خلاله تحدد الحلقة ما إذا كانت ستستمر في التكرارات أم ستوقفها.

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

من خلال التجربة، سأقول أن أسرع إصدار من حلقة while هو حلقة تحتوي على عداد إنقاص، حيث تقوم بتناقصها بمقدار واحد حتى تصل إلى الصفر (وهو أمر قابل للنقاش أيضًا).

فار ط = 20؛ بينما (i--) (console.log(i);)

افعل...أثناء الحلقة

هذه الدورة نادرة جدًا، لكن لا يزال الأمر يستحق التعرف عليها لفهم عملها.

قد لا تكمل الحلقة while تكرارًا واحدًا. أي أنه إذا قمت بتمرير قيمة خاطئة كشرط إلى الحلقة، فلن يتم تنفيذ تكرار واحد. حلقة do...while مضمونة لتنفيذ عملية واحدة على الأقل.

الفرق لا ينتهي عند هذا الحد. تقوم حلقة while بمعالجة الحالة قبل التكرار، وحلقة do...while بعدها.

وكما هو الحال دائمًا، ستجد وصفًا تفصيليًا لهذا النوع من الحلقات في وثائق موزيلا.

الأساليب والمهام الأساسية

هناك طرق أساسية في جافا سكريبت يجب أن تعرفها. عندما يتعلق الأمر بالعمل مع المصفوفات والسلاسل، توفر جافا سكريبت مجموعة كبيرة من الأساليب المضمنة. سوف نتطرق فقط إلى المصفوفات والسلاسل، ونترك الكائنات لوقت لاحق.

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

العمل مع السلاسل

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

• String.replace(regexp | ما الذي يجب استبداله، ما الذي يجب استبداله، رد الاتصال) - يسمح لك باستبدال جزء من التعبيرات العادية.
• String.concat(line 1, line 2...) - قم بتسلسل عدة أسطر في سطر واحد.
• String.indexOf(value) - تتيح لك الطريقة العثور على الرقم التسلسلي لحرف الجزء الذي تم البحث عنه من السلسلة، -1 - إذا لم يتم العثور على السلسلة
• String.slice(startIndex, endIndex) - يُرجع قسم السلسلة من startIndex إلى endIndex
• String.split(separator, Limit) - يقسم السلسلة إلى مصفوفة حسب الحرف المحدد والحد الأقصى للطول.
• String.subsctr(startIndex, length) - يُرجع جزء السلسلة الذي يبدأ بـ startIndex بطول الطول.
• String.toLowerCase - يحول كافة الأحرف في سلسلة إلى أحرف صغيرة
• String.toUpperCase - تحويل كافة أحرف السلسلة إلى أحرف كبيرة
• String.trim - يزيل المسافات من بداية ونهاية السلسلة

العمل مع المصفوفات

سوف تواجه صفائف في كثير من الأحيان. لقد أثبتوا أنهم وسيلة رائعة لتخزين البيانات. من المؤكد أن هذه الطرق تستحق المعرفة لأي مطور جافا سكريبت، فلا يجب عليك البحث عنها على Google.

• Array.pop - يقوم بإرجاع العنصر الأخير وإزالته من المصفوفة.
• Array.shift - يقوم بإرجاع العنصر الأول وإزالته من المصفوفة.
• Array.push(val1, val2) - يضيف قيمة واحدة أو أكثر إلى نهاية المصفوفة. إرجاع الطول الجديد للصفيف.
• Array.reverse - يعكس ترتيب عناصر المصفوفة.
• Array.sort([وظيفة المقارنة]) - يسمح لك بفرز مصفوفة باستخدام وظيفتك الخاصة.
• Array.join(separator) - يُرجع سلسلة تتكون من عناصر صفيف مفصولة بحرف فاصل (فاصلة بشكل افتراضي).
• Array.indexOf(value) - يُرجع فهرس العنصر في المصفوفة، -1 إذا لم يتم العثور على العنصر.

هذه ليست قائمة كاملة بأساليب العمل مع المصفوفات. يمكنك العثور على الآخرين في وثائق موزيلا. منذ ES6، تمت إضافة بعض الأساليب المثيرة للاهتمام للغاية.

الفرق بين الدعوة والتطبيق

يخلط المطورون بين هاتين الطريقتين في كثير من الأحيان. يمكنك غالبًا الاستغناء عنها، ولكنها تساعدك على استدعاء الأساليب وتغيير القيمة this في وقت التشغيل.

والفرق بينهما صغير جداً، ولكنه موجود. عند استخدام طريقة الاستدعاء، يمكنك تحديد عدد لا نهائي من الوسائط، مفصولة بفواصل.

باستخدام التابع application، يمكنك تمرير الوسائط كمصفوفة وتغيير قيمة this .

إذا كنت تحتاج فقط إلى تمرير مصفوفة كوسيطات إلى إحدى الطرق، فمنذ ES6 تمت إضافة عامل انتشار. ولا يسمح بتغيير قيمة هذا. يمكنك التعرف عليه، كما هو الحال دائمًا، في الوثائق الرسمية من موزيلا.

مثال على المكالمة:

الدالة myFunc() ( console.log(arguments); ) myFunc.call(this, 1, 2, 3, 4, 5);

تطبيق المثال:

الدالة myFunc() ( console.log(arguments); ) myFunc.call(null, );

مقدمة إلى المكتبات والأطر

اليوم، أبرز ممثلي أطر عمل جافا سكريبت هم AngularJS وReact.js وEmber. بالطبع هناك عدد من الآخرين.

ومع ازدياد حجم تطبيقات الويب، فإن هذه المكتبات تجعل العمل معها أسهل. يجدر بنا أن نفهم أن معرفة jQuery وحدها لا تكفي الآن. تدرج معظم الوظائف الشاغرة المعرفة بمكتبات جافا سكريبت الإضافية كمتطلب أساسي.

Node.js

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

أنا شخصياً أعتقد أن كل مطور في عام 2015 يجب أن يكون على دراية بـ Node. أنا لا أتحدث عن المعرفة العميقة، يكفي أن تكون قادرًا على تطبيقها لتطوير الخادم، والنماذج الأولية، والاختبار، وما إلى ذلك.

هناك شوكة من Node.js تسمى IO.js، وهي اليوم متطابقة تقريبًا، وفي النهاية أنت تكتب فقط بلغة Javascript باستثناء الاختلافات الصغيرة.

اختبارات

ذات مرة، لم نختبر كود جافا سكريبت على الإطلاق، لأننا لم نعتقد أنه ضروري. لكن البرامج النصية أصبحت أكبر وأكبر بفضل AngularJS وNode.js.

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

أدوات

كونك مطور JavaScript في عام 2015 لا يعني معرفة ممتازة باللغة فحسب، بل يعني أيضًا عددًا كبيرًا من الأدوات للعمل معها.

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

إليك مجموعة من الأدوات التي يجب وضعها في الاعتبار: Gulp، وWebpack، وBabelJS. هناك العديد من الأدوات المتاحة، لكن أدوات مثل Gulp وGrunt تساعدك بشكل كبير في تطوير تطبيقات جافا سكريبت وإدارتها.

لقد ولت الأيام التي قمت فيها ببساطة بتنزيل ملف جافا سكريبت وإضافته إلى صفحتك. نستخدم الآن مديري الحزم NPM أو Bower.

نحن نقوم بدمج النصوص البرمجية وتصغيرها واختبارها، مما يساعد على تنظيم هيكل المشروع.

تسير أدوات جافا سكريبت جنبًا إلى جنب عند تطوير جافا سكريبت المتماثل (الكود المستخدم من جانب العميل والخادم). ECMAScript 6، المعروف أيضًا باسم ES6، والمعروف أيضًا باسم ESNext

لم تقم المتصفحات بعد بتنفيذ الكثير من وظائف ECMAScript 6. ولكن يمكنك اليوم استخدام الميزات الجديدة من ES6 باستخدام برامج التحويل البرمجي لجافا سكريبت. تعرف على واجهات برمجة التطبيقات والأساليب الجديدة: السلاسل والمصفوفات والأساليب الأخرى مثل WeakMaps والرموز والفئات. يجب أن تكون دائمًا على دراية بالتغييرات القادمة.

خاتمة

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

للعمل سوف نستخدم شيئًا مثل CPS.

يبدو الأمر أكثر رعبا مما هو عليه في الواقع. هذه دالة تأخذ وظيفة أخرى كمعلمة، وعندما تكتمل الوظيفة الأولى، فإنها تستدعي وظيفة المعلمة بدلاً من إعادة التشغيل.

لنقم بتغليف jQuery.ajax بطريقة للحصول على النتيجة المطلوبة.

وظيفة ajax(url, callback)( jQuery.ajax((url: url, Success: callback)); )

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

الدالة المدمجة (البرامج النصية، رد الاتصال)( async.map(scripts, ajax, function(contents)( callback(contents.join("")); )); )

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

قارن مع ما كان عليه:
الجمع بين الدالة (البرامج النصية، رد الاتصال) (بيانات فار؛ for(var i =0; l = scripts.length; i< l; ++i){ (function (i){ jQuery.ajax({ url: scripts[i], success: function(response){ data[i] = response; if(data.length === scripts.length){ callback(data.join("")); } } }); }(i)); } }

نظرًا لأن الخريطة هي بالفعل طريقة طبيعية بالنسبة لي لكتابة البرامج، فلن أكتب الكود أعلاه أبدًا. سأفكر في كيفية تكييف الخريطة مع بيئة غير متزامنة. وإذا لم تكن هناك مكتبة غير متزامنة، لكنت قد كتبت خريطة غير متزامنة بنفسي.

يتيح لك النهج الوظيفي النظر إلى الأشياء بشكل أكثر بساطة. وتنفيذ حلول أجمل.

التطبيق الجزئي للوظائف

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

على سبيل المثال، سوف نقوم بإنشاء عناصر DOM.
(ملاحظة المترجم: cul.dom هي مكتبة المؤلف، التي أنشأها لأحد المشاريع. لكن الوظائف الموجودة فيها واضحة وبسيطة.)

فار ul = cull.dom.el("ul"); //document.createElement("ul") ul.nodeType === 1 // صحيح

يمكنك أيضًا تعيين سمات الملكية.

var ul = cull.dom.el("ul", (className: "bands"));

وتحديد العناصر الفرعية

var li = cull.dom.el("li", "Tom Waits"); var ul = cull.dom.el("ul", (className: "bands"), li);

إذا كنت تستخدمها داخل بعضها البعض، يمكنك الحصول على شيء مثل DSL لـ HTML.

Va ul = cull.dom.el("ul", className:"bands"), cull.dom.el("li", "Tom Waits"));

الآن دعونا نبدأ بمناقشة الاستخدام الجزئي للوظائف. هل تتذكر أحد الأمثلة الأولى؟

وظيفة makeAdder (base) (وظيفة الإرجاع (num) (قاعدة الإرجاع + num؛))
تقوم بإرجاع دالة تجمع رقمين. وبطبيعة الحال، يمكننا استخدام الوظائف المسماة إذا لزم الأمر.

وظيفة makeAdder(base)( وظيفة الإرجاع (num)( return add(base, num); ) )

والآن نرى أن الدالة makeAdderيأخذ وظيفة يضيفويلتقط إحدى حججه. تحصل على دالة إضافة حيث تكون إحدى الوسائط ثابتة

var add2 = cull.partial(add, 2); add2(5); //7

الآن لدينا فرصة مثيرة للاهتمام إلى حد ما - لجعل DSL الخاص بنا لإنشاء عناصر DOM أكثر جمالًا.

var ul = cull.partial(cull.dom.el, "ul"); var li = cull.partial(cull.dom.el, "li");

ويمكننا بناء قوائم HTML بشيء من هذا القبيل

var list = ul((className: "bands"), );

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

["a"، "br"، "code"، "div"، ...].forEach(function(tagName)( cull.dom.el = cull.partial(cull.dom.el, tagName); )) ;

لذلك سوف نقوم بإنشاء وظيفة لكل عنصر HTML.
بالطبع، ليس من المناسب دائمًا استخدام مساحة الاسم بأكملها، لذلك سنقوم بتبسيطها بشكل أكبر.

var e = cull.dom.el; var list = ul((className: "bands"), );

الآن نحن لسنا مرتبطين بالمتغيرات والوظائف العالمية، وهو أمر جيد.

تكوين الدوال

هنا مثال آخر لتطبيق بسيط - استبيان.

يجب عليك الإجابة على كل كتلة. تحتوي كل كتلة على عدة أسئلة. بعد الإجابة على كتلة واحدة، ننتقل إلى المرحلة التالية.

يمكن اعتبار كل كتلة بمثابة لوحة، والتي يمكن أن تكون في وضع السؤال، أو وضع النتيجة، أو غير نشطة.

قد تحتوي كل لوحة على مجالات مختلفة. سلسلة، رقمية، تواريخ.
يمكن أن تكون الحقول في وضعين - التحرير أو النتيجة.

دعونا نرى كيف يمكننا التعامل مع حل هذه المشكلة باستخدام نهج وظيفي.

تذكر الميزة المفضلة لدينا دعم?

Tweeps.map(prop("name"));

لديها أخ توأم func.

Tweeps.map(func("to.String"));
تقوم بإرجاع وظيفة يمكنك تطبيقها على الكائنات.

الآن دعونا نحسب نتيجة كل كتلة في الاستبيان

BuildSummary: function())( return div(this.components.map(func("buildSummary"))); )

يجب أن يكون المبدأ واضحا. نعيد div الذي سيحتوي على العناصر التي أنشأتها الوظيفة buildSummaryلكل كتلة من الاستبيان.

في هذا المثال، يعرف كل مكون كيفية تقديم نتائجه. لكن في بعض الأحيان تحتاج اللوحة إلى عرض النتيجة بطريقة معينة.

لذلك يمكننا كتابة وظيفتين: buildSummaryو getSummary.

الأول يبني عرضًا كاملاً، بما في ذلك علامات html.
يقوم الثاني بإرجاع كائن يحتوي على النتائج المطلوبة.

وبمجرد أن كنا بحاجة إلى بعض المعالجة الذكية للنتائج، بدأ كل الجمال في الانهيار.

BuildSummary: function())( var div = document.createElement("div"); for(var i =0; l=this.components.length; i

ومع ذلك، نحن بالفعل موجهون وظيفيًا بما يكفي لتحسين هذا الجزء من التعليمات البرمجية. أول تحسن واضح هو استخدام foreach.

BuildSummary: function())( var div = document.createElement("div"); this.components.forEach(function(component)( var p = document.createElement("p"); p.innerHTML = Component.getSummary( ) .text; div.appendChild(p);

لقد تخلصنا من متغيرات الحلقة، ولكن هل من الممكن استخدامها خريطة?

BuildSummary: function())( return div(this.components.map(function(component)( var p = document.createElement("p"); p.innerHTML = Component.getSummary().text; return p; )) ) ;)

موجزة، ولكن بعيدة عن المثالية. المشكلة الرئيسية في هذا التعبير:
مكون.getSummary().text;

المشكلة هي أنه لا يوجد شيء واحد، بل ثلاثة أشياء تحدث هنا:

1. الحصول على النتيجة عبر getSummary()
2. الحصول على خاصية النص
3. التفاف النتيجة في العلامة ص

ماذا عن وظائف الخريطة المتعددة؟

BuildSummary: function() ( return div(this.components.map(function(component)( return Component.getSummary(); )).map(function(summary)( return Summary.text; )).map(function(text) )( var p = document.createElement("p"); p.innerHTML = text; return p; ));

النمط الوظيفي واضح، لكنه يبدو مخيفا. والقراءة غير مريحة للغاية.

ولكن دعونا نلقي نظرة على الكود مرة أخرى. ماذا لدينا هنا؟

إرجاع المكون.getSummary();

هنا نسمي طريقة الكائن. لكننا أنشأنا وظيفة خاصة لهذا، func.

BuildSummary: function() ( return div(this.components.map(func("getSummary")).map(function(summary)( return Summary.text; )).map(function(text)( var p = document.getElementById("getSummary"). createElement("p"); p.innerHTML = text return p));

الوظيفة (الملخص) (إرجاع الملخص. النص؛)

نحن الوصول إلى خاصية كائن. وهناك وظيفة مناسبة لهذا أيضًا.

BuildSummary: function() ( return div(this.components.map(func("getSummary")).map(prop("text")).map(function(text)( var p = document.createElement("p" );
ويبقى القسم الأخير.
وظيفة(نص)( فار p = document.createElement("p"); p.innerHTML = text; return p; )

هنا نقوم بإنشاء عنصر DOM وتعيين خصائصه الداخلية. لدينا شيء مماثل في خدمة DSL الخاصة بنا، أليس كذلك؟

BuildSummary: function() ( return div(this.components.map(func("getSummary")).map(prop("text")).map(p)); )
الآن أصبحت جميلة تقريبًا. ولكن هناك تحذير واحد. نقوم بإجراء 3 تمريرات عبر القائمة. في بعض الحالات، قد يكون هذا أمرًا طبيعيًا، لكنه بشكل عام أقل من المستوى الأمثل إلى حد ما. ماذا يمكن ان يفعل؟

حان الوقت لاستخدام تكوين الوظيفة. نريد أن نجعل دالة واحدة تفعل ما تفعله الثلاثة.

فار تلخيص = يؤلف ()؛

كيف ننفذ الإنشاء؟

في اجزاء. أولاً، لنقم بإنشاء مرادفات حتى لا نكتب الكثير من التعليمات البرمجية.

var callGetSummary = func("getSummary"); var getText =prop("text"); فار تلخيص = يؤلف ()؛

الخطوةالاولى

var callGetSummary = func("getSummary"); var getText =prop("text"); فار تلخيص = يؤلف ()؛ // تلخيص(obj); // => callGetSummary(obj)
يتم تمرير الكائن إلى الوظيفة الأخيرة من القائمة، وهي getSummary. يعيد لنا كائنًا من النوع ملخص. ويتم تمرير هذا الكائن إلى الوظيفة التالية، الحصول على النص

الخطوة الثانية

var callGetSummary = func("getSummary"); var getText =prop("text"); فار تلخيص = يؤلف ()؛ // تلخيص(obj); // => getText(callGetSummary(obj))

ونتيجة للخطوة الثانية، سوف نحصل على السلسلة الموجودة في الخاصية نص. وبعد ذلك ستنتقل السلسلة إلى دالة ستُنشئ لنا كائن DOM ص.

الخطوة الثالثة

var callGetSummary = func("getSummary"); var getText =prop("text"); فار تلخيص = يؤلف ()؛ // تلخيص(obj); // => p(getText(callGetSummary(obj)))

هذا مثال على التركيب البسيط، عندما يتم تمرير معلمة من دالة إلى أخرى بشكل تسلسلي. يمكنك إنشاء تركيبة حيث يتم تمرير معلمة إلى كل وظيفة، ويكون الإخراج عبارة عن قائمة من النتائج. أو أي شيء آخر.

لذلك، دعونا نعود إلى مثالنا الذي طالت معاناته.

BuilSummary: الوظيفة () ( تلخيص var = إنشاء ()؛ إرجاع div (this.components.map (تلخيص))؛ )

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

فار تلخيص = يؤلف ()؛ // ... buildSummary: function() ( return div(this.components.map(summarize)); )

يبدو رائعًا وجميلًا، لكن ماذا عن الأداء؟

قضايا الأداء

لـ - 5 مليون عملية في الثانية
forEach - 1.5 مليون عملية في الثانية
تقليل - 1.5 مليون عملية في الثانية

العمل مع DOM - 50 ألف عملية في الثانية

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

خاتمة

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

ملاحظة. يمكن الاطلاع على شرائح الخطاب الأصلي في

لقد قمنا بتجميع قائمة من الأسئلة، والإجابات التي يجب أن يعرفها ليس فقط كل مطور جافا سكريبت، ولكن ربما أي مبرمج.

ما هما أهم نموذجين برمجيين لمطور JavaScript؟

JavaScript هي لغة متعددة النماذج تدعم البرمجة الحتمية/الإجرائية جنبًا إلى جنب مع OOP والبرمجة الوظيفية. يدعم JS OOP مع الميراث النموذجي.

ومن المستحسن أن نذكر:

1. وراثة النموذج الأولي (أيضًا: النماذج الأولية، ومراجع الكائنات)

2. البرمجة الوظيفية (أيضًا: عمليات الإغلاق، وظائف الدرجة الأولى، لامداس)

يتجنب:

ليس لديك أي فكرة عن النماذج، ولا تذكر OOP النموذجية أو البرمجة الوظيفية.

ما هي البرمجة الوظيفية؟

البرمجة الوظيفية تنطوي على الحوسبة وظائف رياضية، تجنب شروط عامةوالبيانات القابلة للتغيير. Lisp (المحددة في عام 1958) هي واحدة من أولى الشركات اللغات الوظيفيةالبرمجة وهي مستوحاة بشكل كبير من حساب التفاضل والتكامل لامدا. لا تزال لغة Lisp واللغات المشابهة تُستخدم على نطاق واسع حتى يومنا هذا.

تعد البرمجة الوظيفية أحد المفاهيم الأساسية لجافا سكريبت (أحد ركائز JS). بعض المرافق الوظيفيةتمت إضافتها إلى JavaScript في ES5.

جدير بالذكر:

1. وظائف نقية / نقاء وظائف

2. تجنب الآثار الجانبية

3. مجموعة بسيطة من الوظائف

4. أمثلة على اللغات الوظيفية: Lisp، ML، Haskell، Erlang، Clojure، Elm، F Sharp، OCaml، إلخ.

5. الميزات التي تدعمها البرمجة الوظيفية: وظائف من الدرجة الأولى، وظائف ذات ترتيب أعلى، وظائف كوسائط/قيم

يتجنب:

1. عدم ذكر الوظائف النقية / تجنب الآثار الجانبية

2. عدم تقديم أمثلة على اللغات الوظيفية

3. الفشل في تقديم أمثلة على ميزات JavaScript الوظيفية

ما هو الفرق بين الميراث الطبقة والنموذج الأولي؟

الميراث الطبقي:يتم توريث المثيلات من الفئات، ويتم إنشاء علاقات الفئات الفرعية (التنظيم الهرمي للفئات). يتم تنفيذ المثيلات من خلال مُنشئ الوظيفة، من خلال الواصف الجديد. قد لا يحتوي مثيل الفئة على واصف فئة منذ ES6.

وراثة النموذج الأولي:ترث المثيلات مباشرة من كائنات أخرى، ويتم تنفيذها من خلال المصانع أو Object.create() ويمكن أن تتكون المثيلات من العديد كائنات مختلفةلتبسيط الميراث الانتقائي. وراثة النموذج الأولي أبسط وأكثر مرونة من وراثة الطبقة.

جدير بالذكر:

1. الطبقات: علاقات وثيقة، تَسَلسُل

2. النماذج الأولية: الوراثة المتسلسلة، التفويض، الوراثة الوظيفية، التركيب

يتجنب:

الفشل في الإشارة إلى مزايا الميراث النموذجي على الميراث الطبقي

ما هي إيجابيات وسلبيات البرمجة الوظيفية والموجهة للكائنات؟

إيجابيات OOP:وسيلة سهلة لفهم مفهوم الأشياء وطرق الاتصال. يميل OOP إلى استخدام أسلوب الأمر بدلاً من الأسلوب التعريفي، والذي يُقرأ كمجموعة مباشرة من تعليمات الآلة.

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

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

تتوسع الحوسبة باستخدام وظائف خالصة بسهولة عبر معالجات متعددة أو مجموعات حوسبة موزعة دون خوف من التنافس على الموارد.

مساوئ فب:يمكن أن يؤدي الاعتماد المفرط على الأساليب الوظيفية مثل البرمجة الضمنية إلى انخفاض إمكانية قراءة التعليمات البرمجية عن طريق جعل التعليمات البرمجية الناتجة أكثر تجريدًا وإيجازًا وأقل تحديدًا.

في كثير من الأحيان يكون الناس أكثر دراية بـ OOP و نهج حتمي، لذلك قد تشكل بعض مصطلحات البرمجة الوظيفية الشائعة تحديًا للمبتدئين.

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

جدير بالذكر:

1. مشاكل الظروف العامة والسلوك غير المرغوب فيه

2. إمكانيات FP لتبسيط كود البرنامج بشكل جذري

3. الاختلاف في صعوبة التعلم

4. آثار جانبيةوتأثيرها على موثوقية البرنامج

5. صعوبة التغيير والهشاشة العامة لقاعدة كود OO مقارنة بتلك الموجودة في النمط الوظيفي

يتجنب:

ناهيك عن عيوب أحد الأساليب - كل من واجه أحدها يعرف بعض العيوب الأخرى

متى يكون الميراث الطبقي خيارًا مناسبًا؟

سؤال مخادع. الجواب الصحيح هو أبدا. التكوين أبسط و نهج مرنمن الميراث الطبقي.

جدير بالذكر

"... تكوين الكائن أفضل من وراثة الفصل"

يتجنب:

ذكر مكونات المستقيم. يستخدم React.js واصف الفئة، لكنه لا يتجنب مخاطر وراثة الفئة. على عكس الإجابات الشائعة، لا تحتاج إلى استخدام فئة لاستخدام React. ستظهر مثل هذه الإجابة عدم فهم كلا الفئتين في JavaScript وReact.

متى يكون من الأفضل استخدام الميراث النموذجي؟

هناك أكثر من نوع من الميراث النموذجي:

1. التفويض (سلسلة النموذج الأولي)

2. التسلسل (mixins، Object.sign())

3. الميراث الوظيفي (يجب عدم الخلط بينه وبين البرمجة الوظيفية. يتم استخدام الوظيفة لإنشاء إغلاق خاص/تغليف)

اجابة جيدة:

1. في الحالات التي لا توفر فيها الوحدات النمطية أو البرمجة الوظيفية حلاً واضحًا

2. عندما تحتاج إلى جمع كائن من عدة مصادر

3. في أي حال عندما تحتاج إلى استخدام الميراث

يتجنب:

1. عدم معرفة متى يتم استخدام النماذج الأولية

2. لا أعرف عن mixins أو Object.assis()

ماذا يعني "تكوين الكائن أفضل من وراثة الطبقة"؟

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

جدير بالذكر:

1. اجتناب الميراث والصلة

2. تجنب مشكلة "الموز/القرد" الناشئة عن الميراث الكلاسيكي (كنت بحاجة إلى موزة - حصلت على قرد يحمل موزة في وسط الغابة)

يتجنب:

لا تذكر أيًا من المشكلات المذكورة أعلاه. فشل في شرح الفرق بين التكوين والميراث، أو فشل في إيصال فوائد التكوين.

ما هو اتصال البيانات ثنائي الاتجاه وتدفق البيانات أحادي الاتجاه وما الفرق بينهما؟

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

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

تعتبر تدفقات البيانات أحادية الاتجاه حتمية، في حين أن الربط ثنائي الاتجاه يمكن أن يسبب تأثيرات غير مرغوب فيها يصعب تتبعها وفهمها.

جدير بالذكر:

1. رد الفعل جديد مثال قانونيتدفق البيانات أحادي الاتجاه، لذا فإن ذكر React سيكون فكرة جيدة. Cycle.js هو تطبيق شائع آخر لتدفق البيانات أحادي الاتجاه.

2. Angular هو إطار عمل شائع يستخدم الربط ثنائي الاتجاه.

يتجنب:

عدم فهم هذه المفاهيم، وعدم القدرة على تفسير الفرق بينها.

ما هي إيجابيات وسلبيات الهندسة المعمارية المتجانسة والخدمات الصغيرة؟

تعني البنية المتجانسة أن تطبيقك مكتوب ككتلة واحدة متماسكة من التعليمات البرمجية التي تم تصميم مكوناتها خصيصًا تعاونواستخدام الموارد المشتركة.

يعني نهج الخدمات الصغيرة أن التطبيق يتكون من العديد من التطبيقات الصغيرة المستقلة التي يمكن تشغيلها على مواردها الخاصة وربما كميات كبيرةالآلات الفردية.

مزايا العمارة المتجانسة:الميزة الرئيسية للبنية المتجانسة هي أن معظم التطبيقات تميل إلى أن تكون متعددة المشاكل الشائعة، مثل التسجيل وتحديد المعدل والحاجة إلى وظائف الأمان - فمن الأسهل حلها في تطبيق واحد لكل مكون.

سلبيات التطبيق المتجانس:نظرًا لأن جميع المكونات مرتبطة ببعضها البعض بشكل وثيق، مع تطور التطبيق، يصبح فهمه أكثر صعوبة، وتظهر العديد من التبعيات والآثار الجانبية غير الواضحة.

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

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

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

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

غالبًا ما يتم نشر الخدمات الصغيرة بمفردها الأجهزة الظاهريةأو الحاويات، مما يؤدي إلى زيادة سريعة في عدد التعارضات على الموارد الافتراضية.

جدير بالذكر:

1. على الرغم من التكلفة الأولية، تستفيد الخدمات الصغيرة على المدى الطويل بسبب التوسع الأفضل

2. الاختلافات العملية بين الخدمات المصغرة والتطبيقات المتجانسة

يتجنب:

1. الجهل بالاختلافات المعمارية

2. الجهل بمساوئ الخدمات المصغرة

3. التقليل من فوائد توسيع نطاق الخدمات الصغيرة

ما هي البرمجة غير المتزامنة وما أهميتها في JS؟

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

البرمجة غير المتزامنة تعني أنه عند الحاجة إلى عملية حظر، يتم إرسال الطلب ويستمر الكود في العمل دون حظر حتى انتظار النتيجة. عندما تكون الاستجابة جاهزة، يتم تشغيل المقاطعة، مما يؤدي إلى تشغيل معالج الحدث واستمرار تدفق التحكم. إذا واحد موضوع البرنامجيمكنه التعامل مع العديد من العمليات المتوازية.

تعتبر واجهات المستخدم غير متزامنة بطبيعتها، حيث تقضي معظم وقتها في انتظار إدخال المستخدم لكسر الحلقة وتشغيل المعالج.

Node.js غير متزامن بشكل افتراضي، حيث يقضي الخادم وقته في حلقة في انتظار طلب الشبكة.

يعد هذا أمرًا مهمًا في JavaScript لأنه أمر طبيعي بالنسبة للواجهات وله تأثير إيجابي على أداء الخادم.

جدير بالذكر:

1. معنى الأقفال وتأثيرها على الأداء

2. فهم المعالجات وسبب أهميتها للواجهات

يتجنب:

1. سوء فهم مصطلحي التزامن وعدم التزامن

2. الفشل في تحديد عواقب الأداء