Đặt các mẫu JavaScript phía máy khách trong HTML hoặc JavaScript?

Question

có nên client-side mẫu như sau (sử dụng công cụ khuôn mẫu gạch của):

<p class="foo"><%= bar %></p> 

được đặt trong một tập tin HTML riêng biệt, hoặc nộp JavaScript riêng biệt? Tôi biết nó có thể làm việc cả hai cách.

Ví dụ, một tập tin JavaScript chỉ có thể chứa một danh sách các biến chuỗi như vậy:

var cute = '<p class="the"><%= unicorn %></p>'; 
var fb = '<p class="new-design"><%= sucks %></p>'; 

Nhưng tôi cũng đã thấy như sau:

<script type="text/template" id="omg-template"> 
    <span id="swag-name"><%= name %></span> 
</script> 

Chỉ cần từ một tách mối quan tâm quan điểm , lưu trữ mẫu ở đâu?

Answer 1

Tôi thường sử dụng hệ thống quản lý nội dung để nối và rút gọn javascripts và css, và dịch các tệp mẫu phía máy khách thành các chuỗi JS treo trên một biến toàn cầu. Loại điều này phụ thuộc vào nền tảng của bạn, nhưng trong thế giới đường ray bạn muốn xem jammit hoặc sprockets (hiện là một phần của đường ray)

Nếu tôi không quản lý tài sản phong nha, tôi thường sẽ sử dụng phương thức thẻ script, với các mẫu được tách ra thành partials trên máy chủ và được đưa vào cuối trang. Nó là loại một nỗi đau để làm việc với, nhưng IMO bất cứ điều gì nhiều hơn sau đó mẫu chuỗi ví dụ đơn giản của bạn thực sự không nên tồn tại nội tuyến trong tập tin javascript của bạn.

Answer 2

Tôi rất thích lựa chọn thứ hai, vì những lý do sau đây:

• Sử dụng dây có nghĩa là đối phó với dấu ngoặc kép thoát và những thứ tương tự.
• Mẫu nhiều dòng là một sự đau đớn trong Javascript, vì bạn không thể có chuỗi nhiều dòng mà không cần ghép nối. Các mẫu có độ dài bất kỳ sẽ dễ đọc hơn trên nhiều dòng.
• Không làm nổi bật cú pháp trong chuỗi JS.

Nhưng việc sử dụng tùy chọn thứ hai yêu cầu tải tệp mẫu của bạn bằng cách nào đó hoặc bao gồm tệp đó trong HTML của bạn hoặc gắn nó vào HTML của bạn tại thời gian xây dựng. Ngoài ra còn có nhiều dữ liệu hơn do thẻ script và bạn phải lấy chuỗi từ DOM bằng cách sử dụng phương thức tương tự của jQuery là .html(). Vì vậy, hiệu suất khôn ngoan, các tùy chọn chuỗi có thể là tốt hơn - đó là lý do tại sao @ Matt của đề nghị đưa nó vào dây tại thời gian xây dựng có lẽ là tốt nhất.

Answer 3

Bạn có thể sử dụng jQuery's templating engine và tải tất cả các mẫu của mình vào tệp js bên ngoài.

Answer 4

Nếu bạn đang sử dụng công cụ mẫu phía máy khách không logic, chẳng hạn như Transparency mẫu có thể được nhúng trong HTML chính vì bản thân mẫu là HTML hợp lệ.

Ví dụ:

<!-- Template --> 
<div id="template"> 
    <span class="greeting"></span> 
    <span class="name"></span> 
</div> 


// Data 
var hello = { 
    greeting: 'Hello', 
    name:  'world!' 
}; 

<!-- Result --> 
<div id="template"> 
    <span class="greeting">Hello</span> 
    <span class="name">world!</span> 
</div> 

Đối với các mẫu được sử dụng trong widget như cách một ẩn <div> chứa không tốt.

Đưa mã HTML vào mã hóa Javascript và chuỗi Javascript là xấu và cần tránh nếu có thể. Nó không phải là cú pháp nổi bật và bạn bỏ lỡ các lỗi một cách dễ dàng.