1. نظرة عامة
AngularJS لديه ميزة كلاسيكية هي الحقن التبعية. يجب أن يعرف الطلاب الذين يعرفون الربيع جيدًا ماهية حقن التبعية ، لكنه لا يزال جديدًا نسبيًا للواجهة الأمامية.
إن حقن التبعية ، باختصار ، هو إلغاء رمز صلب لتحقيق الغرض من التفكك.
أدناه ، دعونا نلقي نظرة على طرق التنفيذ الشائعة الاستخدام في AngularJS.
الطريقة 1: إعلان الحقن الاستنتاجي ، على افتراض أن اسم المعلمة هو اسم التبعية. لذلك ، سوف يطلق داخليًا على طريقة TOSTRING () لكائن الوظيفة ، وتحليل واستخراج قائمة معلمات الوظيفة ، ثم حقن هذه المعلمات في مثيل الكائن من خلال حاقن $.
على النحو التالي:
// الطريقة 1: إعلان الحقن الاستنتاجي ، على افتراض أن اسم المعلمة هو اسم التبعية. // لذلك ، سوف يطلق على طريقة TOSTRING () كائن الوظيفة داخليًا ، وتحليل واستخراج قائمة معلمات الوظيفة ، ثم حقن هذه المعلمات في حاقن مثيل الكائن.
الطريقة 2: حقن إعلانات داخل الخط ، مما يسمح لنا بتمرير مجموعة من المعلمات مباشرة عند تحديد الوظيفة. تحتوي المصفوفة على سلاسل ووظائف ، حيث تمثل السلاسل أسماء التبعية والوظائف تمثل كائنات وظائف موضوعية.
على النحو التالي:
// الطريقة 2: حقن الإعلانات في الخط ، مما يسمح لنا بتمرير مجموعة من المعلمات مباشرة عند تحديد الوظيفة. // Array يحتوي على سلاسل ووظائف ، حيث تمثل السلاسل أسماء التبعية والوظائف تمثل كائنات وظائف موضوعية. module.controller ('name' ، ['$ http' ، '$ timeout' ، function ($ http ، $ timeout) {// todo}]) ؛بعد قراءة الكود أعلاه ، كان لدي سؤال في ذهني ، كيف تم تنفيذها؟
هاها ، دعنا نحاكي طرق حقن التبعية هذه معًا لفهمها.
2. بناء الهيكل العظمي الأساسي
تتمثل عملية الاستحواذ في حقن التبعية في الحصول على الطريقة المقابلة من خلال رسم خرائط الحقل.
لذلك ، لتنفيذ حقن التبعية الأساسية ، نحتاج إلى مساحة تخزين (التبعيات) لتخزين المفتاح/القيمة المطلوبة ؛ طريقة تسجيل (سجل) لإضافة أزواج قيمة مفتاحية جديدة إلى مساحة التخزين ؛ والآخر هو طريقة التنفيذ الأساسية (حل) ، والتي تحصل على نتائج التعيين المقابلة في مساحة التخزين من خلال المعلمات ذات الصلة.
لذلك ، الهيكل العظمي الأساسي هو كما يلي:
var justor = {reperenceies: {} ، سجل: الدالة (المفتاح ، القيمة) {this.dependencies [key] = value ؛ إرجاع هذا ؛ } ، حل: function () {}} ؛3. تحسين الطريقة الأساسية للحل
من الهيكل العظمي الأساسي الذي قمنا بإنشائه ، يمكننا أن نجد أن المفتاح هو في الواقع طريقة حل ، والتي يتم استخدامها لتنفيذ شكل محدد من متطلبات حقن التبعية.
أولاً ، سنقوم بتنفيذ حقن التبعية في النموذج التالي: إعلان الحقن المستنتج.
على النحو التالي:
enjector.Resolve (وظيفة (قرد ، dorie) {monkey () ؛ dorie () ؛}) ؛لتحقيق التأثير أعلاه ، يمكننا استخدام طريقة ToString () للوظيفة ، حيث يمكننا تحويل الوظيفة إلى سلسلة ، وذلك للحصول على اسم المعلمة ، أي القيمة الرئيسية ، من خلال تعبير منتظم. ثم ، من خلال القيمة الرئيسية ، ابحث عن قيمة القيمة في تبعيات مساحة التخزين. إذا لم يتم العثور على قيمة مقابلة ، فسيتم الإبلاغ عن خطأ.
التنفيذ على النحو التالي:
var justor = {reperenceies: {} ، سجل: الدالة (المفتاح ، القيمة) {this.dependencies [key] = value ؛ إرجاع هذا ؛ } ، حل: function () {var func ، deps ، args = [] ، scope = null ؛ func = الحجج [0] ؛ // احصل على اسم المعلمة من DEPS DEPS = FUNC.TOSTRING (). match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .replace (//g ، '') .split ('،') ؛ النطاق = الوسائط [1] || {} ؛ لـ (var i = 0 ، len = deps.length ؛ i <len ، d = deps [i] ؛ i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]) ؛ } آخر {رمي خطأ جديد ('can/' t find ' + d) ؛ }} func.apply (نطاق ، args) ؛ }} ؛رمز الاختبار كما يلي:
<! doctype html> <head> <meta charset = "utf-8"/> </head> <body> <script> var enjector = {تبعيات: {} ، سجل: الدالة (المفتاح ، القيمة) {this.dependencies [key] = value ؛ إرجاع هذا ؛ } ، حل: function () {var func ، deps ، args = [] ، scope = null ؛ func = الحجج [0] ؛ // احصل على اسم المعلمة من DEPS DEPS = FUNC.TOSTRING (). match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .replace (//g ، '') .split ('،') ؛ النطاق = الوسائط [1] || {} ؛ لـ (var i = 0 ، len = deps.length ؛ i <len ، d = deps [i] ؛ i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]) ؛ } آخر {رمي خطأ جديد ('can/' t find ' + d) ؛ }} func.apply (نطاق ، args) ؛ }} ؛ // test code justor.register ('monkey' ، function () {console.log ('monkey') ؛}). التسجيل ('dorie' ، function () {console.log ('dorie') ؛}) ؛ enjector.Resolve (وظيفة (قرد ، dorie) {monkey () ؛ dorie () ؛ console.log ('-.-') ؛}) ؛ </script> </body> </html>أحد العيوب لإعلان الحقن المستنتج هو أنه لا يمكن ضغطه باستخدام أدوات الضغط ، لأننا نعتمد على معلمات الوظيفة. عندما نضغط ، سنقوم بتغيير اسم المعلمة وتغيير اسم المعلمة ، والذي سيفشل بالتأكيد.
ثم أدناه ، دعنا نلقي نظرة على بيان الحقن داخل الخط ، والذي يمكن أن يعوض عن هذا العيب.
تنفيذ إعلانات الحقن داخل الخط على النحو التالي:
enjector.Resolve (['monkey' ، 'dorie' ، function (m ، d) {m () ؛ d () ؛}]) ؛استخدم typeof لتحديد نوع الوسائط [0] للتمييز والحصول على معلمات ووظائف التبعية.
التنفيذ على النحو التالي:
var justor = {reperenceies: {} ، سجل: الدالة (المفتاح ، القيمة) {this.dependencies [key] = value ؛ إرجاع هذا ؛ } ، حل: function () {var firstparams ، func ، deps = [] ، scope = null ، args = [] ؛ firstparams = وسيطات [0] ؛ النطاق = الوسائط [1] || {} ؛ // احصل على معلمات التبعية لـ (var i = 0 ، len = firstparams.length ؛ i <len ؛ i ++) {var val = firstparams [i] ، type = typeof val ؛ if (type === 'string') {deps.push (val) ؛ } آخر إذا (type === 'function') {func = val ؛ }} // عن طريق الاعتماد على المعلمات ، ابحث عن القيمة المرتبطة بـ (i = 0 ، len = deps.length ؛ i <len ، d = deps [i] ؛ i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]) ؛ } آخر {رمي خطأ جديد ('can/' t find ' + d) ؛ }} funC.Apply (Scope || {} ، args) ؛ }} ؛رمز الاختبار كما يلي:
<! doctype html> <head> <meta charset = "utf-8"/> </head> <body> <script> var enjector = {تبعيات: {} ، سجل: الدالة (المفتاح ، القيمة) {this.dependencies [key] = value ؛ إرجاع هذا ؛ } ، حل: function () {var firstparams ، func ، deps = [] ، scope = null ، args = [] ؛ firstparams = وسيطات [0] ؛ النطاق = الوسائط [1] || {} ؛ // احصل على معلمات التبعية لـ (var i = 0 ، len = firstparams.length ؛ i <len ؛ i ++) {var val = firstparams [i] ، type = typeof val ؛ if (type === 'string') {deps.push (val) ؛ } آخر إذا (type === 'function') {func = val ؛ }} // عن طريق الاعتماد على المعلمات ، ابحث عن القيمة المرتبطة بـ (i = 0 ، len = deps.length ؛ i <len ، d = deps [i] ؛ i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]) ؛ } آخر {رمي خطأ جديد ('can/' t find ' + d) ؛ }} funC.Apply (Scope || {} ، args) ؛ }} ؛ // test code justor.register ('monkey' ، function () {console.log ('monkey') ؛}). التسجيل ('dorie' ، function () {console.log ('dorie') ؛}) ؛ enjector.Resolve (['monkey' ، 'dorie' ، function (m ، d) {m () ؛ d () ؛ console.log ('-.-') ؛}]) ؛ </script> </body> </html>نظرًا لأن الإعلان في السطر يستخدم كمعلمة تبعية من خلال شكل سلسلة ، فإن الضغط والضغط لا يخافون منه.
أخيرًا ، نقوم بدمج الطريقتين المنفذتين أعلاه ونفعل ما نريد.
ثم ، دعنا ندمجها ، على النحو التالي:
var justor = {reperenceies: {} ، سجل: الدالة (المفتاح ، القيمة) {this.dependencies [key] = value ؛ إرجاع هذا ؛ } ، حل: function () {var firstparams ، func ، deps = [] ، scope = null ، args = [] ؛ firstparams = وسيطات [0] ؛ النطاق = الوسائط [1] || {} ؛ . deps = func.toString (). match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .replace (//g ، '') .Split ('،') ؛ } آخر {for (var i = 0 ، len = firstparams.length ؛ i <len ؛ i ++) {var val = firstparams [i] ، type = typeof val ؛ if (type === 'string') {deps.push (val) ؛ } آخر إذا (type === 'function') {func = val ؛ }}} // عن طريق الاعتماد على المعلمات ، ابحث عن القيمة المرتبطة بـ (i = 0 ، len = deps.length ؛ i <len ، d = deps [i] ؛ i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]) ؛ } آخر {رمي خطأ جديد ('can/' t find ' + d) ؛ }} funC.Apply (Scope || {} ، args) ؛ }} ؛4. أبرز الأحداث - حقن تبعية التبعية
لم يتم العثور على حقن التبعية في AngularJs. إذا كنت قد استخدمت متطلبات ، فسيكون النموذج التالي على دراية:
طلب (['monkey' ، 'dorie'] ، الدالة (m ، d) {// todo}) ؛من خلال ما سبق ، قمنا بمحاكاة تنفيذ حقن التبعية AngularJS خطوة بخطوة. أعتقد أنه عندما ترى هذا ، سوف تدرك فجأة أنك ستغير الحساء أو الدواء.
تطبيق المحاكاة كما يلي:
var justor = {reperenceies: {} ، سجل: الدالة (المفتاح ، القيمة) {this.dependencies [key] = value ؛ إرجاع هذا ؛ } ، حل: الدالة (DEPS ، func ، النطاق) {var args = [] ؛ لـ (var i = 0 ، len = deps.length ؛ i <len ، d = deps [i] ؛ i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]) ؛ } آخر {رمي خطأ جديد ('can/' t حل ' + d) ؛ }} funC.Apply (Scope || {} ، args) ؛ }} ؛رمز الاختبار كما يلي:
<! doctype html> <head> <meta charset = "utf-8"/> </head> <body> <script> var enjector = {تبعيات: {} ، سجل: الدالة (المفتاح ، القيمة) {this.dependencies [key] = value ؛ إرجاع هذا ؛ } ، حل: الدالة (DEPS ، func ، النطاق) {var args = [] ؛ لـ (var i = 0 ، len = deps.length ؛ i <len ، d = deps [i] ؛ i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]) ؛ } آخر {رمي خطأ جديد ('can/' t حل ' + d) ؛ }} funC.Apply (Scope || {} ، args) ؛ }}} ؛ // test code justor.register ('monkey' ، function () {console.log ('monkey') ؛}). التسجيل ('dorie' ، function () {console.log ('dorie') ؛}) ؛ enjector.Resolve (['monkey' ، 'dorie'] ، function (m ، d) {m () ؛ d () ؛ console.log ('-.-') ؛}) ؛ </script> </body> </html>خامسا المرجع
1. AngularJS تطوير تطبيق التفكير 3: حقن التبعية
2. حقن التبعية في جافا سكريبت
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.