ฉันจะโน้มน้าวให้หัวหน้าของฉัน (และผู้พัฒนารายอื่น) ใช้ / พิจารณา JavaScript ที่ไม่สร้างความรำคาญได้อย่างไร

ฉันค่อนข้างใหม่ในทีมผู้พัฒนาของเรา

ฉันต้องการข้อโต้แย้งที่รัดกุมและ / หรือตัวอย่าง "หลุมพราง" ดังนั้นในที่สุดเจ้านายของฉันจะเข้าใจถึงข้อดีของ Unobtrusive JavaScript เพื่อให้เขาและคนอื่น ๆ ในทีมหยุดทำสิ่งนี้:

<input type="button" class="bow-chicka-wow-wow" 
       onclick="send_some_ajax(); return false;" value="click me..." />

และ

<script type="text/javascript">

function send_some_ajax()
{
  // bunch of code ... BUT using jQuery !!!
}
</script>

ฉันแนะนำให้ใช้ลวดลายธรรมดา:

<button id="ajaxer" type="button">click me...</button>

และ

<script type="text/javascript">

// since #ajaxer is also delivered via ajax, I bind events to document 
//  -> not the best practice but it's not the point....

$(document).on('click', '#ajaxer', function(ev) {
var $elem = $(this);
ev.preventDefault();

});

เหตุผลที่เจ้านายของฉัน (และคนอื่น ๆ ) ไม่ต้องการใช้วิธีนี้คือการตรวจสอบเหตุการณ์ใน FireBug (หรือเครื่องมือ Chrome Dev) นั้นไม่ง่ายอีกต่อไปเช่นกับ

<input type="text" name="somename" id="someid" onchange="performChange()">

เขาสามารถดูได้ทันทีว่าฟังก์ชั่นใดทำงานกับเหตุการณ์การเปลี่ยนแปลงและกระโดดไปทางขวาใน ไฟล์ JS ขนาดใหญ่เต็มรูปแบบของปาเก็ตตี้รหัส

ในกรณีของ JavaScript ที่ไม่สร้างความรำคาญสิ่งเดียวที่เขาจะเห็นคือ:

<input type="text" name="somename" id="someid" />

และเขาไม่รู้ว่ามีเหตุการณ์บางอย่างถ้ามีถูกผูกไว้กับองค์ประกอบนี้และฟังก์ชั่นที่จะถูกเรียก

ฉันกำลังมองหาวิธีแก้ปัญหาและพบว่า:

$(document).data('events') // or .. $(document).data('events').click

แต่ "วิธีการ" นี้ทำให้ใช้เวลา "นานเกินไป ... " เพื่อค้นหาว่าฟังก์ชันใดใช้ไฟในเหตุการณ์ใดดังนั้นฉันจึงถูกสั่งให้หยุดการเชื่อมโยงเหตุการณ์เช่นนั้น

ฉันขอให้คุณยกตัวอย่างหรือข้อดีที่แข็งแกร่งหรือคำแนะนำอื่น ๆ สำหรับ "ทำไมเราควรใช้ UJS"

ปรับปรุง:ข้อเสนอแนะเพื่อ "เปลี่ยนงาน" ไม่ใช่ทางออกที่ดี

UPDATE 2:ตกลงฉันไม่ได้แนะนำเท่านั้นที่จะใช้ jQuery เหตุการณ์ผูกพันฉันไม่ได้ หลังจากที่ฉันเขียน Event-Delegation ทั้งหมดเจ้านายก็มาหาฉันและถามฉันว่าทำไมฉันถึงได้มอบหมายงานอีเวนต์ด้วยแนวทางที่แตกต่างและวิธีการที่เขาไม่รู้

ฉันพูดถึงประโยชน์ที่ชัดเจนบางอย่างเช่น - มีฟิลด์อินพุต 15 ฟิลด์และทั้งหมดมีonchangeเหตุการณ์ (ไม่เพียง แต่บางฟิลด์ก็มีonkeyup) ดังนั้นจึงเป็นประโยชน์มากกว่าที่จะเขียนฟิลด์มอบหมายงานประเภทนี้สำหรับฟิลด์อินพุตทั้งหมด แทนที่จะทำ 15 ครั้งโดยเฉพาะอย่างยิ่งถ้า HTML ทั้งหมดจะแสดงผลด้วย PHP ของ echo ->echo '... <input type="text" id="someid" ... />...'

