ฉันบ่นเมื่อเร็ว ๆ นี้ ทุกคนรู้ว่าส่วนหน้าเว็บนั้นหนักมากเมื่อเทียบกับเมื่อไม่กี่ปีที่ผ่านมา เฟรมเวิร์ก JS ต่าง ๆ วัตถุต่าง ๆ และหลายโครงการโมดูลสาธารณะจะถูกสกัด
การแสดง UI ของโมดูลเหล่านี้เหมือนกันและความแตกต่างคือตรรกะพื้นหลัง ตัวอย่างเช่นเมื่อเราทำธุรกิจในการเดินทางขององค์กรเรามักจะมีโมดูลสาธารณะ JS ของศูนย์ต้นทุน ลูกค้ากรอกข้อมูลในศูนย์ต้นทุนนี้เมื่อจองตั๋วอากาศ ศูนย์ต้นทุนนี้จัดจำหน่ายในการจองสิ้นสุดเช่นออนไลน์ออฟไลน์และแอพซึ่งสะดวกสำหรับการชำระรายเดือนกับ บริษัท ลูกค้าในระยะต่อมา
นอกจากนี้เรายังรู้ว่าหลังจากโครงการมีขนาดใหญ่ขึ้นซับซ้อนและมีปัญหามากมายเกิดขึ้น เช่นเดียวกับทฤษฎีในเว็บข้อมูลส่วนหน้าทั้งหมดนั้นไม่สามารถรักษาได้ดังนั้นข้อมูลอินเทอร์เฟซของทีมอื่นจึงไม่เหมือนกัน เมื่อโครงการยังเด็กมันก็ไม่ได้ไม่มีความมั่นใจและมันจะบันทึกบันทึกเมื่อมีข้อผิดพลาดของตรรกะเท่านั้น กระบวนการทางธุรกิจปกติมักไม่ค่อยมีการบันทึก ท้ายที่สุดบันทึกข้อมูลดูไม่น่าดูและยังใช้แบนด์วิดท์เซิร์ฟเวอร์และยังลากประสิทธิภาพของเว็บลง
แต่โครงการใหญ่ เมื่อคุณพบข้อผิดพลาดแปลก ๆ ในโครงการวันหนึ่งคุณพึ่งพาบันทึกที่ไม่สมบูรณ์และในที่สุดก็ติดตามเส้นอินเตอร์เฟสทีละเส้นด้วยตาเปล่า อย่างไรก็ตามมีพารามิเตอร์มากเกินไปและเป็นไปไม่ได้ที่จะกู้คืนข้อมูลพารามิเตอร์อินเตอร์เฟสได้อย่างถูกต้อง อย่างไรก็ตามคุณมีความมั่นใจ 100% ว่าเป็นปัญหาการส่งคืนของอินเทอร์เฟซแน่นอน แต่คุณไม่สามารถรับข้อความที่สมบูรณ์ได้ ในเวลานี้คุณไม่พบผู้ให้บริการอินเทอร์เฟซ ฉันทำอะไรไม่ถูกในเวลานั้น มันจะดีถ้าคุณคิดว่ามันจะดีกว่าถ้ามีการเข้าสู่ระบบทุกบรรทัด
หลังจากเรียนรู้บทเรียนแนวโน้มของบันทึกกระบวนการบันทึกได้รับความนิยมมากขึ้นเรื่อย ๆ และในที่สุดก็มีเหตุการณ์สำคัญในช่วงต้นปี ฉันพูดมากมายในวิธีที่สับสนว่าแบ็กเอนด์เว็บเป็นเช่นนี้ดังนั้นเราไม่จำเป็นต้องบันทึกบันทึกในส่วนหน้าปัจจุบันหรือไม่ เรารู้ว่าเนื่องจากเป็นโมดูล JS สาธารณะโมดูลนี้จะต้องมีการห่อหุ้มวิธีการบางอย่างด้วยตัวเองและเป็นไปไม่ได้ที่จะให้โปรแกรมของบุคคลที่สามใช้งานโหนดข้อความของตัวเองเช่นต่อไปนี้: ต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<!-โมดูลที่สาม->
บริษัท : <อินพุตประเภท = "ข้อความ" id = "บริษัท " value = "XXX Co. , Ltd. " -
ชื่อพนักงาน: <อินพุต Type = "text" id = "ชื่อผู้ใช้" value = "Zhang San" /> >>
-
<script type = "text/javascript">
// ศูนย์ต้นทุน
var costCenter = (ฟังก์ชัน () {
var Company = (document.getElementById ("บริษัท ") || "") && document.getElementById ("บริษัท ") ค่า;
var username = (document.getElementById ("ชื่อผู้ใช้") || "") && document.getElementById ("ชื่อผู้ใช้") ค่า;
var result = {
getInfo: function () {
return {บริษัท : บริษัท ชื่อผู้ใช้: ชื่อผู้ใช้};
-
การตรวจสอบ: function () {
ส่งคืนบูลีน (บริษัท && ชื่อผู้ใช้);
-
-
ผลการกลับมา;
-
</script>
เพื่อให้การดำเนินงานง่ายขึ้น UI ของบุคคลที่สามจะให้โหนด UI สำหรับชื่อ บริษัท และชื่อพนักงานและห่อหุ้มคลาส CostCenter เพื่อให้วิธีการอ่าน จะเห็นได้ว่าโปรแกรมที่กำหนดเวลาของฉันจำเป็นต้องอ่าน costCenter.getInfo ซึ่งมีบทบาทในการห่อหุ้ม
แต่ปัญหาเกิดขึ้นที่นี่ ในโครงการจริงค่าไม่สามารถรับได้ใน CostCenter เนื่องจากเหตุผลต่าง ๆ แน่นอนว่ามันอาจเป็นข้อผิดพลาดใน UI ทั่วไป
แต่ในเวลานั้นคุณไม่แน่ใจว่าได้รับค่าจริงหรือไม่ แต่มีเหตุผลแม้ว่าจะไม่ได้รับค่าในหลักการที่คุณไม่สามารถป้องกันการส่งคำสั่งซื้อได้ ดังนั้นในการติดตามข้อผิดพลาดอย่างละเอียดคุณเขียนคลาส Logcenter Singleton เพื่อบันทึกบันทึก โดยปกติจะมีวิธีนี้ในการใช้ JS เพื่อบันทึกบันทึก
<1> AJAX
วิธีนี้เป็นเรื่องง่ายที่จะคิด แต่ถ้าคุณใช้ xmlhttprequest ดั้งเดิมคุณต้องพิจารณาความเข้ากันได้ของเบราว์เซอร์ อย่างไรก็ตามหากคุณไม่ต้องการพื้นเมืองคุณต้องพึ่งพากรอบงานของบุคคลที่สามเช่น JQuery อย่างไรก็ตามในที่สุดก็ยังมีหลาย บริษัท ที่ไม่ได้ใช้ jQuery ดังนั้นสิ่งนี้จะต้องใช้ตามความต้องการที่แท้จริง
การคัดลอกรหัสมีดังนี้:
// Log Center
var logCenter = (ฟังก์ชัน () {
var result = {
ข้อมูล: ฟังก์ชั่น (ชื่อเรื่องข้อความ) {
// การดำเนินการ AJAX
$ .get ("http://xxx.com", {"title": title, "message": message}, function () {
}, "โพสต์");
-
-
ผลการกลับมา;
-
<2> ภาพ
มีวัตถุที่เรียกว่าภาพใน DOM ของเราดังนั้นเราจึงสามารถกำหนด SRC แบบไดนามิกให้กับวัตถุประสงค์ในการขอ URL พื้นหลังและในเวลาเดียวกันเราจำเป็นต้องส่งข้อมูลและข้อมูลข้อความไปยัง URL วิธีแบบไดนามิกในการถ่ายภาพนี้ไม่จำเป็นต้องพิจารณาปัญหาความเข้ากันได้ของเบราว์เซอร์ซึ่งดีมาก
การคัดลอกรหัสมีดังนี้:
// Log Center
var logCenter = (ฟังก์ชัน () {
var result = {
ข้อมูล: ฟังก์ชั่น (ชื่อเรื่องข้อความ) {
// การดำเนินการ AJAX
$ .get ("http://xxx.com", {"title": title, "message": message}, function () {
}, "โพสต์");
-
info_image: function (title, message) {
//ภาพ
var img = ภาพใหม่ ();
img.src = "http://www.baidu.com?title=" + title + "& message =" + ข้อความ + "& temp =" + (math.random () * 100000);
-
-
ผลการกลับมา;
-
ข้างต้นเป็นเนื้อหาหลักของบทความนี้และเราจะยังคงหารือกันในเชิงลึกในอนาคต