คำนำ
การใช้โหนดเพื่อแยกรูปแบบการพัฒนาด้านหน้าและด้านหลังทำให้เกิดข้อได้เปรียบด้านประสิทธิภาพและกระบวนการพัฒนา แต่ยังเผชิญกับความท้าทายมากมาย ภายใต้ธุรกิจที่ซับซ้อนและสถาปัตยกรรมทางเทคนิคของ Taobao แบ็กเอนด์จะต้องพึ่งพา Java เพื่อสร้างโครงสร้างพื้นฐานและให้อินเทอร์เฟซธุรกิจที่เกี่ยวข้องสำหรับส่วนหน้าที่จะใช้ หนึ่งในภารกิจที่สำคัญที่สุดของโหนดในสภาพแวดล้อมทั้งหมดคือพร็อกซีอินเทอร์เฟซธุรกิจเหล่านี้เพื่ออำนวยความสะดวกในการรวมข้อมูลในส่วนหน้า (ด้านโหนดและด้านเบราว์เซอร์) สำหรับการแสดงผลหน้า วิธีการทำงานที่ดีในการทำงานของเอเจนซี่เพื่อให้หลังการพัฒนาด้านหน้าและด้านหลังยังสามารถเชื่อมต่อได้อย่างราบรื่นในกระบวนการเป็นปัญหาที่เราต้องพิจารณา บทความนี้จะหารือเกี่ยวกับปัญหานี้และเสนอวิธีแก้ปัญหา
เนื่องจากแบ็กเอนด์มีอินเทอร์เฟซที่หลากหลายนักพัฒนาอาจมีหลายวิธีในการเขียนโค้ดด้านโหนดเพื่อเข้าถึงอินเทอร์เฟซเหล่านี้ หากเราไม่ดำเนินการประมวลผลสถาปัตยกรรมแบบครบวงจรในวิธีการเข้าถึงอินเทอร์เฟซและการใช้งานมันจะนำมาซึ่งปัญหาต่อไปนี้:
1. นักพัฒนาแต่ละคนใช้รูปแบบรหัสของตัวเองในการเขียนรหัสการเข้าถึงอินเทอร์เฟซทำให้เกิดความสับสนในไดเรกทอรีโครงการและรูปแบบการเข้ารหัสซึ่งทำให้ยากต่อการรักษา
2. นักพัฒนาทุกคนเขียนวิธีการจำลองข้อมูลของเขาเอง หลังจากการพัฒนาเสร็จสมบูรณ์เขาต้องปรับเปลี่ยนรหัสด้วยตนเองเพื่อลบการเยาะเย้ย
3. เพื่อที่จะตระหนักถึงการสลับสภาพแวดล้อมที่แตกต่างกันของอินเทอร์เฟซ (รายวันก่อนเกิดปัญหาออนไลน์) นักพัฒนาแต่ละคนอาจรักษาไฟล์การกำหนดค่าบางอย่าง
4. วิธีการโทรแบบอินเทอร์เฟซข้อมูลไม่สามารถนำกลับมาใช้ใหม่ได้อย่างง่ายดายโดยโมเดลธุรกิจต่างๆ
5. ข้อตกลงคำอธิบายสำหรับอินเทอร์เฟซข้อมูลกระจัดกระจายในทุกมุมของรหัสซึ่งอาจไม่สอดคล้องกับเอกสารอินเตอร์เฟสที่ตกลงกันโดยบุคลากรแบ็กเอนด์
6. หลังจากกระจายโครงการทั้งหมดค่าใช้จ่ายในการเชื่อมต่ออินเทอร์เฟซหรือการทดสอบการถดถอยยังคงสูงมากและจำเป็นต้องมีส่วนร่วมกับผู้ให้บริการและผู้ใช้อินเตอร์เฟสแต่ละราย
ดังนั้นเราหวังว่าจะมีกรอบการทำงานที่ใช้กลไกที่จัดทำโดยเฟรมเวิร์กนี้เพื่ออธิบายอินเทอร์เฟซภายนอกทั้งหมดที่ขึ้นอยู่กับในโครงการวิศวกรรมจัดการพวกเขาในลักษณะที่เป็นเอกภาพและให้วิธีการสร้างแบบจำลองอินเทอร์เฟซที่ยืดหยุ่นและวิธีการโทรรวมถึงสภาพแวดล้อมออนไลน์ที่สะดวกสบาย ModelProxy เป็นกรอบที่มีน้ำหนักเบาที่ตรงตามข้อกำหนดดังกล่าว มันเป็นหนึ่งในองค์ประกอบหลักของกรอบกลางเวิร์คและยังสามารถใช้เพียงอย่างเดียว การใช้ ModelProxy สามารถนำข้อดีดังต่อไปนี้:
1. นักพัฒนาที่แตกต่างกันมีวิธีการเขียนรหัสการเข้าถึงอินเทอร์เฟซแบบครบวงจรความหมายที่ชัดเจนและลดความยากลำบากในการบำรุงรักษา
2. เฟรมเวิร์กใช้โหมดโรงงาน + ซิงเกิลตันเพื่อรับรู้หลายการกำหนดค่าอินเตอร์เฟสหลายครั้งในครั้งเดียว และนักพัฒนาสามารถปรับแต่งและรวบรวมรูปแบบธุรกิจของตนเอง (การฉีดพึ่งพา)
3. สามารถสลับสภาพแวดล้อมออนไลน์ทุกวันและปัญหาล่วงหน้าได้อย่างง่ายดาย
4. เครื่องยนต์จำลองในตัวเช่นแม่น้ำม็อกและม็อกเจส์การให้ข้อมูลจำลองนั้นสะดวกมาก
5. ใช้ไฟล์การกำหนดค่าอินเตอร์เฟสเพื่อจัดการคำอธิบายการพึ่งพาอินเตอร์เฟสอย่างสม่ำเสมอเพื่อหลีกเลี่ยงการกระจัดกระจายในรหัสต่างๆ
6. รองรับการแชร์โมเดลทางด้านเบราว์เซอร์ซึ่งสามารถใช้ในการแสดงผลข้อมูลส่วนหน้า กระบวนการพร็อกซีทั้งหมดโปร่งใสไปยังเบราว์เซอร์
7. ไฟล์การกำหนดค่าอินเตอร์เฟสเองเป็นเอกสารคำอธิบายที่มีโครงสร้างและเอกสารสามารถสร้างได้โดยอัตโนมัติโดยใช้คอลเลกชันเครื่องมือแม่น้ำ นอกจากนี้ยังสามารถใช้สำหรับการทดสอบส่วนต่อประสานอัตโนมัติที่เกี่ยวข้องเพื่อสร้างลูปปิดในกระบวนการพัฒนาทั้งหมด
ModelProxy Diagram หลักการทำงานและไดอะแกรมกระบวนการพัฒนาที่เกี่ยวข้อง
ในรูปด้านบนผู้พัฒนาจำเป็นต้องอธิบายการพึ่งพาทั้งหมดของอินเตอร์เฟสแบ็กเอนด์ในโครงการและเขียนลงในส่วนต่อประสานไฟล์กำหนดค่า JSON ตามรูปแบบ JSON ที่ระบุ หากจำเป็นต้องเขียนไฟล์กฎสำหรับแต่ละอินเทอร์เฟซนั่นคือกฎอินเตอร์เฟสส่วนหนึ่งของรูป ไฟล์กฎนี้ใช้ในการเยาะเย้ยข้อมูลในระหว่างขั้นตอนการพัฒนาหรือเพื่อใช้ชุดเครื่องมือแม่น้ำเพื่อตรวจสอบอินเทอร์เฟซในระหว่างขั้นตอนการดีบักร่วม เนื้อหาของไฟล์กฎขึ้นอยู่กับว่าเครื่องยนต์จำลองใดที่ใช้ (เช่น mockjs, mock-mock ฯลฯ ) หลังจากการกำหนดค่าเสร็จสมบูรณ์คุณสามารถสร้างรูปแบบธุรกิจของคุณเองในรหัสตามความต้องการของคุณ
นี่คือตัวอย่างง่ายๆ:
【ตัวอย่าง 1 】
ขั้นตอนแรกคือการสร้างอินเทอร์เฟซไฟล์การกำหนดค่าอินเตอร์เฟส JSON ในไดเรกทอรีโครงการและเพิ่มคำจำกัดความอินเตอร์เฟสการค้นหาหลัก JSON
การคัดลอกรหัสมีดังนี้:
-
"Title": "คำจำกัดความการรวบรวมข้อมูลอินเทอร์เฟซของ Pad Taobao Project Interface"
"เวอร์ชัน": "1.0.0"
"เครื่องยนต์": "Mockjs",
"Rulebase": "./interfacerules/",
"สถานะ": "ออนไลน์",
"อินเทอร์เฟซ": [{
"ชื่อ": "อินเทอร์เฟซการค้นหาหลัก",
"id": "search.getItems",
"urls": {
"ออนไลน์": "http://smtaobao.com/client/search.do"
-
-
-
ขั้นตอนที่ 2 สร้างและใช้โมเดลในรหัส
การคัดลอกรหัสมีดังนี้:
// แนะนำโมดูล
var modelproxy = ต้องการ ('modelproxy');
// การเริ่มต้นทั่วโลกแนะนำไฟล์การกำหนดค่าอินเตอร์เฟส (หมายเหตุ: การเริ่มต้นทำงานเพียงครั้งเดียว)
modelproxy.init ('./interface.json');
// สำหรับโหมดการสร้างเพิ่มเติมโปรดดูบทความต่อไปนี้
var searchModel = ใหม่ modelProxy ({
SearchItems: 'search.getItems' // ชื่อวิธีการที่กำหนดเอง: รหัสอินเตอร์เฟสที่กำหนดไว้ในไฟล์การกำหนดค่า
-
// ใช้โมเดล, หมายเหตุ: พารามิเตอร์ที่จำเป็นสำหรับการเรียกวิธีการเป็นพารามิเตอร์ที่จำเป็นสำหรับอินเตอร์เฟสจริง
SearchModel.SearchItems ({Q: 'iPhone6'})
//! โปรดทราบว่าคุณต้องโทรหาวิธีที่ทำเพื่อระบุฟังก์ชั่นการโทรกลับเพื่อรับข้อมูลที่ได้รับจากการเรียกใช้การค้นหาแบบอะซิงโครนัสด้านบน!
.DONE (ฟังก์ชั่น (ข้อมูล) {
console.log (ข้อมูล);
-
.Error (ฟังก์ชั่น (err) {
console.log (err);
-
ฟีเจอร์ความร่ำรวยของ ModelProxy คือการสนับสนุนรูปแบบต่าง ๆ ของโปรไฟล์เพื่อสร้างรูปแบบธุรกิจที่ต้องใช้ธุรกิจ:
สร้างวัตถุโดยใช้ ID อินเตอร์เฟส> จะใช้คำหลังจากล่าสุด ' จำนวน ID เป็นชื่อวิธี
การคัดลอกรหัสมีดังนี้:
modelproxy.create ('search.getItem');
ใช้คีย์ค่าวัตถุ JSON> ชื่อวิธีที่กำหนดเอง: ID อินเตอร์เฟส
การคัดลอกรหัสมีดังนี้:
modelproxy.create ({
getName: 'session.getUserName'
getMyCarts: 'cart.getCarts'
-
ใช้แบบฟอร์มอาร์เรย์> ใช้คำหลังจากสุดท้าย หมายเลขเป็นชื่อวิธี
ชื่อการโทรวิธีที่สร้างขึ้นในตัวอย่างต่อไปนี้คือ: cart_getItem, getItem, แนะนำ, getName
การคัดลอกรหัสมีดังนี้:
modelproxy.create (['cart.getItem', 'search.getItem', 'search.suggest', 'session.user.getName']);
คำนำหน้าแบบฟอร์ม> รหัสอินเทอร์เฟซทั้งหมดที่ตอบสนองคำนำหน้าจะถูกนำเข้าสู่วัตถุและส่วนหลังจะถูกใช้เป็นชื่อวิธี
การคัดลอกรหัสมีดังนี้:
modelproxy.create ('Search.*');
ในเวลาเดียวกันการใช้แบบจำลองเหล่านี้คุณสามารถใช้คำขอผสานหรือคำขอการพึ่งพาได้อย่างง่ายดายและแสดงเทมเพลตที่เกี่ยวข้อง
[ตัวอย่างที่ 2] คำขอรวม
การคัดลอกรหัสมีดังนี้:
var model = new modelProxy ('Search.*');
// คำขอผสาน (วิธีการจำลองที่เรียกว่าด้านล่างจะถูกระบุเมื่อกำหนดค่า ID อินเตอร์เฟสยกเว้น DONE)
model.suggest ({q: 'female'})
.List ({คำหลัก: 'iPhone6'})
.getNav ({key: 'เสื้อผ้ายอดนิยม'})
.DONE (ฟังก์ชั่น (data1, data2, data3) {
// ลำดับของพารามิเตอร์สอดคล้องกับลำดับของการโทรวิธี
console.log (data1, data2, data3);
-
[ตัวอย่างที่ 3] คำขอการพึ่งพา
การคัดลอกรหัสมีดังนี้:
var model = new modelproxy ({
GetUser: 'Session.getUser'
getMyOrderList: 'order.getOrder'
-
// รับ ID ผู้ใช้ก่อนจากนั้นรับรายการคำสั่งซื้อตามหมายเลข ID
model.getUser ({sid: 'fdkaldjfgsakls0322yf8'})
.DONE (ฟังก์ชั่น (ข้อมูล) {
var uid = data.uid;
// คำขอข้อมูลรองขึ้นอยู่กับหมายเลข ID ที่ได้รับครั้งแรก
this.getMyOrderList ({id: uid})
.DONE (ฟังก์ชั่น (ข้อมูล) {
console.log (ข้อมูล);
-
-
นอกจากนี้ ModelProxy สามารถใช้ไม่เพียง แต่ที่ด้านโหนด แต่ยังอยู่ที่ด้านเบราว์เซอร์ เพียงแนะนำ modelproxy-client.js ที่จัดทำโดยแพ็คเกจอย่างเป็นทางการในหน้า
[ตัวอย่างที่ 4] การใช้ ModelProxy ที่ด้านเบราว์เซอร์
การคัดลอกรหัสมีดังนี้:
<!-แนะนำโมดูล ModelProxy ซึ่งเป็นโมดูลมาตรฐานที่ห่อหุ้มด้วย Kissy->
<script src = "modelproxy-client.js"> </script>
<script type = "text/javascript">
kissy.use ("modelproxy", ฟังก์ชั่น (s, modelproxy) {
//! กำหนดค่าเส้นทางพื้นฐานซึ่งสอดคล้องกับเส้นทางการสกัดกั้นที่กำหนดค่าในขั้นตอนที่สอง!
// และมีการกำหนดค่าทั่วโลกและเพียงครั้งเดียว!
modelproxy.configbase ('/model/');
// สร้างโมเดล
var searchModel = modelproxy.create ('Search.*');
โมเดลค้นหา
.List ({q: 'ihpone6'}))
.List ({Q: 'Shangchao'}))
.suggest ({q: 'i'})
.getNav ({q: 'skateboard'})
.DONE (ฟังก์ชั่น (data1, data2, data3, data4) {
console.log ({
"list_ihpone6": data1,
"list_shocksuit": data2,
"แนะนำ _i": data3,
"getnav_skateboard": data4
-
-
-
</script>
ในเวลาเดียวกัน ModelProxy สามารถใช้กับ Midway-XTPL ซึ่งเป็นองค์ประกอบหลักอีกประการหนึ่งของ Midway เพื่อตระหนักถึงการแบ่งปันข้อมูลเทมเพลตและกระบวนการเรนเดอร์ที่เกี่ยวข้องอย่างเต็มรูปแบบบนเบราว์เซอร์และฝั่งเซิร์ฟเวอร์ สำหรับบทช่วยสอนและเอกสารโดยละเอียดเกี่ยวกับ ModelProxy โปรดย้ายไปที่ https://github.com/purejs/modelproxy
สรุป
ModelProxy มีอยู่เป็นเฟรมเวิร์กที่มีน้ำหนักเบากำหนดค่าที่กำหนดไว้ให้วิธีการประกอบโมเดลอินเทอร์เฟซที่เป็นมิตรและวิธีการใช้งานและในขณะเดียวกันก็แก้ปัญหาการใช้งานอินเตอร์เฟสในการแยกโหมดการพัฒนาส่วนหน้าและส่วนหลัง ในระหว่างกระบวนการพัฒนาโครงการทั้งหมดอินเทอร์เฟซจะต้องมีการกำหนดและอธิบายครั้งเดียวเสมอและนักพัฒนาส่วนหน้าสามารถอ้างอิงได้ ในเวลาเดียวกันเครื่องมือแม่น้ำจะใช้ในการสร้างเอกสารโดยอัตโนมัติจัดทำสัญญากับนักพัฒนาแบ็คเอนด์และดำเนินการทดสอบอัตโนมัติที่เกี่ยวข้องอย่างมากเพื่อเพิ่มประสิทธิภาพกระบวนการพัฒนาวิศวกรรมซอฟต์แวร์ทั้งหมดอย่างมาก
【หมายเหตุ】แม่น้ำเป็นคำทั่วไปสำหรับข้อมูลจำเพาะอินเทอร์เฟซแบบครบวงจรด้านหน้าและเครื่องมือที่เกี่ยวข้องที่พัฒนาโดยกลุ่มอาลีบาบาและพัฒนาโดยกลุ่มอาลีบาบา