1. หยุดใช้ buzzwordsและลองสร้างข้อโต้แย้งที่แข็งแกร่งแทน แม้แต่หน้า Wikipedia สำหรับJavaScript ที่ไม่สร้างความรำคาญก็บอกว่าคำดังกล่าวไม่ได้ถูกกำหนดอย่างเป็นทางการ มันอาจเป็นคำศัพท์ที่ครอบคลุมสำหรับความคิดที่ดี แต่ถ้าฟังดูเหมือนแฟชั่นหรือเจ้านายของคุณและเพื่อนร่วมงานจะไม่ให้ความสนใจมากนัก ถ้าคุณยังคงทำอะไรบางอย่างที่พวกเขามองว่าไร้ประโยชน์พวกเขาอาจเริ่มลดความคิดที่ไม่เกี่ยวข้องอย่างสมบูรณ์ที่คุณสนับสนุน

2. หาสาเหตุที่คุณคิดว่าแนวคิด JavaScript ที่ไม่สร้างความรำคาญมีความสำคัญ เป็นเพราะคุณอ่านไหมว่าพวกเขาถือว่าเป็นแนวปฏิบัติที่ดีที่สุด? คุณพบปัญหาที่คุณไม่สามารถติดตามความคิดเหล่านี้ได้หรือไม่? การยอมรับความคิดเหล่านี้มีผลต่อกำไรของ บริษัท มากน้อยแค่ไหน

3. เข้าไปในหัวเจ้านายของคุณ ทำไมเขาถึงทำสิ่งต่าง ๆ ในแบบที่เขาทำและทำไมเขาถึงปฏิเสธการเปลี่ยนแปลงของคุณ? เขาอาจไม่ได้โง่และเขาอาจมีประสบการณ์มากกว่าที่คุณเป็นดังนั้นเขาอาจมีเหตุผลที่ดีในการทำสิ่งที่เขาทำ คุณได้พาดพิงถึงบางส่วนแล้ว - ติดตามกระทู้นั้นจนจบ จากนั้นหาว่าคำแนะนำของคุณจะปรับปรุงสิ่งที่เขากังวลมากที่สุดได้อย่างไรและอย่างไร

4. เคล็ดลับที่ 1:ผู้จัดการต้องการเงิน ยิ่งคุณสามารถผูกข้อเสนอแนะของคุณกับรายได้ที่เพิ่มขึ้นหรือลดการใช้จ่ายยิ่งส่งผลกระทบต่อการโต้แย้งของคุณจะมีมากขึ้น คำแนะนำ 2:เวลาคือเงิน เคล็ดลับที่ 3:โดยตัวของมันเองความสวยงามของโค้ดไม่สามารถทำเงินได้ ในทางตรงกันข้ามอันที่จริงแล้วต้องใช้เวลาในการทำให้โค้ดดูดี รหัสน่าเกลียดที่ใช้งานได้ดีนั้นใช้ได้ดีกับผู้จัดการส่วนใหญ่

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

6. ความเพ้อฝันเป็นสิ่งที่ดี แต่อย่าให้มันเข้าทาง มันสำคัญกว่าที่จะถูกมองว่าเป็นคนที่ทำสิ่งต่าง ๆ ได้ดีกว่านักเล่นแร่แปรธาตุที่บ่นเกี่ยวกับรูปแบบการเข้ารหัสที่ไม่สุภาพ โดยเฉพาะอย่างยิ่งถ้าคุณเป็นคนใหม่ หากคุณไม่สามารถฉุดลากกับ UJS ได้ในตอนนี้ให้ทำผลงานที่ดีแทนและค่อยๆสร้างเคสสำหรับการเปลี่ยนแปลงที่คุณต้องการเมื่อคุณได้รับความน่าเชื่อถือ

7. อ่านSwitch: วิธีการเปลี่ยนสิ่งที่เมื่อเปลี่ยนยาก มันจะช่วยให้คุณมีแนวคิดที่ดีมากขึ้นเกี่ยวกับวิธีสร้างเคสของคุณอย่างมีประสิทธิภาพ

สิ่งที่คุณสามารถทำได้คือให้พวกเขาตัวอย่างของการดีบัก USJ html โดยใช้เครื่องมือFireQueryและChrome Queryแบบสอบถาม

