Việc nhúng JavaScript vào phần nội dung của HTML có phải là một thực tiễn xấu?

Question 1

Một nhóm mà tôi đang làm việc đã có thói quen sử dụng <script>thẻ ở những vị trí ngẫu nhiên trong phần nội dung của các trang HTML của chúng tôi. Ví dụ:

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

Tôi đã không nhìn thấy điều này trước đây. Nó dường như hoạt động trong một số trình duyệt mà tôi đã thử nghiệm. Nhưng theo tôi biết, việc đặt các thẻ script ở những nơi như thế này là không hợp lệ.

Tôi có lầm không? Tệ hại như thế nào khi chúng ta đặt các thẻ script trong các thẻ div như thế này? Có bất kỳ vấn đề nào về khả năng tương thích của trình duyệt mà tôi cần biết không?

Question 2

Nó hoàn toàn hợp lệ.

Bạn sẽ không muốn đặt các khối mã lớn lẫn lộn vào phần đánh dấu ở đó (tốt hơn nên sử dụng các tập lệnh bên ngoài), nhưng nó có thể hữu ích để:

thêm thông tin ràng buộc bổ sung để tăng cường lũy tiến (khi dữ liệu đó khó phù hợp với tên lớp hoặc cách tiếp cận khác để ẩn thông tin mở rộng trong thuộc tính); hoặc là
nơi cần thiết để bắt đầu cải tiến theo tập lệnh càng nhanh càng tốt (thay vì chờ đợi cho cửa sổ tải / tài liệu sẵn sàng). Một ví dụ về điều này sẽ là lấy nét tự động, có thể gây khó chịu nếu kích hoạt quá muộn.

Có thể bạn đang nghĩ đến các <style>phần tử không được phép sử dụng <body>(mặc dù hầu hết các trình duyệt đều cho phép).

Question 3

Trên thực tế, nó khá phổ biến. Ví dụ: mã theo dõi phân tích của Google chỉ sử dụng cú pháp sau:

<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>

Nếu nó đủ tốt cho Google ...

Question 4

Nó hợp lệ và, tùy thuộc vào khuôn khổ phía máy chủ của bạn và bản chất của mã, đôi khi rất khó tránh.

Question 5

Như một số người đã đề cập, nó hợp lệ, nó hoạt động và nó được sử dụng rộng rãi.

Các phương pháp hay nhất theo ngữ nghĩa được đề xuất (hoặc ít nhất được sử dụng để khuyến nghị) là đặt các thẻ script bên trong tiêu đề.

Các phương pháp hay nhất hiện đại hơn có tính đến hiệu suất khuyên bạn nên đặt các thẻ tập lệnh (bên ngoài và nội dòng) ở dưới cùng bên phải trước thẻ body, để cho phép đánh dấu hiển thị hoàn toàn trước khi bất kỳ mã JavaScript nào thực thi.

Để dễ hiểu hơn và có thể bảo trì mã, nên sử dụng "JavaScript không phô trương", trong đó mã nằm trong tệp bên ngoài và liên kết các sự kiện với DOM (JavaScript không phô trương của Google).

Một trường hợp hữu ích khi có JavaScript nội tuyến là khởi tạo các biến có giá trị chỉ tồn tại phía máy chủ, sau đó sẽ được sử dụng bởi mã JavaScript bên ngoài.

Question 6

Tôi thích đưa các tham chiếu đến các tập lệnh bên ngoài vào phần đầu và các tập lệnh khởi động mọi thứ và khởi tạo các widget và những gì không vào phần nội dung.

Một vấn đề rất dễ gặp phải là phần tử script trong phần thân không thể truy cập các phần tử sau nó. Ngoài ra, một vấn đề tương thích khó chịu của trình duyệt liên quan là thực tế là IE không cho phép các phần tử tập lệnh sửa đổi phần tử mà chúng đang ở trong đó. Vì vậy, nếu bạn có điều này:

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

