การเชื่อมต่ออย่างแน่นหนาระหว่าง Javascript, HTML และ CSS: วิธีการที่ทันสมัยกว่านี้ไหม?

เป็นเรื่องธรรมดามากที่จะเห็น Javascript ผูกกับตัวเลือกบางตัวเพื่อค้นหาองค์ประกอบจัดเก็บข้อมูลและฟังเหตุการณ์ เป็นเรื่องปกติที่จะเห็นตัวเลือกเดียวกันนี้ที่ใช้ในการจัดแต่งทรงผม

jQuery (และเครื่องมือเลือก Sizzle) สนับสนุนและส่งเสริมสิ่งนี้โดยอ้างอิงองค์ประกอบที่มีไวยากรณ์ประเภท CSS ดังนั้นเทคนิคนี้จึงยากที่จะ 'ไม่เข้าใจ' (หรือ refactor) เมื่อสร้างโครงการ

ฉันมาทำความเข้าใจว่านี่เป็นผลมาจากประวัติของการพัฒนา HTML และ Javascript และเบราว์เซอร์นั้นถูกสร้างขึ้นเพื่อใช้ / แยกวิเคราะห์อย่างมีประสิทธิภาพและแสดงการเชื่อมต่อแบบนี้ แต่เมื่อเว็บไซต์มีความซับซ้อนมากขึ้นความเป็นจริงนี้อาจทำให้เกิดความยุ่งยากในการจัดระเบียบและบำรุงรักษาเลเยอร์แยกเหล่านี้

คำถามของฉันคือ: สามารถและควรหลีกเลี่ยงในเว็บไซต์ทันสมัยหรือไม่

ถ้าฉันยังใหม่ต่อการพัฒนา Front-end และฉันต้องการเรียนรู้สิ่งที่ 'ถูกวิธี' มันคุ้มค่าที่จะเรียนรู้ที่จะแยกและหลีกเลี่ยงการพึ่งพาเช่นนั้นตั้งแต่เริ่มต้น? นี่หมายถึงการหลีกเลี่ยง jQuery ในความโปรดปรานของห้องสมุดที่ส่งเสริมโครงสร้างที่แยกออกจากกันมากขึ้นหรือไม่?

ไม่มีทางที่จะหลีกเลี่ยงสิ่งนั้นได้ พวกเขาเป็นคู่เพราะพวกเขามีปฏิสัมพันธ์ซึ่งกันและกัน หากจาวาสคริปต์ของคุณมุ่งมั่นที่จะทำการจัดการ DOM ประเภทใดก็ต้องมีวิธีในการอ้างอิง DOM

มีการประชุมต่าง ๆ สำหรับมัน

API ระดับ 2 DOM จัดเตรียมเมธอด getElementById, getElementByTagName และ getElementsByName จนถึงทุกวันนี้เหล่านี้เป็นผู้เขียนของการสำรวจเส้นทาง DOM ทุกชนิด ตัวเลือก jQuery นักเล่นอื่น ๆ ทั้งหมดจะรวมกันในที่สุดและ / หรือข้ามเส้นทางของแต่ละโหนด DOM (นี่คือวิธีที่จะทำให้ getByClassName)

ไม่มีทางลัดอื่น ๆ Javascript จำเป็นต้องรู้ว่าต้องทำอะไรและที่ไหน โดยทั่วไปถ้าองค์ประกอบมี id หรือคลาสที่เกี่ยวข้องเฉพาะในการเขียนสคริปต์ผู้คนจำนวนมากจะนำหน้าด้วยjs-หรืออื่น ๆ ที่ชัดเจนธง

ระเบียบใหม่ที่ใหม่กว่าคือการเลือก data-attribute

<ul data-myapp-sortable="true">

jQuery('[data-myapp-sortable]').makeSortable();

โดยทั่วไปแล้ว data-attribute จะถูกใช้เพื่อจุดประสงค์ในการเขียนสคริปต์และการเลือกการใช้ที่เหมาะสม ข้อเสียเปรียบคือสิ่งนี้ช้ากว่าการใช้ getElementById ()

อีกวิธีคือวิธีที่ใช้โดย angularJS ซึ่งสร้างมุมมองแบบจำลอง ในข้อตกลงนี้การใช้งานสคริปต์ชนิดใด ๆ จะถูกระบุโดยคุณลักษณะที่กำหนดไว้เป็นพิเศษเช่นng-disabled ng-hrefและอีกมากมาย คุณไม่เพิ่มตัวเลือกในจาวาสคริปต์ของคุณ เอกสาร HTML จะกลายเป็นสิทธิหลักในสิ่งที่สคริปต์และวิธีการและจาวาสคริปต์ทำงานบนมันเป็นนามธรรม มันเป็นวิธีการที่ดี แต่เห็นได้ชัดว่ามีช่วงการเรียนรู้สูงกว่าวิธีก่อนหน้านี้ และต้องพิจารณาประสิทธิภาพอีกครั้ง