FireQuery เป็นส่วนเสริมของ firebug และทำงานได้ดีทีเดียว สำหรับ Chrome Query ฉันไม่สามารถรับรองได้ว่ามันดีเท่าไหร่ แต่ devs บางตัวก็ถูกใช้อย่างแน่นอน ( โพสต์ที่ stackoverflow )

โปรดทราบว่า.dataฟังก์ชั่นจะถูกลบออกเพื่อส่งคืนข้อมูลเหตุการณ์ภายในตั้งแต่jQuery 1.8.0และแทนที่ด้วย$._data(element, "events")ซึ่งสามารถไม่เสถียรตามการเปลี่ยนแปลงอย่างเป็นทางการ

ตอนนี้จะถูกลบออกใน 1.8 แต่คุณยังสามารถเข้าถึงข้อมูลกิจกรรมเพื่อการดีบั๊กผ่านข้อมูล $ ._ (องค์ประกอบ, "events") โปรดทราบว่านี่ไม่ใช่อินเทอร์เฟซสาธารณะที่รองรับ โครงสร้างข้อมูลจริงอาจเปลี่ยนแปลงอย่างไม่สอดคล้องกันจากรุ่นเป็นรุ่น

UPDATE:
เมื่อฉันเริ่มทำงานฉันมีภาวะที่กลืนไม่เข้าคายไม่ออกเดียวกัน แต่เมื่อสร้างการสาธิตด้วย GUI ที่ใช้งานได้อย่างสมบูรณ์ (แอปพลิเคชันหน้าเดียว) ซึ่งรวมถึงการเปิดแท็บแบบไดนามิก (ปิดได้เช่นกัน) เมนู Accordion (สร้างขึ้นแบบไดนามิกจาก db) ในที่สุดพวกเขาก็เข้าใจว่ามันดีกว่าการใช้ USJ

ข้อดีของการใช้ USJ ก็คือคุณสามารถย่อขนาดแอปพลิเคชันทั้งหมดให้เป็นสคริปต์ขนาดเล็ก (อ่านไม่ได้) ยังแสดงสคริปต์ให้กับ google.com / github.com (เป็นตัวอย่าง) และชี้ให้เห็นว่าแม้ว่าพวกเขาจะมีรหัสที่ถูกบีบอัดซึ่งดีกว่าเสมอเนื่องจากผู้ดูไซต์จะมีเวลาในการถอดรหัสข้อบกพร่องด้านความปลอดภัย และใช้มันเพื่อเริ่มการโจมตีที่สมบูรณ์แบบบนไซต์ของคุณ (ทำให้ตกใจ) แม้ว่าจะไม่น่าเป็นไปได้ก็ตาม

UPDATE 2 :
Btw ฉันไม่รู้ว่าฉันกำลังทำ USJ จนกว่าฉันจะเห็นคำถามนี้ดังนั้นจึงต้องขอบคุณทางเดียว

เครื่องมือจัดการเหตุการณ์แบบอินไลน์เหม็นเพราะ:

• ไม่มีการมอบหมายกิจกรรม - ซึ่งยอดเยี่ยมเมื่อคุณต้องการที่จะสามารถฉีกองค์ประกอบเข้าและออกจากหน้าเว็บแบบไดนามิกโดยไม่ต้องเชื่อมต่อใหม่

• คุณผูกพฤติกรรมกับแท็ก HTML แทนที่จะเป็นแอตทริบิวต์ class / ID ของแท็ก HTML สมมติว่าคุณมีคลาส "combo_box" ทั้งหมดในแอปของคุณ ทันใดนั้นในครึ่งหน้าเก่าของคุณคุณต้องการความแตกต่างเล็กน้อยในกล่องคำสั่งผสมเมื่ออยู่ในที่เก็บอื่น "#special_container .combo_box"ผูกติดอยู่กับชั้นเรียนคุณสามารถปรับเปลี่ยนพฤติกรรมที่ขึ้นอยู่กับบริบทภาชนะเช่น ผูกพันภายใน HTML ที่ถูกสาปคุณจะพบว่าตัวเองกำลังติดตามกล่องตัวเลือกเล็ก ๆ น้อย ๆ ที่มีคลาส. combo_box ในหน้าตัวเลขใด ๆ เพื่อเปลี่ยนผู้อ้างอิงเหล่านั้นทีละตัวแทนที่จะปรับเปลี่ยนหรือเขียนรหัสใหม่สองสามบรรทัดเพื่อกรองจากตำแหน่งไฟล์เดียว .

