การฝัง JavaScript ลงในเนื้อความของ HTML เป็นการปฏิบัติที่ไม่ดีหรือไม่?

Question 1

ทีมที่ฉันทำงานอยู่มีนิสัยชอบใช้<script>แท็กในตำแหน่งสุ่มในเนื้อหาของหน้า HTML ของเรา ตัวอย่างเช่น:

<html>
    <head></head>
    <body>
        <div id="some-div">
            <script type="text/javascript">//some javascript here</script>
        </div>
    </body>
</html>

ฉันไม่เคยเห็นสิ่งนี้มาก่อน ดูเหมือนว่าจะใช้ได้กับเบราว์เซอร์บางตัวที่ฉันได้ทดสอบ แต่เท่าที่ฉันทราบการวางแท็กสคริปต์ในตำแหน่งเช่นนี้ไม่ถูกต้อง

ฉันผิดเหรอ? การที่เราวางแท็กสคริปต์ไว้ในแท็ก div เช่นนี้แย่แค่ไหน? มีปัญหาความเข้ากันได้ของเบราว์เซอร์ที่ฉันควรทราบหรือไม่?

Question 2

ใช้ได้อย่างสมบูรณ์แบบ

คุณไม่ต้องการใส่โค้ดขนาดใหญ่จำนวนมากผสมในมาร์กอัปที่นั่น (ควรใช้สคริปต์ภายนอกดีกว่า) แต่จะมีประโยชน์กับ:

เพิ่มข้อมูลการผูกเพิ่มเติมสำหรับการเพิ่มประสิทธิภาพแบบก้าวหน้า (ซึ่งข้อมูลนั้นยากที่จะใส่ลงในชื่อคลาสหรือวิธีการอื่น ๆ ในการซ่อนข้อมูลเพิ่มเติมในแอตทริบิวต์) หรือ
ในกรณีที่จำเป็นต้องเริ่มการเพิ่มประสิทธิภาพสคริปต์โดยเร็วที่สุด (แทนที่จะรอให้ window-load / document-ready) ตัวอย่างเช่นนี้คือการโฟกัสอัตโนมัติซึ่งอาจทำให้เกิดความระคายเคืองได้หากยิงช้าเกินไป

คุณอาจกำลังคิดถึง<style>องค์ประกอบซึ่งไม่ได้รับอนุญาตใน<body>(แม้ว่าเบราว์เซอร์ส่วนใหญ่จะอนุญาตก็ตาม)

Question 3

จริงๆแล้วมันค่อนข้างธรรมดา ตัวอย่างเช่นโค้ดติดตามการวิเคราะห์ของ Googleใช้ไวยากรณ์นี้เท่านั้น:

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

ถ้ามันดีพอสำหรับ Google ...

Question 4

มันถูกต้องและขึ้นอยู่กับกรอบงานฝั่งเซิร์ฟเวอร์ของคุณและลักษณะของโค้ดบางครั้งก็ยากที่จะหลีกเลี่ยง

Question 5

ดังที่หลายคนกล่าวถึงมันถูกต้องใช้งานได้และมีการใช้กันอย่างแพร่หลาย

แนวทางปฏิบัติที่ดีที่สุดเท่าที่ความหมายแนะนำ (หรืออย่างน้อยก็ใช้เพื่อแนะนำ) คือการวางแท็กสคริปต์ไว้ในส่วนหัว

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

เพื่อให้เข้าใจง่ายขึ้นและโค้ดที่ดูแลรักษาได้ขอแนะนำให้ใช้ "JavaScript ที่ไม่สร้างความรำคาญ" โดยที่โค้ดจะอยู่ในไฟล์ภายนอกและเชื่อมโยงเหตุการณ์กับ DOM (JavaScript ที่ไม่สร้างความรำคาญของ Google)

กรณีหนึ่งที่มีประโยชน์ในการมี JavaScript แบบอินไลน์คือการเริ่มต้นตัวแปรด้วยค่าที่มีอยู่เฉพาะฝั่งเซิร์ฟเวอร์ซึ่งจะถูกใช้โดยโค้ด JavaScript ภายนอกในภายหลัง

Question 6

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

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

<div id="foo">
  <script type="text/javascript">
    document.getElementById("foo")... // do something to it
  </script>
</div>

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

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

Question 7

ใช้ได้!

คุณสามารถใช้ได้:

<script type="text/javascript">
    //<![CDATA[

    // Some JavaScript code that perfectly validates in the W3C validator

    //]]>
</script>

ฉันไม่คิดว่าคุณจะพูดได้ว่าเป็นการปฏิบัติที่ไม่ดีโดยทั่วไปหรือไม่ คุณต้องบอกเป็นกรณี แต่แน่นอนว่าเป็นการดีที่จะมีโค้ด JavaScript ทั้งหมดของคุณในที่เดียวกัน จะค่อนข้างยุ่งถ้าคุณมีโค้ด JavaScript เพียงเล็กน้อยในไฟล์ HTML ของคุณ

Question 8

ฉันไม่เคยเห็นสิ่งนี้มาก่อน ดูเหมือนว่าจะใช้ได้กับเบราว์เซอร์บางตัวที่ฉันได้ทดสอบ แต่เท่าที่ฉันทราบการวางแท็กสคริปต์ในตำแหน่งเช่นนี้ไม่ถูกต้อง

