بالنسبة لي الذي هو مبتدئ نقي في الواجهة الأمامية ، لا يزال JavaScript واضحًا بعض الشيء حيال ذلك. إذا كنت ترغب في البدء مع Angular JS مباشرة ، فهناك الكثير من المقاومة. لكنني أعتقد أنه طالما أنك تعمل بجد ، فإن التصميم المضاد للإنسان لن يمثل مشكلة كبيرة.
حسنًا ، لا تقل الكثير من الهراء. لمعرفة ما هو js الزاوي ، بدأت مع النطاق. إذن ما هو النطاق؟ استعارة مقطع من الوثيقة الرسمية:
نسخة الكود كما يلي:
"النطاق هو كائن يشير إلى نموذج التطبيق. إنه سياق تنفيذ للتعبيرات. يتم ترتيب النطاقات في الهيكل الهرمي الذي يحاكي بنية DOM للتطبيق. يمكن للنطق مشاهدة التعبيرات ونشر الأحداث."
بعد قراءتها ، قارنتها بلغات البرمجة الأخرى وشعرت أن النطاق يشبه نطاق نموذج البيانات ، مما يوفر سياقًا لتنفيذ التعبيرات. دعونا نفهم ذلك بهذه الطريقة الآن.
ميزات النطاق
بعد ذلك ، دعونا نرى ما هو نطاق الميزات؟
يوفر Scope طريقة ساعة $ لمراقبة التغييرات في النموذج.
يوفر Scope طريقة تطبيق $ لنشر التغييرات في النموذج.
يمكن مورث نطاق وعزل مكونات التطبيق المختلفة وأذونات الوصول إلى السمات.
يوفر النطاق سياق حساب التعبيرات.
بالنسبة لهذه الميزات الأربع ، لأنني تعلمت Actionscript و C ++ و Java من قبل ، ليس من الصعب فهم النقطتين الأولى والثالثة والرابعة ، لكن النقطة الثانية تشعر بالارتباك بعض الشيء. استنادًا إلى مبدأ كسر خزفي وطلب النهاية ، ما زلت أجد بعض الأشياء من خلال Google. للمحاربين القدامى من ذوي الخبرة ، يرجى ربت الطوب!
أصل جافا سكريبت
بادئ ذي بدء ، للوهلة الأولى ، يبدو أن scope.apply () طريقة عادية لإجراء تحديث الروابط. لكن فكر أكثر قليلاً ، لماذا نحتاجه؟ متى تستخدمه عادة؟ لفهم هاتين المسألتين ، علينا أن نبدأ مع JavaScript. في رمز JavaScript ، يتم تنفيذها في ترتيب معين. عندما يكون دور مقتطف رمز للتنفيذ ، فإن المستعرض سيقوم فقط بتنفيذ المقتطف الحالي ولن يفعل أي شيء آخر. لذلك في بعض الأحيان ، ستتعثر بعض صفحات الويب غير المصنعة جيدًا عند النقر على شيء ما. يعمل JavaScript أحد الأسباب التي تجعل هذه الظاهرة تسبب! هنا لدينا قطعة من الكود لتجربة ذلك:
نسخة الكود كما يلي:
var button = document.getElementById ('clickme') ؛
وظيفة buttonclicked () {
تنبيه (تم النقر فوق الزر ") ؛
}
button.addeventListener ("انقر" ، buttoncked) ؛
وظيفة timercomplete () {
تنبيه ('timer complete') ؛
}
setTimeout (TimerComplete ، 5000) ؛
عند تحميل رمز JavaScript ، ابحث أولاً عن زر مع معرف يسمى "ClickMe" ، ثم أضف مستمعًا ، ثم قم بتعيين المهلة. انتظر 5 ثوان وسيظهر مربع الحوار. إذا قمت بتحديث الصفحة وانقر فوق الزر ClickMe على الفور ، فسيظهر مربع حوار. إذا لم تنقر فوق "موافق" ، فلن تتاح لدالة TimerComplete فرصة للتنفيذ.
كيفية تحديث الروابط
حسنًا ، بعد الحديث عن شيء يبدو غير ذي صلة ، دعنا نعود إلى الموضوع. كيف يعرف Angular JS متى تتغير البيانات والصفحات يجب تحديثها؟ يجب أن يعرف الكود متى تم تعديل البيانات ، ولكن الآن لا توجد طريقة لإبلاغ البيانات مباشرة على كائن تغير (على الرغم من أن ECMASCRIPT 5 تحاول حل هذه المشكلة ، إلا أنها لا تزال في المرحلة التجريبية). حاليا ، هناك حلان للاستراتيجيات الأكثر سائدة. أحدهما هو استخدام كائنات خاصة بحيث لا يمكن تعيين جميع البيانات إلا عن طريق استدعاء طريقة الكائن ، بدلاً من تحديدها مباشرة من خلال الخاصية. وبهذه الطريقة ، يمكن تسجيل جميع التعديلات وستعرف متى يجب تحديث الصفحة. عيب القيام بذلك هو أننا يجب أن نرث كائنًا خاصًا. بالنسبة إلى المهمة ، لا يمكن القيام به إلا بواسطة Object.set ('Key' ، 'Value') بدلاً من Object.Key = value. في الأطر ، هذا ما يفعله emberjs و changoutjs (على الرغم من أنني لم أتطرق إليه من قبل). طريقة أخرى هي الطريقة التي تم تبنيها بواسطة Angular JS ، والتي تتحقق مما إذا كان هناك أي تغيير للبيانات بعد تنفيذ كل تسلسل تنفيذ رمز JavaScript. لا يبدو أن هذا فعال وحتى يؤثر بشكل خطير على الأداء. ومع ذلك ، يستخدم Angular JS بعض الوسائل الذكية لحل هذه المشكلة (لم تتم دراستها بعد ، ولم يكن واضحًا بعد). ميزة القيام بذلك هي أنه يمكننا استخدام أي كائن حسب الرغبة ، ولا يوجد حد لطريقة المهمة ، ويمكننا أيضًا أن ندرك تغييرات البيانات.
بالنسبة لهذا الحل الذي اعتمدته Angular JS ، فإننا نهتم عندما تتغير البيانات ، وهذا هو المكان الذي يكون فيه Scope.Apply () مفيدًا. التحقق مما إذا كانت البيانات المربوطة قد تغيرت ، يتم ذلك بالفعل بواسطة Scope.digest () ، لكننا لم نطلق على هذه الطريقة تقريبًا مباشرة ، ولكن بدلاً من ذلك أطلقوا على طريقة scope.apply () لأنه في طريقة scope.apply () ، فإنه سيطلق على طريقة scope.digest (). تأخذ طريقة scope.apply () وظيفة أو تعبير ، ثم تنفيذها ، وأخيراً تستدعي طريقة scope.digest () لتحديث الارتباطات أو المراقبين.
متى تستخدم $ application ()
نفس السؤال هو ، لذلك متى نحتاج إلى استدعاء طريقة التطبيق ()؟ هناك عدد قليل جدا من الحالات. في الواقع ، يتم لف جميع التعليمات البرمجية الخاصة بنا تقريبًا في النطاق. إذا احتجنا إلى تشغيل الكود في تسلسل تنفيذ جديد ، فنحن بحاجة حقًا إلى استخدامه ، وإذا وفقط إذا لم يتم إنشاء تسلسل التنفيذ الجديد بواسطة طريقة مكتبة JS Angular ، فنحن بحاجة إلى لف الرمز في Scope.Apply (). إليك مثال لشرح:
نسخة الكود كما يلي:
<div ng: app ng-controller = "ctrl"> {{message}} </div>
نسخة الكود كما يلي:
FunctionCtrl ($ scope) {
$ scope.message = "Waiting 2000ms for Update" ؛
setTimeout (function () {
$ scope.message = "timeout tall!" ؛
// AngularJS غير مدركين للتحديث إلى نطاق $
} ، 2000) ؛
}
بعد تنفيذ الرمز أعلاه ، سيتم عرض الصفحة: انتظار 2000 مللي ثانية للتحديث. من الواضح أنه لم يتم اكتشاف تحديث البيانات بواسطة Angular JS.
بعد ذلك ، نقوم بتعديل رمز JavaScript قليلاً ولفه باستخدام Scope.Apply ().
نسخة الكود كما يلي:
FunctionCtrl ($ scope) {
$ scope.message = "Waiting 2000ms for Update" ؛
setTimeout (function () {
$ scope. $ application (function () {
$ scope.message = "timeout tall!" ؛
}) ؛
} ، 2000) ؛
}
الفرق هذه المرة هو أن الصفحة ستعرض أولاً: انتظار 2000 مللي ثانية للتحديث. بعد الانتظار لمدة ثانيتين ، سيتم تغيير المحتوى إلى: مهلة تسمى! . من الواضح أن تحديث البيانات تم اكتشافه بواسطة Angular JS.
ملاحظة: يجب ألا نفعل ذلك ، ولكن نستخدم طريقة المهلة التي توفرها Angular JS ، بحيث يتم لفها تلقائيًا باستخدام طريقة التطبيق.
العلم سيف ذو حدين
أخيرًا ، دعنا نلقي نظرة على أساليب Scope.Apply () و Scope.Apply (وظيفة) مرة أخرى! على الرغم من أن Angular JS فعل الكثير بالنسبة لنا ، فقد فقدنا أيضًا بعض الفرص. يمكنك أن ترى من الرمز الكاذب التالي:
نسخة الكود كما يلي:
وظيفة $ تطبيق (expr) {
يحاول {
إرجاع $ eval (expr) ؛
} catch (e) {
$ استثناء Handler (e) ؛
} أخيراً {
$ root. $ digest () ؛
}
}
سوف يلتقط كل الاستثناءات ولن يرميها مرة أخرى ، وسوف يتصل في النهاية بطريقة $ Digest ().
دعونا نلخص
يمكن أن تنفذ طريقة $ application () تعبيرات js الزاوية خارج الإطار الزاوي ، مثل: أحداث DOM أو SetTimeout أو XHR أو مكتبات الطرف الثالث الأخرى. هذه مجرد البداية ، لا يزال الماء عميقًا ، مرحبًا بك في الغوص العميق معًا!