IE sẽ không thích trang của bạn. Các phiên bản cũ của IE từng đưa ra các thông báo lỗi rất khó hiểu cho việc này hoặc thậm chí làm trống toàn bộ trang, nhưng IE8 dường như đưa ra thông báo lỗi mô tả.

Miễn là bạn đảm bảo rằng các tập lệnh của mình chỉ truy cập vào DOM an toàn để truy cập, tôi không nghĩ việc đưa các phần tử tập lệnh vào nội dung là điều xấu. Trên thực tế, IMHO, việc đặt các tập lệnh khởi tạo tiện ích con sau các phần tử liên quan có thể dễ đọc hơn là đặt mọi thứ vào một chỗ (và tôi tin rằng điều này cũng có thể khiến chúng chạy sớm hơn, điều này làm cho mọi thứ ít nhảy xung quanh khi tải trang).

Question 7

Nó hợp lệ!

Bạn có thể dùng:

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

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

    //]]>
</script>

Tôi không nghĩ bạn có thể nói nếu nó là một thực hành xấu nói chung. Bạn phải nói trong trường hợp. Nhưng chắc chắn rằng điều tốt là có tất cả mã JavaScript của bạn ở cùng một nơi. Sẽ hơi lộn xộn nếu bạn có một số đoạn mã JavaScript nhỏ trên tệp HTML của mình.

Question 8

Tôi đã không nhìn thấy điều này trước đây. Nó dường như hoạt động trong một số trình duyệt mà tôi đã thử nghiệm. Nhưng theo tôi biết, việc đặt các thẻ script ở những nơi như thế này là không hợp lệ.

Nó hợp lệ, nhưng không phải là một thực hành tốt (hoặc được khuyến nghị).

Tôi có lầm không? Tệ hại như thế nào khi chúng ta đặt các thẻ script trong các thẻ div như thế này? Có bất kỳ vấn đề nào về khả năng tương thích của trình duyệt mà tôi cần biết không?

Không có vấn đề gì khi đặt một <script>dưới bất kỳ phần tử nào khác (nhưng nó phải ở bên trong <head>hoặc <body>). Cũng không có vấn đề gì về khả năng tương thích của trình duyệt, tuy nhiên, việc nhúng các tập lệnh JS trên các trang web gây ra những bất lợi nghiêm trọng (như thế nào / tại sao chúng bị coi là xấu) :

Thêm trọng lượng trang
Khó khăn (hoặc có thể là không thể) để thu nhỏ
Không thể di chuyển hoặc sử dụng cho các trang khác
Không thể lưu vào bộ nhớ đệm (cần được tải xuống mỗi khi trang được tải)
Không có mối quan tâm tách biệt (khó duy trì hơn)

Question 9

Tuy nhiên, nó cũng tốt ở chỗ bạn biết mã JavaScript cần thiết cho một phần của HTML sẽ ở đó cho nó. Thay vì phải xác nhận và xây dựng một số bao gồm ở đầu tệp.

Vì vậy, thay vì "nếu bạn định sử dụng HTML này, hãy đảm bảo rằng bạn nhập xyz.js", bạn chỉ có thể bao gồm HTML và hoàn thành với nó.

Vì vậy, nó không nhất thiết phải là xấu xa kinh khủng. Có lẽ không tuyệt vời một cách ngoạn mục, nhưng cũng không hoàn toàn khủng khiếp. Nó phụ thuộc vào mục đích.

Question 10

Xem giao diện người dùng Yahoo để có phương pháp hay nhất: http://developer.yahoo.com/performance/rules.html (JavaScript ở cuối trang)

Question 11

Nó chắc chắn hợp pháp; Tôi đã thấy nó trên một vài trang ở đây trên Exforsys chẳng hạn.

Bây giờ đây là một trang web hướng dẫn hiển thị những điều cơ bản về HTML và JavaScript nên trong bối cảnh đó, nó hoàn toàn dễ hiểu. Tuy nhiên, tôi không muốn thấy nó trong mã sản xuất cho bất kỳ điều gì khác hơn là một hoặc hai câu lệnh đơn giản. Không thấy những gì bạn đã thay thế// Some JavaScript code here tôi không muốn bình luận.

