Động cơ templating trong JavaScript hoạt động như thế nào?

Question

Bạn có thể giải thích cho tôi, làm thế nào để các công cụ tạo khuôn mẫu trong JavaScript hoạt động? Cảm ơn bạn.

JSON

{ "color" : "red"} 

Template

<strong><%=color%></strong> 

quả

<strong>Red</strong> 

Answer 1

Họ có thể thay đổi bằng cách thực hiện, nhưng một bạn đang nói về vẻ như nó hoạt động bằng cách làm như sau:

1. Phân tích các trang tìm kiếm chìa khóa trong <%= %> thẻ

2. trận đấu chìa khóa để các cặp khóa/giá trị trong JSON

3. Thay thế thẻ/khóa bằng giá trị.

Answer 2

Như một điểm khởi đầu Tôi muốn giới thiệu bạn để cung cấp cho một cái nhìn với phương pháp String.prototype.replace và đặc biệt sử dụng chức năng gọi lại nó:

function replaceTokens(str, replacement) { 
    return str.replace(/<\%=([^%>]+)\%>/g, function (str, match) { 
    return replacement[match]; 
    }); 
} 

var input = "<strong><%=color%></strong>"; 
replaceTokens(input, { "color" : "Red"}); 
// returns <strong>Red</strong> 

replaceTokens("<%=var1%> <%=var2%>", { "var1" : "Hello", "var2": "world!"}); 
// returns "Hello world!" 

tặng một cái nhìn để những bài viết này:

• Search and Don't Replace
• John Resig's Micro-Templating Engine
• Better JavaScript Templates (JSP giống như cú pháp)
• jQuery Templates Proposal

Answer 3

Đó không phải là rất khác so với các giải pháp khuôn mẫu khác (ở mức khái niệm).

{ "color" : "red"} 

Chỉ định thuộc tính color với giá trị red.

<strong><%=color%></strong> 

Phương tiện "Sử dụng các giá trị của color bất cứ nơi nào tôi có <%=color%>. Dựa trên wahat bạn có, khuôn mẫu động cơ có thể đi DOM và tìm nút có giá trị phù hợp với <%=somestring%>. Sau đó, nó sẽ kiểm tra xem có một thuộc tính phù hợp với các giá trị somestring Nếu có một, nó sẽ thay thế giá trị của <%=somestring%> với giá trị được định nghĩa trong JSON (trong đó, trong trường hợp này là red)

này cuối cùng đã mang đến cho bạn:..

<strong>Red</strong>