การแนะนำขั้นพื้นฐาน
เริ่มต้นด้วยแนวคิดที่สำคัญ“ เทมเพลต” การพูดอย่างกว้างขวางเทมเพลตในเว็บเป็นหน้าเว็บที่สามารถสร้างไฟล์หลังจากกรอกข้อมูล การพูดอย่างเคร่งครัดเอ็นจิ้นเทมเพลตควรใช้ไฟล์ในรูปแบบเฉพาะและข้อมูลที่ให้ไว้เพื่อรวบรวมและสร้างหน้า เทมเพลตจะถูกแบ่งออกเป็นเทมเพลตส่วนหน้า (เช่น EJS) และเทมเพลต back-end (เช่น freemarker) ที่รวบรวมบนเบราว์เซอร์และฝั่งเซิร์ฟเวอร์ตามลำดับ
เนื่องจากนักเรียนบางคนในจุดไม่ทราบเกี่ยวกับ node.js มากนักนี่คือความรู้ที่เกี่ยวข้องของ Node.js ฉันจะไม่พูดถึงคำจำกัดความของการขับเคลื่อนเหตุการณ์แบบอะซิงโครนัสและอื่น ๆ บนเว็บไซต์อย่างเป็นทางการ ที่นี่ฉันยืมรูปภาพจาก Pu Lingshu เพื่ออธิบายโครงสร้างของ Node.Js. หากคุณเข้าใจ Java คุณสามารถเข้าใจว่ามันเป็น JVM เวอร์ชัน JS โดยทั่วไปแล้วเบราว์เซอร์รวมถึงเครื่องแสดงผลและเครื่องยนต์สคริปต์ JS การใช้เบราว์เซอร์ Chrome เป็นตัวอย่างพวกเขาใช้ WebKit Kernel Renderer และ V8 Script Engine ในขณะที่ Node.js ใช้เครื่องยนต์ V8 ในระยะสั้นมันเป็นสภาพแวดล้อมที่ใช้งาน JS เช่นเดียวกับเครื่องมือการดีบัก F12 ของเบราว์เซอร์ แต่ Node.js ไม่มี DOM และ BOM
ภาพนี้อธิบายข้อมูลบางอย่างเกี่ยวกับ node.js เช่น NPM, ผู้จัดการแพ็คเกจที่ยอดเยี่ยม, ชุมชน cnode และ GitHub ซึ่งได้ส่งเสริมความเจริญรุ่งเรืองของ node.js ในระดับหนึ่งและให้การรับประกันทางเทคนิค
บริษัท ขนาดใหญ่มักจะเป็นใบพัดของเทคโนโลยี ตัวอย่างเช่น Angular และ React ของ Facebook ของ Google ได้รับความนิยมอย่างมากในขณะนี้ มีเพียง 3 บริษัท ขนาดใหญ่ที่ระบุไว้ที่นี่เป็นตัวอย่าง ไม่จำเป็นต้องพูดสถาปัตยกรรมกึ่งกลางของ Taobao คือ Pu Ling ผู้บุกเบิกของ Node.js ในประเทศมาจาก Taobao Qunar ยังได้พัฒนากรอบทางเทคนิคที่ควรเรียกว่า "QTX" ทีม 75 นำโดย Yueying เปิดตัวเฟรมเวิร์กเว็บเซิร์ฟเวอร์ตาม ES6/ES7 - ThinkJS ในเวลานั้นผู้อำนวยการด้านเทคนิคของเรานั้นมองโลกในแง่ดีมาก แต่เนื่องจากฉันไม่มีเวลาเรียนรู้ ES6 และปลั๊กอินไม่รวยพอฉันจึงยังเลือกที่เป็นผู้ใหญ่มากขึ้น
กลับไปที่หัวข้อตารางนี้แสดงสามวิธีการพัฒนาสำหรับการแยกด้านหน้าและด้านหลังที่ฉันได้รับ อย่างแรกคือเทมเพลตภาษาแบ็กเอนด์ที่พบมากที่สุดที่ใช้ Java ซึ่งเป็นมิตรกับ SEO และดีกว่าในการใช้แคชและลดภาระการแสดงผลของเบราว์เซอร์ ปัญหาที่ใหญ่ที่สุดคือระดับการมีเพศสัมพันธ์ของไฟล์เทมเพลตสูงเกินไป ไม่มีใครอยากแก้ปัญหา บุคลากรส่วนหน้าไม่สามารถมองเห็นข้อมูลบุคลากรด้านหลังไม่เข้าใจหน้าเว็บและไฟล์เทมเพลตเป็นเหมือนมันฝรั่งร้อน ประการที่สองคือโซลูชันการใช้งานปัจจุบันของเทอร์มินัลมือถือของโครงการของเราซึ่งใช้กรอบการทำงานของเชิงมุม (คำสั่งเชิงมุมสามารถถือได้ว่าเป็นเทมเพลตส่วนหน้า) และเซิร์ฟเวอร์พร็อกซีย้อนกลับของ Nginx การแก้ปัญหานี้ตรงข้ามกับข้อดีและข้อเสียของอดีต ประสิทธิภาพของเทมเพลตส่วนหน้ามักเป็นปัญหาโดยเฉพาะอย่างยิ่งบนอุปกรณ์มือถือและโดยเฉพาะอย่างยิ่งบนอุปกรณ์มือถือต่ำสุด โครงการสุดท้ายคือโครงการใหม่ที่ใช้ node.js เป็นเซิร์ฟเวอร์ส่วนหน้าซึ่งแบ่งความรับผิดชอบส่วนหน้าจากเบราว์เซอร์ไปยังระดับเทมเพลตแก้ปัญหาทั้งหมดข้างต้น แต่มีปัญหาใหม่และปัญหานี้จะถูกวิเคราะห์ในภายหลัง
แน่นอนว่าการพัฒนาแบบเต็มซ้อนเหมาะสำหรับโครงการขนาดเล็ก สำหรับการพัฒนา JSP/PHP แบบดั้งเดิมค่าใช้จ่ายในการสื่อสารของการพัฒนาเต็มรูปแบบนั้นต่ำกว่าและนักพัฒนาสามารถเข้าใจโมดูลการทำงานทั้งหมดได้อย่างง่ายดาย โดยเฉพาะอย่างยิ่งการพัฒนาเต็มรูปแบบตามภาษา JS: Meteor และ Mean Technology ที่กำลังเกิดขึ้นทำให้การพัฒนาส่วนหน้าและการพัฒนากลับมาจัดการโดยตรงในภาษาเดียว ด้วย MongoDB ข้อมูลจากเบราว์เซอร์ไปยังฐานข้อมูลจะถูกใช้โดยตรงโดยไม่ต้องหลบหนีและไม่จำเป็นต้องเขียน SQL ซึ่งจะช่วยลดค่าใช้จ่ายในการพัฒนาได้อย่างมาก
ปลั๊กอินบางตัวที่ใช้ในการสร้างเซิร์ฟเวอร์ Node.js ในครั้งนี้ ไม่จำเป็นต้องแนะนำ Express ที่มีชื่อเสียงกรอบเว็บเซิร์ฟเวอร์ที่มีน้ำหนักเบา นอกจากนี้ยังเป็นเรื่องบังเอิญที่จะใช้เอ็นจิ้นเทมเพลตแฮนด์บาร์เพราะ Express4 เป็นค่าเริ่มต้นแฮนด์บาร์มีค่าควรแก่การเป็นเอ็นจิ้นเทมเพลตของ "ตรรกะที่อ่อนแอ" สนับสนุนการลดตรรกะของแม่แบบและพยายามใช้ตัวแปรและเพจเท่านั้น ตามแนวคิดการออกแบบของฉันฉันมีผู้ช่วยสองคนเท่านั้น บทความเฉพาะ: https://yalishizhude.github.io/2016/01/22/handlebars/superagent ยังคงใช้เพราะ Express4 เนื่องจากรหัสทดสอบใช้ Supertest Supertest จึงใช้ SuperAgent ดังนั้น SuperAgent จึงถูกใช้เพื่อส่งต่อและเริ่มต้นคำขอ Superagent ยังอ่อนแอเกินไปและไม่สามารถจัดตั้งขึ้นได้สำหรับการเชื่อมต่อที่ยาวนาน ฉันยังแนะนำปลั๊กอินคำขอ ไม่มีอะไรที่จะแนะนำให้รู้จักกับ Restuleapi เซิร์ฟเวอร์ส่วนหน้าและเบราว์เซอร์เซิร์ฟเวอร์ส่วนหน้าและเซิร์ฟเวอร์แบ็คเอนด์ทั้งหมดใช้ชุดข้อมูลจำเพาะนี้ โดยพื้นฐานแล้ว URL ชี้ไปที่ทรัพยากรเพิ่มลบแก้ไขและตรวจสอบและวิธีการร้องขอเฉพาะจะแสดงรหัสสถานะแสดงผลลัพธ์ ฯลฯ ~ เครื่องมือบรรจุภัณฑ์อึกเว็บแพ็คได้ศึกษามาเป็นเวลานานและพบว่าทุกหน้าที่เพิ่มเข้ามาต้องมีการปรับเปลี่ยนไฟล์การกำหนดค่า มันเจ็บปวดเกินไปดังนั้นฉันจึงยอมแพ้
กระบวนการพัฒนา
หากการแบ่งปันนี้ส่วนใหญ่พูดถึงวิธีการใช้ Node.js เป็นเซิร์ฟเวอร์ส่วนหน้าเพื่อให้ได้การแยกส่วนหน้าไม่มีอะไรจะพูดเพียงแค่ดูบทความเกี่ยวกับ Taobao Ued ปัญหาที่ใหญ่ที่สุดเกี่ยวกับการแยกด้านหน้าและด้านหลังคือมันทำให้เกิดค่าใช้จ่ายในการสื่อสารโดยเฉพาะคำจำกัดความและการดีบักของอินเทอร์เฟซ ในกระบวนการพัฒนาแบบดั้งเดิมในรูปด้านบนคำจำกัดความของอินเทอร์เฟซจะถูกวางไว้ในเซิร์ฟเวอร์อินเตอร์เฟสจากนั้นปลายด้านหน้าและด้านหลังจะดำเนินการดีบักในท้องถิ่นตามข้อมูลการฉ้อโกงเอกสารอินเตอร์เฟสจากนั้นดำเนินการดีบั๊กร่วมกัน ลิงค์นี้คือเมื่อด้านหน้าและด้านหลังสิ้นสุดลงเพื่อต่อสู้ พารามิเตอร์นี้ไม่ถูกต้องและค่าส่งคืนไม่ถูกต้อง ในระยะสั้นมันเป็นการเสียเวลา ต่อไปมาดูกันว่าปัญหานี้ได้รับการแก้ไขอย่างไรในโครงการของเรา ~
ปัญหาของอินเทอร์เฟซการหลุดออกมาด้านหน้าและด้านหลังมีอยู่เสมอ ในฐานะที่เป็นอนุรักษ์นิยมฉันเชื่อในการพัฒนาซ้ำดังนั้นขั้นตอนแรกคือการเพิ่มเซิร์ฟเวอร์จำลอง ความมหัศจรรย์ของเซิร์ฟเวอร์นี้คือการสร้างข้อมูลปลอมโดยอัตโนมัติตามเอกสารอินเทอร์เฟซการใช้อินเทอร์เฟซคือ API และนักเรียนส่วนหน้าไม่ต้องเขียนข้อมูลถึงความตายอีกต่อไปสำหรับการทดสอบ ไม่มีทางใครบอกว่าฉันเป็นนักพัฒนาส่วนหน้า? ก่อนอื่นฉันคิดถึงคนของตัวเอง แน่นอนว่านี่เป็นประโยชน์ต่อการพัฒนาส่วนหน้าในระดับหนึ่งเท่านั้น นอกจากนี้ยังจะมีปัญหาเมื่ออินเทอร์เฟซและเอกสารของ back-end ไม่สอดคล้องกันและเชื่อมต่อ จะทำอย่างไร?
ฉันเห็นบทความโดย Lao Ma โดยบังเอิญในบล็อกของ The Blade Master ซึ่งพูดถึงการแยกด้านหน้าและด้านหลังโดยเฉพาะ หนึ่งในแนวคิดที่สำคัญคือการทดสอบสัญญาหรือที่เรียกว่าการทดสอบทวิภาคี แนวคิดหลักคือการแก้ปัญหาการดีบักข้อต่อระยะไกล ตรวจสอบพารามิเตอร์ของด้านหน้าและด้านหลังและต้องการให้ทุกคนพัฒนาตามเอกสารอินเตอร์เฟส ได้รับแรงบันดาลใจจากมันกฎ JSON-SCHEMA ถูกเพิ่มเข้ามาเพื่อให้ตระหนักถึงการตรวจสอบพารามิเตอร์ของคำขอ HTTP และใครก็ตามที่ไม่ปฏิบัติตามกฎจะเปลี่ยน
Redmine นี้เป็นตัวจัดการเอกสารอินเทอร์เฟซที่เก่าแก่ที่สุดของเราและไม่มีฟังก์ชั่นอื่นยกเว้นฟังก์ชั่นการบันทึกและการดู
Swagger เป็นที่รู้จักกันดีว่าเป็นเซิร์ฟเวอร์เอกสารอินเทอร์เฟซที่ได้รับความนิยมมากที่สุดในโลก มีอินเทอร์เฟซที่สวยงามและปลั๊กอินมากมาย มันสามารถสร้างรหัสทดสอบโดยตรงสำหรับภาษาแบ็คเอนด์ อย่างไรก็ตามฉันไม่เคยเข้าใจเมื่อปรับใช้และรูปแบบ Yaml ไม่ดีเท่า JSON ดังนั้นฉันจึงยอมแพ้
นี่คือเซิร์ฟเวอร์เอกสารและเซิร์ฟเวอร์จำลองที่ใช้ในโครงการของเราเซิร์ฟเวอร์ที่ใช้งานตามเทคโนโลยีเฉลี่ยและฟังก์ชั่นพื้นฐาน:
การใช้ปลั๊กอิน MOCKJS ข้อมูลแบบสุ่มสามารถสร้างได้แบบไดนามิกเพื่อทำการทดสอบอินเตอร์เฟสตรวจสอบบนพารามิเตอร์อินเตอร์เฟสตาม JSON-Schema และสถานะการทดสอบและเวลาตอบสนองของอินเตอร์เฟสสามารถบันทึกได้ ตัวแก้ไข JSON แบบง่ายมีฟังก์ชั่นการตรวจสอบการเข้าสู่ระบบและการดีบักอินเตอร์เฟสสามารถทำได้หลังจากเข้าสู่ระบบเซิร์ฟเวอร์จำลองตอบกลับคำขอตามเซิร์ฟเวอร์ API และจะได้รับการอัปเดตโดยอัตโนมัติเมื่อมีการอัปเดตอินเทอร์เฟซ
คำถามบางอย่าง
Node.js เป็นปีกของวิศวกรส่วนหน้าและฉันควรจะเป็นเทวดาหรือปีศาจที่มีปีกหรือไม่? ขึ้นอยู่กับว่าปัญหาที่เกิดจากการใช้สามารถแก้ไขได้หรือไม่
ก่อนอื่นภาระงานที่ปลายด้านหน้าจะเพิ่มขึ้นอย่างไม่ต้องสงสัย แต่ค่าใช้จ่ายในการสื่อสารจะลดลง ความเสถียรของเซิร์ฟเวอร์ของ node.js เธรดเดี่ยวนั้นไม่ดีพอ แต่ความทนทานของรหัสและบันทึกที่สมบูรณ์แบบสามารถหลีกเลี่ยงได้อย่างมีประสิทธิภาพ โทรกลับ มีวิธีแก้ไขปัญหานี้มากเกินไปรวมถึงโมดูล q/async ของ node.js และ ES6/ES7 Node.js ดีบัก แม้ว่าฉันจะปฏิเสธ IDE เสมอ แต่ฉันต้องยอมรับว่า Webstorm นั้นสะดวกมากสำหรับการดีบัก การตรวจสอบโหนดที่ฉันใช้ก็ค่อนข้างดีอินเตอร์เฟสนั้นคล้ายกับเครื่องมือนักพัฒนาโครเมี่ยมและดูค่อนข้างคุ้นเคย
หากคุณเป็นโปรแกรมเมอร์แบ็กเอนด์คุณควรมีแนวโน้มที่จะรองรับโหนด การทำงานของการรวมอินเตอร์เฟสถูกส่งมอบให้กับเซิร์ฟเวอร์ส่วนหน้าเพื่อการประมวลผลและระดับการมีเพศสัมพันธ์กับส่วนหน้าจะลดลงอย่างมากและปริมาณงานและประสิทธิภาพการทำงานจะลดลง
มีสองจุดที่จะได้รับประสบการณ์
แม้ว่าการใช้ Node.js มีค่าใช้จ่ายในการเรียนรู้ที่แน่นอน แต่ก็ยังเป็นมิตรกับนักพัฒนาส่วนหน้า ยิ่งไปกว่านั้นหากใช้ Node.js ในส่วนหน้าทั้งเนื้อหาทางเทคนิคและปริมาณงานจะได้รับการปรับปรุงดังนั้นจึงเพิ่มความสำคัญของงาน เฉพาะเมื่อนักพัฒนาปัจจุบันสามารถสร้างมูลค่าได้มากขึ้นมีสิทธิ์เรียกร้องเงินเดือนที่สูงขึ้น ขอแนะนำให้ให้คำแนะนำน้อยลงและให้แผนความเป็นไปได้มากขึ้นในที่ทำงานและดำเนินการวิจัยล่วงหน้าทางเทคนิคแทนที่จะเขียน HelloWorld อย่างง่าย
สรุป
บางคนอาจบอกว่าชุดของสิ่งที่คุณแนะนำนั้นซับซ้อนมากและมันลำบากเกินกว่าที่จะใช้ดังนั้นจึงเป็นการดีกว่าที่จะสื่อสารแบบตัวต่อตัว สำหรับความสงสัยดังกล่าวฉันสามารถใช้ตัวอย่างที่กล่าวถึงโดยวิศวกร UI อาวุโสของ Tencent Yu Guo ใน "การฝึกฝนตนเองของ Web Full Stack Engineers" ครั้งหนึ่งเมื่อคนส่วนหน้ารับผิดชอบ บริษัท เล็ก ๆ ทางโทรศัพท์ถามเขาว่าจะจัดการรหัสได้อย่างไรอีกฝ่ายหนึ่งกล่าวว่าเขาจะใช้ FTP เพื่ออัปโหลดโดยตรงและบ่นว่าผู้ใต้บังคับบัญชาของเขาอัปเดตรหัสผิดเสมอ เขายังถามเขาว่าทำไมเขาถึงไม่ใช้ SVN หรือ Git และเขาบอกว่ามันจะง่ายกว่าที่จะอัปเดตด้วยตนเอง ความจริงของเรื่องนี้คือคำตอบของฉันสำหรับคำถาม ~
ที่อยู่ดาวน์โหลด ppt