แต่ไม่เคยคิดว่าคุณสามารถเขียน HTML และ javascript แบบโต้ตอบและอย่างใดอย่างหนึ่งมีทั้งสองส่วนที่ไม่ทราบเกี่ยวกับอื่น ๆ มันเกี่ยวกับวิธีที่คุณสามารถ จำกัด การอ้างอิงถึงการพึ่งพา

หากคุณยินดีที่จะละทิ้งการโต้ตอบที่คุณได้รับคุณสามารถหลีกเลี่ยง Javascript ได้ทั้งหมด กรอบการทำงานเช่น ASP.NET MVC นั้นดีมากในการแสดงหน้าเว็บที่มีเพียง HTML, CSS และปุ่ม SUBMIT

ตกลง. บางทีมันอาจจะสุดขั้ว

การแยกตัวในเว็บแอปพลิเคชันเกิดขึ้นแล้วในหลายระดับ แอปพลิเคชัน REST อนุญาตให้คุณกำหนดแอปพลิเคชันของคุณในแง่ของ "ทรัพยากรของเว็บ" ที่เกี่ยวข้องกับ URL ดูโมเดลช่วยให้คุณสามารถนำเสนอข้อมูลไปยัง UI ที่แยกออกจากโมเดลโดเมน แต่มีรูปร่างที่คุณต้องการแสดงอย่างถูกต้อง เลเยอร์บริการอนุญาตให้สลับ UI หนึ่งรายการสำหรับอีกรายการหนึ่งและอื่น ๆ

ในอดีตมีการแลกเปลี่ยนระหว่างการโต้ตอบและการแต่งงานกันเสมอ ยิ่งหน้าเว็บของคุณมีการโต้ตอบมากขึ้นเท่าไหร่ก็ยิ่งมีการเชื่อมโยงกับแอปพลิเคชันได้แน่นขึ้นเท่านั้น แต่ตรรกะการโต้ตอบในหน้าเว็บนั้น จำกัด อยู่ที่หน้าเว็บเท่านั้น การมีเพศสัมพันธ์กับเซิร์ฟเวอร์จะเกิดขึ้นผ่าน POST หรือ AJAX ดังนั้นฉันไม่แน่ใจว่าคุณควรกังวลมากเกินไปกับการมีเพศสัมพันธ์ในระดับ Javascript นอกเหนือไปจากการใส่ใจกับวิธีที่แพ็กเก็ตข้อมูลถูกส่งผ่านระหว่างเบราว์เซอร์และเซิร์ฟเวอร์

มากที่สุด "ทันสมัย" วิธีการ (เช่นรสชาติของสัปดาห์) อาจจะเป็นการใช้งานสปา

Martin Fowler อธิบายวิธีการหนึ่งในวิธีนี้ในฐานะDOM แบบแยกซึ่งคุณแยก DOM JavaScript ของคุณออกจากจาวาสคริปต์หน้าตรรกะของคุณ

Application Logic <----> DOM Manipulation <----> DOM / HTML

ไม่ไม่ควรหลีกเลี่ยงการใช้ตัวเลือกคลาสองค์ประกอบและ ID มีการใช้ไวยากรณ์เนื่องจากตัวเลือก CSS นั้นมีความเป็นผู้ใหญ่สูงและเป็นที่ยอมรับในภาษาโดเมนและการออกแบบทั่วไปทำให้การแบ่งปันแบบจำลองทางตรรกะร่วมกันของหน้าระหว่างโปรแกรมและการออกแบบนั้นเป็นเรื่องที่ดีมาก

แม้ว่ามันจะเป็นไปได้ที่จะใช้ไวยากรณ์ผิด ๆ และสร้างแอปพลิเคชันที่น่ากลัวและไม่สามารถรักษาได้ แต่ก็เป็นไปได้โดยไม่คำนึงถึงภาษาหรือชุดเครื่องมือของคุณ

บางคนต้องการสร้างอินเตอร์เฟสผู้จัดการเส้นทาง jQuery สำหรับเลเยอร์ทางอ้อมและแคชเลเยอร์ไปยัง dom

pathMgr.register(name,selector [,isDynamic=false]);
pathMgr.get(name [,refresh]);

จากนั้น

String.prototype.reg([isDynamic=false]);
String.prototype.get(name [,refresh]);

ดังนั้น,

// at init....
var pathMgr=new PathMgr();
'sidebar-links #sidebar a'.reg();// new registery of selector '#sidebar a' under name 'sidebar-links'
// more, more


// in code
'sidebar-links'.get().css(etc...);
//or
'sidebar-links'.addStyleRule({});