Xiao A เป็นวิศวกรส่วนหน้าของทีมผู้ประกอบการบางคนรับผิดชอบในการเขียนโปรแกรม JavaScript โครงการ
ความขัดแย้งของตัวแปรทั่วโลก
จากประสบการณ์ของเขาเองเซียวเป็นครั้งแรกที่สกัดฟังก์ชั่นที่ใช้กันทั่วไปและเขียนลงในฟังก์ชั่นและวางไว้ในไฟล์สาธารณะฐาน
การคัดลอกรหัสมีดังนี้:
var _ = {
$: function (id) {return document.getElementById (id); -
getCookie: ฟังก์ชั่น (คีย์) {... },
SetCookie: ฟังก์ชั่น (คีย์, ค่า) {... }
-
Xiao A ทำให้ฟังก์ชั่นเหล่านี้อยู่ในวัตถุ _ เพื่อป้องกันตัวแปรทั่วโลกจำนวนมากเกินไปจากการก่อให้เกิดความขัดแย้ง เขาบอกส่วนที่เหลือของทีมว่าถ้าใครต้องการใช้ฟังก์ชั่นเหล่านี้เพียงแค่แนะนำ base.js
Xiao C เป็นเพื่อนร่วมงานของ Xiao A เขาบอก Xiao A: หน้าของเขาได้แนะนำห้องสมุดคลาสที่เรียกว่า Underscore.js และห้องสมุดคลาสนี้จะครอบครองตัวแปรระดับโลกนี้ซึ่งจะขัดแย้งกับ "base.js" Xiao ความคิดกับตัวเองว่า Underscore.js เป็นห้องสมุดบุคคลที่สามและอาจเป็นเรื่องยากที่จะแก้ไข แต่ base.js ได้แพร่กระจายออกไปหลายหน้าและเป็นไปไม่ได้ที่จะแก้ไข ในท้ายที่สุดเสี่ยวเอไม่มีทางเลือกนอกจากเปลี่ยนตัวแปรระดับโลกที่ถูกครอบครองโดย underscore.js
ในเวลานี้ Xiao A พบว่าการวางฟังก์ชั่นในเนมสเปซสามารถลดความน่าจะเป็นของความขัดแย้งตัวแปรทั่วโลก แต่ไม่ได้แก้ปัญหาความขัดแย้งของตัวแปรทั่วโลก
พึ่งพา
ด้วยการพัฒนาธุรกิจ Xiao A ได้เขียนชุดของไลบรารีฟังก์ชั่นและส่วนประกอบ UI เช่นแท็บส่วนประกอบการสลับแท็กซึ่งต้องใช้ฟังก์ชั่นการโทรใน base.js และ util.js.
อยู่มาวันหนึ่งเพื่อนร่วมงานคนใหม่ Xiao D และ Xiao A รายงานว่าเขาได้อ้างถึงแท็บบนหน้า แต่ฟังก์ชั่นไม่ปกติ Xiao A พบปัญหาได้อย่างรวดเร็ว ปรากฎว่า Xiao D ไม่ทราบว่า tabs.js พึ่งพา base.js และ util.js ดังนั้นเขาจึงไม่ได้เพิ่มการอ้างอิงไปยังไฟล์ทั้งสองนี้ ดังนั้นเขาจึงทำการเปลี่ยนแปลงทันที:
การคัดลอกรหัสมีดังนี้:
<script src = "tabs.js"> </script>
<script src = "base.js"> </script>
<script src = "util.js"> </script>
อย่างไรก็ตามฟังก์ชั่นยังคงผิดปกติ ในเวลานี้เซียว A สอนเซียว D บทเรียน: "ทุกคนบอกว่ามันเป็นการพึ่งพาอาศัยกันดังนั้นฝ่ายที่ต้องพึ่งพา ปรากฎว่า Xiao D ใส่ base.js และ util.js หลังจาก tabs.js.
เสี่ยวความคิดกับตัวเองว่าเขาเป็นนักเขียนและรู้ว่าการพึ่งพาส่วนประกอบโดยธรรมชาติ แต่มันก็ยากสำหรับคนอื่น ๆ ที่จะพูดโดยเฉพาะผู้มาใหม่
หลังจากผ่านไปครู่หนึ่งฟังก์ชั่นเพิ่มฟังก์ชั่นลงในส่วนประกอบการสลับแท็ก ในการใช้ฟังก์ชั่นนี้แท็บ js จำเป็นต้องเรียกฟังก์ชั่นใน UI.JS ในเวลานี้เสี่ยว A ค้นพบปัญหาร้ายแรง เขาต้องการเพิ่ม UI.JS การอ้างอิงไปยังทุกหน้าที่เรียกว่า tabs.js! - -
หลังจากนั้นไม่นานเซียว A แท็บที่ได้รับการปรับปรุงและส่วนประกอบนี้ไม่ต้องอาศัย util.js อีกต่อไปดังนั้นเขาจึงลบการอ้างอิงไปยัง util.js จากทุกหน้าที่ใช้ tabs.js เพื่อปรับปรุงประสิทธิภาพ มีบางอย่างใหญ่เกิดขึ้นกับเขาเมื่อเขาทำการดัดแปลง MM ในทีมทดสอบบอกเขาว่าบางหน้าผิดปกติ เมื่อ Xiao A เห็นมันทันใดนั้นเขาก็รู้ว่าฟังก์ชั่นอื่น ๆ ของบางหน้าใช้ฟังก์ชั่นใน util.js. เขาลบการอ้างอิงไปยังไฟล์นี้และทำให้เกิดข้อผิดพลาด เพื่อให้แน่ใจว่าฟังก์ชั่นเป็นเรื่องปกติเขากู้คืนรหัสอีกครั้ง
Xiao ความคิดอีกครั้งมีวิธีแก้ไขการพึ่งพาโดยไม่ต้องแก้ไขหน้าหนึ่งทีละหนึ่งและไม่ส่งผลกระทบต่อฟังก์ชั่นอื่น ๆ หรือไม่?
เป็นแบบแยกส่วน
เมื่อ Xiao A กำลังช็อปปิ้งในอินเทอร์เน็ตเขาได้ค้นพบวิธีการเข้ารหัสแบบแยกส่วนใหม่โดยไม่ตั้งใจซึ่งสามารถแก้ปัญหาทั้งหมดที่พบมาก่อน
ในการเขียนโปรแกรมแบบแยกส่วนแต่ละไฟล์เป็นโมดูล แต่ละโมดูลถูกสร้างขึ้นโดยฟังก์ชั่นที่เรียกว่า define ตัวอย่างเช่นหลังจากเปลี่ยน base.js เป็นโมดูลรหัสจะกลายเป็นเช่นนี้:
การคัดลอกรหัสมีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {
การส่งออก $ = ฟังก์ชั่น (id) {return document.getElementById (id); -
exports.getCookie = ฟังก์ชั่น (คีย์) {... };
exports.setCookie = ฟังก์ชั่น (คีย์, ค่า) {... };
-
อินเทอร์เฟซทั้งหมดที่จัดทำโดย base.js จะถูกเพิ่มลงในวัตถุส่งออก การส่งออกเป็นตัวแปรท้องถิ่นและรหัสของโมดูลทั้งหมดไม่ได้ครอบครองครึ่งหนึ่งของตัวแปรทั่วโลก
แล้วคุณจะเรียกอินเทอร์เฟซที่จัดทำโดยโมดูลที่กำหนดได้อย่างไร? ใช้ tabs.js เป็นตัวอย่างมันขึ้นอยู่กับ base.js และ util.js:
การคัดลอกรหัสมีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {
var _ = ต้องการ ('base.js'), util = ต้องการ ('util.js');
var div_tabs = _. $ ('แท็บ');
// .... รหัสอื่น ๆ
-
โมดูลสามารถรับอินเทอร์เฟซของโมดูลอื่น ๆ ผ่านฟังก์ชั่นท้องถิ่นต้องการ ในเวลานี้ตัวแปร _ และ UTIL เป็นทั้งตัวแปรท้องถิ่นและชื่อตัวแปรจะถูกควบคุมโดยนักพัฒนาอย่างสมบูรณ์ หากคุณไม่ชอบ _ คุณสามารถใช้ฐาน:
การคัดลอกรหัสมีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {
var base = ต้องการ ('base.js'), util = ต้องการ ('util.js');
var div_tabs = base. $ ('แท็บ');
// .... รหัสอื่น ๆ
-
เมื่อคุณต้องการลบ util.js และเพิ่ม ui.js เพียงแค่แก้ไข tabs.js:
การคัดลอกรหัสมีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {
var base = ต้องการ ('base.js'), ui = ต้องการ ('ui.js');
var div_tabs = base. $ ('แท็บ');
// .... รหัสอื่น ๆ
-
รถตัก
เนื่องจากการขาดการสนับสนุนเบราว์เซอร์เนทีฟหากเราต้องการเข้ารหัสในแบบแยกส่วนเราต้องพึ่งพาสิ่งที่เรียกว่าตัวโหลด
ปัจจุบันมีการใช้งานมากมายของรถตักเช่น charde.js และ SEAJs ห้องสมุด Jraiser Class ยังมีตัวโหลดของตัวเอง