Tuy nhiên, sẽ không có bất kỳ vấn đề trình duyệt nào với điều này.

Question 12

Việc thêm <script> vào là hợp lệ body , nhưng Internet Explorer thực sự không thích nó. Vì vậy, để an toàn hơn, hãy đảm bảo rằng bạn có các tập lệnh của mình bên trong thẻ <head>.

Điều đó đã thực sự tạo ra sự tàn phá (đặc biệt là đối với Internet Explorer) trong dự án mà chúng tôi đang thực hiện.

Question 13

Tôi giả định rằng nhóm của bạn đang làm điều này bởi vì họ muốn chèn một tập lệnh động hoặc họ đang viết một tập lệnh sẽ kích hoạt khi tải trang.

Tôi sẽ không nói có gì sai khi thực hiện việc này khi TUYỆT ĐỐI CẦN THIẾT, (miễn là nó nằm trong khối CDATA), nhưng ngoài điều đó, tôi khuyên nhóm của bạn nên sử dụng thư viện tập lệnh như Prototype hoặc jQuery, và giữ các tập lệnh bên ngoài trang. Điều này thường sạch hơn và các thư viện đôi khi sẽ buộc một chút độ sạch của mã, điều mà tôi dám cá là hiện tại không xảy ra.

Tôi cũng sẽ không chạy bất kỳ chức năng tốn thời gian nào trong các thẻ tập lệnh nội tuyến, vì những chức năng này xảy ra khi tải trang và như Jason đã nêu ở trên, có thể làm chậm quá trình tải trang. Tất cả các thư viện tập lệnh đều có các chức năng gọn gàng cho phép bạn thực hiện mọi việc khi tải trang và sẽ cung cấp cho bạn tùy chọn về thời điểm tải trang để kích hoạt chúng, chẳng hạn như sau khi DOM được tải.

Question 14

Đó là một trong rất nhiều phương pháp hay nhất nhằm cải thiện hiệu suất cũng như cải thiện cách tiếp cận lập trình của bạn.

Cuối cùng trong phát triển web, việc đưa sản phẩm ra ngoài là vấn đề quan trọng nhất!

Question 15

Nó hoàn toàn hợp lệ, mặc dù nó có thể ảnh hưởng đến khả năng bảo trì. Xem thêm Tôi nên đặt thẻ <script> ở đâu trong đánh dấu HTML? và Tại sao lệnh gọi hàm jQuery này không thành công trong Firefox? .

Question 16

Khuyến nghị đã nêu rằng các tập lệnh nên được giữ trong tiêu đề là để đảm bảo rằng tập lệnh được tải trước khi nó được gọi. Đây chỉ là một vấn đề đối với một số trình xử lý sự kiện nhất định. Đối với các loại script khác, điều đó không quan trọng và đối với một số loại (chẳng hạn như document.write), nó không có ý nghĩa gì.

Question 17

Nếu bạn có một trình soạn thảo có thể xử lý đồng thời cả cú pháp HTML và JavaScript. Và nếu bạn muốn đọc một vài dòng HTML đầu tiên và sau đó là JavaScript cpde ... chắc chắn. Cứ liều thử đi.

Question 18

Một vài thứ:

Nó hoàn toàn hợp lệ về mã khôn ngoan.
Nó hoàn toàn không được khuyến khích.

Làm điều này làm chậm quá trình tải trang của bạn đáng kể vì mã JavaScript phải thực thi trước khi bất kỳ phần còn lại nào của trang có thể hiển thị. Nếu bạn đang làm nhiều việc với mã JavaScript đó, trình duyệt của bạn có thể bị treo. Bạn nên cố gắng (bất cứ khi nào có thể) tải động mã JavaScript của bạn và ở cuối trang (tốt nhất là trước</body> thẻ).

Mua và đọc JavaScript Hiệu suất cao . Nó sẽ thay đổi cách bạn viết mã JavaScript.