khi nào có thể chấp nhận xuất mã HTML từ Javascript?

Question

Tôi đọc một đoạn mã Javascript, nơi các lập trình viên thêm một cái gì đó tương tự như sau:

html = " 
     <div class='hidden-context-menu'> 
      <ul><li><a class='select-all'>All</a></li> 
       <li><a class='select-none'>None</a></li> 
       ... 
       ... 
       ... 
      </ul> 
     </div> 
" 

và sau đó, trong một số bộ phận khác của webapp, đoạn mã này được sử dụng và kết xuất trong trang.

output_html(html); 

tôi giả sử, xem xét ví dụ cụ thể này của một menu ngữ cảnh ẩn, rằng có lẽ các nhà phát triển did't muốn lặp lại chính mình ..

là loại thực hành khuyến khích hoặc nó phải được coi là một cách tiếp cận sai?

Answer 1

Tôi sẽ nói rằng dựa vào Javascript để tạo HTML của bạn có lẽ là một ý tưởng tồi. Điều gì sẽ xảy ra nếu người dùng đã tắt Javascript trong trình duyệt của họ?

Tôi nghĩ rằng tìm kiếm HTML được tạo bởi một kịch bản phía máy chủ, như PHP là phổ biến hơn. Trang kết quả mà khách hàng nhận được giống như nó sẽ là nếu PHP không được sử dụng, và nhà phát triển chỉ cần gõ HTML liên tục.

Answer 2

Xuất HTML theo cách này có thể dẫn đến rất nhiều khó khăn trong tương lai, vì lý do tương tự CSS phải ở bên ngoài: khó tìm, trộn với mã không liên quan và thường dẫn đến sự lặp lại không cần thiết.

Nếu khuôn khổ bạn được yêu cầu sử dụng yêu cầu nó hoặc nếu một nhà phát triển trước đó đã sử dụng mã đó, thực sự không có quá nhiều thứ có thể thực hiện được.

---

Edit: đoạn mã sau sẽ thực hiện các chức năng tương tự, và dễ dàng để thao tác trong tương lai:

var div = document.createElement("div"); 
div.className = "hidden-context-menu"; 

var ul = document.createElement("ul"); 

var li = document.createElement("li"); 
var a = document.createElement("a"); 
a.className = "select-all"; 
li.appendChild(a); 
ul.appendChild(li); 

var li = document.createElement("li"); 
var a = document.createElement("a"); 
a.className = "select-none"; 
li.appendChild(a); 
ul.appendChild(li); 

div.appendChild(ul); 

Và bằng cách này, như các poster trên cho biết, Javascript không phải là chỉ có cơ chế để xuất HTML; trang HTML phải chịu trách nhiệm về điều đó! Tuy nhiên, nó vẫn ổn trong các ứng dụng 'webappy'.

Answer 3

Mã hoàn toàn khủng khiếp ... họ nên sử dụng tên biến tốt hơn 'html'.

Đối với cách tiếp cận sai - có một số vấn đề trong một số trình duyệt w/sửa đổi trực tiếp nếu đó là trang XHTML. Nếu nó không được tạo động, bạn thường nên chèn nó vào với phần còn lại của HTML và sử dụng CSS để ẩn/hiện nó khi cần. Đối với chức năng kiểu trình đơn mũi tên, tôi thường để nó hiển thị với CSS ban đầu, nhưng sau đó JavaScript ẩn nó khi tải trang - theo cách này, nếu JS tắt, họ chỉ có các menu được mở rộng hoàn toàn, chứ không phải là không có quyền truy cập cho các công cụ cấp thấp hơn. Nếu bạn làm cho nó để phần manu liên quan đến trang hiện tại được mở rộng, bạn không phải làm điều này, nó chỉ có nghĩa là nhiều nhấp chuột hơn khi họ đi đến mỗi trang để đến nội dung mà họ đang tìm kiếm.

Trong trường hợp của bạn, vì không có 'href' cho các neo, tôi đoán rằng các yếu tố đó chỉ hoạt động khi JavaScript được bật, vì vậy tôi thực sự thấy không có vấn đề gì khi được chèn qua JS. (và như để chèn HTML so với làm nó bằng phần tử ... nếu nó là HTML, và không phải là XHTML, tôi không có vấn đề gì với việc chèn một chuỗi, vì tôi thấy nó dễ dàng hơn để duy trì ...và nếu nó thực sự là trong tệp HTML, tôi nói thậm chí còn có nhiều lý do để giữ nó dưới dạng chuỗi HTML)