ถูกต้อง แต่ไม่ใช่วิธีปฏิบัติที่ดี (หรือแนะนำ)

ฉันผิดเหรอ? การที่เราวางแท็กสคริปต์ไว้ในแท็ก div เช่นนี้แย่แค่ไหน? มีปัญหาความเข้ากันได้ของเบราว์เซอร์ที่ฉันควรทราบหรือไม่?

ไม่มีปัญหาในการวาง<script>องค์ประกอบอื่น ๆ (แต่ควรอยู่ภายใน<head>หรือ<body>) นอกจากนี้ยังไม่มีปัญหาในแง่ของความเข้ากันได้ของเบราว์เซอร์อย่างไรก็ตามการฝังสคริปต์ JS บนหน้าเว็บทำให้เกิดข้อเสียร้ายแรง(อย่างไร / เหตุใดจึงถือว่าไม่ดี) :

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

Question 9

อย่างไรก็ตามยังดีที่คุณทราบว่าโค้ด JavaScript ที่จำเป็นสำหรับส่วนของ HTML จะอยู่ที่นั่น แทนที่จะต้องยืนยันและสร้างการรวมไว้ที่ด้านบนของไฟล์

ดังนั้นแทนที่จะ "ถ้าคุณจะใช้ HTML นี้ตรวจสอบให้แน่ใจว่าคุณนำเข้า xyz.js" คุณสามารถรวม HTML และดำเนินการได้

ดังนั้นจึงไม่จำเป็นต้องเป็นสิ่งชั่วร้ายที่น่ากลัวเสมอไป อาจจะไม่ได้น่าประทับใจ แต่ก็ไม่ได้แย่มากเช่นกัน ชนิดของมันขึ้นอยู่กับเจตนา

Question 10

ดูแนวทางปฏิบัติที่ดีที่สุดของ Yahoo UI: http://developer.yahoo.com/performance/rules.html (JavaScript ที่ด้านล่างของหน้า)

Question 11

ถูกกฎหมายอย่างแน่นอน ฉันเคยเห็นมันในสองสามหน้าที่นี่ใน Exforsysเช่น

ตอนนี้เป็นไซต์การสอนที่แสดงพื้นฐานของ HTML และ JavaScript เพื่อให้เข้าใจได้อย่างสมบูรณ์ในบริบทนั้น อย่างไรก็ตามฉันไม่ต้องการเห็นมันในรหัสการผลิตสำหรับสิ่งอื่นใดมากไปกว่าคำสั่งธรรมดาหรือสองคำ // Some JavaScript code hereฉันไม่อยากแสดงความคิดเห็นโดยไม่เห็นสิ่งที่คุณแทนที่

ไม่ควรมีปัญหาเกี่ยวกับเบราว์เซอร์ใด ๆ กับสิ่งนี้

Question 12

สามารถเพิ่ม <script> ใน bodyได้ แต่ Internet Explorer ไม่ชอบจริงๆ ดังนั้นเพื่อความปลอดภัยยิ่งขึ้นตรวจสอบให้แน่ใจว่าคุณมีสคริปต์ของคุณอยู่ในแท็ก <head>

นั่นเป็นการสร้างความเสียหาย (โดยเฉพาะสำหรับ Internet Explorer) ในโครงการที่เรากำลังดำเนินการอยู่

Question 13

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

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

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

Question 14

เป็นหนึ่งในแนวทางปฏิบัติที่ดีที่สุดหลายประการเกี่ยวกับการปรับปรุงประสิทธิภาพเช่นเดียวกับการปรับปรุงแนวทางการเขียนโปรแกรมของคุณ

ท้ายที่สุดแล้วในการพัฒนาเว็บการทำให้ผลิตภัณฑ์มีความสำคัญมากที่สุด!

Question 15

ใช้ได้อย่างสมบูรณ์แบบแม้ว่าอาจส่งผลเสียต่อการบำรุงรักษา ดูเพิ่มเติมที่ฉันควรใส่แท็ก <script> ในมาร์กอัป HTML ได้อย่างไร และเหตุใดการเรียกใช้ฟังก์ชัน jQuery นี้จึงล้มเหลวใน Firefox .

Question 16

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

Question 17

หากคุณมีโปรแกรมแก้ไขที่สามารถจัดการทั้งไวยากรณ์ HTML และ JavaScript พร้อมกัน และถ้าคุณชอบอ่าน HTML สักสองสามบรรทัดก่อนแล้วจึงใช้ JavaScript cpde ... แน่นอน ไปเลย

Question 18

บางสิ่ง:

เป็นรหัสที่ถูกต้องอย่างสมบูรณ์
มันเป็นเรื่องไม่ปกติอย่างสมบูรณ์

การทำเช่นนี้จะทำให้การโหลดหน้าเว็บช้าลงอย่างมากเนื่องจากโค้ด JavaScript ต้องทำงานก่อนที่ส่วนที่เหลือของหน้าจะสามารถแสดงผลได้ หากคุณใช้งานโค้ด JavaScript จำนวนมากเบราว์เซอร์ของคุณอาจค้าง คุณควรพยายาม (ทุกครั้งที่ทำได้) โหลดโค้ด JavaScript ของคุณแบบไดนามิกและที่ส่วนท้ายของหน้าของคุณ (ควรอยู่ก่อน</body>แท็ก)

ซื้อและอ่านHigh Performance JavaScript มันจะเปลี่ยนวิธีเขียนโค้ด JavaScript