يتمثل دور نمط تصميم JavaScript في تحسين قابلية إعادة استخدام الكود وقابلية القراءة ، مما يجعل الكود أسهل في الحفاظ عليه والتوسع.
في JavaScript ، الوظيفة هي فئة من الكائنات ، مما يعني أنه يمكن تمريرها كمعلمة إلى وظائف أخرى ؛ بالإضافة إلى ذلك ، يمكن أن توفر الوظيفة أيضًا نطاقًا.
بناء الجملة لإنشاء وظيفة
تعبيرات الوظيفة المسماة
نسخة الكود كما يلي:
// الاسم وظيفة التعبير
var add = function add (a ، b) {
إرجاع A+B ؛
} ؛
تعبيرات الوظيفة
نسخة الكود كما يلي:
// المعروف أيضًا باسم الوظيفة المجهولة
var add = function (a ، b) {
إرجاع A+B ؛
} ؛
القيمة المخصصة للمتغير إضافة هي تعريف الوظيفة نفسه. وبهذه الطريقة ، تصبح إضافة وظيفة يمكن استدعاؤها في أي مكان.
إعلان الوظائف
نسخة الكود كما يلي:
وظيفة foo () {
// الكود هنا
} // لا حاجة إلى فاصلة منقوطة هنا
في الفوائد الفاصلة ، يجب أن تستخدم تعبيرات الوظائف دائمًا فاصلة فنية ، ولا يلزم نهاية المنقصات في إعلان الوظيفة.
تصريحات الوظيفة والتعبيرات
تعزيز الوظائف (الرفع)
سلوك إعلان الوظيفة لا يعادل تعبير الوظيفة المسماة. الفرق هو السلوك الرافعة. انظر المثال التالي:
نسخة الكود كما يلي:
<script type = "text/javaScript">
// الوظيفة العالمية
وظيفة foo () {Alert ("Global Foo!") ؛}
وظيفة الدالة () {Alert ('global bar') ؛}
وظيفة الرافعة () {
console.log (typeof foo) ؛ // function
console.log (typeof bar) ؛ // غير محدد
foo () ؛ // foo المحلية!
BAR () ؛ // typeerror: "غير محدد" ليس وظيفة
// يتم ترقية FOO و APPERILER المتغير
وظيفة foo () {
ALERT ('FOO LOCAL! ') ؛
}
// فقط يتم الترويج للشريط المتغير ، لا يتم الترويج لجزء تنفيذ الوظائف
var bar = function () {
تنبيه ('local bar!') ؛
} ؛
}
رفع()؛
</script>
بالنسبة لجميع المتغيرات ، أينما تم إعلانها في الجسم ، يتم ترقيتها داخليًا إلى أعلى الوظيفة. سبب التطبيق العام للوظائف هو أن الوظائف هي فقط كائنات مخصصة للمتغيرات.
كما يوحي الاسم ، يعني التحسين ذكر الأشياء التالية إلى الأعلى. في JS ، هو ترقية الأشياء المحددة في ما يلي (المتغيرات أو الوظائف) إلى التعريف السابق. كما يتضح من المثال أعلاه ، ينتقل FOO و BAR في الوظيفة داخل الوظيفة إلى الأعلى ، وبالتالي تغطي وظائف FOO و BAR العالمية. الفرق بين شريط الوظائف المحلية و FOO هو أنه يتم ترقية FOO إلى الأعلى ويمكن أن يعمل بشكل طبيعي ، في حين لم يتم تحسين تعريف BAR () ، يتم الترويج فقط إعلانه. لذلك ، عند تنفيذ BAR () ، تكون النتيجة غير محددة بدلاً من استخدامها كدالة.
وضع وظيفة الوقت الحقيقي
الوظائف هي أيضًا كائنات ، بحيث يمكن استخدامها كقيم إرجاع. تتمثل ميزة استخدام وظائف التنفيذ الذاتي في الإعلان مباشرة عن وظيفة مجهولة الاستخدام واستخدامها على الفور ، وذلك لتجنب تحديد وظيفة لا تستخدم مرة واحدة ، وهي خالية من مشكلة تسمية الصراعات. لا يوجد مفهوم مساحة الاسم في JS ، لذلك من السهل أن يكون هناك تعارضات في اسم الوظيفة. بمجرد إجراء الصراع التسمية ، يسود آخر مرة واحدة.
الوضع 1:
نسخة الكود كما يلي:
<script>
(وظيفة () {
var a = 1 ؛
وظيفة الإرجاع () {
تنبيه (2) ؛
} ؛
} () ()) ؛ // pop 2 ، يقوم الأقواس الأولى بتنفيذ نفسها ، ويقوم الأقواس الثانية بتنفيذ وظيفة مجهولة المصدر
</script>
النمط 2: الإشارة إلى متغيرات وظيفة التنفيذ الذاتي
نسخة الكود كما يلي:
<script type = "text/javaScript">
var result = (function () {
العودة 2 ؛
}) () ؛ // تم تنفيذ الوظيفة هنا
تنبيه (نتيجة) ؛ // النتائج تشير إلى قيمة الإرجاع 2 من الوظيفة التنفيذية الذاتي ؛ إذا ظهرت النتيجة () تنبثق ، سيحدث خطأ.
</script>
النمط الثالث: وظائف متداخلة
نسخة الكود كما يلي:
<script type = "text/javaScript">
var result = (function () {
وظيفة الإرجاع () {
العودة 2 ؛
} ؛
}) () ؛
التنبيه (النتيجة ()) ؛ // 2 الملوثات العضوية الثابتة عند التنبيه (النتيجة) ؛ الدالة () {return 2}
</script>
الوضع 4: وظيفة التنفيذ الذاتي تعين قيمة الإرجاع إلى متغير
نسخة الكود كما يلي:
var abc = (function () {
var a = 1 ؛
وظيفة الإرجاع () {
إرجاع ++ أ ؛
}
}) () ؛ // تُرجع وظيفة التنفيذ الذاتي الوظيفة بعد العودة إلى المتغير
ALERT (ABC ()) ؛ // إذا كان تنبيهًا (ABC) ، فسيظهر الكود بعد بيان الإرجاع ؛ إذا كانت ABC () ، فسيتم تنفيذ الوظيفة بعد الإرجاع
النمط 5: تنفذ الوظيفة نفسها داخليًا ومتكررًا
نسخة الكود كما يلي:
// هذه وظيفة تنفيذ ذاتية ، تنفذ الوظيفة نفسها داخليًا ومتكررًا
وظيفة abc () {abc () ؛ }
وضع رد الاتصال
وظيفة رد الاتصال: عندما تمرر دالة الكتابة () كوسيطة إلى دالة أخرى ، يجوز للاتصال () تنفيذ (أو استدعاء) الكتابة () في مرحلة ما. في هذه الحالة ، تسمى الكتابة () وظيفة رد الاتصال.
مستمع حدث غير متزامن
يحتوي وضع رد الاتصال على العديد من الاستخدامات ، على سبيل المثال ، عندما يتم إرفاق مستمع حدث بعنصر على الصفحة ، فإنه يوفر بالفعل مؤشرًا لوظيفة رد الاتصال التي سيتم استدعاؤها عند حدوث الحدث. يحب:
نسخة الكود كما يلي:
document.adDeventListener ("Click" ، console.log ، false) ؛
يوضح مثال الرمز أعلاه وحدة الاتصال Console.log () في وضع الفقاعة عند النقر على المستند.
JavaScript مناسب بشكل خاص للبرمجة التي تعتمد على الحدث ، لأن وضع رد الاتصال يدعم البرامج لتشغيل غير متزامن.
نفذ الوقت
مثال آخر على استخدام وضع رد الاتصال هو عند استخدام طريقة المهلة التي توفرها كائن نافذة المتصفح: setTimeOut () و setInterval () ، مثل:
نسخة الكود كما يلي:
<script type = "text/javaScript">
var call = function () {
console.log ("سيُطلب من 100 مللي ثانية ...") ؛
} ؛
setTimeout (call ، 100) ؛
</script>
وضع رد الاتصال في المكتبة
عند تصميم مكتبة JS ، ستكون وظيفة رد الاتصال مفيدًا. يجب أن تستخدم رمز المكتبة رمزًا قابل لإعادة الاستخدام قدر الإمكان ، ويمكن أن يساعد رد الاتصال في تحقيق هذا التعميم. عندما نقوم بتصميم مكتبة JS ضخمة ، فإن الحقيقة هي أن المستخدمين لا يحتاجون إلى معظمها ، يمكننا التركيز على الوظائف الأساسية وتوفير وظائف رد الاتصال في "Form" ، مما سيجعل من السهل علينا بناء وتخصيص طرق المكتبة
الكاري
الكاري هي تقنية تحول وظيفة إلى وظيفة جديدة مبسطة (إلى عدد أقل من المعلمات) عن طريق ملء معلمات متعددة إلى جسم دالة. ― 【يتقن في JavaScript】
ببساطة ، الكاري هو عملية تحويل ، أي عملية تحويل وظائفنا. كما هو موضح في المثال التالي:
نسخة الكود كما يلي:
<script type = "text/javaScript">
// وظيفة إضافة () القائمة على الكاري
وظيفة إضافة (x ، y) {
var oldx = x ، oldy = y ؛
if (typeof oldy == "undefined") {
وظيفة الإرجاع (Newy) {
إرجاع Oldx + Newy ؛
} ؛
}
// تطبيق كامل
إرجاع x+y ؛
}
//امتحان
typeof add (5) ؛ // الإخراج "وظيفة"
إضافة (3) (4) ؛ // 7
// إنشاء وتخزين وظيفة جديدة
var add2000 = add (2000) ؛
add2000 (10) ؛ // الإخراج 2010
</script>
عند استدعاء ADD () لأول مرة ، فإنه يخلق إغلاقًا للوظيفة الداخلية التي تم إرجاعها. يخزن هذا الإغلاق قيم X و Y الأصلية في المتغيرات الخاصة OldX و Oldy.
الآن سنكون قادرين على استخدام طرق شائعة الكاري الوظيفية التعسفية ، مثل:
نسخة الكود كما يلي:
<script type = "text/javaScript">
// وظائف طبيعية
وظيفة إضافة (x ، y) {
إرجاع x + y ؛
}
// curry وظيفة للحصول على وظيفة جديدة
var newadd = test (add ، 5) ؛
Newadd (4) ؛ // 9
// خيار آخر ، اتصل بالوظيفة الجديدة مباشرة
اختبار (إضافة ، 6) (7) ؛ // الإخراج 13
</script>
متى تستخدم الكاري
عندما يتم العثور على أنه يتم استدعاء الوظيفة نفسها ومعظم المعلمات التي تم تمريرها هي نفسها ، ثم قد تكون الوظيفة مرشحًا جيدًا للكاري