1. Ikhtisar
AngularJS memiliki fitur klasik yaitu injeksi ketergantungan. Siswa yang akrab dengan musim semi harus tahu betul apa suntikan ketergantungan, tetapi masih relatif baru untuk front-end.
Singkatnya, injeksi ketergantungan adalah untuk membuka kode kode keras untuk mencapai tujuan unpoupling.
Di bawah ini, mari kita lihat metode implementasi yang umum digunakan di AngularJS.
Metode 1: Deklarasi Injeksi Inferensial, dengan asumsi bahwa nama parameter adalah nama ketergantungan. Oleh karena itu, secara internal akan memanggil metode ToString () dari objek fungsi, menganalisis dan mengekstrak daftar parameter fungsi, dan kemudian menyuntikkan parameter ini ke dalam instance objek melalui $ injektor.
sebagai berikut:
// Metode 1: Deklarasi Injeksi Inferensial, dengan asumsi bahwa nama parameter adalah nama ketergantungan. // Oleh karena itu, ia akan memanggil metode ToString () dari objek fungsi secara internal, menganalisis dan mengekstrak daftar parameter fungsi, dan kemudian menyuntikkan parameter ini ke injector.invoke instance objek (fungsi ($ http, $ timeout) {// toco});Metode 2: Suntikan deklarasi dalam baris, memungkinkan kami untuk secara langsung melewati array parameter saat mendefinisikan fungsi. Array berisi string dan fungsi, di mana string mewakili nama ketergantungan dan fungsi mewakili objek fungsi objektif.
sebagai berikut:
// Metode 2: Suntikkan deklarasi ke dalam garis, memungkinkan kita untuk secara langsung melewati array parameter saat mendefinisikan fungsi. // Array berisi string dan fungsi, di mana string mewakili nama dan fungsi ketergantungan mewakili objek fungsi objektif. module.controller ('name', ['$ http', '$ timeout', function ($ http, $ timeout) {// TODO}]);Setelah membaca kode di atas, saya memiliki pertanyaan dalam pikiran saya, bagaimana ini diterapkan?
Haha, mari kita simulasikan metode injeksi ketergantungan ini bersama -sama untuk memahaminya.
2. Bangun kerangka dasar
Proses akuisisi injeksi ketergantungan adalah untuk mendapatkan metode yang sesuai melalui pemetaan lapangan.
Oleh karena itu, untuk mengimplementasikan injeksi ketergantungan dasar, kami membutuhkan ruang penyimpanan (dependensi) untuk menyimpan kunci/nilai yang diperlukan; metode pendaftaran (daftar) untuk menambahkan pasangan nilai kunci baru ke ruang penyimpanan; Dan yang lain adalah metode implementasi inti (Resolve), yang memperoleh hasil pemetaan yang sesuai di ruang penyimpanan melalui parameter yang relevan.
Jadi, kerangka dasar adalah sebagai berikut:
var injector = {dependencies: {}, register: function (key, value) {this.dependencies [key] = value; kembalikan ini; }, resolve: function () {}};3. Tingkatkan metode inti untuk diselesaikan
Dari kerangka dasar yang telah kami bangun, kami dapat menemukan bahwa kunci sebenarnya adalah metode Resolve, yang digunakan untuk mengimplementasikan bentuk spesifik persyaratan injeksi ketergantungan kami.
Pertama, kami akan menerapkan injeksi ketergantungan dalam bentuk berikut: Deklarasi Injeksi yang Disimpulkan.
sebagai berikut:
injector.resolve (fungsi (monyet, dorie) {monkey (); dorie ();});Untuk mencapai efek di atas, kita dapat menggunakan metode fungsi tostring (), di mana kita dapat mengubah fungsi menjadi string, sehingga dapat memperoleh nama parameter, yaitu, nilai kunci, melalui ekspresi reguler. Kemudian, melalui nilai kunci, temukan nilai nilai dalam dependensi ruang penyimpanan. Jika tidak ada nilai yang sesuai ditemukan, kesalahan akan dilaporkan.
Implementasi adalah sebagai berikut:
var injector = {dependencies: {}, register: function (key, value) {this.dependencies [key] = value; kembalikan ini; }, resolve: function () {var func, deps, args = [], scope = null; func = argumen [0]; // Dapatkan nama parameter dari fungsi DEPS = func.toString (). Match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .replace (//g, '') .split (','); scope = argumen [1] || {}; untuk (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]); } else {throw new error ('can/t find' + d); }} func.Apply (SCOPE, ARGS); }};Kode tes adalah sebagai berikut:
<! DOCTYPE HTML> <HEAD> <META charset = "UTF-8"/> </head> <body> <script> var injector = {dependensi: {}, register: function (tombol, value) {this.dependencies [key] = value; kembalikan ini; }, resolve: function () {var func, deps, args = [], scope = null; func = argumen [0]; // Dapatkan nama parameter dari fungsi DEPS = func.toString (). Match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .replace (//g, '') .split (','); scope = argumen [1] || {}; untuk (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]); } else {throw new error ('can/t find' + d); }} func.Apply (SCOPE, ARGS); }}; // uji kode injector.register ('monyet', function () {console.log ('monyet');}). Register ('dorie', function () {console.log ('dorie');}); injector.resolve (function (monyet, dorie) {monkey (); dorie (); console.log ('-.-');}); </script> </body> </html>Salah satu kelemahan dari deklarasi injeksi yang disimpulkan adalah bahwa ia tidak dapat dikompresi menggunakan alat kompresi, karena kami mengandalkan parameter fungsi. Saat kami mengompres, kami akan mengubah nama parameter dan mengubah nama parameter, yang pasti akan gagal.
Kemudian di bawah ini, mari kita lihat pernyataan injeksi in-line, yang dapat menebus kekurangan ini.
Menerapkan deklarasi injeksi in-line sebagai berikut:
injector.resolve (['monyet', 'dorie', function (m, d) {m (); d ();}]);Gunakan TypeOf untuk menentukan jenis argumen [0] untuk membedakan dan mendapatkan parameter dan fungsi ketergantungan.
Implementasi adalah sebagai berikut:
var injector = {dependencies: {}, register: function (key, value) {this.dependencies [key] = value; kembalikan ini; }, resolve: function () {var firstparams, func, deps = [], scope = null, args = []; firstparams = argumen [0]; scope = argumen [1] || {}; // Dapatkan parameter ketergantungan untuk (var i = 0, len = firstparams.length; i <len; i ++) {var val = firstparams [i], type = typeof val; if (type === 'string') {deps.push (val); } else if (type === 'function') {func = val; }} // Dengan mengandalkan parameter, temukan nilai terkait untuk (i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]); } else {throw new error ('can/t find' + d); }} func.Apply (scope || {}, args); }};Kode tes adalah sebagai berikut:
<! DOCTYPE HTML> <HEAD> <META charset = "UTF-8"/> </head> <body> <script> var injector = {dependensi: {}, register: function (tombol, value) {this.dependencies [key] = value; kembalikan ini; }, resolve: function () {var firstparams, func, deps = [], scope = null, args = []; firstparams = argumen [0]; scope = argumen [1] || {}; // Dapatkan parameter ketergantungan untuk (var i = 0, len = firstparams.length; i <len; i ++) {var val = firstparams [i], type = typeof val; if (type === 'string') {deps.push (val); } else if (type === 'function') {func = val; }} // Dengan mengandalkan parameter, temukan nilai terkait untuk (i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]); } else {throw new error ('can/t find' + d); }} func.Apply (scope || {}, args); }}; // uji kode injector.register ('monyet', function () {console.log ('monyet');}). Register ('dorie', function () {console.log ('dorie');}); injector.resolve (['monyet', 'dorie', function (m, d) {m (); d (); console.log ('-.-');}]); </script> </body> </html>Karena deklarasi dalam baris digunakan sebagai parameter ketergantungan melalui bentuk string, sehingga dan kompresi tidak takut.
Akhirnya, kami mengintegrasikan dua metode yang diterapkan di atas dan melakukan apa pun yang kami inginkan.
Lalu, mari kita gabungkan, sebagai berikut:
var injector = {dependencies: {}, register: function (key, value) {this.dependencies [key] = value; kembalikan ini; }, resolve: function () {var firstparams, func, deps = [], scope = null, args = []; firstparams = argumen [0]; scope = argumen [1] || {}; // menilai bentuk injeksi IF (typeOf firstParams === 'function') {func = firstparams; DEPS = func.toString (). Match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .replace (//g, '') .split (','); } else {for (var i = 0, len = firstparams.length; i <len; i ++) {var val = firstparams [i], type = typeof val; if (type === 'string') {deps.push (val); } else if (type === 'function') {func = val; }}} // Dengan mengandalkan parameter, temukan nilai terkait untuk (i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]); } else {throw new error ('can/t find' + d); }} func.Apply (scope || {}, args); }};4. Sorotan - Injeksi Ketergantungan Persyaratan
Injeksi ketergantungan tidak ditemukan di AngularJS. Jika Anda telah menggunakan kebutuhan, maka formulir berikut akan terbiasa dengan:
membutuhkan (['monyet', 'dorie'], function (m, d) {// todo});Melalui hal di atas, kami mensimulasikan implementasi injeksi ketergantungan AngularJS langkah demi langkah. Saya percaya bahwa ketika Anda melihat ini, Anda tiba -tiba akan menyadari bahwa Anda akan mengubah sup atau obat.
Implementasi simulasi adalah sebagai berikut:
var injector = {dependencies: {}, register: function (key, value) {this.dependencies [key] = value; kembalikan ini; }, resolve: function (deps, func, scope) {var args = []; untuk (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]); } else {throw new error ('can/' t resolve ' + d); }} func.Apply (scope || {}, args); }};Kode tes adalah sebagai berikut:
<! DOCTYPE HTML> <HEAD> <META charset = "UTF-8"/> </head> <body> <script> var injector = {dependensi: {}, register: function (tombol, value) {this.dependencies [key] = value; kembalikan ini; }, resolve: function (deps, func, scope) {var args = []; untuk (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependencies [d]); } else {throw new error ('can/' t resolve ' + d); }} func.Apply (scope || {}, args); }}}; // uji kode injector.register ('monyet', function () {console.log ('monyet');}). Register ('dorie', function () {console.log ('dorie');}); injector.resolve (['monyet', 'dorie'], function (m, d) {m (); d (); console.log ('-.-');}); </script> </body> </html>V. Referensi
1. Pemikiran Pengembangan Aplikasi AngularJS 3: Injeksi Ketergantungan
2. Injeksi ketergantungan di JavaScript
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.