มีเพียงไม่กี่คนที่ไม่ชอบกรอบงาน แต่แม้ว่าคุณจะเป็นหนึ่งในนั้นคุณควรจดบันทึกและนำคุณสมบัติที่ทำให้ชีวิตง่ายขึ้นเล็กน้อย
ฉันไม่เห็นด้วยกับการใช้กรอบ ในอดีตที่ผ่านมา . อย่างไรก็ตามเมื่อเร็ว ๆ นี้ฉันมีประสบการณ์ในการทำงานกับ ตอบสนอง และ เชิงมุม ในบางโครงการของฉัน สองสามครั้งแรกที่ฉันเปิดโปรแกรมแก้ไขโค้ดและเริ่มเขียนโค้ดใน Angular มันรู้สึกแปลกและไม่เป็นธรรมชาติ โดยเฉพาะอย่างยิ่งหลังจากการเข้ารหัสมานานกว่าสิบปีโดยไม่ใช้กรอบใด ๆ หลังจากนั้นไม่นานฉันก็ตัดสินใจที่จะเรียนรู้เทคโนโลยีเหล่านี้ ความแตกต่างใหญ่อย่างหนึ่งที่เห็นได้ชัดอย่างรวดเร็วนั่นคือมันง่ายมากที่จะจัดการ DOM ปรับลำดับของโหนดได้ง่ายเมื่อจำเป็นและไม่ต้องใช้เพจและเพจของโค้ดในการสร้าง UI
แม้ว่าฉันจะยังชอบอิสระในการไม่ยึดติดกับกรอบงานหรือสถาปัตยกรรม แต่ฉันก็ไม่สามารถเพิกเฉยต่อความจริงที่ว่าการสร้างองค์ประกอบ DOM ในองค์ประกอบเดียวนั้นสะดวกกว่ามาก ผมจึงเริ่มมองหาวิธีที่จะเลียนแบบประสบการณ์ใน vanilla JS เป้าหมายของฉันคือดึงความคิดบางส่วนจาก React และแสดงให้เห็นว่าหลักการเดียวกันนี้สามารถนำไปใช้ใน JavaScript ธรรมดาได้อย่างไร (มักเรียกว่า vanilla JS) เพื่อให้ชีวิตของนักพัฒนาง่ายขึ้นเล็กน้อย มาสร้างแอปง่ายๆสำหรับเรียกดูโครงการ GitHub กัน
การขุดข้อมูลในโซเชียลเน็ตเวิร์ก
แอพที่เรากำลังสร้าง
ไม่ว่าเราจะสร้างส่วนหน้าโดยใช้ JavaScript ด้วยวิธีใดเราจะเข้าถึงและจัดการ DOM สำหรับแอปพลิเคชันของเราเราจะต้องสร้างตัวแทนของแต่ละที่เก็บ (ภาพขนาดย่อชื่อและคำอธิบาย) และเพิ่มลงใน DOM เป็นองค์ประกอบรายการ เราจะใช้ไฟล์ GitHub Search API เพื่อดึงผลลัพธ์ของเรา และเนื่องจากเรากำลังพูดถึง JavaScript เรามาค้นหาที่เก็บ JavaScript กัน เมื่อเราสอบถามไฟล์ ไฟ เราได้รับการตอบสนอง JSON ต่อไปนี้:
{ 'total_count': 398819, 'incomplete_results': false, 'items': [ { 'id': 28457823, 'name': 'freeCodeCamp', 'full_name': 'freeCodeCamp/freeCodeCamp', 'owner': { 'login': 'freeCodeCamp', 'id': 9892522, 'avatar_url': 'https://avatars0.githubusercontent.com/u/9892522?v=4', 'gravatar_id': '', 'url': 'https://api.github.com/users/freeCodeCamp', 'site_admin': false }, 'private': false, 'html_url': 'https://github.com/freeCodeCamp/freeCodeCamp', 'description': 'The https://freeCodeCamp.org open source codebase '+ 'and curriculum. Learn to code and help nonprofits.', // more omitted information }, //... ] } วิธีการของ React
React ทำให้การเขียนองค์ประกอบ HTML ลงในหน้านั้นง่ายมากและเป็นหนึ่งในคุณสมบัติที่ฉันอยากมีมาตลอดในขณะที่เขียนส่วนประกอบใน JavaScript ล้วน ๆ React ใช้ JSX ซึ่งคล้ายกับ HTML ทั่วไปมาก
อย่างไรก็ตามนั่นไม่ใช่สิ่งที่เบราว์เซอร์อ่าน
ภายใต้ประทุน React จะแปลง JSX เป็นการเรียกจำนวนมากเป็น React.createElement ฟังก์ชัน มาดูตัวอย่าง JSX โดยใช้รายการหนึ่งจาก GitHub API และดูว่าแปลเป็นอะไร
วิธีรับข้อมูล Twitter เพื่อการวิเคราะห์
{item.name} {item.description}
; ; React.createElement( 'div', { className: 'repository' }, React.createElement( 'div', null, item.name ), React.createElement( 'p', null, item.description ), React.createElement( 'img', { src: item.owner.avatar_url } ) ); JSX นั้นง่ายมาก คุณเขียนโค้ด HTML ปกติและฉีดข้อมูลจากออบเจ็กต์โดยการเพิ่มวงเล็บปีกกา โค้ด JavaScript ภายในวงเล็บจะถูกเรียกใช้งานและค่าจะถูกแทรกใน DOM ที่เป็นผลลัพธ์ ข้อดีอย่างหนึ่งของ JSX คือ React จะสร้าง DOM เสมือน (การแสดงเสมือนของเพจ) เพื่อติดตามการเปลี่ยนแปลงและการอัปเดต แทนที่จะเขียน HTML ใหม่ทั้งหมด React จะแก้ไข DOM ของเพจทุกครั้งที่มีการอัปเดตข้อมูล นี่เป็นหนึ่งในประเด็นหลักที่ React สร้างขึ้นเพื่อแก้ปัญหา
วิธี jQuery
นักพัฒนาเคยใช้ jQuery มาก ฉันอยากจะพูดถึงที่นี่เพราะมันยังคงเป็นที่นิยมและเพราะว่ามันค่อนข้างใกล้เคียงกับโซลูชันใน JavaScript แท้ๆ jQuery ได้รับการอ้างอิงไปยังโหนด DOM (หรือชุดของโหนด DOM) โดยการสอบถาม DOM นอกจากนี้ยังรวมการอ้างอิงนั้นด้วยฟังก์ชันต่างๆสำหรับการแก้ไขเนื้อหา
แม้ว่า jQuery จะมีเครื่องมือในการสร้าง DOM ของตัวเอง แต่สิ่งที่ฉันเห็นบ่อยที่สุดคือการต่อ HTML เข้าด้วยกัน ตัวอย่างเช่นเราสามารถแทรกโค้ด HTML ลงในโหนดที่เลือกโดยเรียก html() ฟังก์ชัน ตาม เอกสาร jQuery หากเราต้องการเปลี่ยนเนื้อหาของ div โหนดกับคลาส demo-container เราสามารถทำได้ดังนี้:
$( 'div.demo-container' ).html( 'All new content. You bet!
' ); วิธีนี้ช่วยให้สร้างองค์ประกอบ DOM ได้ง่าย อย่างไรก็ตามเมื่อเราต้องการอัปเดตโหนดเราจำเป็นต้องค้นหาโหนดที่เราต้องการหรือ (โดยปกติมากกว่า) จะกลับไปสร้างข้อมูลโค้ดใหม่ทั้งหมดเมื่อจำเป็นต้องมีการอัปเดต
แนวทาง DOM API
JavaScript ในเบราว์เซอร์มีอยู่ในตัว DOM API ที่ช่วยให้เราสามารถเข้าถึงโดยตรงในการสร้างแก้ไขและลบโหนดในเพจ สิ่งนี้สะท้อนให้เห็นในแนวทางของ React และด้วยการใช้ DOM API เราจะเข้าใกล้ประโยชน์ของแนวทางนั้นมากขึ้นอีกขั้นหนึ่ง เรากำลังแก้ไขเฉพาะองค์ประกอบของหน้าที่จำเป็นต้องเปลี่ยนแปลงเท่านั้น อย่างไรก็ตาม React ยังติดตาม DOM เสมือนที่แยกต่างหาก จากการเปรียบเทียบความแตกต่างระหว่าง DOM เสมือนจริงและ DOM จริงแล้ว React จะสามารถระบุได้ว่าส่วนใดที่ต้องการการปรับเปลี่ยน
บางครั้งขั้นตอนพิเศษเหล่านี้ก็มีประโยชน์ แต่ก็ไม่เสมอไปและการจัดการ DOM โดยตรงจะมีประสิทธิภาพมากขึ้น เราสามารถสร้างโหนด DOM ใหม่โดยใช้ _document.createElement_ ซึ่งจะส่งคืนการอ้างอิงไปยังโหนดที่สร้างขึ้น การติดตามข้อมูลอ้างอิงเหล่านี้ทำให้เรามีวิธีง่ายๆในการแก้ไขเฉพาะโหนดที่มีส่วนที่ต้องอัปเดต
โดยใช้โครงสร้างและแหล่งข้อมูลเดียวกันกับในตัวอย่าง JSX เราสามารถสร้าง DOM ได้ด้วยวิธีต่อไปนี้:
var item = document.createElement('div'); item.className = 'repository'; var nameNode = document.createElement('div'); nameNode.innerHTML = item.name item.appendChild(nameNode); var description = document.createElement('p'); description.innerHTML = item.description; item.appendChild(description ); var image = new Image(); Image.src = item.owner.avatar_url; item.appendChild(image); document.body.appendChild(item); หากสิ่งเดียวในใจของคุณคือประสิทธิภาพของการเรียกใช้โค้ดวิธีนี้ก็ดีมาก อย่างไรก็ตามประสิทธิภาพไม่ได้วัดเพียงความเร็วในการดำเนินการเท่านั้น แต่ยังช่วยในการบำรุงรักษาความสามารถในการปรับขนาดและความเป็นพลาสติก ปัญหาของแนวทางนี้คือมันมีความละเอียดมากและบางครั้งก็ซับซ้อน เราจำเป็นต้องเขียนการเรียกใช้ฟังก์ชันมากมายแม้ว่าเราจะสร้างโครงสร้างพื้นฐานก็ตาม ข้อเสียใหญ่ประการที่สองคือจำนวนตัวแปรที่สร้างและติดตาม สมมติว่าคอมโพเนนต์ที่คุณกำลังทำงานอยู่ประกอบด้วยองค์ประกอบ DOM 30 รายการคุณจะต้องสร้างและใช้องค์ประกอบและตัวแปร DOM 30 รายการ คุณสามารถนำบางส่วนกลับมาใช้ใหม่และเล่นกลโดยเสียค่าใช้จ่ายในการบำรุงรักษาและความเป็นพลาสติก แต่มันอาจจะยุ่งเหยิงได้อย่างรวดเร็วจริงๆ
ข้อเสียที่สำคัญอีกประการหนึ่งเกิดจากจำนวนบรรทัดของโค้ดที่คุณต้องเขียน เมื่อเวลาผ่านไปการย้ายองค์ประกอบจากพ่อแม่ลูกหนึ่งไปยังอีกลูกจะยากขึ้นเรื่อย ๆ นั่นเป็นสิ่งหนึ่งที่ฉันประทับใจมากจาก React ฉันสามารถดูไวยากรณ์ JSX และใช้เวลาไม่กี่วินาทีซึ่งมีโหนดอยู่ที่ไหนและเปลี่ยนแปลงได้หากจำเป็น และแม้ว่าในตอนแรกอาจดูเหมือนไม่ใช่เรื่องใหญ่ แต่โครงการส่วนใหญ่มีการเปลี่ยนแปลงตลอดเวลาซึ่งจะทำให้คุณมองหาวิธีที่ดีกว่า
วิธีการเขียนโค้ดที่ดี
โซลูชันที่เสนอ
การทำงานโดยตรงกับ DOM จะได้ผลและทำให้งานเสร็จ แต่ก็ทำให้การสร้างเพจมีความละเอียดมากโดยเฉพาะอย่างยิ่งเมื่อเราต้องการเพิ่มแอตทริบิวต์ HTML และโหนดรัง ดังนั้นแนวคิดก็คือเพื่อรวบรวมประโยชน์บางประการของการทำงานกับเทคโนโลยีเช่น JSX และทำให้ชีวิตของเราง่ายขึ้น ข้อดีที่เราพยายามทำซ้ำมีดังต่อไปนี้:
- เขียนโค้ดในไวยากรณ์ HTML เพื่อให้การสร้างองค์ประกอบ DOM ง่ายต่อการอ่านและแก้ไข
- เนื่องจากเราไม่ได้ใช้ DOM เสมือนที่เทียบเท่าเหมือนในกรณีของ React เราจึงต้องมีวิธีง่ายๆในการระบุและติดตามโหนดที่เราสนใจ
ฟังก์ชั่นง่ายๆที่สามารถทำได้โดยใช้ข้อมูลโค้ด HTML
Browser.DOM = function (html, scope) { // Creates empty node and injects html string using .innerHTML // in case the variable isn't a string we assume is already a node var node; if (html.constructor === String) { var node = document.createElement('div'); node.innerHTML = html; } else { node = html; } // Creates of uses and object to which we will create variables // that will point to the created nodes var _scope = scope || {}; // Recursive function that will read every node and when a node // contains the var attribute add a reference in the scope object function toScope(node, scope) { var children = node.children; for (var iChild = 0; iChild 0) { var _property = names.shift(); if (names.length == 0) { obj[_property] = children[iChild]; } else { if (!obj.hasOwnProperty(_property)){ obj[_property] = {}; } obj = obj[_property]; } } } toScope(children[iChild], scope); } } toScope(node, _scope); if (html.constructor != String) { return html; } // If the node in the highest hierarchy is one return it if (node.childNodes.length == 1) { // if a scope to add node variables is not set // attach the object we created into the highest hierarchy node // by adding the nodes property. if (!scope) { node.childNodes[0].nodes = _scope; } return node.childNodes[0]; } // if the node in highest hierarchy is more than one return a fragment var fragment = document.createDocumentFragment(); var children = node.childNodes; // add notes into DocumentFragment while (children.length > 0) { if (fragment.append){ fragment.append(children[0]); }else{ fragment.appendChild(children[0]); } } fragment.nodes = _scope; return fragment; } ความคิดเรียบง่าย แต่ทรงพลัง เราส่งฟังก์ชัน HTML ที่เราต้องการสร้างเป็นสตริงในสตริง HTML เราจะเพิ่มแอตทริบิวต์ var ให้กับโหนดที่เราต้องการให้มีการอ้างอิงที่สร้างขึ้นสำหรับเรา พารามิเตอร์ที่สองคือออบเจ็กต์ที่จะจัดเก็บข้อมูลอ้างอิงเหล่านั้น หากไม่ได้ระบุเราจะสร้างคุณสมบัติ 'โหนด' บนโหนดที่ส่งคืนหรือส่วนของเอกสาร (ในกรณีที่โหนดลำดับชั้นสูงสุดมากกว่าหนึ่งโหนด) ทุกอย่างทำได้โดยใช้โค้ดน้อยกว่า 60 บรรทัด
ฟังก์ชันทำงานในสามขั้นตอน:
- สร้างโหนดว่างใหม่และใช้ innerHTML ในโหนดใหม่นั้นเพื่อสร้างโครงสร้าง DOM ทั้งหมด
- วนซ้ำบนโหนดและหากแอตทริบิวต์ var มีอยู่ให้เพิ่มคุณสมบัติในวัตถุขอบเขตที่ชี้ไปยังโหนดที่มีแอตทริบิวต์นั้น
- ส่งคืนโหนดบนสุดในลำดับชั้นหรือส่วนของเอกสารในกรณีที่มีมากกว่าหนึ่ง
โค้ดของเราสำหรับการเรนเดอร์ตัวอย่างตอนนี้เป็นอย่างไร?
var UI = {}; var template = ''; template += ' ' template += ' '; template += ' ' template += ' ![]()
' template += ' '; var item = Browser.DOM(template, UI); UI.name.innerHTML = data.name; UI.text.innerHTML = data.description; UI.image.src = data.owner.avatar_url; ขั้นแรกเรากำหนดวัตถุ (UI) ที่เราจะจัดเก็บการอ้างอิงไปยังโหนดที่สร้างขึ้น จากนั้นเราจะสร้างเทมเพลต HTML ที่เราจะใช้เป็นสตริงโดยทำเครื่องหมายโหนดเป้าหมายด้วยแอตทริบิวต์ 'var' หลังจากนั้นเราเรียกใช้ฟังก์ชัน Browser.DOM ด้วยเทมเพลตและวัตถุว่างที่จะเก็บข้อมูลอ้างอิง สุดท้ายเราใช้การอ้างอิงที่เก็บไว้เพื่อวางข้อมูลไว้ในโหนด
วิธีนี้ยังแยกการสร้างโครงสร้าง DOM และการแทรกข้อมูลลงในขั้นตอนแยกต่างหากซึ่งจะช่วยในการจัดระเบียบรหัสและโครงสร้างที่ดี สิ่งนี้ทำให้เราสามารถสร้างโครงสร้าง DOM แยกกันและกรอกข้อมูล (หรืออัปเดต) ข้อมูลเมื่อพร้อมใช้งาน
สรุป
ในขณะที่พวกเราบางคนไม่ชอบความคิดที่จะเปลี่ยนไปใช้กรอบงานและมอบการควบคุม แต่สิ่งสำคัญคือเราต้องตระหนักถึงประโยชน์ที่กรอบเหล่านั้นนำมาให้ มีเหตุผลว่าทำไมพวกเขาถึงได้รับความนิยมมาก
และในขณะที่กรอบงานอาจไม่เหมาะกับสไตล์หรือความต้องการของคุณเสมอไปฟังก์ชันและเทคนิคบางอย่างสามารถนำมาใช้เลียนแบบหรือบางครั้งก็แยกออกจากกรอบงาน บางสิ่งบางอย่างจะสูญหายไปในการแปลเสมอ แต่สามารถหาและใช้งานได้มากมายในราคาเพียงเศษเสี้ยวของกรอบงาน
ตัวเลือกหุ้นมีราคาเท่าไร
ทำความเข้าใจพื้นฐาน
JSX คืออะไร
JSX เป็นคอมโพเนนต์ React ที่ลดความซับซ้อนของไวยากรณ์และกระบวนการสร้างเทมเพลต HTML และองค์ประกอบ DOM JSX เขียนเป็น HTML แบบอินไลน์ในซอร์สโค้ด แต่ได้รับการทับศัพท์เป็นคำสั่ง JavaScript สำหรับการสร้าง DOM จึงได้รับสิ่งที่ดีที่สุดจากทั้งสองโลก
DOM เสมือนใน React คืออะไร?
Virtual DOM คือตัวแทนของ React ของ DOM โดยการเปรียบเทียบกับเพจ DOM คุณสามารถติดตามการเปลี่ยนแปลงและแก้ไขเฉพาะส่วนของเพจที่จำเป็นต้องแก้ไขจริงๆแทนที่จะจัดคิวส่วนใหญ่ของเพจสำหรับการแยกวิเคราะห์และการแสดงผล
