1. ภาพรวม
AngularJS มีคุณสมบัติคลาสสิกที่เป็นการฉีดพึ่งพา นักเรียนที่คุ้นเคยกับฤดูใบไม้ผลิควรรู้ดีว่าการฉีดพึ่งพาอาศัยกันคืออะไร แต่ก็ยังค่อนข้างแปลกสำหรับส่วนหน้า
ในระยะสั้น การฉีดพึ่งพา คือการปลดรหัสยากเพื่อให้บรรลุวัตถุประสงค์ของการแยกตัวออกจากกัน
ด้านล่างเรามาดูวิธีการใช้งานที่ใช้กันทั่วไปใน AngularJs
วิธีที่ 1: การประกาศการฉีดเชิงอนุมานโดยสมมติว่าชื่อพารามิเตอร์คือชื่อของการพึ่งพา ดังนั้นจึงจะเรียกใช้วิธีการ ToString () ของวัตถุฟังก์ชันวิเคราะห์และแยกรายการพารามิเตอร์ฟังก์ชันจากนั้นฉีดพารามิเตอร์เหล่านี้ลงในอินสแตนซ์ของวัตถุผ่าน $ หัวฉีด
ดังนี้:
// วิธีที่ 1: การประกาศการฉีดเชิงอนุมานโดยสมมติว่าชื่อพารามิเตอร์คือชื่อของการพึ่งพา // ดังนั้นมันจะเรียกวิธีการ TOSTRING () ของวัตถุฟังก์ชันภายในวิเคราะห์และแยกรายการพารามิเตอร์ฟังก์ชันจากนั้นฉีดพารามิเตอร์เหล่านี้ลงในหัวฉีดอินสแตนซ์วัตถุอินพุท (ฟังก์ชั่น ($ http, $ timeout) {// toDo});วิธีที่ 2: การประกาศการฉีดภายในบรรทัดช่วยให้เราสามารถผ่านอาร์เรย์ของพารามิเตอร์โดยตรงเมื่อกำหนดฟังก์ชัน อาร์เรย์มีสตริงและฟังก์ชั่นโดยที่สตริงแสดงชื่อการพึ่งพาและฟังก์ชั่นแสดงถึงวัตถุฟังก์ชันวัตถุประสงค์
ดังนี้:
// วิธีที่ 2: การประกาศฉีดเข้าไปในบรรทัดช่วยให้เราสามารถผ่านอาร์เรย์ของพารามิเตอร์โดยตรงเมื่อกำหนดฟังก์ชัน // อาร์เรย์มีสตริงและฟังก์ชั่นโดยที่สตริงแสดงชื่อและฟังก์ชั่นการพึ่งพาเป็นตัวแทนของวัตถุฟังก์ชั่นวัตถุประสงค์ module.controller ('ชื่อ', ['$ http', '$ timeout', ฟังก์ชั่น ($ http, $ timeout) {// toDo}]);หลังจากอ่านรหัสข้างต้นฉันมีคำถามในใจแล้วสิ่งเหล่านี้จะถูกนำไปใช้อย่างไร?
ฮ่าฮ่าให้จำลองวิธีการฉีดพึ่งพาอาศัยกันเหล่านี้เพื่อทำความเข้าใจพวกเขา
2. สร้างโครงกระดูกพื้นฐาน
กระบวนการซื้อกิจการของการฉีดพึ่งพาคือการได้รับวิธีการที่สอดคล้องกันผ่านการแมปฟิลด์
ดังนั้นเพื่อใช้การฉีดพึ่งพาพื้นฐานเราจำเป็นต้องมีพื้นที่เก็บข้อมูล (การพึ่งพา) เพื่อจัดเก็บคีย์/ค่าที่ต้องการ วิธีการลงทะเบียน (ลงทะเบียน) เพื่อเพิ่มคู่คีย์ค่าใหม่ในพื้นที่จัดเก็บ และอีกวิธีหนึ่งคือวิธีการใช้งานหลัก (แก้ไข) ซึ่งได้รับผลลัพธ์การแมปที่สอดคล้องกันในพื้นที่จัดเก็บผ่านพารามิเตอร์ที่เกี่ยวข้อง
ดังนั้นโครงกระดูกพื้นฐานมีดังนี้:
var injector = {การพึ่งพา: {}, register: function (key, value) {this.dependencies [key] = value; คืนสิ่งนี้; }, Resolve: function () {}};3. ปรับปรุงวิธีการหลักเพื่อแก้ไข
จากโครงกระดูกพื้นฐานที่เราสร้างขึ้นเราสามารถพบได้ว่าคีย์นั้นสามารถแก้ไขได้จริงซึ่งใช้ในการใช้ข้อกำหนดเฉพาะของการฉีดพึ่งพาการพึ่งพา
อันดับแรกเราจะใช้การฉีดพึ่งพาในรูปแบบต่อไปนี้: การประกาศการฉีด
ดังนี้:
injector.resolve (ฟังก์ชั่น (Monkey, Dorie) {Monkey (); dorie ();});เพื่อให้ได้เอฟเฟกต์ข้างต้นเราสามารถใช้วิธี ToString () ของฟังก์ชั่นซึ่งเราสามารถแปลงฟังก์ชั่นเป็นสตริงเพื่อให้ได้ชื่อพารามิเตอร์นั่นคือค่าคีย์ผ่านนิพจน์ทั่วไป จากนั้นผ่านค่าคีย์ค้นหาค่าค่าในพื้นที่เก็บข้อมูลการพึ่งพา หากไม่พบค่าที่สอดคล้องกันจะมีการรายงานข้อผิดพลาด
การดำเนินการมีดังนี้:
var injector = {การพึ่งพา: {}, register: function (key, value) {this.dependencies [key] = value; คืนสิ่งนี้; }, Resolve: function () {var func, deps, args = [], scope = null; func = อาร์กิวเมนต์ [0]; // รับชื่อพารามิเตอร์ของฟังก์ชั่น deps = func.toString (). การจับคู่ (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .replace (//g, '') .split (','); ขอบเขต = อาร์กิวเมนต์ [1] || - สำหรับ (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {ถ้า (this.dependencies [d]) {args.push (this.dependencies [d]); } else {โยนข้อผิดพลาดใหม่ ('ไม่สามารถ/' t find ' + d); }} func.apply (ขอบเขต, args); -รหัสทดสอบมีดังนี้:
<! doctype html> <head> <meta charset = "utf-8"/> </head> <body> <body> <script> var injector = {การพึ่งพา: {}, register: function (คีย์, ค่า) {this.dependencies [key] = value; คืนสิ่งนี้; }, Resolve: function () {var func, deps, args = [], scope = null; func = อาร์กิวเมนต์ [0]; // รับชื่อพารามิเตอร์ของฟังก์ชั่น deps = func.toString (). การจับคู่ (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .replace (//g, '') .split (','); ขอบเขต = อาร์กิวเมนต์ [1] || - สำหรับ (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {ถ้า (this.dependencies [d]) {args.push (this.dependencies [d]); } else {โยนข้อผิดพลาดใหม่ ('ไม่สามารถ/' t find ' + d); }} func.apply (ขอบเขต, args); - // รหัสทดสอบ injector.register ('Monkey', function () {console.log ('Monkey');}) ลงทะเบียน ('dorie', function () {console.log ('dorie');}); injector.resolve (ฟังก์ชั่น (Monkey, Dorie) {Monkey (); dorie (); console.log ('-.-');}); </script> </body> </html>ข้อเสียอย่างหนึ่งของการประกาศการฉีดที่อนุมานได้คือไม่สามารถบีบอัดได้โดยใช้เครื่องมือบีบอัดเนื่องจากเราพึ่งพาพารามิเตอร์ของฟังก์ชัน เมื่อเราบีบอัดเราจะเปลี่ยนชื่อพารามิเตอร์และเปลี่ยนชื่อพารามิเตอร์ซึ่งจะล้มเหลวอย่างแน่นอน
จากนั้นด้านล่างเรามาดูคำสั่งฉีดแบบอินไลน์ซึ่งสามารถชดเชยข้อบกพร่องนี้ได้
ดำเนินการประกาศการฉีดแบบอินไลน์ดังนี้:
injector.resolve (['Monkey', 'Dorie', ฟังก์ชั่น (m, d) {m (); d ();}]);ใช้ typeof เพื่อกำหนดประเภทของอาร์กิวเมนต์ [0] เพื่อแยกแยะและรับพารามิเตอร์และฟังก์ชั่นการพึ่งพา
การดำเนินการมีดังนี้:
var injector = {การพึ่งพา: {}, register: function (key, value) {this.dependencies [key] = value; คืนสิ่งนี้; }, Resolve: 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 ++) {ถ้า (this.dependencies [d]) {args.push } else {โยนข้อผิดพลาดใหม่ ('ไม่สามารถ/' t find ' + d); }} func.apply (ขอบเขต || {}, args); -รหัสทดสอบมีดังนี้:
<! doctype html> <head> <meta charset = "utf-8"/> </head> <body> <body> <script> var injector = {การพึ่งพา: {}, register: function (คีย์, ค่า) {this.dependencies [key] = value; คืนสิ่งนี้; }, Resolve: 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 ++) {ถ้า (this.dependencies [d]) {args.push } else {โยนข้อผิดพลาดใหม่ ('ไม่สามารถ/' t find ' + d); }} func.apply (ขอบเขต || {}, args); - // รหัสทดสอบ injector.register ('Monkey', function () {console.log ('Monkey');}) ลงทะเบียน ('dorie', function () {console.log ('dorie');}); injector.resolve (['Monkey', 'Dorie', ฟังก์ชั่น (m, d) {m (); d (); console.log ('-.-');}]); </script> </body> </html>เนื่องจากการประกาศในบรรทัดถูกใช้เป็นพารามิเตอร์การพึ่งพาผ่านรูปแบบของสตริงดังนั้นและการบีบอัดจึงไม่กลัว
ในที่สุดเรารวมสองวิธีที่นำไปใช้ด้านบนและทำสิ่งที่เราต้องการ
จากนั้นมารวมกันดังนี้:
var injector = {การพึ่งพา: {}, register: function (key, value) {this.dependencies [key] = value; คืนสิ่งนี้; }, Resolve: function () {var firstParams, func, deps = [], scope = null, args = []; FirstParams = อาร์กิวเมนต์ [0]; ขอบเขต = อาร์กิวเมนต์ [1] || - // ตัดสินรูปแบบของการฉีดถ้า (typeof firstparams === 'function') {func = firstParams; deps = func.toString (). การจับคู่ (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .replace (//g, '') .split (','); } else {สำหรับ (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 ++) {ถ้า (this.dependencies [d]) {args.push } else {โยนข้อผิดพลาดใหม่ ('ไม่สามารถ/' t find ' + d); }} func.apply (ขอบเขต || {}, args); -4. ไฮไลท์ - การฉีดพึ่งพาของ reghejs
ไม่พบการฉีดพึ่งพาใน AngularJs หากคุณเคยใช้ requirejs ฟอร์มต่อไปนี้จะคุ้นเคยกับ:
ต้องการ (['Monkey', 'Dorie'], ฟังก์ชั่น (M, D) {// toDo});ผ่านข้างต้นเราจำลองการใช้งานการฉีดพึ่งพา AngularJS ทีละขั้นตอน ฉันเชื่อว่าเมื่อคุณเห็นสิ่งนี้คุณจะรู้ทันทีว่าคุณจะเปลี่ยนซุปหรือยา
การใช้งานการจำลองมีดังนี้:
var injector = {การพึ่งพา: {}, register: function (key, value) {this.dependencies [key] = value; คืนสิ่งนี้; }, Resolve: ฟังก์ชั่น (deps, func, ขอบเขต) {var args = []; สำหรับ (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {ถ้า (this.dependencies [d]) {args.push (this.dependencies [d]); } else {โยนข้อผิดพลาดใหม่ ('can/' t Resolve ' + d); }} func.apply (ขอบเขต || {}, args); -รหัสทดสอบมีดังนี้:
<! doctype html> <head> <meta charset = "utf-8"/> </head> <body> <body> <script> var injector = {การพึ่งพา: {}, register: function (คีย์, ค่า) {this.dependencies [key] = value; คืนสิ่งนี้; }, Resolve: ฟังก์ชั่น (deps, func, ขอบเขต) {var args = []; สำหรับ (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {ถ้า (this.dependencies [d]) {args.push (this.dependencies [d]); } else {โยนข้อผิดพลาดใหม่ ('can/' t Resolve ' + d); }} func.apply (ขอบเขต || {}, args); - // รหัสทดสอบ injector.register ('Monkey', function () {console.log ('Monkey');}) ลงทะเบียน ('dorie', function () {console.log ('dorie');}); injector.resolve (['Monkey', 'Dorie'], ฟังก์ชั่น (m, d) {m (); d (); console.log ('-.-');}); </script> </body> </html>V. อ้างอิง
1. การพัฒนาแอปพลิเคชันแอปพลิเคชัน AngularJS 3: การฉีดพึ่งพา
2. การฉีดพึ่งพาใน JavaScript
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น