• หากคุณต้องการตัวจัดการหลายตัวคุณได้รวมไว้ในฟังก์ชั่นแล้วผูกไฟล์นั้นกับไฟล์ HTML ที่ไม่จำเป็นโดยเฉพาะ วิธีการบำรุงรักษาคืออะไร?

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

• นี่คือฝั่งไคลเอ็นต์ เรามีเบราว์เซอร์หลายตัวที่ตีความความซับซ้อนอย่างหนักในแบบของตนเองในการพิจารณา Slop-it-all-Together และให้ IDE เรียงลำดับสำหรับคุณจิตไม่ทำงานที่นี่ การรักษารหัสของคุณให้แน่นน้อยที่สุดคู่ที่หลวมและสะอาดไม่ทันสมัยมันเป็นสิ่งสำคัญอย่างยิ่งในการสร้างส่วนหน้าบำรุงรักษาที่ง่ายต่อการแก้ไขและอัปเดตและใช่นั่นคือสิ่งที่ $$$ เข้ามาโดยสมมติว่าผู้จัดการของคุณมองการณ์ไกล .

• ไม่ใช่! @ # $ ing 2002 อีกต่อไป อาร์กิวเมนต์นี้เก่าเท่าตารางเป็นเค้าโครง เอาชนะมันและเริ่มเชื่อใจลูกค้าที่มีประสบการณ์ด้านตัวเองที่คุณจ้างมาอย่างชัดเจนเพราะคุณขาดความเชี่ยวชาญ (ไม่ใช่ว่าฉันกำลังโกรธแค้นจากประสบการณ์ส่วนตัวหรืออะไรก็ตาม)

และการโต้แย้งข้อโต้แย้งของเจ้านายของคุณมันไม่ยากเลยที่จะติดตามว่ามีการใช้ class หรือ ID ใดในการมอบหมายกิจกรรมหรือการจัดการกับ CTRL + F และเครื่องมือที่ช่วยให้คุณดู JS ทั้งหมดบนหน้าเว็บของฉันเอง รุ่นบุ๊กมาร์กเล็ตต้นแบบเดียวฉันรีบวนไปด้วยกันเมื่อแถบเครื่องมือพัฒนาเว็บเริ่มออกมาหาฉัน (การเข้ารหัสสีที่ผิด) คั่นหน้าจากลิงก์ที่หน้าซอ js หรือคัดลอก JS และสร้างของคุณเอง

ลิงก์ซอ JS ที่น่าจะหมดอายุในที่สุด

ข้อได้เปรียบที่สำคัญอย่างหนึ่งของเทคนิคที่คุณแนะนำคือคุณต้องผูกเมื่อตัวจัดการเหตุการณ์กับผู้ปกครองเช่น "เอกสาร" และตัวจัดการนี้จะสามารถจับเหตุการณ์ที่มาจากเด็กทุกคนที่พอใจกับตัวเลือกที่กำหนดเช่น "button.anyclass " บันทึกหน่วยความจำและสามารถบำรุงรักษาได้ซึ่งต้องการเพียงหนึ่งอินสแตนซ์การแก้ไขเท่านั้นและมีผลกับองค์ประกอบทั้งหมด

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

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

คำตอบที่ชัดเจนคือคุณสามารถผูกหนึ่งฟังก์ชั่นกับปุ่มของคุณด้วยแอตทริบิวต์ onclick เท่านั้นในขณะที่เหตุการณ์ JQuery ช่วยให้คุณสามารถผูกหลายฟังก์ชั่นได้ ปัญหาทั่วไปเกี่ยวกับเหตุการณ์ onload: หากเอกสารของคุณประกอบด้วยมากกว่าหนึ่งไฟล์การชนมักเกิดขึ้น

อีกวิธีหนึ่งที่สามารถแก้ไขทั้งคุณและเจ้านายของคุณคือการใช้ data-binding กับไลบรารี่อย่าง Knockout หรือ Angular ซึ่งจะคอยติดตามการปรับเปลี่ยนมุมมองของคุณและระงับความต้องการส่วนใหญ่ของตัวจัดการเหตุการณ์